<!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=manifesthref=https://adityatelange.github.io/hugo-PaperMod/site.webmanifest><linkrel=iconhref=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><linkrel=icontype=image/pngsizes=16x16href=https://adityatelange.github.io/hugo-PaperMod/favicon-16x16.png><linkrel=icontype=image/pngsizes=32x32href=https://adityatelange.github.io/hugo-PaperMod/favicon-32x32.png><linkrel=apple-touch-iconhref=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><linkrel=mask-iconhref=https://adityatelange.github.io/hugo-PaperMod/safari-pinned-tab.svg><metaname=theme-colorcontent="#2e2e33"><metaname=msapplication-TileColorcontent="#2e2e33"><metaname=generatorcontent="Hugo 0.78.1"><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-HowTo'sGuide","name":"Papermod-HowTo\u0027sGuide","description":"FAQs","keywords":["PaperMod"],"articleBody":"IntroWe’llbeusingyml/yamlformatforallexamplesdownbelow,Irecommendusingymlovertomlasitiseasiertoread.\nOverridethemetemplateByHugo’sLookupOrder,youcanoverrideanypartofathemethatyouwant.Thefollowingisaquickexample.\nLet’ssayyouwishthelistwasdifferent.Allyouhavetodoiscopythelisttemplate:\nyour-site/themes/papermod/layouts/_defaults/list.htmlAndpasteitunderyourownlayoutsfolder:\nyour-site/layouts/_defaults/list.htmlThenyou’refreetomakeanychangesyouwanttothelist.WhenHugobuildsyoursite,yourcopyoflist.htmlwillbeusedinsteadofthetheme’slist.html.\nEnableSocial-MetadataandSEOTheseincludeOpenGraph,TwitterCardsandSchema.\nparams:env:productionorsetHUGO_ENVas“production”insystemenv-vars\nArchivePage.├──config.yml├──content/│├──archives.mdandaddthefollowingtoit\n---title:\"Archive\"layout:\"archives\"url:\"/archives/\"summary:archives---CustomHead/FooterCustomcss/jscanbeaddedbywaymentionedbelow.\n.(siteroot)├──config.yml├──content/├──theme/hugo-PaperMod/└──layouts├──partials│├──comments.html│├──extend_footer.htmlCreateahtmlpageindirectorystructureasshownabove.\nContentsofextend_head.htmlwillbeaddedtoheadofpage.\nandcontentsofextend_footer.htmlwillbeaddedtobottomofpage.\nPinaPostPostcanbepinned/displayedtoponthelistbyaddingaweight=vartopage-variables\nexample:\n---title:\"MyImportantpost\"date:2020-09-15T11:30:03+00:00weight:1------title:\"My2ndImportantpost\"date:2020-09-15T11:30:03+00:00weight:2---ReferencesOverrideaHugotheme","wordCount":"280","inLanguage":"en","datePublished":"2020-09-18T11:30:03+05:30","dateModified":
<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=#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=#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=#pin-a-postaria-label="Pin a Post">Pin a Post</a></li><li><ahref=#referencesaria-label=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>
