Skip to main content

Hướng dẫn làm trang chủ duyệt Blog

Những bước cần thiết để xây dựng 1 trang chủ Blog gồm Sidebar và Content để duyệt bài trong 1 trang duy nhất! Trang này gồm khung "Sidebar" bên trái chứa đề mục các bài viết trong Blog và khung "Content" bên phải hiển thị nội dung tương ứng khi người dùng click chuột vào đề mục bên cột "Sidebar".
Tất cả đều hiển thị ở đây, không cần phải mở 1 Tab nào khác!

Để làm được điều này, ta cần phải thực hiện lần lượt các bước sau:

1)Kiểm tra trong file "/docusaurus.config.js" "blog" đã được cấu hình chưa(trong "plugins" hoặc "presets"). Ví dụ: đã được cấu hình trong "pugins", ta đã thấy "blogSidebarCount" và "blogSidebarTitle":

 [
      './src/plugins/blog-plugin',
      {
        path: 'blog',
        editLocalizedFiles: false,
        blogTitle: 'Blog',
        blogDescription: 'Ghi lại chặng đường khó khăn... các ghi chú qua thời gian từ những trải nghiệm thực tế, những giải pháp tìm kiếm qua những bế tắc...',
        blogSidebarCount: 'ALL',
        blogSidebarTitle: 'MY NOTES',
        routeBasePath: 'blog',
        include: ['**/*.md', '**/*.mdx'],
        exclude: ['**/_*.{js,jsx,ts,tsx,md,mdx}', '**/_*/**', '**/*.test.{js,jsx,ts,tsx}', '**/__tests__/**'],
        postsPerPage: 6,
        truncateMarker: /<!--\s*(truncate)\s*-->/,
        showReadingTime: true,
        onUntruncatedBlogPosts: 'ignore',
        // Remove this to remove the "Edit this page" links.
        editUrl: 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared',
        remarkPlugins: [[require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }]],
      },
    ],

2)Thêm "scss" tùy chỉnh cho "Blog" trong file "src/css/sources.scss" như sau:

// Thêm CSS cho Blog Layout
.blog-layout {
    display: flex;
    flex-direction: row;
    .col--3 {
        flex: 0 0 25%;
        max-width: 25%;
        min-width: 250px;
    
        aside {
          position: sticky;
          top: 0;
          align-self: flex-start;
          height: fit-content;
          overflow-y: auto;
          word-wrap: break-word;
          overflow-wrap: anywhere; /* Ngắt từ ở bất cứ đâu nếu không vừa khung */
          white-space: normal;
          max-width: 100%;
        }
      }
  }
  
  .blog-sidebar {
    width: 250px; /* Chiều rộng sidebar */
    border-right: 1px solid #ddd; /* Đường viền bên phải */
    background-color: #f9f9f9; /* Màu nền sidebar */
    padding: 1rem; /* Khoảng cách bên trong */
    position: sticky; /* Cố định khi cuộn */
    top: 0; /* Cố định ở trên cùng */
    height: 100vh; /* Chiều cao toàn màn hình */
    overflow-y: auto; /* Cho phép cuộn nội dung */
  }
  
  .blog-content {
    flex-grow: 1; /* Phần nội dung chiếm không gian còn lại */
    padding: 2rem; /* Khoảng cách nội dung */
    background-color: #ffffff; /* Màu nền nội dung */
  }
  
  @media (max-width: 768px) {
    // Tùy chỉnh trên thiết bị nhỏ
    .blog-layout {
      flex-direction: column; /* Bố cục dọc trên màn hình nhỏ */
      flex: 0 0 100%; /* Sidebar chiếm toàn bộ chiều rộng trên mobile */
      max-width: 100%;
      margin-bottom: 20px; /* Thêm khoảng cách dưới */
    }
  
    .blog-sidebar {
      width: 100%; /* Sidebar chiếm toàn bộ chiều rộng */
      height: auto; /* Chiều cao tự động */
      border-right: none; /* Xóa đường viền */
      border-bottom: 1px solid #ddd; /* Thêm đường viền phía dưới */
    }
  
    .blog-content {
      padding: 1rem; /* Giảm padding trên màn hình nhỏ */
    }

3)Bổ sung vào "sidebars.js" giòng này:

blogSidebar: [{ type: 'autogenerated', dirName: '.' }],

4)Đảm bảo bài viết "blog/xx.md"... có "Front-matter" hợp lệ:

---
slug: my-first-post
title: My First Post
authors: [author-name]
tags: [tag1, tag2]
---
Nội dung bài viết...

Đến đây là ta đã thực hiện xong 1 trang chủ để duyệt toàn bộ bài post trong "Blog". Tất cả bài viết đều đọc được ở trang này, không cần phải di chuyển qua nhiều Tab. Thật là tuyệt vời!

5:10:44 AM