Skip to main content

Docusaurus2

Docusaurus2​

官方文档

安装​

npx create-docusaurus@latest {项目名} 

npx create-docusaurus@latest my-website classic

npx create-docusaurus@latest blog-Docusaurus2 classic --typescript

更新​

yarn upgrade @docusaurus/core@latest @docusaurus/preset-classic@latest @docusaurus/module-type-aliases@latest

特色功能​

  • 自动分页
  • 可按照版本进行分版，自动保留历史版本记录文档
  • 内容隐藏

长内容自动隐藏​

如果一篇文章内容过多，可以在文章中添加<!--truncate-->，后面的内容会在实际现实中隐藏

This is the summary of a very long blog post,

Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.

<!--truncate-->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

开发​

忽略文件​

_ 开头的任何 Markdown 或 Javascript 文件都会被忽略

my-website
├── src
│   └── pages
│       ├── styles.module.css
│       ├── index.js
│       ├── _ignored.js
│       ├── _ignored-folder
│       │   ├── Component1.js
│       │   └── Component2.js
│       └── support
│           ├── index.js
│           └── styles.module.css
.

配置​

设置主页​

如果想让md文件出现在网站根页

xxx/xxx/x.md

---
slug: /
---
  • 这一页会是用户访问 https://example.com/ 时出现的主页。
  • 如果 src/pages/index.js存在，需要删除该文件，否则主页会造成冲突

仅文档模式​

// docusaurus.config.js
module.exports = {
  // ...
  presets: [
    '@docusaurus/preset-classic',
    {
      docs: {
        routeBasePath: '/', // 把文档放在网站根部
        /* 其他文档插件配置 */
      },
      blog: false, // 可选：禁用博客插件
      // ...
    },
  ],
};

仅博客模式​

// docusaurus.config.js
module.exports = {
  // ...
  presets: [
    '@docusaurus/preset-classic',
    {
      blog: {
        routeBasePath: '/', // 把文档放在网站根部
        /* 其他文档插件配置 */
      },
      docs: false, // 可选：禁用博客插件
      // ...
    },
  ],
};

代码高亮​

添加代码高亮：java

从node_modules/prismjs/components的查看java对应的高亮组件名


参阅文献​