自定义侧边栏排序

docs/minds/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # 来生无此心
 
 > 如果有来生的话……

docs/news/2022/0224russia.md

@@ -1,5 +1,5 @@
 ---
-index: false
+draft: true
 ---
 
 # 2022 年 2 月 24 日 俄乌战争

docs/news/2022/_category_.yml

@@ -0,0 +1,2 @@
+customProps:
+ description: This description can be used in the swizzled DocCard

docs/news/2022/week50.md

@@ -1,5 +1,5 @@
 ---
-order: -1
+id: end
 ---
 
 # 2022 年终回顾

docs/news/2023/_category_.yml

@@ -0,0 +1,2 @@
+customProps:
+ reversed: true

docs/news/2023/index.md

@@ -1,5 +1,5 @@
 ---
-index: false
+sidebar_position: 2
 ---
 
 # 2023 年

docs/news/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # 来年无旧闻
 
 > 新闻只在当下。

docs/others/examples.md

@@ -1,4 +1,48 @@
-以下代码可以在正文中生成当前页面层级下的所有页面卡片。
+# Docusaurus 速查表
+
+## 路由构建
+
+### 导航栏排序
+
+官方文档提供的使用文章元数据**定义排序方式**我觉得不够优雅：
+
+- 不支持负数，即无法倒序。
+- 只给某个文档指定一个很大的序号，依旧不能让它排列在队尾。
+
+以上问题就导致每个文档都要添加序号，十分繁琐。
+
+为此，在默认路由生成器的基础上，我自定义了一个路由生成函数，将类别元信息中 `reversed = true` 的子路由倒序排列。
+
+为此，需要在需要倒序的文件夹中添加：
+
+```yaml title="_category_.yml"
+customProps:
+ reversed: true
+```
+
+但这个配置暂不支持一级路由，因为每个导航栏项目对应一个路由表，每个路由表会触发一次自定义的路由生成函数 `sidebarItemsGenerator`，即只有二级路由可以判断它是否是分类路由，从而读取自定义的类别元数据。
+
+![](/doc_img/img20230330204743.png)
+
+> 其实也有解决方案，就是完全重写路由生成函数，但我觉得没必要（主要是懒），因为一级路由肯定不会太多，手动给每个文档加个 `sidebar_position` 也能接受。
+
+最后，如果实在是有某个文档需要放到最后，那也只好按字母顺序改一下文件名，同时在元数据里把它的 id 改成有意义的名字。
+
+### 隐藏文档
+
+在具体的文档中添加元数据：
+
+```yaml
+draft: true
+```
+
+这表示这是一篇未完成的草稿，只在开发模式可见。
+
+## 文档组件
+
+### 文档卡片列表
+
+在正文中生成当前页面层级下的所有页面卡片。
 
 ```md
 import DocCardList from '@theme/DocCardList';
@@ -6,7 +50,15 @@ import DocCardList from '@theme/DocCardList';
 <DocCardList />
 ```
 
-以下代码生成可展开的区块，其中`summary`是默认显示的内容：
+:::caution
+
+如果当前页面不在具体的分类中，构建时会报错。
+
+:::
+
+### 折叠块
+
+生成默认折叠状态的区块，其中`summary`是默认显示的内容：
 
 ```md
 <details>
@@ -24,12 +76,33 @@ import DocCardList from '@theme/DocCardList';
 </details>
 ```
 
+效果 🪄
+
+<details>
+ <summary>快点我!</summary>
+ <div>
+ <div>这是详情内容。</div>
+ <br/>
+ <details>
+ <summary>
+ 再点一下! 有惊喜...
+ </summary>
+ <div>😲有个屁的惊喜...</div>
+ </details>
+ </div>
+</details>
+
+### 选项卡
+
 以下代码生成选项卡，通过分组 id 可以同步在其他选项卡点选的内容：
 
 ```md
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 <Tabs groupId="operating-systems">
- <TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
- <TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
+<TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
+<TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
 </Tabs>
 
 <Tabs groupId="operating-systems">
@@ -38,7 +111,26 @@ import DocCardList from '@theme/DocCardList';
 </Tabs>
 ```
 
-以下代码为代码块添加标题，在说明文件名时很有用：
+效果 🪄
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs groupId="operating-systems">
+<TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
+<TabItem value="mac" label="macOS">Use Command + C to copy.</TabItem>
+</Tabs>
+
+<Tabs groupId="operating-systems">
+ <TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
+ <TabItem value="mac" label="macOS">Use Command + V to paste.</TabItem>
+</Tabs>
+
+### 代码块
+
+#### 添加标题
+
+在说明文件名时很有用：
 
 ````md
 ```jsx title="/src/components/HelloCodeTitle.js"
@@ -48,7 +140,15 @@ function HelloCodeTitle(props) {
 ```
 ````
 
-以下代码以在代码块添加注释的方式为单行、范围行高亮提供了一种简单的配置方式：
+效果 🪄
+
+```jsx title="/src/components/HelloCodeTitle.js"
+function HelloCodeTitle(props) {
+ return <h1>Hello, {props.name}</h1>
+}
+```
+
+#### 高亮代码行
 
 ````md
 ```js
@@ -73,24 +173,30 @@ function HighlightMoreText(highlight) {
 ```
 ````
 
