Ẩn sidebar bài post thực hiện dễ thành công nhất!

Những bước cần thiết để cấu hình ẩn Sidebar bài viết thực tế thành công nhất đối với các bài post trong website tạo bởi "Docusaurus 3.6.3v+ Material UI". Các giải pháp khác khó khăn và không đem lại kết quả! Riêng cách này thực tế thành công mỹ mãn!

1)Bước 1: Tạo hoặc chỉnh sửa file src/theme/BlogPostPage.js với code hoàn chỉnh sau:

import React from 'react';
import BlogLayout from '@theme/BlogLayout';
import TOC from '@theme/TOC';
import clsx from 'clsx';

export default function BlogPostPage(props) {
  const { content: BlogPostContent } = props;
  const { frontMatter, metadata } = BlogPostContent;
  const { title, description, hide_sidebar } = frontMatter;
  const { nextItem, prevItem } = metadata;

  // Kiểm tra nếu cần ẩn sidebar
  const hasSidebar = hide_sidebar !== true;

  return (
    <BlogLayout
      title={title}
      description={description}
      toc={!hasSidebar ? undefined : <TOC toc={BlogPostContent.toc} />}
      sidebar={hasSidebar ? props.sidebar : undefined} // Không hiển thị sidebar nếu hide_sidebar=true
    >
      <article className="blog-post">
        <header>
          <h1>{title}</h1>
        </header>
        <BlogPostContent />
        <footer>
          {prevItem && <a href={prevItem.permalink}>← {prevItem.title}</a>}
          {nextItem && <a href={nextItem.permalink}>{nextItem.title} →</a>}
        </footer>
      </article>
    </BlogLayout>
  );
}

2)Bước 2: Tạo hoặc chỉnh sửa file "src/theme/BlogLayout/index.js":

import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import BlogSidebar from '@theme/BlogSidebar';

export default function BlogLayout(props) {
  const { sidebar, toc, children, frontMatter, ...layoutProps } = props;

  // Kiểm tra thuộc tính "hide_sidebar" trong frontMatter
  const hideSidebar = frontMatter?.hide_sidebar === true;

  // Kiểm tra nếu có sidebar (và không bị ẩn)
  // const hasSidebar = !hideSidebar && sidebar?.items?.length > 0;
  const hasSidebar = sidebar?.items?.length > 0 && !frontMatter?.hide_sidebar;

  return (
    <Layout {...layoutProps}>
      <div className="container margin-vert--lg blog-layout">
        <div className="row">
          {/* Hiển thị Blog Sidebar nếu không bị ẩn */}
          {hasSidebar && (
            <aside className="col col--3">
              <BlogSidebar sidebar={sidebar} hideOnDesktop={false} />
            </aside>
          )}

          {/* Hiển thị phần nội dung chính */}
          <main
            className={clsx('col', {
              'col--9': hasSidebar,
              'col--12': !hasSidebar,
            })}
          >
            {children}
          </main>

          {/* Hiển thị TOC nếu có */}
          {toc && <div className="col col--3">{toc}</div>}
        </div>
      </div>
    </Layout>
  );
}

Thay đổi này đảm bảo "hide_sidebar" trong "frontMatter" được kiểm tra đúng cách

3)Bước 3: Nhập vào "front-matter" bài viết muốn ẩn Sidebar code sau:

hide_sidebar: true

Ví dụ "Front-matter" của 1 bài viết đã nhập code:

---
title: Bài viết trình bày 2 cột
description: Đây là một ví dụ trình bày nội dung bằng 2 cột
date: 2024-12-19
authors: [DucTran]
hide_table_of_contents: true
hide_sidebar: true
---

Vậy là hoàn tất và ta có "Full screen" bài viết đã ẩn "sidebar" và "TOC"!

GHI CHÚ THÊM: Muốn trang chính Blog(/blog) hiển thị "full screen", không Sidebar thì ta hiệu chỉnh file "src/theme/BlogLayout/index.js" để có code hoàn chỉnh sau:

import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
import BlogSidebar from '@theme/BlogSidebar';
import { useLocation } from '@docusaurus/router';  // Import useLocation từ Docusaurus

export default function BlogLayout(props) {
  const { sidebar, toc, children, frontMatter, ...layoutProps } = props;

  // Sử dụng hook useLocation để lấy thông tin đường dẫn của trang hiện tại
  const location = useLocation();

  // Kiểm tra nếu đang ở trang chính của blog (http://localhost:3000/blog)
  const isBlogHomePage = location.pathname === '/blog';

  // Kiểm tra nếu có sidebar (và không bị ẩn) và không phải là trang chính của blog
  const hasSidebar = !isBlogHomePage && sidebar?.items?.length > 0 && !frontMatter?.hide_sidebar;

  return (
    <Layout {...layoutProps}>
      <div className="container margin-vert--lg blog-layout">
        <div className="row">
          {/* Hiển thị Blog Sidebar nếu không ở trang chính */}
          {hasSidebar && (
            <aside className="col col--3">
              <BlogSidebar sidebar={sidebar} hideOnDesktop={false} />
            </aside>
          )}

          {/* Hiển thị phần nội dung chính */}
          <main
            className={clsx('col', {
              'col--9': hasSidebar,
              'col--12': !hasSidebar,
            })}
          >
            {children}
          </main>

          {/* Hiển thị TOC nếu có */}
          {toc && <div className="col col--3">{toc}</div>}
        </div>
      </div>
    </Layout>
  );
}