hugo-theme-wondermod/posts/papermod/papermod-features/index.html

156 lines
106 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>Features | PaperMod</title><meta name=keywords content="PaperMod"><meta name=description content="Learn About All Features in PaperMod"><meta name=author content="Aditya Telange"><link rel=canonical href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/><link crossorigin=anonymous href=/hugo-PaperMod/assets/css/stylesheet.d7fb4cbf980fe688a21621b06a795933c4e6bb2d4070ec940667af1715d84af2.css integrity="sha256-1/tMv5gP5oiiFiGwanlZM8Tmuy1AcOyUBmevFxXYSvI=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/hugo-PaperMod/assets/js/highlight.f413e19d0714851f6474e7ee9632408e58ac146fbdbe62747134bea2fa3415e0.js integrity="sha256-9BPhnQcUhR9kdOfuljJAjlisFG+9vmJ0cTS+ovo0FeA=" onload=hljs.initHighlightingOnLoad()></script>
<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"><link rel=alternate hreflang=en href=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:0 0}.list:not(.dark)::-webkit-scrollbar-thumb{border-color:var(--theme)}}</style></noscript><meta property="og:title" content="Features"><meta property="og:description" content="Learn About All Features in PaperMod"><meta property="og:type" content="article"><meta property="og:url" content="https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/"><meta property="og:image" content="https://adityatelange.github.io/hugo-PaperMod/papermod-cover.png"><meta property="article:section" content="posts"><meta property="article:published_time" content="2021-01-20T00:00:00+00:00"><meta property="article:modified_time" content="2021-01-20T00:00:00+00:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://adityatelange.github.io/hugo-PaperMod/papermod-cover.png"><meta name=twitter:title content="Features"><meta name=twitter:description content="Learn About All Features in PaperMod"><script type=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><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"Features","name":"Features","description":"Learn About All Features in PaperMod","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.\nYou can find any YML to TOML converters if necessary.\nAssets (js/css) The following is enabled by default\nminification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/intergity check. Default Theme light/dark/auto params: # defaultTheme: light # defaultTheme: dark defaultTheme: auto # to switch between dark or light according to browser theme Theme Switch Toggle (enabled by default) Shows icon besides title of page to change theme\nTo disable it :\ndisableThemeToggle: true You can refer following table for better understanding\ndefaultTheme disableThemeToggle checks local storage? checks system theme? Info auto true No Yes only system theme false Yes (if not-\u003e2) Yes (2) switch present dark true No No force dark only false Yes No switch present light true No No force light only false Yes No switch present Archives Layout Create a page with archive.md in content directory with following content\n. config.yml content/ archives.md \u003c--- Create archive.md here posts/ static/ themes/ PaperMod/ and add t
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># defaultTheme: light</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># defaultTheme: dark</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>defaultTheme</span><span class=p>:</span><span class=w> </span><span class=l>auto</span><span class=w> </span><span class=c># to switch between dark or light according to browser theme</span><span class=w>
</span></span></span></code></pre></div></details><hr><h3 id=theme-switch-toggle-enabled-by-default>Theme Switch Toggle (enabled by default)<a hidden class=anchor aria-hidden=true href=#theme-switch-toggle-enabled-by-default>#</a></h3><p>Shows icon besides title of page to change theme</p><p>To disable it :</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>disableThemeToggle</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><p>You can refer following table for better understanding&mldr;</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><h3 id=archives-layout>Archives Layout<a hidden class=anchor aria-hidden=true href=#archives-layout>#</a></h3><p>Create a page with <code>archive.md</code> in <code>content</code> directory with following content</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>├── config.yml
</span></span><span class=line><span class=cl>├── content/
</span></span><span class=line><span class=cl>│ ├── archives.md &lt;--- Create archive.md here
</span></span><span class=line><span class=cl>│ └── posts/
</span></span><span class=line><span class=cl>├── static/
</span></span><span class=line><span class=cl>└── themes/
</span></span><span class=line><span class=cl> └── PaperMod/
</span></span></code></pre></div><p>and add the following to it</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Archive&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>layout</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;archives&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;/archives/&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=l>archives</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
</span></span></span></code></pre></div><p><strong>Note:</strong> Archives Layout does not support Multilingual Month Translations.</p><p>ex: <a href=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md>archives.md</a></p><hr><h3 id=regular-mode-default-mode>Regular Mode (default-mode)<a hidden class=anchor aria-hidden=true href=#regular-mode-default-mode>#</a></h3><p><img loading=lazy src=images/regular.jpg alt=regular></p><hr><h3 id=home-info-mode>Home-Info Mode<a hidden class=anchor aria-hidden=true href=#home-info-mode>#</a></h3><p><img loading=lazy src=images/homeinfo.jpg alt=homeinfo></p><p>Use 1st entry as some Information</p><p>add following to config file</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>homeInfoParams</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Title</span><span class=p>:</span><span class=w> </span><span class=l>Hi there wave</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Content</span><span class=p>:</span><span class=w> </span><span class=l>Can be Info, links, about...</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>socialIcons</span><span class=p>:</span><span class=w> </span><span class=c># optional</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;platform&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;link&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;platform 2&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;link2&gt;&#34;</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=profile-mode>Profile Mode<a hidden class=anchor aria-hidden=true href=#profile-mode>#</a></h3><p><img loading=lazy src=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/posts/papermod/papermod-features/images/profile.jpg alt=profile></p><p>Shows Index/Home page as Full Page with Social Links and Image</p><p>add following to config file</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>profileMode</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>enabled</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;Title&gt;&#34;</span><span class=w> </span><span class=c># optional default will be site title</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>subtitle</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;This is subtitle&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageUrl</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;image link&gt;&#34;</span><span class=w> </span><span class=c># optional</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageTitle</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;title of image as alt&gt;&#34;</span><span class=w> </span><span class=c># optional</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageWidth</span><span class=p>:</span><span class=w> </span><span class=m>120</span><span class=w> </span><span class=c># custom size</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>imageHeight</span><span class=p>:</span><span class=w> </span><span class=m>120</span><span class=w> </span><span class=c># custom size</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>buttons</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>Archive</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;/archive&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=l>Github</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;https://github.com/&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>socialIcons</span><span class=p>:</span><span class=w> </span><span class=c># optional</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;platform&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;link&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=nt>name</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;platform 2&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>url</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;link2&gt;&#34;</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=search-page>Search Page<a hidden class=anchor aria-hidden=true href=#search-page>#</a></h3><p>PaperMod uses <a href=https://fusejs.io/getting-started/different-builds.html#explanation-of-different-builds>Fuse.js Basic</a> for seach functionality</p><p>Add the following to site config, <code>config.yml</code></p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>outputs</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>home</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>HTML</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>RSS</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>JSON</span><span class=w> </span><span class=c># is necessary</span><span class=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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>title</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Search&#34;</span><span class=w> </span><span class=c># in any language you want</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>layout</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;search&#34;</span><span class=w> </span><span class=c># is necessary</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=c># url: &#34;/archive&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=c># description: &#34;Description for Search&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>summary</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;search&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>placeholder</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;placeholder text in search input box&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
</span></span></span></code></pre></div><p>To hide a particular page from being searched, add it in post&rsquo;s fron&rsquo;t matter</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>searchHidden</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><p>ex: <a href=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 highlighted page</li><li>Escape key to clear searchbox and results</li></ul></blockquote><p>For Multilingual use <code>search.&lt;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 <a href=https://fusejs.io/api/options.html>https://fusejs.io/api/options.html</a> for Options, Add those as shown below.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>fuseOpts</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>isCaseSensitive</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>shouldSort</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>location</span><span class=p>:</span><span class=w> </span><span class=m>0</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>distance</span><span class=p>:</span><span class=w> </span><span class=m>1000</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>threshold</span><span class=p>:</span><span class=w> </span><span class=m>0.4</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>minMatchCharLength</span><span class=p>:</span><span class=w> </span><span class=m>0</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>keys</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;title&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;permalink&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;summary&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;content&#34;</span><span class=p>]</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=draft-page-indication>Draft Page indication<a hidden class=anchor aria-hidden=true href=#draft-page-indication>#</a></h3><p>adds <code>[draft]</code> mark to indicate draft pages.</p><hr><h3 id=post-cover-image>Post Cover Image<a hidden class=anchor aria-hidden=true href=#post-cover-image>#</a></h3><p>In post&rsquo;s page-variables add :</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>cover</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>image</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;image path/url&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># can also paste direct link from external site</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=c># ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>alt</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;alt text&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>caption</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;&lt;text&gt;&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>relative</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w> </span><span class=c># To use relative path for cover image, used in hugo Page-bundles</span><span class=w>
</span></span></span></code></pre></div><p>When you include images in the <a href=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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>cover</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>responsiveImages</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
</span></span></span></code></pre></div><p>To enable hyperlinks to the full image size on post pages, use</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>cover</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>linkFullImages</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=share-buttons-on-post>Share Buttons on post<a hidden class=anchor aria-hidden=true href=#share-buttons-on-post>#</a></h3><p>Displays Share Buttons at Bottom of each post</p><p>to show share buttons add</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowShareButtons</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=show-post-reading-time>Show post reading time<a hidden class=anchor aria-hidden=true href=#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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>Params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowReadingTime</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=show-table-of-contents-toc-on-blog-post>Show Table of Contents (Toc) on blog post<a hidden class=anchor aria-hidden=true href=#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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>ShowToc</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>TocOpen</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=breadcrumb-navigation>BreadCrumb Navigation<a hidden class=anchor aria-hidden=true href=#breadcrumb-navigation>#</a></h3><p>Adds BreadCrumb Navigation above Post&rsquo;s Title to show subsections and Navigation to Home</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowBreadCrumbs</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><p>Can be diabled for particular page&rsquo;s front-matter</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>ShowBreadCrumbs</span><span class=p>:</span><span class=w> </span><span class=kc>false</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=edit-link-for-posts>Edit Link for Posts<a hidden class=anchor aria-hidden=true href=#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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>Params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>editPost</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>URL</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Text</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Suggest Changes&#34;</span><span class=w> </span><span class=c># edit text</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>appendFilePath</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span><span class=c># to append file path to Edit link</span><span class=w>
</span></span></span></code></pre></div><p>Can be modified for individual pages</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>editPost</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>URL</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;https://github.com/&lt;path_to_repo&gt;/content&#34;</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>Text</span><span class=p>:</span><span class=w> </span><span class=s2>&#34;Suggest Changes&#34;</span><span class=w> </span><span class=c># edit text</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>appendFilePath</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w> </span><span class=c># to append file path to Edit link</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
</span></span></span></code></pre></div><p>The example above would yield the following link for the post file <code>posts/post-name.md</code>:
<a href=https://github.com/>https://github.com/</a>&lt;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>&ldquo;Edit&rdquo;</td></tr></tbody></table><p>Since the link generated is a regular HTML anchor tag <code>&lt;a href=...></code>, you can
also use other URL schemas like <code>mailto://</code>, e.g.
<code>URL: "mailto://mail@example.com?subject=Suggesting changes for "</code></p><hr><h3 id=other-posts-suggestion-below-a-post>Other Posts suggestion below a post<a hidden class=anchor aria-hidden=true href=#other-posts-suggestion-below-a-post>#</a></h3><p>Adds a Previous / Next post suggestion under a single post</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowPostNavLinks</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=code-copy-button>Code Copy Button<a hidden class=anchor aria-hidden=true href=#code-copy-button>#</a></h3><p>Adds a <code>copy</code> button in code block to copy the code it contains</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>ShowCodeCopyButtons</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=multiple-authors>Multiple Authors<a hidden class=anchor aria-hidden=true href=#multiple-authors>#</a></h3><p>To Use multiple authors for a post, in post-variables:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nn>---</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nt>author</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;Me&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;You&#34;</span><span class=p>]</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w></span><span class=nn>---</span><span class=w>
</span></span></span></code></pre></div><p>To use Multiple Authors Site-wide, in <code>config.yml</code>:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>author</span><span class=p>:</span><span class=w> </span><span class=p>[</span><span class=s2>&#34;Me&#34;</span><span class=p>,</span><span class=w> </span><span class=s2>&#34;You&#34;</span><span class=p>]</span><span class=w>
</span></span></span></code></pre></div><hr><h3 id=comments>Comments<a hidden class=anchor aria-hidden=true href=#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><div class=highlight><pre tabindex=0 class=chroma><code class=language-yml data-lang=yml><span class=line><span class=cl><span class=nt>params</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span><span class=nt>comments</span><span class=p>:</span><span class=w> </span><span class=kc>true</span><span class=w>
</span></span></span></code></pre></div><p>read more about this <a href=https://gohugo.io/content-management/comments/>hugo-comments</a></p><hr><h3 id=accesskeys>AccessKeys<a hidden class=anchor aria-hidden=true href=#accesskeys>#</a></h3><div class=highlight><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>c - ToC Open/Close
</span></span><span class=line><span class=cl>g - Go To Top
</span></span><span class=line><span class=cl>h - Home (according to current lang)
</span></span><span class=line><span class=cl>t - Theme toggle
</span></span><span class=line><span class=cl>/ - Jumps to search page if in menu
</span></span></code></pre></div><p><a href=https://www.w3schools.com/tags/att_global_accesskey.asp>What&rsquo;s AccessKeys ?</a></p><hr><h3 id=enhanced-seo>Enhanced SEO<a hidden class=anchor aria-hidden=true href=#enhanced-seo>#</a></h3><p><strong>Enabled only when <code>env: production</code></strong></p><ul><li><a href="https://support.google.com/webmasters/answer/7506797?hl=en">Rich Results/Snippets Support</a></li></ul><h4 id=twitter-cards-support>Twitter Cards Support<a hidden class=anchor aria-hidden=true href=#twitter-cards-support>#</a></h4><ul><li>The Twitter Cards metadata, except <code>twitter:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li><li>The <code>twitter:image</code> uses the <a href=#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.<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>images</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>image_01.png</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>image_02.png</span><span class=w>
</span></span></span></code></pre></div></li><li>Finally, if neither of those are provided, <code>twitter:image</code> comes from the first
<a href=https://gohugo.io/content-management/page-bundles/>Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<code>cover</code> or <code>thumbnail</code> in the name.</li></ul><h4 id=opengraph-support>OpenGraph support<a hidden class=anchor aria-hidden=true href=#opengraph-support>#</a></h4><ul><li>The OpenGraph metadata, except <code>og:image</code> should not require
additional configuration, since it is generated from metadata that
you should already have (for instance the page title and description).</li><li>The <code>og:image</code> uses the <a href=#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.<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>images</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>image_01.png</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>image_02.png</span><span class=w>
</span></span></span></code></pre></div></li><li>Finally, if neither of those are provided, <code>og:image</code> comes from the first
<a href=https://gohugo.io/content-management/page-bundles/>Page Bundle</a>
image with <code>feature</code> in the name, with a fallback to the first image with
<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
videos.<div class=highlight><pre tabindex=0 class=chroma><code class=language-yaml data-lang=yaml><span class=line><span class=cl><span class=nt>videos</span><span class=p>:</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>filename01.mov</span><span class=w>
</span></span></span><span class=line><span class=cl><span class=w> </span>- <span class=l>filename02.avi</span><span class=w>
</span></span></span></code></pre></div></li></ul><hr><h3 id=multilingual-support>Multilingual Support<a hidden class=anchor aria-hidden=true href=#multilingual-support>#</a></h3><hr><h3 id=misc>Misc<a hidden class=anchor aria-hidden=true href=#misc>#</a></h3><h4 id=scroll-bar-themed-by-default>Scroll-Bar themed (by default)<a hidden class=anchor aria-hidden=true href=#scroll-bar-themed-by-default>#</a></h4><h4 id=smooth-scroll-between-in-page-links-by-default>Smooth Scroll between in-page links (by default)<a hidden class=anchor aria-hidden=true href=#smooth-scroll-between-in-page-links-by-default>#</a></h4><h4 id=scroll-to-top-button-by-default>Scroll-to-Top Button (by default)<a hidden class=anchor aria-hidden=true href=#scroll-to-top-button-by-default>#</a></h4><div class=highlight><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>Displays a Scroll-to-Top button in right-bottom corner
</span></span></code></pre></div><h4 id=google-analytics-integration>Google Analytics integration<a hidden class=anchor aria-hidden=true href=#google-analytics-integration>#</a></h4><h4 id=syntax-highlighting>Syntax highlighting<a hidden class=anchor aria-hidden=true href=#syntax-highlighting>#</a></h4><h4 id=rss-feeds>RSS feeds<a hidden class=anchor aria-hidden=true href=#rss-feeds>#</a></h4></div><footer class=post-footer><ul class=post-tags><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/papermod/>PaperMod</a></li></ul><nav class=paginav><a class=prev href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-installation/><span class=title>« Prev</span><br><span>Installation | Update</span></a>
<a class=next href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/><span class=title>Next »</span><br><span>FAQs</span></a></nav><div class=share-buttons><a target=_blank rel="noopener noreferrer" aria-label="share Features on twitter" href="https://twitter.com/intent/tweet/?text=Features&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-features%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 512H62.554c-34.524.0-62.554-28.03-62.554-62.554V62.554c0-34.524 28.029-62.554 62.554-62.554h386.892zM195.519 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 Features on linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-features%2f&title=Features&summary=Features&source=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-features%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 512H62.554c-34.524.0-62.554-28.03-62.554-62.554V62.554c0-34.524 28.029-62.554 62.554-62.554h386.892zM160.461 423.278V197.561h-75.04v225.717h75.04zm270.539.0V293.839c0-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.02V297.222c0-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.768H431zM123.448 88.722C97.774 88.722 81 105.601 81 127.724c0 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 Features on reddit" href="https://reddit.com/submit?url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-features%2f&title=Features"><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 512H62.554c-34.524.0-62.554-28.03-62.554-62.554V62.554c0-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.001zM326.526 373.831c-20.27 20.241-59.115 21.816-70.534 21.816-11.428.0-50.277-1.575-70.522-21.82-3.007-3.008-3.007-7.882.0-10.889 3.003-2.999 7.882-3.003 10.885.0 12.777 12.781 40.11 17.317 59.637 17.317 19.522.0 46.86-4.536 59.657-17.321 3.016-2.999 7.886-2.995 10.885.008 3.008 3.011 3.003 7.882-.008 10.889zm-5.23-48.781c-16.373.0-29.701-13.324-29.701-29.698.0-16.381 13.328-29.714 29.701-2
<span>Powered by
<a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
<a href=https://github.com/adityatelange/hugo-PaperMod/ rel=noopener target=_blank>PaperMod</a></span></footer><a href=#top aria-label="go to top" title="Go to Top (Alt + G)" class=top-link id=top-link accesskey=g><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6" fill="currentcolor"><path d="M12 6H0l6-6z"/></svg></a><script>let menu=document.getElementById('menu');menu&&(menu.scrollLeft=localStorage.getItem("menu-scroll-position"),menu.onscroll=function(){localStorage.setItem("menu-scroll-position",menu.scrollLeft)}),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(t){t.preventDefault();var e=this.getAttribute("href").substr(1);window.matchMedia('(prefers-reduced-motion: reduce)').matches?document.querySelector(`[id='${decodeURIComponent(e)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(e)}']`).scrollIntoView({behavior:"smooth"}),e==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${e}`)})})</script><script>var mybutton=document.getElementById("top-link");window.onscroll=function(){document.body.scrollTop>800||document.documentElement.scrollTop>800?(mybutton.style.visibility="visible",mybutton.style.opacity="1"):(mybutton.style.visibility="hidden",mybutton.style.opacity="0")}</script><script>document.getElementById("theme-toggle").addEventListener("click",()=>{document.body.className.includes("dark")?(document.body.classList.remove('dark'),localStorage.setItem("pref-theme",'light')):(document.body.classList.add('dark'),localStorage.setItem("pref-theme",'dark'))})</script><script>document.querySelectorAll('pre > code').forEach(t=>{const n=t.parentNode.parentNode,e=document.createElement('button');e.classList.add('copy-code'),e.innerHTML='copy';function s(){e.innerHTML='copied!',setTimeout(()=>{e.innerHTML='copy'},2e3)}e.addEventListener('click',o=>{if('clipboard'in navigator){navigator.clipboard.writeText(t.textContent),s();return}const e=document.createRange();e.selectNodeContents(t);const n=window.getSelection();n.removeAllRanges(),n.addRange(e);try{document.execCommand('copy'),s()}catch(e){}n.removeRange(e)}),n.classList.contains("highlight")?n.appendChild(e):n.parentNode.firstChild==n||(t.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?t.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(e):t.parentNode.appendChild(e))})</script></body></html>