First, copy the head partial from the theme (theme/contentful/layouts/partials/head.html) to your own (layouts/partials/head.html). We’re simply taking advantage of Hugo’s lookup order where we’ve override the head partial with our own copy.
Then, feel free to add your own (or others') scripts and stylesheets, icons and other metadata, or whatever suitable things." /><metaname="twitter:card"content="summary"/>
<metaname="twitter:title"content="Customizing your head"/>
First, copy the head partial from the theme (theme/contentful/layouts/partials/head.html) to your own (layouts/partials/head.html). We’re simply taking advantage of Hugo’s lookup order where we’ve override the head partial with our own copy.
Then, feel free to add your own (or others') scripts and stylesheets, icons and other metadata, or whatever suitable things."/>
<metaproperty="og:title"content="Customizing your head"/>
First, copy the head partial from the theme (theme/contentful/layouts/partials/head.html) to your own (layouts/partials/head.html). We’re simply taking advantage of Hugo’s lookup order where we’ve override the head partial with our own copy.
Then, feel free to add your own (or others') scripts and stylesheets, icons and other metadata, or whatever suitable things." />
First, copy the head partial from the theme (theme/contentful/layouts/partials/head.html) to your own (layouts/partials/head.html). We’re simply taking advantage of Hugo’s lookup order where we’ve override the head partial with our own copy.
Then, feel free to add your own (or others') scripts and stylesheets, icons and other metadata, or whatever suitable things."><metaitemprop="datePublished"content="2020-10-20T20:29:42+08:00"/>
<p>Let’s start with the most basic and perhaps most useful customization: modifying the <code><head</code>>.
This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.</p>
</div>
<divclass="paragraph">
<p>First, copy the <code>head</code> partial from the theme (<code>theme/contentful/layouts/partials/head.html</code>) to your own (<code>layouts/partials/head.html</code>).
We’re simply taking advantage of <ahref="https://gohugo.io/templates/lookup-order/">Hugo’s lookup order</a> where we’ve override the <code>head</code> partial with our own copy.</p>
</div>
<divclass="paragraph">
<p>Then, feel free to add your own (or others') scripts and stylesheets, <ahref="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">icons and other metadata</a>, or whatever suitable things.</p>
</div>
<divclass="paragraph">
<p>In my case, I often use certain JavaScript libraries like <ahref="https://www.mathjax.org/">MathJax</a> for mathematical typesetting, <ahref="https://prismjs.com/">Prism</a> for syntax highlighting, and <ahref="https://github.com/francoischalifour/medium-zoom/">medium-zoom</a> for interactive image zooms.</p>
<p>Since most of the JavaScript libraries used here are not really a requirement (except for MathJax for mathematical typesetting), I’ve set them to be loaded at the end of the page loading with <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script"><code>defer</code> attribute</a>.
If you have an inline script, you can simply wrap it in an event listener for page loading (<code>window.addEventListener("load", your_function_goes_here)</code>).</p>
</div>
<divclass="paragraph">
<p>If you want document-specific libraries, you have to pass some raw HTML through the parser of the document.
For Goldmark, the default Markdown parser starting <ahref="https://gohugo.io/news/0.60.0-relnotes/">Hugo v0.60.0</a>, blocks raw HTML by default and you can disable it by setting <code>markup.goldmark.renderer.unsafe</code> to <code>true</code>.</p>
</div>
<divclass="paragraph">
<p>For Blackfriday, it parses even the raw HTML just fine.
Though, you have to set it as the default Markdown parser.</p>
</div>
<divclass="paragraph">
<p>For <ahref="https://asciidoctor.org/">Asciidoctor</a>, you can use <ahref="https://asciidoctor.org/docs/user-manual/#passthroughs">passthroughs</a> to get raw HTML through.</p>
