mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-01-31 16:57:59 +00:00
345 lines
15 KiB
HTML
345 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us"><title>Customizing your head | More Contentful</title>
|
||
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.ca00a0e2e1a042039a0ed5d0926695311d47d90329bdcc3b5728b3564d2c80c1.css" /><meta name="generator" content="Hugo 0.96.0" />
|
||
<meta charset="utf-8">
|
||
<meta name="author" content="John Doe" />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="referrer" content="no-referrer" />
|
||
<meta name="description" content="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 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." /><meta name="twitter:card" content="summary"/>
|
||
<meta name="twitter:title" content="Customizing your head"/>
|
||
<meta name="twitter:description" content="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 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."/>
|
||
<meta property="og:title" content="Customizing your head" />
|
||
<meta property="og:description" content="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 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." />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/customizing-your-head/" /><meta property="article:section" content="recipes" />
|
||
<meta property="article:published_time" content="2020-10-20T20:29:42+08:00" />
|
||
<meta property="article:modified_time" content="2022-05-09T20:15:52+08:00" />
|
||
|
||
<meta itemprop="name" content="Customizing your head">
|
||
<meta itemprop="description" content="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 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."><meta itemprop="datePublished" content="2020-10-20T20:29:42+08:00" />
|
||
<meta itemprop="dateModified" content="2022-05-09T20:15:52+08:00" />
|
||
<meta itemprop="wordCount" content="296">
|
||
<meta itemprop="keywords" content="seo," /><link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/customizing-your-head/" />
|
||
|
||
<script>
|
||
let theme = window.localStorage.getItem('theme');
|
||
if (theme) {
|
||
document.documentElement.dataset.theme = theme;
|
||
}
|
||
</script>
|
||
|
||
<body>
|
||
<div class="site__theme-btn" aria-label="Theme toggle">
|
||
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/color-swatch.svg#color-swatch"></use>
|
||
</svg>
|
||
|
||
<div class="site__theme-dropdown">
|
||
<div class="site__theme-dropdown-list">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Default Dark"
|
||
data-theme-dark
|
||
|
||
>Dark</div>
|
||
|
||
|
||
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Default Light"
|
||
|
||
data-theme-light
|
||
>Light</div>
|
||
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Dracula"
|
||
|
||
|
||
>Dracula</div>
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Nord"
|
||
|
||
|
||
>Nord</div>
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Solarized Dark"
|
||
|
||
|
||
>Solarized Dark</div>
|
||
|
||
|
||
<div class="site__theme-item"
|
||
data-theme="Solarized Light"
|
||
|
||
|
||
>Solarized Light</div>
|
||
|
||
<div class="site__theme-item" data-theme-system>
|
||
OS default
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script defer>
|
||
const themeDropdown = document.querySelector('.site__theme-btn');
|
||
themeDropdown.addEventListener('click', (event) => {
|
||
const { target } = event;
|
||
if (target.classList.contains("site__theme-item")) {
|
||
if (target.dataset.theme) {
|
||
theme = target.dataset.theme;
|
||
window.localStorage.setItem("theme", theme);
|
||
document.documentElement.dataset.theme = theme;
|
||
} else {
|
||
window.localStorage.removeItem("theme");
|
||
delete document.documentElement.dataset.theme;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
<nav aria-label="Site header">
|
||
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-more-contentful">More Contentful</a>
|
||
<div class="list site__links">
|
||
|
||
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/">About</a>
|
||
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/">Categories</a>
|
||
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/">Recipes</a>
|
||
<a href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/">Tags</a>
|
||
|
||
|
||
</div>
|
||
</nav>
|
||
<hr>
|
||
|
||
<article class="post--single">
|
||
<header>
|
||
<h1>Customizing your head</h1>
|
||
</header>
|
||
<div class="list post__meta"><time datetime="2020-10-20 20:29:42 +0800 +0800" title="Created">
|
||
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2020-10-20</span>
|
||
</time>
|
||
<time datetime="2022-05-09 20:15:52 +0800 +0800" title="Updated">
|
||
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/refresh.svg#refresh"></use>
|
||
</svg>
|
||
|
||
<span style="margin-left: 0.5em;">2022-05-09</span>
|
||
</time>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
<main>
|
||
<div class="paragraph">
|
||
<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>
|
||
<div class="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 <a href="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>
|
||
<div class="paragraph">
|
||
<p>Then, feel free to add your own (or others') scripts and stylesheets, <a href="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>
|
||
<div class="paragraph">
|
||
<p>In my case, I often use certain JavaScript libraries like <a href="https://www.mathjax.org/">MathJax</a> for mathematical typesetting, <a href="https://prismjs.com/">Prism</a> for syntax highlighting, and <a href="https://github.com/francoischalifour/medium-zoom/">medium-zoom</a> for interactive image zooms.</p>
|
||
</div>
|
||
<div class="paragraph">
|
||
<p>Here’s the modified code.
|
||
(The example code is snipped for brevity.)</p>
|
||
</div>
|
||
<div class="listingblock">
|
||
<div class="content">
|
||
<pre class="highlight"><code class="language-go" data-lang="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></code></pre>
|
||
</div>
|
||
</div>
|
||
<div class="paragraph">
|
||
<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 <a href="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>
|
||
<div class="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 <a href="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>
|
||
<div class="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>
|
||
<div class="paragraph">
|
||
<p>For <a href="https://asciidoctor.org/">Asciidoctor</a>, you can use <a href="https://asciidoctor.org/docs/user-manual/#passthroughs">passthroughs</a> to get raw HTML through.</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<hr>
|
||
<div class="post__meta--single">
|
||
|
||
|
||
|
||
<p data-content-publication-date="2020-10-20 20:29:42 +0800 +0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
|
||
|
||
|
||
<p data-content-modification-date="2022-05-09 20:15:52 +0800 +0800">Updated: <time datetime="2022-05-09">2022-05-09</time></p>
|
||
|
||
|
||
</div>
|
||
</article>
|
||
|
||
|
||
<hr><footer aria-label="Site footer">
|
||
|
||
<p><a href="#top">Back to top</a></p>
|
||
|
||
|
||
|
||
<p>Available in other languages:
|
||
<span class="list site__languages">
|
||
|
||
<a href="/hugo-theme-more-contentful/en" hreflang="en">English</a>
|
||
|
||
<a href="/hugo-theme-more-contentful/tl" hreflang="tl">Tagalog</a>
|
||
|
||
</span>
|
||
</p>
|
||
|
||
|
||
|
||
|
||
|
||
<ul class="list site__socials">
|
||
|
||
|
||
|
||
<li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/gmail" aria-label="E-mail">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/keybase" aria-label="Keybase">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/devdotto" aria-label="Dev.to">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/github/" aria-label="GitHub">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/gitlab" aria-label="GitLab">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/lichess" aria-label="Lichess">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/picartodottv" aria-label="Picarto.tv">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/pixiv" aria-label="Pixiv">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/twitch" aria-label="Twitch">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/twitter" aria-label="Twitter">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter"></use>
|
||
</svg>
|
||
</a>
|
||
</li><li>
|
||
<a class="site__social-icon" rel="me" href="https://example.org/youtube" aria-label="YouTube">
|
||
<svg class="icon">
|
||
<use href="https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube"></use>
|
||
</svg>
|
||
</a>
|
||
</li></ul>
|
||
|
||
|
||
|
||
|
||
<p>© 2022 More Contentful</p>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|