Skip to main content

Tạo Instance Blog cho Docusaurus

... Bây giờ ta có thể xây dựng 1 folder thứ 3 ở cấp độ hàng ngang như 2 folder đã có "docs" và "blog" nhằm mục đích có thêm "Instance Blog" biệt lập để truy xuất những chủ đề đặc biệt ở vùng không lẫn lộn, dễ tìm kiếm và sắp xếp!

Mặc định Docusaurus đã có 2 folder "docs" và "Blog" ở thư mục gốc dự án. Trong folder này có những tập tin "xx.md" để ta có thể duyệt xem qua sự hỗ trợ của các Plugin './plugins/docusaurus-plugin-generate-index' (trong "docs") và './src/plugins/blog-plugin' (trong "blog").
Để xây dựng vùng truy xuất riêng ngoài "docs' và "blog" ví dụ vùng "Instance Blog" này mang tên là "blognote", để thành công ta phải đi qua lần lượt các bước như sau:

1)Trước hết ta không cần tạo 1 Plugin riêng cho "blognote", chỉ cần dùng chung Plugin mặc định của Docusaurus(docusaurus-plugin-generate-index), nhưng chỉ cần gán ID riêng cho "blognote" để tránh xung đột do truy cập trùng lặp, 2 lần dùng cùng ID "default". Ví dụ ta gán ID "blognote" cho "instance blog" này!

2)Cập nhật điều này trong file "docusaurus.config.js" ở phần "Plugins", cụ thể code sau:

..............
[
      './src/plugins/blog-plugin',
      {
        path: 'blog', // Thư mục chính cho blog 
        editLocalizedFiles: false,
        blogTitle: 'Blog',
        blogDescription: 'xxxxxxxxxxx',
        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',
        
      },
    ],
DƯỚI PHẦN TRÊN
[
        '@docusaurus/plugin-content-blog',
        {
          id: 'blognote', // ID riêng cho blognote
          path: 'blognote', // Thư mục chứa nội dung blognote
          routeBasePath: 'blognote', // URL của blognote
          editLocalizedFiles: false,
          blogTitle: 'Blognote', // Tiêu đề
          blogDescription: 'VÙNG TƯ LIỆU CỦA TÔI', // Mô tả
          truncateMarker: /<!--\s*(truncate)\s*-->/,
          showReadingTime: true, // Hiển thị thời gian đọc
          onUntruncatedBlogPosts: 'ignore',
          blogSidebarCount: 'ALL',
          blogSidebarTitle: 'TƯ LIỆU', // Tiêu đề sidebar
          include: ['**/*.md', '**/*.mdx'], // Định dạng file được include
          exclude: ['**/_*.{js,jsx,ts,tsx,md,mdx}', '**/_*/**', '**/*.test.{js,jsx,ts,tsx}', '**/__tests__/**'],
        },
      ],
  • Trong cấu hình trên:
    • id: 'blog' dành cho blog chính.
    • id: 'blognote' dành cho nhánh blognote.

3)Tạo Sidebar cho "blognote":

Trong thư mục gốc dự án, tạo một file mới: "blognote-sidebar.js" với nội dung:

module.exports = {
    blognoteSidebar: [
      {
        type: 'autogenerated',
        dirName: '.', // Tự động tạo sidebar từ thư mục gốc của blognote
      },
    ],
  };

4)Các file markdown trong folder "blognote" bảo đảm đúng định dạng chuẩn:

Ví dụ: "blognote/example.md"

---
title: Example Blognote
description: This is an example blog post in the blognote instance
date: 2024-12-22
tags: [example, blognote]
---

# Welcome to Blognote

This is an example post for the `blognote` instance.

5)Chạy và kiểm tra:

  • Đảm bảo cả hai nhánh blog và blognote hoạt động bình thường.
  • Truy cập URL tương ứng, ví dụ:
  • Blog chính: http://localhost:3000/blog
  • Blognote: http://localhost:3000/blognote

Khởi động lại, chạy ổn định cả 2 nhánh là thành công rồi!

5:10:45 AM