</code></pre></div><p>And paste it under your own <code>layouts</code> folder:</p><divclass=highlight><preclass=chroma><codeclass=language-shelldata-lang=shell>your-site/layouts/_defaults/list.html
</code></pre></div><p>Then you’re free to make any changes you want to the <code>list</code>.
When Hugo builds your site, your copy of <code>list.html</code> will be used instead of the theme’s <code>list.html</code>.</p><hr><h2id=enable-social-metadata-and-seo>Enable Social-Metadata and SEO<ahiddenclass=anchoraria-hidden=truehref=#enable-social-metadata-and-seo>#</a></h2><p>These include OpenGraph, Twitter Cards and Schema.</p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></code></pre></div><p>or set <code>HUGO_ENV</code> as “production” in system env-vars</p><hr><h2id=failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->Failed to find a valid digest in the ‘integrity’ attribute for resource … ?<ahiddenclass=anchoraria-hidden=truehref=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->#</a></h2><p>Read about How Subresource Integrity helps: <ahref=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity>Subresource_Integrity</a></p><p>Why was the <code>asset</code> not loading ? : <ahref=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#How_browsers_handle_Subresource_Integrity>How_browsers_handle_Subresource_Integrity</a></p><p><strong>Solution:</strong></p><p>Set the following in <code>config.yml</code></p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></code></pre></div><p>Linked Issues:</p><ul><li><ahref=https://stackoverflow.com/questions/65056585/hugo-theme-not-loading>https://stackoverflow.com/questions/65056585/hugo-theme-not-loading</a></li><li><ahref=https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource>https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource</a></li><li><ahref=https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/>https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/</a></li></ul><hr><h2id=bundling-custom-css-with-themes-assets>Bundling Custom css with theme’s assets<ahiddenclass=anchoraria-hidden=truehref=#bundling-custom-css-with-themes-assets>#</a></h2><ul><li>For adding custom css to be bundled inside one minimized css</li></ul><p>Create folder in yout project directory as</p><pre><code>.(site root)
</code></pre><p>All <code>css</code> files inside <code>assets/css/extended</code> will be bundled !</p><p><strong>Note</strong>: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under <code>assets/css/extended</code></p><p>Linked Issues:</p><ul><li><ahref=https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165>Papermod Theme: How to add custom CSS?</a></li></ul><hr><h2id=custom-head--footer>Custom Head / Footer<ahiddenclass=anchoraria-hidden=truehref=#custom-head--footer>#</a></h2><p>Custom css/js can be added by way mentioned below.</p><pre><code>.(site root)
</code></pre><p>Create a html page in directory structure as shown above.</p><p>Contents of <code>extend_head.html</code> will be added to <code>head</code> of page.</p><p>and contents of <code>extend_footer.html</code> will be added to bottom of page.</p><hr><h2id=add-menu-to-site>Add menu to site<ahiddenclass=anchoraria-hidden=truehref=#add-menu-to-site>#</a></h2><p>You can add menu entries which will appear in the header of every page.</p><p>To do so, add a <code>menu</code> section to your site’s <code>config.yml</code>:</p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nt>menu</span><spanclass=p>:</span><spanclass=w>
<code>weight</code> is used to control the positioning of entries.</p><p>For more information on menus, see the <ahref=https://gohugo.io/content-management/menus/>Hugo wiki page</a>.</p><hr><h2id=pin-a-post>Pin a Post<ahiddenclass=anchoraria-hidden=truehref=#pin-a-post>#</a></h2><p>Post can be pinned/ displayed top on the list by adding a <code>weight=<num></code> var to page-variables</p><p>example:</p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nn>---</span><spanclass=w>
</span><spanclass=w></span><spanclass=nt>title</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"My Important post"</span><spanclass=w>
</span><spanclass=w></span><spanclass=nt>title</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"My 2nd Important post"</span><spanclass=w>
</span></code></pre></div><hr><h2id=adding-custom-favicons>Adding Custom Favicon(s)<ahiddenclass=anchoraria-hidden=truehref=#adding-custom-favicons>#</a></h2><p>We support the following paths under <code>/static</code> directory
and can be added accordingly.</p><ul><li><code>favicon.ico</code></li><li><code>favicon-16x16.png</code></li><li><code>favicon-32x32.png</code></li><li><code>apple-touch-icon.png</code></li><li><code>safari-pinned-tab.svg</code></li></ul><ol><li><p>Favicon(s) can be generated by <ahref=https://favicon.io>Favicon.io</a></p><p>and can be simply put in <code>/static</code> folder.</p></li><li><p>Other way is to add favicon(s) NOT located in <code>/static</code> folder.</p><p>In site config add the following:</p><pre><code>params:
</code></pre><ul><li><code>absolute url</code> means direct links to external resource: ex. <ahref=https://web.site/someimage.png>https://web.site/someimage.png</a></li></ul><p>example:</p><pre><code>params:
</code></pre></li></ol><hr><h2id=centering-image-in-markdown>Centering image in markdown<ahiddenclass=anchoraria-hidden=truehref=#centering-image-in-markdown>#</a></h2><p>Add <code>#center</code> after image to center align an image</p><divclass=highlight><preclass=chroma><codeclass=language-mddata-lang=md>
</code></pre></div><p><strong>When using <ahref=https://gohugo.io/content-management/shortcodes/><code>figure</code></a> shortcode</strong></p><p>use <code>align=center</code> to center image with captions</p><p>ex.</p><divclass=highlight><preclass=chroma><codeclass=language-mddata-lang=md>{{<spanclass=p><</span><spanclass=nt>figure</span><spanclass=na>align</span><spanclass=o>=</span><spanclass=s>center</span><spanclass=na>src</span><spanclass=o>=</span><spanclass=s>"image.jpg"</span><spanclass=p>></span>}}
</code></pre></div><hr><h2id=using-hugos-syntax-highlighter-chroma>Using Hugo’s Syntax highlighter “chroma”<ahiddenclass=anchoraria-hidden=truehref=#using-hugos-syntax-highlighter-chroma>#</a></h2><ol><li><p>Disable Highlight.js in site <code>config.yml</code></p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></code></pre></div></li><li><p>Set hugo’s markdown styling in site <code>config.yml</code></p><divclass=highlight><preclass=chroma><codeclass=language-ymldata-lang=yml><spanclass=nt>markup</span><spanclass=p>:</span><spanclass=w>
Read <ahref=https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css>Generate Syntax Highlighter CSS</a></p><p>Add the following to <code>assets/css/extended/custom.css</code></p><divclass=highlight><preclass=chroma><codeclass=language-cssdata-lang=css><spanclass=p>.</span><spanclass=nc>chroma</span><spanclass=p>{</span>
</code></pre></div><p>More Info : <ahref=https://gohugo.io/getting-started/configuration-markup#highlight>Configure Markup - Highlight</a></p></li></ol><hr><h2id=search-not-working->Search not working ?<ahiddenclass=anchoraria-hidden=truehref=#search-not-working->#</a></h2><p>If you are using a CDN to server assets from a different domain, search would break</p><p>Why? Take a look at <ahref=https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35>fastsearch.js#L35</a>.</p><p>We fetch the <code>index.json</code> (where the search function looks for the keywords typed) one level up of the website <code>search.min.js</code> is hosted on.</p><p>We have used this insted of assigning <code>baseURL</code> so as to work with multilingual websites ex. <code>example.com/fr/</code> and websites being placed under a subdirectory ex. <code>example.com/blog/</code>.</p><p>To fix for <em>single</em> language websites hosting assets from CDN, this you may <ahref=#override-theme-template>override</a><ahref=https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35>fastsearch.js#L35</a> and placing appropriate URL as in</p><divclass=highlight><preclass=chroma><codeclass=language-jsdata-lang=js><spanclass=nx>xhr</span><spanclass=p>.</span><spanclass=nx>open</span><spanclass=p>(</span><spanclass=s2>"GET"</span><spanclass=p>,</span><spanclass=s2>"https://example.com/index.json"</span><spanclass=p>);</span>
</code></pre></div><hr><h2id=references>References<ahiddenclass=anchoraria-hidden=truehref=#references>#</a></h2><ul><li><ahref=https://zwbetz.com/override-a-hugo-theme/>Override a Hugo theme</a></li></ul></div><footerclass=post-footer><ulclass=post-tags><li><ahref=https://adityatelange.github.io/hugo-PaperMod/tags/papermod/>PaperMod</a></li></ul><navclass=paginav><aclass=prevhref=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/><spanclass=title>« Prev</span><br><span>Features</span></a>
