<!doctype html><htmllang=endir=auto><head><metacharset=utf-8><metahttp-equiv=x-ua-compatiblecontent="IE=edge"><metaname=viewportcontent="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Papermod - How To's Guide - PaperMod</title><metaname=keywordscontent="PaperMod"><metaname=descriptioncontent="FAQs"><metaname=authorcontent="Aditya Telange"><linkrel=canonicalhref=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/><linkhref=https://adityatelange.github.io/hugo-PaperMod/assets/css/stylesheet.min.423a3f936d3c2f8ed2a09c09b14e77af788d634dc55def0398bdf279b1cfa624.cssintegrity="sha256-Qjo/k208L47SoJwJsU53r3iNY03FXe8DmL3yebHPpiQ="rel="preload stylesheet"as=style><linkrel=apple-touch-iconhref=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><linkrel=iconhref=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><metaname=generatorcontent="Hugo 0.78.0"><metaproperty="og:title"content="Papermod - How To's Guide"><metaproperty="og:description"content="FAQs"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/"><metaproperty="article:published_time"content="2020-09-18T11:30:03+05:30"><metaproperty="article:modified_time"content="2020-09-18T11:30:03+05:30"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Papermod - How To's Guide"><metaname=twitter:descriptioncontent="FAQs"><scripttype=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 We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\n Override theme template By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.\nLet’s 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 you’re 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 theme’s 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 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 │ ├── comments.html │ ├── extend_footer.html Create a html page in directory structure as shown above.\nContents of extend_head.html will be added to head of page.\nand contents of extend_footer.html will be added to bottom of page.\n Pin a Post Post can be pinned/ displayed top on the list by adding a weight= var to page-variables\nexample:\n--- title: \"My Important post\" date: 2020-09-15T11:30:03+00:00 weight: 1 --- --- title: \"My 2nd Important post\" date: 2020-09-15T11:30:03+00:00 weight: 2 --- References Override a Hugo theme ","wordCount":"280","inLanguage":"en","datePublished":"2020-09-18T11:30:03+05:30","dateModified":"2020-09-18T11:30:03+05:30","author":{"@type":"Person","name":"Aditya Telange"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-how-to/"},"publisher":{"@type":"Organization","name":"PaperMod","logo":{"@type":"ImageObject","url":"https://adityatelange.github.io/hugo-PaperMod/favicon.ico"}}}</script></head><bodyclass=singleid=top><script>if(localStorage.getItem("pref-theme")==="dark"){document.body.classList.add('dark');}else
<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/archives/><span>Archives</span></a></li><li><ahref=https://adityatelange.github.io/hugo-PaperMod/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 · 2 min · Aditya Telange</div></header><divclass=toc><detailsopen><summary><divclass=detailsaccesskey=c>Table of Contents</div></summary><blockquote><ul><li><ahref=#intro>Intro</a></li><li><ahref=#override-theme-template>Override theme template</a></li><li><ahref=#enable-social-metadata-and-seo>Enable Social-Metadata and SEO</a></li><li><ahref=#archive-page>Archive Page</a></li><li><ahref=#custom-head--footer>Custom Head / Footer</a></li><li><ahref=#pin-a-post>Pin a Post</a></li><li><ahref=#references>References</a></li></ul></blockquote></details></div><divclass=post-content><h2id=intro>Intro</h2><p>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.</p><hr><h2id=override-theme-template>Override theme template</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/themes/papermod/layouts/_defaults/list.html
</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</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=archive-page>Archive Page</h2><divclass=highlight><prestyle=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><codeclass=language-shelldata-lang=shell>.
├── config.yml
├── content/
│ ├── archives.md <--- Create archive.md here
│ └── posts/
├── static/
└── themes/
└── hugo-PaperMod/
</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</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=pin-a-post>Pin a Post</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>---
<spanstyle=color:#f92672>title</span>: <spanstyle=color:#e6db74>"My Important post"</span>
<span>Theme <ahref=https://git.io/hugopapermodrel=noopenertarget=_blank>PaperMod</a></span></footer><ahref=#toparia-label="go to top"title="Go to Top"accesskey=g><buttonclass=top-linkid=top-linktype=button><svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 12 6"><pathd="M12 6H0l6-6z"/></svg></button></a>
