插件
插件是Docusaurus网站功能的构建模块。每个插件处理其自己的独立功能。插件可以通过预设作为捆绑包的一部分工作和分发。
创建插件
插件是一个接受两个参数的函数:context 和 options。它返回一个插件实例对象(或一个承诺)。你可以将插件创建为函数或模块。更多信息,请参阅插件方法参考部分。
函数定义
你可以直接使用插件作为函数,包含在Docusaurus配置文件中:
export default {
// ...
plugins: [
async function myPlugin(context, options) {
// ...
return {
name: 'my-plugin',
async loadContent() {
// ...
},
async contentLoaded({content, actions}) {
// ...
},
/* other lifecycle API */
};
},
],
};
模块定义
你可以使用插件作为模块路径,引用单独的文件或npm包:
export default {
// ...
plugins: [
// without options:
'./my-plugin',
// or with options:
['./my-plugin', options],
],
};
然后在文件夹 my-plugin 中,你可以创建一个像这样的 index.js:
export default async function myPlugin(context, options) {
// ...
return {
name: 'my-plugin',
async loadContent() {
/* ... */
},
async contentLoaded({content, actions}) {
/* ... */
},
/* other lifecycle API */
};
}
您可以使用调试插件的元数据面板查看您网站上安装的所有插件。
插件有几种类型:
package: 你安装的外部包project: 你在项目中创建的插件,作为本地文件路径提供给Docusauruslocal: 使用函数定义创建的插件synthetic: 一个由 Docusaurus 内部创建的“假插件”,因此我们利用我们的模块化架构,不让核心做太多特殊工作。你不会在元数据中看到这个,因为它是一个实现细节。
你可以在客户端通过useDocusaurusContext().siteMetadata.pluginVersions访问它们。
插件设计
Docusaurus 的插件系统实现为我们提供了一种便捷的方式来挂钩到网站的生命周期中,以修改开发/构建过程中发生的事情,这包括(但不限于)扩展 webpack 配置、修改加载的数据以及创建用于页面的新组件。
主题设计
当插件加载了它们的内容后,数据通过诸如createData + addRoute或setGlobalData等操作提供给客户端。这些数据必须被序列化为纯字符串,因为插件和主题运行在不同的环境中。一旦数据到达客户端,剩下的部分对React开发者来说就很熟悉了:数据沿着组件传递,组件与Webpack捆绑,并通过ReactDOM.render渲染到窗口...
主题提供了一组用于渲染内容的UI组件。 大多数内容插件需要与主题配对才能实际发挥作用。UI是与数据模式分离的独立层,这使得更换设计变得容易。
例如,一个Docusaurus博客可能由一个博客插件和一个博客主题组成。
这是一个人为的例子:实际上,@docusaurus/theme-classic 提供了文档、博客和布局的主题。
export default {
themes: ['theme-blog'],
plugins: ['plugin-content-blog'],
};
如果你想使用Bootstrap样式,你可以用theme-blog-bootstrap(另一个虚构的不存在的主题)替换主题:
export default {
themes: ['theme-blog-bootstrap'],
plugins: ['plugin-content-blog'],
};
现在,尽管主题从插件接收相同的数据,但主题选择如何渲染数据为UI的方式可能会有很大的不同。
虽然主题与插件共享完全相同的生命周期方法,但根据主题的设计目标,主题的实现可能与插件的实现看起来非常不同。
主题旨在完成您的Docusaurus站点的构建,并提供您的站点、插件和主题本身使用的组件。主题仍然像插件一样工作,并暴露一些生命周期方法,但它们很可能不会使用loadContent,因为它们只从插件接收数据,而不自己生成数据;主题通常还伴随着一个src/theme目录,里面充满了组件,这些组件通过getThemePath生命周期被核心知晓。
总结:
- 主题与插件共享相同的生命周期方法
- 主题在所有现有插件之后运行
- 主题通过提供
getThemePath来添加组件别名。