2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-04-30 12:42:22 +00:00
< html lang = "en-us" > < title > Customizing your head | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2022-10-23 16:14:26 +00:00
< link rel = "stylesheet" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.b9122ae71c45adaf5f36e6b2a18f9332d840f2b842c6fe5bf9f7fb64ef49b6a3.css" / > < meta name = "generator" content = "Hugo 0.96.0" / >
2021-07-07 07:53:40 +00:00
< 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’ start with the most basic and perhaps most useful customization: modifying the & lt ; head & gt ; . 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’ ’ ’
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’ start with the most basic and perhaps most useful customization: modifying the & lt ; head & gt ; . 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’ ’ ’
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’ start with the most basic and perhaps most useful customization: modifying the & lt ; head & gt ; . 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’ ’ ’
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" / >
2022-04-30 13:04:28 +00:00
< meta property = "og:url" content = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/customizing-your-head/" / > < meta property = "article:section" content = "recipes" / >
2021-07-07 07:53:40 +00:00
< meta property = "article:published_time" content = "2020-10-20T20:29:42+08:00" / >
2022-10-23 16:14:26 +00:00
< meta property = "article:modified_time" content = "2022-10-24T00:09:47+08:00" / >
2022-04-30 12:42:22 +00:00
2022-05-01 12:40:36 +00:00
< meta itemprop = "name" content = "Customizing your head" >
< meta itemprop = "description" content = "Let’ start with the most basic and perhaps most useful customization: modifying the & lt ; head & gt ; . 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’ ’ ’
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" / >
2022-10-23 16:14:26 +00:00
< meta itemprop = "dateModified" content = "2022-10-24T00:09:47+08:00" / >
2022-05-01 12:40:36 +00: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/" / >
2021-07-07 07:53:40 +00:00
< script >
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
< / script >
< body >
2022-04-30 12:42:22 +00:00
< div class = "site__theme-btn" aria-label = "Theme toggle" >
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#swatch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< 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 >
2022-10-23 16:14:26 +00:00
< div class = "site__theme-item"
data-theme="Gruvbox dark, hard"
>Gruvbox dark, hard< / div >
< div class = "site__theme-item"
data-theme="Gruvbox light, hard"
>Gruvbox light, hard< / div >
2022-04-30 12:42:22 +00:00
< 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
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2022-06-13 13:51:31 +00:00
< script >
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
}
}
2022-04-30 12:42:22 +00:00
const themeDropdown = document.querySelector('.site__theme-btn');
2022-06-13 13:51:31 +00:00
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;
2021-07-07 07:53:40 +00:00
}
2022-06-13 13:51:31 +00:00
}
styleTheme();
});
styleTheme();
2022-04-30 12:42:22 +00:00
< / script >
< nav aria-label = "Site header" >
2022-04-30 13:04:28 +00:00
< a class = "site__title" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful" > More Contentful< / a >
2021-07-07 07:53:40 +00:00
< div class = "list site__links" >
2022-04-30 13:04:28 +00:00
< 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 >
2021-07-07 07:53:40 +00:00
< / div >
< / nav >
2022-04-30 12:42:22 +00:00
< hr >
2021-07-07 07:53:40 +00:00
< article class = "post--single" >
< header >
< h1 > Customizing your head< / h1 >
< / header >
2022-05-01 12:40:36 +00:00
< div class = "list post__meta" > < time datetime = "2020-10-20 20:29:42 +0800 +0800" title = "Created" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-10-23 16:14:26 +00:00
< time datetime = "2022-10-24 00:09:47 +0800 +0800" title = "Updated" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-10-23 16:14:26 +00:00
< span style = "margin-left: 0.5em;" > 2022-10-24< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< main >
< div class = "paragraph" >
< p > Let’ < 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’ < a href = "https://gohugo.io/templates/lookup-order/" > Hugo’ < / a > where we’ < 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’
(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’ < 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 >
2022-10-23 16:14:26 +00:00
< p data-content-modification-date = "2022-10-24 00:09:47 +0800 +0800" > Updated: < time datetime = "2022-10-24" > 2022-10-24< / time > < / p >
2021-07-07 07:53:40 +00:00
< / div >
< / article >
2022-04-30 12:42:22 +00:00
< hr > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
< p > < a href = "#top" > Back to top< / a > < / p >
< p > Available in other languages:
< span class = "list site__languages" >
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/en" hreflang = "en" > English< / a >
2021-07-07 07:53:40 +00:00
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/tl" hreflang = "tl" > Tagalog< / a >
2021-07-07 07:53:40 +00:00
< / span >
< / p >
< ul class = "list site__socials" >
< li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/gmail" aria-label = "E-mail" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/keybase" aria-label = "Keybase" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/devdotto" aria-label = "Dev.to" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/github/" aria-label = "GitHub" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/gitlab" aria-label = "GitLab" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/lichess" aria-label = "Lichess" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/picartodottv" aria-label = "Picarto.tv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/pixiv" aria-label = "Pixiv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitch" aria-label = "Twitch" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitter" aria-label = "Twitter" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/youtube" aria-label = "YouTube" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < / ul >
2022-04-30 12:42:22 +00:00
< p > © 2022 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
