mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 10:58:19 +00:00
59 lines
3.2 KiB
Plaintext
59 lines
3.2 KiB
Plaintext
---
|
|
title: "Customizing your head"
|
|
date: 2020-10-20T20:29:42+08:00
|
|
|
|
categories:
|
|
- "recipe"
|
|
tags:
|
|
- "seo"
|
|
---
|
|
|
|
= Customizing your head
|
|
John Doe <johndoe@example.com>
|
|
2020-10-20 20:29:00 +0800
|
|
:stem: latexmath
|
|
|
|
|
|
Let's start with the most basic and perhaps most useful customization: modifying the `<head`>.
|
|
This is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.
|
|
|
|
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 https://gohugo.io/templates/lookup-order/[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, https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML[icons and other metadata], or whatever suitable things.
|
|
|
|
In my case, I often use certain JavaScript libraries like https://www.mathjax.org/[MathJax] for mathematical typesetting, https://prismjs.com/[Prism] for syntax highlighting, and https://github.com/francoischalifour/medium-zoom/[medium-zoom] for interactive image zooms.
|
|
|
|
Here's the modified code.
|
|
(The example code is snipped for brevity.)
|
|
|
|
```go
|
|
<!--snip-->
|
|
|
|
{{- /* MathJax */ -}}
|
|
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
|
|
<script id="MathJax-script" defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
|
|
|
|
{{- /* Prism.js */ -}}
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css" type="text/css">
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js"></script>
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js">
|
|
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js">
|
|
|
|
{{- /* medium-zoom */ -}}
|
|
<script defer src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
|
|
<script>window.addEventListener('load', () => mediumZoom('article img', { 'background': 'rgba(0, 0, 0, 0.75)' }))</script>
|
|
```
|
|
|
|
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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script[`defer` attribute].
|
|
If you have an inline script, you can simply wrap it in an event listener for page loading (`window.addEventListener("load", your_function_goes_here)`).
|
|
|
|
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 https://gohugo.io/news/0.60.0-relnotes/[Hugo v0.60.0], blocks raw HTML by default and you can disable it by setting `markup.goldmark.renderer.unsafe` to `true`.
|
|
|
|
For Blackfriday, it parses even the raw HTML just fine.
|
|
Though, you have to set it as the default Markdown parser.
|
|
|
|
For https://asciidoctor.org/[Asciidoctor], you can use https://asciidoctor.org/docs/user-manual/#passthroughs[passthroughs] to get raw HTML through.
|
|
|