<!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"><metaname=robotscontent="index, follow"><title>Features | PaperMod</title><metaname=keywordscontent="PaperMod"><metaname=descriptioncontent="Learn About All Features in PaperMod"><metaname=authorcontent="Aditya Telange"><linkrel=canonicalhref=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/><linkcrossorigin=anonymoushref=/hugo-PaperMod/assets/css/stylesheet.2494a82033f8f1af32a12550b2118ede6560401d51adfaee0982c2d0ff0bb7fc.cssintegrity="sha256-JJSoIDP48a8yoSVQshGO3mVgQB1RrfruCYLC0P8Lt/w="rel="preload stylesheet"as=style><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"><linkrel=alternatehreflang=enhref=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/><noscript><style>#theme-toggle,.top-link{display:none}</style><style>@media(prefers-color-scheme:dark){:root{--theme:rgb(29,30,32);--entry:rgb(46,46,51);--primary:rgb(218,218,219);--secondary:rgb(155,156,157);--tertiary:rgb(65,66,68);--content:rgb(196,196,197);--hljs-bg:rgb(46,46,51);--code-bg:rgb(55,56,62);--border:rgb(51,51,51)}.list{background:var(--theme)}.list:not(.dark)::-webkit-scrollbar-track{background:00}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><metaproperty="og:title"content="Features"><metaproperty="og:description"content="Learn About All Features in PaperMod"><metaproperty="og:type"content="article"><metaproperty="og:url"content="https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/"><metaproperty="og:image"content="https://adityatelange.github.io/hugo-PaperMod/papermod-cover.png"><metaproperty="article:section"content="posts"><metaproperty="article:published_time"content="2021-01-20T00:00:00+00:00"><metaproperty="article:modified_time"content="2021-01-20T00:00:00+00:00"><metaname=twitter:cardcontent="summary_large_image"><metaname=twitter:imagecontent="https://adityatelange.github.io/hugo-PaperMod/papermod-cover.png"><metaname=twitter:titlecontent="Features"><metaname=twitter:descriptioncontent="Learn About All Features in PaperMod"><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Posts","item":"https://adityatelange.github.io/hugo-PaperMod/posts/"},{"@type":"ListItem","position":2,"name":"PaperMod","item":"https://adityatelange.github.io/hugo-PaperMod/posts/papermod/"},{"@type":"ListItem","position":3,"name":"Features","item":"https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/"}]}</script><scripttype=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Features","name":"Features","description":"LearnAboutAllFeaturesinPaperMod","keywords":["PaperMod"],"articleBody":"IntroWe’llbeusingyml/yamlformatforallexamplesdownbelow,Irecommendusingymlovertomlasitiseasiertoread.\nYoucanfindanyYMLtoTOMLconvertersifnecessary.\nAssets(js/css)Thefollowingisenabledbydefault\nminification-makestheassetssizesmallestaspossible.bundling-bundlesallthestylesinonesingleassetfingerprint/intergitycheck.DefaultThemelight/dark/autoparams:#defaultTheme:light#defaultTheme:darkdefaultTheme:auto#toswitchbetweendarkorlightaccordingtobrow
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>defaultTheme</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>auto</span><spanclass=w></span><spanclass=c># to switch between dark or light according to browser theme</span><spanclass=w>
</span></span></span></code></pre></div></details><hr><h3id=theme-switch-toggle-enabled-by-default>Theme Switch Toggle (enabled by default)<ahiddenclass=anchoraria-hidden=truehref=#theme-switch-toggle-enabled-by-default>#</a></h3><p>Shows icon besides title of page to change theme</p><p>To disable it :</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>disableThemeToggle</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w>
</span></span></span></code></pre></div><p>You can refer following table for better understanding…</p><table><thead><tr><th><code>defaultTheme</code></th><th><code>disableThemeToggle</code></th><th>checks local storage?</th><th>checks system theme?</th><th>Info</th></tr></thead><tbody><tr><td><code>auto</code></td><td>true</td><td>No</td><td>Yes</td><td>only system theme</td></tr><tr><td></td><td>false</td><td>Yes (if not->2)</td><td>Yes (2)</td><td><em>switch present</em></td></tr><tr><td><code>dark</code></td><td>true</td><td>No</td><td>No</td><td>force dark only</td></tr><tr><td></td><td>false</td><td>Yes</td><td>No</td><td><em>switch present</em></td></tr><tr><td><code>light</code></td><td>true</td><td>No</td><td>No</td><td>force light only</td></tr><tr><td></td><td>false</td><td>Yes</td><td>No</td><td><em>switch present</em></td></tr></tbody></table><hr><h3id=archives-layout>Archives Layout<ahiddenclass=anchoraria-hidden=truehref=#archives-layout>#</a></h3><p>Create a page with <code>archive.md</code> in <code>content</code> directory with following content</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-shelldata-lang=shell><spanclass=line><spanclass=cl>.
</span></span></code></pre></div><p>and add the following to it</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span></code></pre></div><p><strong>Note:</strong> Archives Layout does not support Multilingual Month Translations.</p><p>ex: <ahref=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md>archives.md</a></p><hr><h3id=regular-mode-default-mode>Regular Mode (default-mode)<ahiddenclass=anchoraria-hidden=truehref=#regular-mode-default-mode>#</a></h3><p><imgloading=lazysrc=images/regular.jpgalt=regular></p><hr><h3id=home-info-mode>Home-Info Mode<ahiddenclass=anchoraria-hidden=truehref=#home-info-mode>#</a></h3><p><imgloading=lazysrc=images/homeinfo.jpgalt=homeinfo></p><p>Use 1st entry as some Information</p><p>add following to config file</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>Title</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>Hi there wave</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>Content</span><spanclass=p>:</span><spanclass=w></span><spanclass=l>Can be Info, links, about...</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=profile-mode>Profile Mode<ahiddenclass=anchoraria-hidden=truehref=#profile-mode>#</a></h3><p><imgloading=lazysrc=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/posts/papermod/papermod-features/images/profile.jpgalt=profile></p><p>Shows Index/Home page as Full Page with Social Links and Image</p><p>add following to config file</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>title</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"<Title>"</span><spanclass=w></span><spanclass=c># optional default will be site title</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>subtitle</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"This is subtitle"</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>imageTitle</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"<title of image as alt>"</span><spanclass=w></span><spanclass=c># optional</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=search-page>Search Page<ahiddenclass=anchoraria-hidden=truehref=#search-page>#</a></h3><p>PaperMod uses <ahref=https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds>Fuse.js Basic</a> for search functionality</p><p>Add the following to site config, <code>config.yml</code></p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>outputs</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span>- <spanclass=l>JSON</span><spanclass=w></span><spanclass=c># is necessary</span><spanclass=w>
</span></span></span></code></pre></div><p>Create a page with <code>search.md</code> in <code>content</code> directory with following content</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>title</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"Search"</span><spanclass=w></span><spanclass=c># in any language you want</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>layout</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"search"</span><spanclass=w></span><spanclass=c># is necessary</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># description: "Description for Search"</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>placeholder</span><spanclass=p>:</span><spanclass=w></span><spanclass=s2>"placeholder text in search input box"</span><spanclass=w>
</span></span></span></code></pre></div><p>To hide a particular page from being searched, add it in post’s frontmatter</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span></code></pre></div><p>ex: <ahref=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md>search.md</a></p><blockquote><p>Search Page also has Key bindings:</p><ul><li>Arrow keys to move up/down the list</li><li>Enter key (return) or Right Arrow key to go to the highlighted page</li><li>Escape key to clear searchbox and results</li></ul></blockquote><p>For Multilingual use <code>search.<lang>.md</code> ex. <code>search.es.md</code>.</p><p><strong>Note:</strong> Search will work only on current language, user is currently on !</p><p><strong>Customizing Fusejs Options</strong></p><p>Refer <ahref=https://fusejs.io/api/options.html>https://fusejs.io/api/options.html</a> for Options, Add those as shown below.</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=c># can also paste direct link from external site</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>relative</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>false</span><spanclass=w></span><spanclass=c># To use relative path for cover image, used in hugo Page-bundles</span><spanclass=w>
</span></span></span></code></pre></div><p>When you include images in the <ahref=https://gohugo.io/content-management/page-bundles/>Page Bundle</a>, multiple sizes of the image will automatically be provided using the HTML5 <code>srcset</code> field.</p><p>To reduce generation time and size of the site, you can disable this feature using</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><p>To enable hyperlinks to the full image size on post pages, use</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=share-buttons-on-post>Share Buttons on post<ahiddenclass=anchoraria-hidden=truehref=#share-buttons-on-post>#</a></h3><p>Displays Share Buttons at Bottom of each post</p><p>to show share buttons add</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=show-post-reading-time>Show post reading time<ahiddenclass=anchoraria-hidden=truehref=#show-post-reading-time>#</a></h3><p>Displays Reading Time (the estimated time, in minutes, it takes to read the content.)</p><p>To show reading time add</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>Params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=show-table-of-contents-toc-on-blog-post>Show Table of Contents (Toc) on blog post<ahiddenclass=anchoraria-hidden=truehref=#show-table-of-contents-toc-on-blog-post>#</a></h3><p>Displays ToC on blog-pages</p><p>To show ToC add following to page-variables</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>ShowToc</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w>
</span></span></span></code></pre></div><p>To keep Toc Open <strong>by default</strong> on a post add following to page-variables:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>TocOpen</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=breadcrumb-navigation>BreadCrumb Navigation<ahiddenclass=anchoraria-hidden=truehref=#breadcrumb-navigation>#</a></h3><p>Adds BreadCrumb Navigation above Post’s Title to show subsections and Navigation to Home</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><p>Can be diabled for particular page’s front-matter</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=edit-link-for-posts>Edit Link for Posts<ahiddenclass=anchoraria-hidden=truehref=#edit-link-for-posts>#</a></h3><p>Add a button to suggest changes by using the file path of the post to link to a edit destination.</p><p>For site config use:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>Params</span><spanclass=p>:</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>appendFilePath</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># to append file path to Edit link</span><spanclass=w>
</span></span></span></code></pre></div><p>Can be modified for individual pages</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span><spanclass=line><spanclass=cl><spanclass=w></span><spanclass=nt>appendFilePath</span><spanclass=p>:</span><spanclass=w></span><spanclass=kc>true</span><spanclass=w></span><spanclass=c># to append file path to Edit link</span><spanclass=w>
<ahref=https://github.com/>https://github.com/</a><path_to_repo>/content/posts/post-name.md</p><table><thead><tr><th>Parameter</th><th>Required</th><th>Default Value</th></tr></thead><tbody><tr><td>editPost.URL</td><td>true</td><td>-</td></tr><tr><td>editPost.appendFilePath</td><td>false</td><td>false</td></tr><tr><td>editPost.Text</td><td>false</td><td>“Edit”</td></tr></tbody></table><p>Since the link generated is a regular HTML anchor tag <code><a href=...></code>, you can
<code>URL: "mailto://mail@example.com?subject=Suggesting changes for "</code></p><hr><h3id=other-posts-suggestion-below-a-post>Other Posts suggestion below a post<ahiddenclass=anchoraria-hidden=truehref=#other-posts-suggestion-below-a-post>#</a></h3><p>Adds a Previous / Next post suggestion under a single post</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=code-copy-button>Code Copy Button<ahiddenclass=anchoraria-hidden=truehref=#code-copy-button>#</a></h3><p>Adds a <code>copy</code> button in code block to copy the code it contains</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=multiple-authors>Multiple Authors<ahiddenclass=anchoraria-hidden=truehref=#multiple-authors>#</a></h3><p>To Use multiple authors for a post, in post-variables:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nn>---</span><spanclass=w>
</span></span></span></code></pre></div><p>To use Multiple Authors Site-wide, in <code>config.yml</code>:</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><hr><h3id=comments>Comments<ahiddenclass=anchoraria-hidden=truehref=#comments>#</a></h3><p>to add comments, create a html file</p><p><code>layouts/partials/comments.html</code></p><p>and paste code provided by your comments provider</p><p>also in config add this</p><divclass=highlight><pretabindex=0class=chroma><codeclass=language-ymldata-lang=yml><spanclass=line><spanclass=cl><spanclass=nt>params</span><spanclass=p>:</span><spanclass=w>
</span></span></span></code></pre></div><p>read more about this <ahref=https://gohugo.io/content-management/comments/>hugo-comments</a></p><hr><h3id=accesskeys>AccessKeys<ahiddenclass=anchoraria-hidden=truehref=#accesskeys>#</a></h3><divclass=highlight><pretabindex=0class=chroma><codeclass=language-textdata-lang=text><spanclass=line><spanclass=cl>c - ToC Open/Close
</span></span><spanclass=line><spanclass=cl>g - Go To Top
</span></span><spanclass=line><spanclass=cl>h - Home (according to current lang)
</span></span><spanclass=line><spanclass=cl>/ - Jumps to search page if in menu
</span></span></code></pre></div><p><ahref=https://www.w3schools.com/tags/att_global_accesskey.asp>What’s AccessKeys ?</a></p><hr><h3id=enhanced-seo>Enhanced SEO<ahiddenclass=anchoraria-hidden=truehref=#enhanced-seo>#</a></h3><p><strong>Enabled only when <code>env: production</code></strong></p><ul><li><ahref="https://support.google.com/webmasters/answer/7506797?hl=en">Rich Results/Snippets Support</a></li></ul><h4id=twitter-cards-support>Twitter Cards Support<ahiddenclass=anchoraria-hidden=truehref=#twitter-cards-support>#</a></h4><ul><li>The Twitter Cards metadata, except <code>twitter:image</code> should not require
you should already have (for instance the page title and description).</li><li>The <code>twitter:image</code> uses the <ahref=#post-cover-image>Post Cover Image</a>, if present.</li><li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.<divclass=highlight><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>images</span><spanclass=p>:</span><spanclass=w>
<code>cover</code> or <code>thumbnail</code> in the name.</li></ul><h4id=opengraph-support>OpenGraph support<ahiddenclass=anchoraria-hidden=truehref=#opengraph-support>#</a></h4><ul><li>The OpenGraph metadata, except <code>og:image</code> should not require
you should already have (for instance the page title and description).</li><li>The <code>og:image</code> uses the <ahref=#post-cover-image>Post Cover Image</a>, if present.</li><li>In the absence of a cover images, the first image from the <code>images</code>
frontmatter (a list) is used.<divclass=highlight><pretabindex=0class=chroma><codeclass=language-yamldata-lang=yaml><spanclass=line><spanclass=cl><spanclass=nt>images</span><spanclass=p>:</span><spanclass=w>
<code>cover</code> or <code>thumbnail</code> in the name.</li><li>For pages, you can also add audio (using frontmatter <code>audio: filename.ext</code>) and/or
