我如何在' docusaurus.config.js '文件中添加一个HTML插件，使其出现在每个页面上?

我正在尝试在Docusaurus项目中集成CusDis(这是一个轻量级的评论系统)。

我只是在其中一页中添加了以下代码:

<head>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
</head>
<div id="cusdis"
data-host="https://cusdis.com"
data-app-id="*******************************"
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
></div>

当我将它集成到单个.mdx文件中时，它工作得很好。但是，我想找出一种方法将其集成到docusaurus.config.js文件本身，以便在文档的每个页面中呈现它。

我将使用postBuild生命周期API创建一个插件(可能还有injectHtmlTags方法)，您可以在docusaurus-plugin- structural -data看到前者的示例，后者在docusaurus-plugin-hubspot看到

经过几次失败的尝试，我终于能够做到这一点了。

步骤1:在Components文件夹中为Cusdis asCusdisComments.js创建一个新组件。

作为参考，我的组件看起来像这样:

import { ReactCusdis } from 'react-cusdis'
export default function CusdisComments (props){
const appId = process.env.CUSDIS_APP_ID;
return(
<div>
<ReactCusdis
id = "cusdis-thread"
attrs={{
host: "https://cusdis.com",
appId: appId,
pageId: props.attrs.pageId,
pageTitle: props.attrs.pageTitle,
pageUrl: props.attrs.pageUrl,
theme: "auto",
}}
/>
</div>
)
}

步骤2:转到您希望在其中使用此组件的文档页面。像这样导入顶部的组件:

import CusdisComments from '../src/components/CusdisComments';

然后，在您希望添加组件的页面下方，添加以下内容:

<CusdisComments
id="cusdis_thread"
attrs={{
pageId: frontMatter.id,
pageTitle: frontMatter.title,
pageUrl: frontMatter.__resourcePath,
}} 
/>

另外，我使用环境变量来存储Cusdis应用程序Id。因此，按照以下步骤在Docusaurus项目中设置环境变量。

步骤1:通过npm或yarn安装@docusaurus/plugin-client-redirects:

npm i @docusaurus/plugin-client-redirects

或

yarn add @docusaurus/plugin-client-redirects

步骤2:转到docusaurus.config.js文件，在module.exports下添加以下内容:

plugins: [
[
"docusaurus2-dotenv",
{
systemvars: true,
},
],
],

步骤3:添加.env文件并添加您的Cusdis应用程序Id，如下所示:

CUSDIS_APP_ID = 123456789 // random id

步骤4:进入你的组件并按如下方式使用它:

export default function CusdisComments (props){
const appId = process.env.CUSDIS_APP_ID;
return(
<div>
<ReactCusdis
id = "cusdis-thread"
attrs={{
host: "https://cusdis.com",
appId: appId,
pageId: props.attrs.pageId,
pageTitle: props.attrs.pageTitle,
pageUrl: props.attrs.pageUrl,
theme: "auto",
}}
/>
</div>
)
}

希望这能帮助到别人!😄

相关内容

最新更新

热门标签：