hugo-WonderMod/posts/papermod/papermod-how-to/index.html

69 lines
28 KiB
HTML
Raw Normal View History

<!doctype html><html lang=en dir=auto><head><meta charset=utf-8><meta http-equiv=x-ua-compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name=robots content="index, follow"><title>Papermod - How To's Guide | PaperMod</title><meta name=keywords content="PaperMod"><meta name=description content="FAQs"><meta name=author content="Aditya Telange"><link rel=canonical href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/><link href=https://adityatelange.github.io/hugo-PaperMod/assets/css/stylesheet.min.980edd1394ed802f875a661e044cbfab39aa410e26bb9474c908dc5bb2755cb9.css integrity="sha256-mA7dE5TtgC+HWmYeBEy/qzmqQQ4mu5R0yQjcW7J1XLk=" rel="preload stylesheet" as=style><link rel=icon href=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><link rel=icon type=image/png sizes=16x16 href=https://adityatelange.github.io/hugo-PaperMod/favicon-16x16.png><link rel=icon type=image/png sizes=32x32 href=https://adityatelange.github.io/hugo-PaperMod/favicon-32x32.png><link rel=apple-touch-icon href=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><link rel=mask-icon href=https://adityatelange.github.io/hugo-PaperMod/safari-pinned-tab.svg><meta name=theme-color content="#2e2e33"><meta name=msapplication-TileColor content="#2e2e33"><meta name=generator content="Hugo 0.79.0"><meta property="og:title" content="Papermod - How To's Guide"><meta property="og:description" content="FAQs"><meta property="og:type" content="article"><meta property="og:url" content="https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/"><meta property="article:published_time" content="2020-09-18T11:30:03+05:30"><meta property="article:modified_time" content="2020-09-18T11:30:03+05:30"><meta name=twitter:card content="summary"><meta name=twitter:title content="Papermod - How To's Guide"><meta name=twitter:description content="FAQs"><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Papermod - How To's Guide","name":"Papermod - How To\u0027s Guide","description":"FAQs","keywords":["PaperMod"],"articleBody":"Intro Well be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\n You can find any YML to TOML converters if necessary.\n Override theme template By Hugos Lookup Order, you can override any part of a theme that you want. The following is a quick example.\nLets say you wish the list was different. All you have to do is copy the list template:\nyour-site/themes/papermod/layouts/_defaults/list.html And paste it under your own layouts folder:\nyour-site/layouts/_defaults/list.html Then youre free to make any changes you want to the list. When Hugo builds your site, your copy of list.html will be used instead of the themes list.html.\n Enable Social-Metadata and SEO These include OpenGraph, Twitter Cards and Schema.\nparams: env: production or set HUGO_ENV as production in system env-vars\n Failed to find a valid digest in the integrity attribute for resource ? Read about How Subresource Integrity helps: Subresource_Integrity\nWhy was the asset not loading ? : How_browsers_handle_Subresource_Integrity\nSolution:\nSet the following in config.yml\nparams: assets: disableFingerprinting: true Linked Issues:\n https://stackoverflow.com/questions/65056585/hugo-theme-not-loading https://stackoverflow.com/questions/65040931/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/ Archive Page . config.yml content/ archives.md and add the following to it\n--- title: \"Archive\" layout: \"archives\" url: \"/archives/\" summary: archives --- Custom Head / Footer Custom css/js can be added by way mentioned below.\n.(site root) config.yml content/ theme/hugo-PaperMod/ layouts partials
<span class=logo-switches><span class=theme-toggle><a id=theme-toggle accesskey=t><svg id="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"><path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg><svg id="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"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg></a></span><span class=lang-switch><span>|</span><ul><li><a href=https://adityatelange.github.io/hugo-PaperMod/l2/ title=Lang2 aria-label=Lang2>Lang2</a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/l3/ title=Langrtl aria-label=Langrtl>Langrtl</a></li></ul></span></span></div><ul class=menu id=menu onscroll=menu_on_scroll()><li><a href=https://adityatelange.github.io/hugo-PaperMod/archives/><span>Archive</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/><span>Tags</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><h1 class=post-title>Papermod - How To's Guide<div class=entry-isdraft><sup>&nbsp;&nbsp;[draft]</sup></div></h1><div class=post-meta>September 18, 2020&nbsp;·&nbsp;3 min&nbsp;·&nbsp;Aditya Telange</div></header><div class=toc><details open><summary><div class=details accesskey=c>Table of Contents</div></summary><blockquote><ul><li><a href=#intro aria-label=Intro>Intro</a></li><li><a href=#override-theme-template aria-label="Override theme template">Override theme template</a></li><li><a href=#enable-social-metadata-and-seo aria-label="Enable Social-Metadata and SEO">Enable Social-Metadata and SEO</a></li><li><a href=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-- aria-label="Failed to find a valid digest in the &amp;lsquo;integrity&amp;rsquo; attribute for resource &amp;hellip; ?">Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &mldr; ?</a></li><li><a href=#archive-page aria-label="Archive Page">Archive Page</a></li><li><a href=#custom-head--footer aria-label="Custom Head / Footer">Custom Head / Footer</a></li><li><a href=#pin-a-post aria-label="Pin a Post">Pin a Post</a></li><li><a href=#adding-custom-favicons aria-label="Adding Custom Favicon(s)">Adding Custom Favicon(s)</a></li><li><a href=#references aria-label=References>References</a></li></ul></blockquote></details></div><div class=post-content><h2 id=intro>Intro<a hidden class=anchor aria-hidden=true href=#intro>#</a></h2><ul><li><p><strong>We&rsquo;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 <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p></li></ul><hr><h2 id=override-theme-template>Override theme template<a hidden class=anchor aria-hidden=true href=#override-theme-template>#</a></h2><p>By Hugo&rsquo;s Lookup Order, you can override any part of a theme that you want. The following is a quick example.</p><p>Let&rsquo;s say you wish the <code>list</code> was different. All you have to do is copy the <code>list</code> template:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>your-site/themes/papermod/layouts/_defaults/list.html
</code></pre></div><p>And paste it under your own <code>layouts</code> folder:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>your-site/layouts/_defaults/list.html
</code></pre></div><p>Then you&rsquo;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&rsquo;s <code>list.html</code>.</p><hr><h2 id=enable-social-metadata-and-seo>Enable Social-Metadata and SEO<a hidden class=anchor aria-hidden=true href=#enable-social-metadata-and-seo>#</a></h2><p>These include OpenGraph, Twitter Cards and Schema.</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-yml data-lang=yml><span style=color:#f92672>params</span>:
<span style=color:#f92672>env</span>: <span style=color:#ae81ff>production</span>
</code></pre></div><p>or set <code>HUGO_ENV</code> as &ldquo;production&rdquo; in system env-vars</p><hr><h2 id=failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &mldr; ?<a hidden class=anchor aria-hidden=true href=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->#</a></h2><p>Read about How Subresource Integrity helps: <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity>Subresource_Integrity</a></p><p>Why was the <code>asset</code> not loading ? : <a href=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><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-yml data-lang=yml><span style=color:#f92672>params</span>:
<span style=color:#f92672>assets</span>:
<span style=color:#f92672>disableFingerprinting</span>: <span style=color:#66d9ef>true</span>
</code></pre></div><p>Linked Issues:</p><ul><li><a href=https://stackoverflow.com/questions/65056585/hugo-theme-not-loading>https://stackoverflow.com/questions/65056585/hugo-theme-not-loading</a></li><li><a href=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><a href=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><h2 id=archive-page>Archive Page<a hidden class=anchor aria-hidden=true href=#archive-page>#</a></h2><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-lang=shell>.
├── config.yml
├── content/
│ ├── archives.md &lt;--- Create archive.md here
│ └── posts/
├── static/
└── themes/
└── hugo-PaperMod/
</code></pre></div><p>and add the following to it</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-yml data-lang=yml>---
<span style=color:#f92672>title</span>: <span style=color:#e6db74>&#34;Archive&#34;</span>
<span style=color:#f92672>layout</span>: <span style=color:#e6db74>&#34;archives&#34;</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;/archives/&#34;</span>
<span style=color:#f92672>summary</span>: <span style=color:#ae81ff>archives</span>
---
</code></pre></div><hr><h2 id=custom-head--footer>Custom Head / Footer<a hidden class=anchor aria-hidden=true href=#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 &lt;---
│ └── extend_head.html &lt;---
└── 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><h2 id=pin-a-post>Pin a Post<a hidden class=anchor aria-hidden=true href=#pin-a-post>#</a></h2><p>Post can be pinned/ displayed top on the list by adding a <code>weight=&lt;num></code> var to page-variables</p><p>example:</p><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-yml data-lang=yml>---
<span style=color:#f92672>title</span>: <span style=color:#e6db74>&#34;My Important post&#34;</span>
<span style=color:#f92672>date</span>: <span style=color:#e6db74>2020-09-15T11:30:03</span><span style=color:#ae81ff>+00</span>:<span style=color:#ae81ff>00</span>
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>1</span>
---
</code></pre></div><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-yml data-lang=yml>---
<span style=color:#f92672>title</span>: <span style=color:#e6db74>&#34;My 2nd Important post&#34;</span>
<span style=color:#f92672>date</span>: <span style=color:#e6db74>2020-09-15T11:30:03</span><span style=color:#ae81ff>+00</span>:<span style=color:#ae81ff>00</span>
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>2</span>
---
</code></pre></div><hr><h2 id=adding-custom-favicons>Adding Custom Favicon(s)<a hidden class=anchor aria-hidden=true href=#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 <a href=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:
assets:
favicon: &quot;&lt;link / absolute url&gt;&quot;
favicon16x16: &quot;&lt;link / absolute url&gt;&quot;
favicon32x32: &quot;&lt;link / absolute url&gt;&quot;
apple_touch_icon: &quot;&lt;link / absolute url&gt;&quot;
safari_pinned_tab: &quot;&lt;link / absolute url&gt;&quot;
</code></pre><ul><li><code>absolute url</code> means direct links to external resource: ex. <a href=https://web.site/someimage.png>https://web.site/someimage.png</a></li></ul><p>example:</p><pre><code>params:
assets:
favicon: &quot;/favicon.ico&quot;
favicon16x16: &quot;/favicon-16x16.png&quot;
favicon32x32: &quot;/favicon-32x32.png&quot;
apple_touch_icon: &quot;/apple-touch-icon.png&quot;
safari_pinned_tab: &quot;/safari-pinned-tab.svg&quot;
</code></pre></li></ol><hr><h2 id=references>References<a hidden class=anchor aria-hidden=true href=#references>#</a></h2><ul><li><a href=https://zwbetz.com/override-a-hugo-theme/>Override a Hugo theme</a></li></ul></div><footer class=post-footer><ul class=post-tags><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/papermod>PaperMod</a></li></ul><div class=share-buttons><a target=_blank rel="noopener noreferrer" aria-label="share Papermod - How To's Guide on twitter" href="https://twitter.com/intent/tweet/?text=Papermod%20-%20How%20To%27s%20Guide&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-how-to%2f&hashtags=PaperMod"><svg viewBox="0 0 512 512"><path d="M449.446.0C483.971.0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512h-386.892c-34.524.0-62.554-28.03-62.554-62.554v-386.892c0-34.524 28.029-62.554 62.554-62.554h386.892zm-253.927 424.544c135.939.0 210.268-112.643 210.268-210.268.0-3.218.0-6.437-.153-9.502 14.406-10.421 26.973-23.448 36.935-38.314-13.18 5.824-27.433 9.809-42.452 11.648 15.326-9.196 26.973-23.602 32.49-40.92-14.252 8.429-30.038 14.56-46.896 17.931-13.487-14.406-32.644-23.295-53.946-23.295-40.767.0-73.87 33.104-73.87 73.87.0 5.824.613 11.494 1.992 16.858-61.456-3.065-115.862-32.49-152.337-77.241-6.284 10.881-9.962 23.601-9.962 37.088.0 25.594 13.027 48.276 32.95 61.456-12.107-.307-23.448-3.678-33.41-9.196v.92c0 35.862 25.441 65.594 59.311 72.49-6.13 1.686-12.72 2.606-19.464 2.606-4.751.0-9.348-.46-13.946-1.38 9.349 29.426 36.628 50.728 68.965 51.341-25.287 19.771-57.164 31.571-91.8 31.571-5.977.0-11.801-.306-17.625-1.073 32.337 21.15 71.264 33.41 112.95 33.41z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share Papermod - How To's Guide on linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-how-to%2f&title=Papermod%20-%20How%20To%27s%20Guide&summary=Papermod%20-%20How%20To%27s%20Guide&source=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-how-to%2f"><svg viewBox="0 0 512 512"><path d="M449.446.0C483.971.0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512h-386.892c-34.524.0-62.554-28.03-62.554-62.554v-386.892c0-34.524 28.029-62.554 62.554-62.554h386.892zM160.461 423.278V197.561h-75.04v225.717h75.04zm270.539.0v-129.439c0-69.333-37.018-101.586-86.381-101.586-39.804.0-57.634 21.891-67.617 37.266v-31.958h-75.021c.995 21.181.0 225.717.0 225.717h75.02v-126.056c0-6.748.486-13.492 2.474-18.315 5.414-13.475 17.767-27.434 38.494-27.434 27.135.0 38.007 20.707 38.007 51.037v120.768h75.024zm-307.552-334.556c-25.674.0-42.448 16.879-42.448 39.002.0 21.658 16.264 39.002 41.455 39.002h.484c26.165.0 42.452-17.344 42.452-39.002-.485-22.092-16.241-38.954-41.943-39.002z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share Papermod - How To's Guide on reddit" href="https://reddit.com/submit?url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-how-to%2f&title=Papermod%20-%20How%20To%27s%20Guide"><svg viewBox="0 0 512 512"><path d="M449.446.0C483.971.0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512h-386.892c-34.524.0-62.554-28.03-62.554-62.554v-386.892c0-34.524 28.029-62.554 62.554-62.554h386.892zM446 265.638c0-22.964-18.616-41.58-41.58-41.58-11.211.0-21.361 4.457-28.841 11.666-28.424-20.508-67.586-33.757-111.204-35.278l18.941-89.121 61.884 13.157c.756 15.734 13.642 28.29 29.56 28.29 16.407.0 29.706-13.299 29.706-29.701.0-16.403-13.299-29.702-29.706-29.702-11.666.0-21.657 6.792-26.515 16.578l-69.105-14.69c-1.922-.418-3.939-.042-5.585 1.036-1.658 1.073-2.811 2.761-3.224 4.686l-21.152 99.438c-44.258 1.228-84.046 14.494-112.837 35.232-7.468-7.164-17.589-11.591-28.757-11.591-22.965.0-41.585 18.616-41.585 41.58.0 16.896 10.095 31.41 24.568 37.918-.639 4.135-.99 8.328-.99 12.576.0 63.977 74.469 115.836 166.33 115.836s166.334-51.859 166.334-115.836c0-4.218-.347-8.387-.977-12.493 14.564-6.47 24.735-21.034 24.735-38.001zm-119.474 108
<span>&#183;</span>
<span>Powered by <a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a></span>
<span>&#183;</span>
<span>Theme <a href=https://git.io/hugopapermod rel=noopener target=_blank>PaperMod</a></span></footer><a aria-label="go to top" title="Go to Top" accesskey=g><button class=top-link id=top-link type=button><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg></button></a>
<script defer src=https://adityatelange.github.io/hugo-PaperMod/assets/js/highlight.min.27cd435cc9ed6abb4b496581b151804f79f366c412620272bb94e2f5f598ebcc.js integrity="sha256-J81DXMntartLSWWBsVGAT3nzZsQSYgJyu5Ti9fWY68w=" onload=hljs.initHighlightingOnLoad();></script><script>window.onload=function(){if(localStorage.getItem("menu-scroll-position")){document.getElementById('menu').scrollLeft=localStorage.getItem("menu-scroll-position");}}
document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener("click",function(e){var id=this.getAttribute("href").substr(1);document.querySelector(`[id='${decodeURIComponent(id)}']`).scrollIntoView({behavior:"smooth"});});});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>