<spanclass=logo-switches><buttonid=theme-toggleaccesskey=ttitle="(Alt + T)"><svgid="moon"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"fill="none"stroke="currentcolor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><pathd="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svgid="sun"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"fill="none"stroke="currentcolor"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"><circlecx="12"cy="12"r="5"/><linex1="12"y1="1"x2="12"y2="3"/><linex1="12"y1="21"x2="12"y2="23"/><linex1="4.22"y1="4.22"x2="5.64"y2="5.64"/><linex1="18.36"y1="18.36"x2="19.78"y2="19.78"/><linex1="1"y1="12"x2="3"y2="12"/><linex1="21"y1="12"x2="23"y2="12"/><linex1="4.22"y1="19.78"x2="5.64"y2="18.36"/><linex1="18.36"y1="5.64"x2="19.78"y2="4.22"/></svg></button><ulclass=lang-switch><li>|</li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/fr/title=Frencharia-label=:fr:>🇫🇷</a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/fa/title=Faaria-label=Fa>Fa</a></li></ul></span></div><ulid=menu><li><ahref=https://adityatelange.github.io/hugo-PaperMod/archivestitle=Archive><span>Archive</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/categories/title=Categories><span>Categories</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/search/title="Search (Alt + /)"accesskey=/><span>Search</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/tags/title=Tags><span>Tags</span></a></li></ul></nav></header><mainclass=main><articleclass=post-single><headerclass=post-header><divclass=breadcrumbs><ahref=https://adityatelange.github.io/hugo-PaperMod/>Home</a> » <ahref=https://adityatelange.github.io/hugo-PaperMod/posts/>Posts</a> » <ahref=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/>PaperMod</a></div><h1class=post-title>FAQs<sup><spanclass=entry-isdraft> [draft]</span></sup></h1><divclass=post-meta><spantitle="2021-01-20 00:00:00 +0000 UTC">January 20, 2021</span> · 4 min · Aditya Telange | <ahref=https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/papermod/papermod-faq.mdrel="noopener noreferrer"target=_blank>Suggest Changes</a></div></header><divclass=toc><details><summaryaccesskey=ctitle="(Alt + C)"><spanclass=details>Table of Contents</span></summary><divclass=inner><ul><li><ahref=#introaria-label=Intro>Intro</a></li><li><ahref=#override-theme-templatearia-label="Override theme template">Override theme template</a></li><li><ahref=#enable-social-metadata-and-seoaria-label="Enable Social-Metadata and SEO">Enable Social-Metadata and SEO</a></li><li><ahref=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource--aria-label="Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?">Failed to find a valid digest in the ‘integrity’ attribute for resource … ?</a></li><li><ahref=#bundling-custom-css-with-themes-assetsaria-label="Bundling Custom css with theme&rsquo;s assets">Bundling Custom css with theme’s assets</a></li><li><ahref=#custom-head--footeraria-label="Custom Head / Footer">Custom Head / Footer</a></li><li><ahref=#add-menu-to-sitearia-label="Add menu to site">Add menu to site</a></li><li><ahref=#pin-a-postaria-label="Pin a Post">Pin a Post</a></li><li><ahref=#adding-custom-faviconsaria-label="Adding Custom Favicon(s)">Adding Custom Favicon(s)</a></li><li><ahref=#centering-image-in-markdownaria-label="Centering image in markdown">Centering image in markdown</a></li><li><ahref=#using-hugos-syntax-highlighter-chromaaria-label="Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;">Using Hugo’s Syntax highlighter “chroma”</a></li><li><ahref=#search-not-working-aria-label="Search not working ?">Search not working ?</a></
</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 Page</span><br><span>Features</span></a>
