According to the docs:
Inserting HTML into the <head>
Anything you render in the html.js
component will not be made “live” in the client like other components.
If you want to dynamically update your we recommend using React
Helmet
So, you can't customize the <head> tag directly with the html.js file. Moreover, Gatsby gets rid off the SSI comments (you can follow the stack trace in this GitHub thread).
Said that. You can try using gatsby-plugin-html-comments:
module.exports = {
{
resolve: `gatsby-plugin-html-comments`,
options: {
files: ['./public/**/*.html', './public/*.html'],
comment: [
{
regexp: /<keep-this-comment-tag>(.*?)</keep-this-comment-tag>/g,
comment: `<!-- keep this comment -->`,
},
]
}
}
}
Will output:
<div>
<!-- keep this comment -->
<h1>Hello World</h1>
</div>
You an also use one of the APIs that Gatsby exposes to customize the output, onPostBuild should work for you. Copying the html/js then adding custom components (like <ssi-code /> then replacing them using replace-in-file:
replace.sync({
files: ['./public/**/*.html', './public/*.html'],
from: /<SSI-before-html>(.*?)</SSI-before-html>/g,
to: '<!--#include virtual="/virtual/example.inc"-->',
});
Source: How to insert SSI comments in Gatsby application?
Additionally, you can, as the thread suggests:
<div dangerouslySetInnerHTML={{ __html: '<!--#set var="section" value="#{section}"-->'}}></div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
