Sof*_*mur 8 javascript react-helmet docusaurus
我们正在使用Docusaurus V2创建一个网站。
在Docusaurus V1中,有一个scripts设置siteConfig.js可以定制html的头部内容。但是,我在Docusaurus V2中找不到相应的设置。
根据https://docusaurus.io/blog/2018/09/11/Towards-Docusaurus-2#layout,似乎可以自定义<head>V2中的html 部分。
布局
Docusaurus的当前状态是它负责整个布局和样式,无意中使用户很难根据自己的意愿自定义网站的外观。
对于Docusaurus 2,布局和样式应由用户控制。Docusaurus将处理内容的生成,路由,翻译和版本控制。受create-react-app和VuePress的启发,Docusaurus仍将提供默认主题,用户可以从中弹出该主题,以进行进一步的布局和样式自定义。这意味着用户甚至有可能通过使用React Helmet来更改HTML元数据。基于社区的主题也很有可能。大多数静态站点生成器都采用这种允许用户负责布局和样式的方法。
我试图用react-helmet的src/pages/index.js,用下面的代码:
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
<Helmet>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</Helmet>
</Layout>
);
}
Run Code Online (Sandbox Code Playgroud)
}
但是脚本https://appsforoffice.microsoft.com/lib/1/hosted/office.js没有出现在里面<head></head>
有没有人遇到过类似的问题,有人可以提供帮助吗?
小智 13
更简单的方法:
创建文件 /static/js/loadtags.js。将您的标签放在那里,例如:
UST_CT = [];UST = { s: Date.now(), addTag: function(tag) { UST_CT.push(tag) } };UST.addEvent = UST.addTag;
Run Code Online (Sandbox Code Playgroud)
现在更新 docusaurus.config.js 中的脚本部分
UST_CT = [];UST = { s: Date.now(), addTag: function(tag) { UST_CT.push(tag) } };UST.addEvent = UST.addTag;
Run Code Online (Sandbox Code Playgroud)
Yan*_*Tay 12
使用 React Helmet 代替'@docusaurus/Head'。
import Head from '@docusaurus/Head';
function Home() {
const context = useDocusaurusContext();
const { siteConfig = {} } = context;
return (
<Layout>
<Head>
<script src="..."></script>
</Head>
</Layout>
);
}
Run Code Online (Sandbox Code Playgroud)
我们正在开发此功能,因此您可以通过添加此功能docusaurus.config.js。您可以关注此 PR 来跟踪进度: https: //github.com/facebook/docusaurus/pull/1831。
我们将v2.0.0-alpha.27很快发布,以便您可以尝试一下。谢谢你的耐心!
我还在开发一个基于 docusaurus 的博客。
它提供了在 head 标签中添加脚本的功能。
请按照以下步骤操作:
1. 打开 siteConfig.js
2. // 在此处添加将放置在标签中的自定义脚本。
脚本:[' https://buttons.github.io/buttons.js '],