Skip to main content

Sử dụng nhiều thanh bên

Sử dụng nhiều thanh bên 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:

Documents API 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ị.doc1doc2tutorialSidebardoc3doc4apiSidebar

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

Làm cách nào để tạo liên kết đến tài liệu Y trong thanh bên X mà không làm cho thanh bên X hiển thị trên Y? Ví dụ, khi tôi đưa doc Y vào 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? Làm cách nào để hiển thị thanh bên X khi duyệt tài liệu Y, nhưng thanh bên X không được chứa liên kết đến Y? Ví dụ: khi Y là "trang chủ tài liệu" và thanh bên hoàn toàn được sử dụng để điều hướng? Front matter option will forcibly set the sidebar association. For the same example, you can still use doc shorthands without any special configuration:displayed_sidebar

sidebars.js

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

And then add a front matter:

commonDoc.md

---
displayed_sidebar: apiSidebar
---

Which explicitly tells Docusaurus to display when browsing . Using the same method, you can make sidebar X which doesn't contain doc Y appear on doc Y:apiSidebarcommonDoc

home.md

---
displayed_sidebar: tutorialSidebar
---

Even when doesn't contain a link to , it will still be displayed when viewing .tutorialSidebarhomehome

If you set , no sidebar will be displayed whatsoever on this page, and subsequently, no pagination either.displayed_sidebar: null

Generating pagination Docusaurus uses the sidebar to generate the "next" and "previous" pagination links at the bottom of each doc page. It strictly uses the sidebar that is displayed: if no sidebar is associated, it doesn't generate pagination either. However, the docs linked as "next" and "previous" are not guaranteed to display the same sidebar: they are included in this sidebar, but in their front matter, they may have a different .displayed_sidebar

If a sidebar is displayed by setting front matter, and this sidebar doesn't contain the doc itself, no pagination is displayed.displayed_sidebar

You can customize pagination with front matter and . Consider this sidebar:pagination_nextpagination_prev

sidebars.js

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

The pagination next link on "windows" points to "linux", but that doesn't make sense: you would want readers to proceed to "getting started" after installation. In this case, you can set the pagination manually:

windows.md

---
pagination_next: getting-started
---

Installation on Windows

You can also disable displaying a pagination link with or .pagination_next: nullpagination_prev: null

The pagination label by default is the sidebar label. You can use the front matter to customize how this doc appears in the pagination.pagination_label

The itemref The type is identical to the doc type in every way, except that it doesn't participate in generating navigation metadata. It only registers itself as a link. When generating pagination and displaying sidebar, items are completely ignored.refref

It is particularly useful where you wish to link to the same document from multiple sidebars. The document only belongs to one sidebar (the one where it's registered as or from an autogenerated directory), but its link will appear in all sidebars that it's registered in.type: 'doc'

Consider this example:

sidebars.js

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

Bạn có thể coi loại này tương đương với việc thực hiện như sau:ref

Cài đặt cho ( bị bỏ qua trong liên kết thanh bên)displayed_sidebar: tutorialSidebarcommonDocref Cài đặt cho và cài đặt cho (bị bỏ qua trong tạo phân trang)pagination_next: doc5doc2pagination_prev: doc2doc5ref

5:10:59 AM