-或是在元数据字符串指定高亮行：
+效果 🪄
 
-````md showLineNumbers
-```jsx {1,4-6,11}
-import React from 'react'
-function MyComponent(props) {
- if (props.isBar) {
- return <div>Bar</div>
+```js
+function HighlightSomeText(highlight) {
+ if (highlight) {
+ // highlight-next-line
+ return '这行被高亮了！'
  }
 
- return <div>Foo</div>
+ return '这里不会'
 }
 
-export default MyComponent
+function HighlightMoreText(highlight) {
+ // highlight-start
+ if (highlight) {
+ return '这块被高亮了！'
+ }
+ // highlight-end
+
+ return '这里不会'
+}
 ```
-````
 
-> 但这种方式不利于后续调整代码
+### 提示信息
 
 以下代码是五种不同风格的提示块：
 
@@ -125,3 +231,35 @@ Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
 
 :::
 ```
+
+效果 🪄
+
+:::note
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::tip 自定义标题
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::info
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::caution
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::
+
+:::danger
+
+Some **content** with _Markdown_ `syntax`. Check [this `api`](#).
+
+:::

docs/others/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # 去时不留名
 
 > 怎么样，这首小诗写得有意境吧？

docs/skills/index.md

@@ -1,3 +1,7 @@
+---
+sidebar_position: 1
+---
+
 # 来时无一用
 
 > 所以要学呀～

docusaurus.config.js

@@ -31,7 +31,7 @@ const config = {
  defaultLocale: 'zh-Hans',
  locales: ['zh-Hans'],
  },
- 
+
  themes: [
  [
  require.resolve("@easyops-cn/docusaurus-search-local"),
@@ -56,10 +56,11 @@ const config = {
  docs: {
  routeBasePath: '/',
  sidebarPath: require.resolve('./sidebars.js'),
- // Please change this to your repo.
- // Remove this to remove the "edit this page" links.
- editUrl:
- 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+ editUrl: 'https://git.frp.aqzscn.cn/gitbobo/live/src/branch/main/',
+ async sidebarItemsGenerator({defaultSidebarItemsGenerator, ...args}) {
+ const sidebarItems = await defaultSidebarItemsGenerator(args);
+ return reverseSidebarItems(sidebarItems);
+ },
  },
  // blog: {
  // showReadingTime: true,
@@ -93,13 +94,13 @@ const config = {
  items: [
  {
  type: 'docSidebar',
- sidebarId: 'newsSidebar',
- label: '闻',
+ sidebarId: 'otherSidebar',
+ label: '杂',
  },
  {
  type: 'docSidebar',
- sidebarId: 'mindSidebar',
- label: '艺',
+ sidebarId: 'newsSidebar',
+ label: '闻',
  },
  {
  type: 'docSidebar',
@@ -108,9 +109,9 @@ const config = {
  },
  {
  type: 'docSidebar',
- sidebarId: 'otherSidebar',
- label: '杂',
- }
+ sidebarId: 'mindSidebar',
+ label: '艺',
+ },
  ],
  },
  docs: {
@@ -142,4 +143,23 @@ const config = {
  }),
 };
 
+function reverseSidebarItems(items, reverse = false) {
+ // Reverse items in categories
+ const result = items.map((item) => {
+ if (item.type === 'category') {
+ // console.log(item)
+ const r = item.customProps && item.customProps.reversed
+ return {...item, items: reverseSidebarItems(item.items, r)};
+ }
+ // console.log(item)
+ return item;
+ });
+ // console.log(items)
+ // Reverse items at current level
+ if (reverse) {
+ result.reverse();
+ }
+ return result;
+}
+
 module.exports = config;

sidebars.js

@@ -14,48 +14,13 @@
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
  // By default, Docusaurus generates a sidebar from the docs folder structure
- newsSidebar: [
- 'news/index',
- {
- type: 'category',
- label: '2023 年',
- collapsible: true,
- link: {
- type: 'doc',
- id: 'news/2023/index',
- },
- items: [{type: 'autogenerated', dirName: 'news/2023'}]
- },
- {
- type: 'category',
- label: '2022 年',
- collapsible: true,
- link: {
- type: 'doc',
- id: 'news/2022/index',
- },
- items: [{type: 'autogenerated', dirName: 'news/2022'}]
- },
- ],
+ newsSidebar: [{type: 'autogenerated', dirName: 'news'}],
 
  mindSidebar: [{type: 'autogenerated', dirName: 'minds'}],
 
  skillSidebar: [{type: 'autogenerated', dirName: 'skills'}],
 
  otherSidebar: [{type: 'autogenerated', dirName: 'others'}],
-
- // But you can create a sidebar manually
- /*
- tutorialSidebar: [
- 'intro',
- 'hello',
- {
- type: 'category',
- label: 'Tutorial',
- items: ['tutorial-basics/create-a-document'],
- },
- ],
- */
 };
 
 module.exports = sidebars;