如何解决Gatsby.js - 如何在 Gatsby.js
我目前正在从事 Gatsby.js 项目。
现在页面有一个页眉组件,它由一个汉堡菜单组件和导航以及一个页脚组件组成。
在性能选项卡下选择慢速3G在chrome上查看网站时,汉堡菜单不会切换,这意味着汉堡菜单的脚本不在头部组件内。
样式很好,因为我相信 Gatsby.js 会在 HEAD 中自动呈现关键 CSS。
所以,我的问题是,如何从页面头部内的组件/外部文件中注入关键的 CSS 或 JS。
任何建议/提示/帮助将不胜感激,因为我对此更感兴趣。
亲切的问候,
罗尼
解决方法
将脚本和样式表放入 <head>
或 <body>
的方法之一是使用 gatsby-ssr.js
。
在 gatsby-ssr.js
中(通常位于项目根目录中),您可以执行以下操作:
import React from "react";
export function onRenderBody({ setHeadComponents,setPreBodyComponents,setPostBodyComponents }) {
// Add something into <head>
setHeadComponents([
<script type="text/javascript" src="_YOUR_URL_HERE_" />,<script
dangerouslySetInnerHTML={{
__html=`
// plain javascript code here
`
}}
/>,]);
// Add something at the beginning of <body>
setPreBodyComponents([
<script type="text/javascript" src="_YOUR_URL_HERE_" />,]);
// Add something at the end of <body>
setPostBodyComponents([
<script type="text/javascript" src="_YOUR_URL_HERE_" />,]);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。