<spanclass=logo-switches><spanclass=theme-toggle><aid=theme-toggleaccesskey=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></a></span><spanclass=lang-switch><span>|</span><ul><li><ahref=https://adityatelange.github.io/hugo-PaperMod/l2/title=Lang2aria-label=Lang2>Lang2</a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/l3/title=Langrtlaria-label=Langrtl>Langrtl</a></li></ul></span></span></div><ulclass=menuid=menuonscroll=menu_on_scroll()><li><ahref=https://adityatelange.github.io/hugo-PaperMod/archivestitle=Archive><span>Archive</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/search/title=Search><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><h1class=post-title>Papermod - How To's Guide<divclass=entry-isdraft><sup> [draft]</sup></div></h1><divclass=post-meta>September 18, 2020 · 3 min · Aditya Telange</div></header><divclass=toc><detailsopen><summary><divclass=detailsaccesskey=c>Table of Contents</div></summary><blockquote><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=#archive-pagearia-label="Archive Page">Archive Page</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=#referencesaria-label=References>References</a></li></ul></blockquote></details></div><divclass=post-content><h2id=intro>Intro<ahiddenclass=anchoraria-hidden=truehref=#intro>#</a></h2><ul><li><p><strong>We’ll be using <code>yml/yaml</code> format for all examples down below, I recommend using <code>yml</code> over <code>toml</code> as it is easier to read.</strong></p></li><li><p>You can find any <ahref="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p></li></ul><hr><h2id=override-theme-template>Override theme template<ahiddenclass=anchoraria-hidden=truehref=#override-theme-template>#</a></h2><p>By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.</p><p>Let’s say you wish the <code>list</code> was different. All you have to do is copy the <code>list</code> template:</p><divclass=highlight><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-shelldata-lang=shell>your-site/th
</code></pre></div><p>And paste it under your own <code>layouts</code> folder:</p><divclass=highlight><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-ymldata-lang=yml><spanstyle=color:#f92672>params</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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-ymldata-lang=yml><spanstyle=color:#f92672>params</span>:
</code></pre></div><p>and add the following to it</p><divclass=highlight><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-ymldata-lang=yml>---
</code></pre></div><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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-ymldata-lang=yml><spanstyle=color:#f92672>menu</span>:
</code></pre></div><p><code>name</code> controls what will be displayed for the menu entry.<br><code>url</code> sets the URL that the entry points to.<br><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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-ymldata-lang=yml>---
</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><li><code>site.webmanifest</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:
<span>Theme <ahref=https://git.io/hugopapermodrel=noopenertarget=_blank>PaperMod</a></span></footer><buttonclass=top-linkid=top-linktype=buttonaria-label="go to top"title="Go to Top"accesskey=g><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 12 6"><pathd="M12 6H0l6-6z"/></svg></button>
var mybutton=document.getElementById("top-link");window.onscroll=function(){if(document.body.scrollTop>800||document.documentElement.scrollTop>800){mybutton.style.visibility="visible";mybutton.style.opacity="1";}else{mybutton.style.visibility="hidden";mybutton.style.opacity="0";}};mybutton.onclick=function(){document.body.scrollTop=0;document.documentElement.scrollTop=0;window.location.hash=''}
function menu_on_scroll(){localStorage.setItem("menu-scroll-position",document.getElementById('menu').scrollLeft);}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{if(document.body.className.includes("dark")){document.body.classList.remove('dark');localStorage.setItem("pref-theme",'light');}else{document.body.classList.add('dark');localStorage.setItem("pref-theme",'dark');}})</script></body></html>
