<spanclass=logo-switches><aid=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></a><ulclass=lang-switch><li>|</li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/fr/title=:fr:aria-label=:fr:>🇫🇷</a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/fa/title=Faaria-label=Fa>Fa</a></li></ul></span></div><ulid=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/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<divclass=entry-isdraft><sup> [draft]</sup></div></h1><divclass=post-meta>January 20, 2021 · 4 min · Aditya Telange</div></header><divclass=toc><details><summaryaccesskey=ctitle="(Alt + C)"><divclass=details>Table of Contents</div></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=#archive-pagearia-label="Archive Page">Archive Page</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=#referencesaria-label=References>References</a></li></ul></div></details></div><divclass=post-content><h2id=intro>Intro<ahiddenclass=anchoraria-hidden=truehref=#intro>#</a></h2><ul><li><p><strong>We’ll be using <code>ym
</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=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)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
└── css/
└── extended/ <---
│ ├── custom_css1.css <---
│ └── any_name.css <---
</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)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── layouts
├── partials
│ ├── comments.html
│ ├── extend_footer.html <---
│ └── extend_head.html <---
└── robots.txt
</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.
<code>url</code> sets the URL that the entry points to.
<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></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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-mddata-lang=md>
</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><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></li><li><p>Set hugo’s markdown styling in site <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>markup</span>:
</code></pre></div></li><li><p>If you want <code>lineNos: true</code>, the background won’t be proper.
This will only work with <code>noClasses: false</code> or <code>pygmentsUseClasses: true</code>.
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><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-cssdata-lang=css>.<spanstyle=color:#a6e22e>chroma</span> {
</code></pre></div></li></ol><p>More Info : <ahref=https://gohugo.io/getting-started/configuration-markup#highlight>Configure Markup - Highlight</a></p><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>
<span>Theme <ahref=https://git.io/hugopapermodrel=noopenertarget=_blank>PaperMod</a></span></footer><ahref=#toparia-label="go to top"title="Go to Top (Alt + G)"><buttonclass=top-linkid=top-linktype=buttonaccesskey=g><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 12 6"fill="currentcolor"><pathd="M12 6H0l6-6z"/></svg></button></a>
