hugo-WonderMod/posts/papermod/papermod-features/index.html

57 lines
24 KiB
HTML
Raw Normal View History

<!doctype html><html lang=en><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"><title>Papermod - Features - PaperMod</title><meta name=description content="Assets (js/css) The following is enabled by default
minification - 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"><meta name=keywords content="/"><meta name=author content="Aditya Telange"><link rel=canonical href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-features/><link href=https://adityatelange.github.io/hugo-PaperMod/assets/css/stylesheet.min.17993db319ec7e8f0f1cc1fa992a916d01e3c8836ebbfd6f6876d9bbe8f73603.css integrity="sha256-F5k9sxnsfo8PHMH6mSqRbQHjyINuu/1vaHbZu+j3NgM=" rel="preload stylesheet" as=style><link rel=apple-touch-icon href=https://adityatelange.github.io/hugo-PaperMod/apple-touch-icon.png><link rel=icon href=https://adityatelange.github.io/hugo-PaperMod/favicon.ico><meta name=generator content="Hugo 0.76.2"></head><body class=single id=top><script>if(localStorage.getItem("pref-theme")==="dark"){document.body.classList.add('dark');}else if(localStorage.getItem("pref-theme")==="light"){document.body.classList.remove('dark')}else{if(window.matchMedia('(prefers-color-scheme: dark)').matches){document.body.classList.add('dark');}}</script><noscript><style type=text/css>.theme-toggle,.top-link{display:none}</style></noscript><header class=header><nav class=nav><p class=logo><a href=https://adityatelange.github.io/hugo-PaperMod/>PaperMod</a>
<span class=theme-toggle><a id=theme-toggle><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></p><ul class=menu id=menu onscroll=menu_on_scroll()><li><a href=https://adityatelange.github.io/hugo-PaperMod/archives/><span>Archives</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 - Features</h1><div class=post-meta><time>September 16, 2020</time>&nbsp;·&nbsp;2 min&nbsp;·&nbsp;Aditya Telange</div></header><div class=toc><details open><summary><div class=details>Table of Contents</div></summary><blockquote><ul><li><a href=#assets-jscss>Assets (js/css)</a></li><li><a href=#default-theme-lightdarkauto>Default Theme light/dark/auto</a></li><li><a href=#theme-switch-toggle-enabled-by-default>Theme Switch Toggle (enabled by default)</a></li><li><a href=#archives-layout>Archives Layout</a></li><li><a href=#home-info-mode>Home-Info Mode</a></li><li><a href=#profile-mode>Profile Mode</a></li><li><a href=#draft-page-indication>Draft Page indication</a></li><li><a href=#post-cover-image>Post Cover Image</a></li><li><a href=#share-buttons-on-post>Share Buttons on post</a></li><li><a href=#show-post-reading-time>Show post reading time</a></li><li><a href=#show-table-of-contents-toc-on-blog-post>Show Table of Contents (Toc) on blog post</a></li><li><a href=#comments>Comments</a></li><li><a href=#misc>Misc</a><ul><li><a href=#scroll-bar-themed-by-default>Scroll-Bar themed (by default)</a></li><li><a href=#smooth-scroll-between-in-page-links-by-default>Smooth Scroll between in-page links (by default)</a></li><li><a href=#scroll-to-top-button-by-default>Scroll-to-Top Button (by default)</a></li><li><a href=#google-analytics-integration>Google Analytics integration</a></li><li><a href=#open-graph-support>Open-Graph support</a></li><li><a href=#twitter-cards-support>Twitter Cards Support</a></li><li><a href=#syntax-highlighting>Syntax highlighting</a></li><li><a href=#twitter-cards-and-opengraph-tags-support>Twitter cards and opengraph tags support</a></li><li><a href=#rss-feeds>RSS feeds</a></li><li><a href=#multilingual-support>Multilingual Support</a></li></ul></li></ul></blockquote></details></div><div class=post-content><h3 id=assets-jscss>Assets (js/css)</h3><p>The following is enabled by default</p><ul><li><a href=https://gohugo.io/hugo-pipes/minification/>minification</a> - makes the assets size smallest as possible.</li><li><a href=https://gohugo.io/hugo-pipes/bundling/>bundling</a> - bundles all the styles in one single asset</li><li><a href=https://gohugo.io/hugo-pipes/fingerprint/>fingerprint/intergity</a> check.</li></ul><hr><h3 id=default-theme-lightdarkauto>Default Theme light/dark/auto</h3><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:#75715e># defaultTheme: light</span>
<span style=color:#75715e># defaultTheme: dark</span>
<span style=color:#f92672>defaultTheme</span>: <span style=color:#ae81ff>auto</span> <span style=color:#75715e># to switch between dark or light according to browser theme</span>
</code></pre></div><hr><h3 id=theme-switch-toggle-enabled-by-default>Theme Switch Toggle (enabled by default)</h3><p>Shows icon besides title of page to change theme</p><p>To disable 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>disableThemeToggle </span>: <span style=color:#66d9ef>true</span>
</code></pre></div><hr><h3 id=archives-layout>Archives Layout</h3><p>Create a page with <code>archive.md</code>
Add vars below to its page-variables</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>layout</span>: <span style=color:#e6db74>&#34;archives&#34;</span>
</code></pre></div><p>ex: <a href=https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md>archives.md</a></p><hr><h3 id=home-info-mode>Home-Info Mode</h3><p>Use 1st entry as some Information</p><p>add following to config file</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>homeInfoParams</span>:
<span style=color:#f92672>Title</span>: <span style=color:#ae81ff>Hi there wave</span>
<span style=color:#f92672>Content</span>: <span style=color:#ae81ff>Can be Info, links, about...</span>
<span style=color:#f92672>socialIcons</span>: <span style=color:#75715e># optional</span>
- <span style=color:#f92672>name</span>: <span style=color:#e6db74>&#34;&lt;platform&gt;&#34;</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;&lt;link&gt;&#34;</span>
- <span style=color:#f92672>name</span>: <span style=color:#e6db74>&#34;&lt;platform 2&gt;&#34;</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;&lt;link2&gt;&#34;</span>
</code></pre></div><p>ex. <a href=https://github.com/adityatelange/hugo-PaperMod/blob/exampleSite/config.toml#L14>here</a></p><p><img src=https://i.ibb.co/zsq6fLr/papermod-homeinfo.png alt></p><hr><h3 id=profile-mode>Profile Mode</h3><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 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>profileMode</span>:
<span style=color:#f92672>enabled</span>: <span style=color:#66d9ef>true</span>
<span style=color:#f92672>title</span>: <span style=color:#e6db74>&#34;&lt;Title&gt;&#34;</span> <span style=color:#75715e># optional default will be site title</span>
<span style=color:#f92672>imageUrl</span>: <span style=color:#e6db74>&#34;&lt;image link&gt;&#34;</span> <span style=color:#75715e># optional</span>
<span style=color:#f92672>imageTitle</span>: <span style=color:#e6db74>&#34;&lt;title of image as alt&gt;&#34;</span> <span style=color:#75715e># optional</span>
<span style=color:#f92672>buttons</span>:
- <span style=color:#f92672>name</span>: <span style=color:#ae81ff>Archive</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;/archive&#34;</span>
- <span style=color:#f92672>name</span>: <span style=color:#ae81ff>Github</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;https://github.com/&#34;</span>
<span style=color:#f92672>socialIcons</span>: <span style=color:#75715e># optional</span>
- <span style=color:#f92672>name</span>: <span style=color:#e6db74>&#34;&lt;platform&gt;&#34;</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;&lt;link&gt;&#34;</span>
- <span style=color:#f92672>name</span>: <span style=color:#e6db74>&#34;&lt;platform 2&gt;&#34;</span>
<span style=color:#f92672>url</span>: <span style=color:#e6db74>&#34;&lt;link2&gt;&#34;</span>
</code></pre></div><p><img src=https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt></p><hr><h3 id=draft-page-indication>Draft Page indication</h3><p>adds <code>[draft]</code> mark to indicate draft pages.</p><hr><h3 id=post-cover-image>Post Cover Image</h3><p>In post&rsquo;s page-variables add :</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>cover</span>:
<span style=color:#f92672>image</span>: <span style=color:#e6db74>&#39;&lt;image path/url&gt;&#39;</span>
<span style=color:#75715e># can also paste direct link from external site</span>
<span style=color:#75715e># ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png</span>
<span style=color:#f92672>alt</span>: <span style=color:#e6db74>&#39;&lt;alt text&gt;&#39;</span>
<span style=color:#f92672>caption</span>: <span style=color:#e6db74>&#39;&lt;text&gt;&#39;</span>
</code></pre></div><hr><h3 id=share-buttons-on-post>Share Buttons on post</h3><p>Displays Share Buttons at Bottom of each post</p><p>to show share buttons add</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>ShowShareButtons</span>: <span style=color:#66d9ef>true</span>
</code></pre></div><hr><h3 id=show-post-reading-time>Show post reading time</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 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>ShowReadingTime</span>: <span style=color:#66d9ef>true</span>
</code></pre></div><hr><h3 id=show-table-of-contents-toc-on-blog-post>Show Table of Contents (Toc) on blog post</h3><p>Displays ToC on blog-pages</p><p>To show ToC add following to page-variables</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>ShowToc</span>: <span style=color:#66d9ef>true</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 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>TocOpen</span>: <span style=color:#66d9ef>true</span>
</code></pre></div><hr><h3 id=comments>Comments</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 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>comments</span>: <span style=color:#66d9ef>true</span>
</code></pre></div><p>read more about this <a href=https://gohugo.io/content-management/comments/>here</a></p><hr><h3 id=misc>Misc</h3><h4 id=scroll-bar-themed-by-default>Scroll-Bar themed (by default)</h4><h4 id=smooth-scroll-between-in-page-links-by-default>Smooth Scroll between in-page links (by default)</h4><h4 id=scroll-to-top-button-by-default>Scroll-to-Top Button (by default)</h4><p>Displays a Scroll-to-Top button in right-bottom corner</p><h4 id=google-analytics-integration>Google Analytics integration</h4><h4 id=open-graph-support>Open-Graph support</h4><h4 id=twitter-cards-support>Twitter Cards Support</h4><h4 id=syntax-highlighting>Syntax highlighting</h4><h4 id=twitter-cards-and-opengraph-tags-support>Twitter cards and opengraph tags support</h4><h4 id=rss-feeds>RSS feeds</h4><h4 id=multilingual-support>Multilingual Support</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><div class=share-buttons><a target=_blank rel="noopener noreferrer" aria-label="share Papermod - Features on twitter" href="https://twitter.com/intent/tweet/?text=Papermod%20-%20Features&url=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 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 - 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=Papermod%20-%20Features&summary=Papermod%20-%20Features&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 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 - Features on reddit" href="https://reddit.com/submit?url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-features%2f&title=Papermod%20-%20Features"><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
<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 href=#top aria-label="go to top" title="Go to Top"><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 src=https://adityatelange.github.io/hugo-PaperMod/assets/js/highlight.min.e7afc2928c0925d65c4732dfebe147014d91299a98e819e4b42f25c4fa68e91c.js integrity="sha256-56/CkowJJdZcRzLf6+FHAU2RKZqY6BnktC8lxPpo6Rw="></script><script>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){e.preventDefault();document.querySelector(this.getAttribute("href")).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";}};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>