plugin-content-pages

优质

小牛编辑

139浏览

2023-12-01

这是 Docusaurus 的默认使用的独立页面（pages）功能插件。classic 模板自带此插件并具有默认配置。此插件提供了创建独立页面的功能。

安装

npm
Yarn

npm install --save @docusaurus/plugin-content-pages

yarn add @docusaurus/plugin-content-pages

tip

如果你已经安装了 @docusaurus/preset-classic，则不需要再安装此插件。你也可以通过 classic 预设参数对其进行配置，而不必像下面这样进行配置。

配置

docusaurus.config.js

module.exports = {
  plugins: [
    [
      '@docusaurus/plugin-content-pages',
      {
        /**
         * 指向存放独立页面的路径
         * 相对于站点根目录
         * 此目录下的所有组件都会被自动转换为独立页面
         */
        path: 'src/pages',
        /**
         * URL route for the page section of your site
         * 不要在结尾添加斜线
         */
        routeBasePath: '',
        include: ['**/*.{js,jsx,ts,tsx,md,mdx}'],
        /**
         * 对于所有匹配的文件不生成路由
         */
        exclude: [
          '**/_*.{js,jsx,ts,tsx,md,mdx}',
          '**/*.test.{js,ts}',
          '**/__tests__/**',
        ],
        /**
         * markdown 独立页面所使用的主题组件。
         */
        mdxPageComponent: '@theme/MDXPage',
        /**
         * 传递给 MDX 的 Remark 和 Rehype 插件
         */
        remarkPlugins: [],
        rehypePlugins: [],
        /**
         * 传递给 MDX 的 Remark 和 Rehype 插件，
         * 它们将被添加在 Docusaurus 的默认 Remark 和 Rehype 插件前面
         */
        beforeDefaultRemarkPlugins: [],
        beforeDefaultRehypePlugins: [],
      },
    ],
  ],
};

i18n

首先阅读 i18n 简介。

翻译文件所在的位置

根目录： website/i18n/<locale>/docusaurus-plugin-content-pages
多实例的路径： website/i18n/<locale>/docusaurus-plugin-content-pages-<pluginId>
JSON 文件：通过 docusaurus write-translations 命令提取
Markdown 文件： website/i18n/<locale>/docusaurus-plugin-content-pages

文件系统结构示例

website/i18n/<locale>/docusaurus-plugin-content-pages
│
│ # website/src/pages 目录下个独立页面的翻译文件
├── first-markdown-page.md
└── second-markdown-page.md