[{"content_html":"\n\u003cdiv id=\"preamble\"\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eExtending a Hugo theme is nothing new and a \u003ca href=\"https://gohugo.io/content-management/sections/\"\u003efew\u003c/a\u003e \u003ca href=\"http://hugocodex.org/add-ons/\"\u003eplaces\u003c/a\u003e provide a place for the most common extensions.\nIn this post, I’ll be listing a few personal recipes I’ve always used for extending a Hugo theme.\nThough this only applies specifically to Contentful and may need some tweaking when applying it other themes.\u003c/p\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"sect1\"\u003e\n\u003ch2 id=\"_customizing_your_head\"\u003eCustomizing your \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e\u003c/h2\u003e\n\u003cdiv class=\"sectionbody\"\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eLet’s start with the most basic and perhaps most useful customization: modifying the \u003ccode\u003e\u0026lt;head\u003c/code\u003e\u0026gt;.\nThis is useful for adding your own CSS and JavaScript files, changing certain metadata, or adding icons.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eFirst, copy the \u003ccode\u003ehead\u003c/code\u003e partial from the theme (\u003ccode\u003etheme/contentful/layouts/partials/head.html\u003c/code\u003e) to your own (\u003ccode\u003elayouts/partials/head.html\u003c/code\u003e).\nWe’re simply taking advantage of \u003ca href=\"https://gohugo.io/templates/lookup-order/\"\u003eHugo’s lookup order\u003c/a\u003e where we’ve override the \u003ccode\u003ehead\u003c/code\u003e partial with our own copy.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eThen, feel free to add your own (or others\u0026#39;) scripts and stylesheets, \u003ca href=\"https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\"\u003eicons and other metadata\u003c/a\u003e, or whatever suitable things.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eIn my case, I often use certain JavaScript libraries like \u003ca href=\"https://www.mathjax.org/\"\u003eMathJax\u003c/a\u003e for mathematical typesetting, \u003ca href=\"https://prismjs.com/\"\u003ePrism\u003c/a\u003e for syntax highlighting, and \u003ca href=\"https://github.com/francoischalifour/medium-zoom/\"\u003emedium-zoom\u003c/a\u003e for interactive image zooms.\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"paragraph\"\u003e\n\u003cp\u003eHere’s the modified code.\n(The example code is snipped for brevity.)\u003c/p\u003e\n\u003c/div\u003e\n\u003cdiv class=\"listingblock\"\u003e\n\u003cdiv class=\"content\"\u003e\n\u003cpre class=\"highlight\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u0026lt;!--snip--\u0026gt;\n\n{{-/*MathJax*/-}}\n\u0026lt;scriptsrc=\u0026#34;https://polyfill.io/v3/polyfill.min.js?features=es6\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script id=\u0026#34;MathJax-script\u0026#34; defer src=\u0026#34;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\n{{- /* Prism.js */ -}}\n\u0026lt;link rel=\u0026#34;stylesheet\u0026#34; href=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-tomorrow.min.css\u0026#34; type=\u0026#34;text/css\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-core.min.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/autoloader/prism-autoloader.min.js\u0026#34;\u0026gt;\n\u0026lt;script defer src=\u0026#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/keep-markup/prism-keep-markup.min.js\u0026#34;\u0026gt;\n\n{{- /* medium-zoom */ -}}\n\u0026lt;script defer src=\u0026#34;https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js\u0026#34;\u