Skip to main content

Nhiều Sidebar

Bạn có thể tạo một thanh bên cho mỗi bộ tệp Markdown mà bạn muốn nhóm lại với nhau.

mẹo

Trang web Docusaurus là một ví dụ điển hình về việc sử dụng nhiều thanh bên:

Hãy xem xét ví dụ này:

sidebars.js

export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2'],
  },
  apiSidebar: ['doc3', 'doc4'],
};

Khi duyệt hoặc , sẽ được hiển thị; khi duyệt web hoặc , sẽ được hiển thị.doc1``doc2``tutorialSidebar``doc3``doc4``apiSidebar

Hiểu về liên kết thanh bên​

Theo ví dụ trên, nếu a được bao gồm trong cả hai thanh bên:commonDoc

sidebars.js

export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2', 'commonDoc'],
  },
  apiSidebar: ['doc3', 'doc4', 'commonDoc'],
};

Làm thế nào để Docusaurus biết thanh bên nào sẽ hiển thị khi duyệt? Trả lời: nó không, và chúng tôi không đảm bảo nó sẽ chọn thanh bên nào.commonDoc

Khi bạn thêm doc Y vào thanh bên X, nó sẽ tạo ra một ràng buộc hai chiều: thanh bên X chứa liên kết đến doc Y và khi duyệt doc Y, thanh bên X sẽ được hiển thị. Nhưng đôi khi, chúng tôi muốn phá vỡ một trong hai ràng buộc ngầm:

  1. Làm cách nào để tạo liên kết đến doc Y trong thanh bên X mà không hiển thị thanh bên X trên Y? Ví dụ: khi tôi bao gồm doc Y trong nhiều thanh bên như trong ví dụ trên và tôi muốn nói rõ ràng với Docusaurus để hiển thị một thanh bên?
  2. Làm cách nào để thanh bên X hiển thị khi duyệt tài liệu Y, nhưng thanh bên X không nên chứa liên kết đến Y? Ví dụ: khi Y là "trang chủ doc" và thanh bên hoàn toàn được sử dụng để điều hướng?

Tùy chọn vấn đề phía trước sẽ buộc thiết lập liên kết thanh bên. Trong cùng một ví dụ, bạn vẫn có thể sử dụng tốc ký doc mà không cần bất kỳ cấu hình đặc biệt nào:displayed_sidebar

sidebars.js

export default {
  tutorialSidebar: {
    'Category A': ['doc1', 'doc2'],
  },
  apiSidebar: ['doc3', 'doc4'],
};

Và sau đó thêm một vấn đề phía trước:

commonDoc.md

---
displayed_sidebar: apiSidebar
---

Điều này rõ ràng cho Docusaurus hiển thị khi duyệt . Sử dụng cùng một phương pháp, bạn có thể làm cho thanh bên X không chứa doc Y xuất hiện trên doc Y:apiSidebar``commonDoc

home.md

---
displayed_sidebar: tutorialSidebar
---

Ngay cả khi không chứa liên kết đến , nó vẫn sẽ được hiển thị khi xem .tutorialSidebar``home``home

Nếu bạn đặt , sẽ không có thanh bên nào được hiển thị trên trang này và sau đó, cũng không có phân trang.displayed_sidebar: null

Tạo phân trang​

Docusaurus sử dụng thanh bên để tạo các liên kết phân trang "tiếp theo" và "trước đó" ở cuối mỗi trang tài liệu. Nó sử dụng nghiêm ngặt thanh bên được hiển thị: nếu không có thanh bên nào được liên kết, nó cũng không tạo ra phân trang. Tuy nhiên, các tài liệu được liên kết là "tiếp theo" và "trước đó" không được đảm bảo hiển thị cùng một thanh bên: chúng được bao gồm trong thanh bên này, nhưng trong vấn đề phía trước của chúng, chúng có thể có một .displayed_sidebar

Nếu thanh bên được hiển thị bằng cách đặt vấn đề phía trước và thanh bên này không chứa chính tài liệu, không có phân trang nào được hiển thị.displayed_sidebar

Bạn có thể tùy chỉnh phân trang với vật chất phía trước và . Hãy xem xét thanh bên này:pagination_next``pagination_prev

sidebars.js

export default {
  tutorial: [
    'introduction',
    {
      installation: ['windows', 'linux', 'macos'],
    },
    'getting-started',
  ],
};

Liên kết phân trang tiếp theo trên "windows" trỏ đến "linux", nhưng điều đó không có ý nghĩa: bạn sẽ muốn người đọc tiến hành "bắt đầu" sau khi cài đặt. Trong trường hợp này, bạn có thể đặt phân trang theo cách thủ công:

windows.md

---
pagination_next: getting-started
---

# Installation on Windows

Bạn cũng có thể tắt hiển thị liên kết phân trang bằng hoặc .pagination_next: null``pagination_prev: null

Nhãn phân trang theo mặc định là nhãn thanh bên. Bạn có thể sử dụng vấn đề phía trước để tùy chỉnh cách tài liệu này xuất hiện trong phân trang.pagination_label

  Mụcref​

Loại này giống hệt với loại doc về mọi mặt, ngoại trừ việc nó không tham gia vào việc tạo siêu dữ liệu điều hướng. Nó chỉ đăng ký chính nó như là một liên kết. Khi tạo phân trang và hiển thị thanh bên, các mục hoàn toàn bị bỏ qua.ref``ref

Nó đặc biệt hữu ích khi bạn muốn liên kết đến cùng một tài liệu từ nhiều thanh bên. Tài liệu chỉ thuộc về một thanh bên (thanh nơi nó được đăng ký dưới dạng hoặc từ một thư mục được tạo tự động), nhưng liên kết của nó sẽ xuất hiện trong tất cả các thanh bên mà nó được đăng ký.type: 'doc'

Hãy xem xét ví dụ này:

sidebars.js

export default {
  tutorialSidebar: {
    'Category A': [
      'doc1',
      'doc2',
      {type: 'ref', id: 'commonDoc'},
      'doc5',
    ],
  },
  apiSidebar: ['doc3', 'doc4', 'commonDoc'],
};

Bạn có thể nghĩ về loại tương đương với việc làm như sau:ref

  • Cài đặt cho ( bị bỏ qua trong liên kết thanh bên)displayed_sidebar: tutorialSidebar``commonDoc``ref
  • Cài đặt và cài đặt cho (bị bỏ qua trong tạo phân trang)pagination_next: doc5``doc2``pagination_prev: doc2``doc5``ref
5:10:59 AM