mirror of
https://github.com/Wonderfall/hugo-WonderMod.git
synced 2024-11-26 20:41:37 +01:00
95 lines
40 KiB
HTML
95 lines
40 KiB
HTML
<!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>FAQs | PaperMod</title><meta name=keywords content="PaperMod"><meta name=description content="Frequently Asked Questions"><meta name=author content="Aditya Telange"><link rel=canonical href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/><link crossorigin=anonymous href=/hugo-PaperMod/assets/css/stylesheet.min.48a18943c2fc15c38a372b8dde1f5e5dc0bc64fa6cb90f5a817d2f8c76b7f3ae.css integrity="sha256-SKGJQ8L8FcOKNyuN3h9eXcC8ZPpsuQ9agX0vjHa3864=" rel="preload stylesheet" as=style><script defer crossorigin=anonymous src=/hugo-PaperMod/assets/js/highlight.min.7680afc38aa6b15ddf158a4f3780b7b1f7dde7e91d26f073e6229bb7a0793c92.js integrity="sha256-doCvw4qmsV3fFYpPN4C3sffd5+kdJvBz5iKbt6B5PJI=" 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-faq/><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="FAQs"><meta property="og:description" content="Frequently Asked Questions"><meta property="og:type" content="article"><meta property="og:url" content="https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/"><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="FAQs"><meta name=twitter:description content="Frequently Asked Questions"><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":"FAQs","item":"https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/"}]}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"BlogPosting","headline":"FAQs","name":"FAQs","description":"Frequently Asked Questions","keywords":["PaperMod"],"articleBody":"Intro We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read.\n You can find any YML to TOML converters if necessary.\n Override theme template By Hugo’s Lookup Order, you can override any part of a theme that you want. The following is a quick example.\nLet’s say you wish the list was different. All you have to do is copy the list template:\nyour-site/themes/papermod/layouts/_defaults/list.html And paste it under your own layouts folder:\nyour-site/layouts/_defaults/list.html Then you’re free to make any changes you want to the list. When Hugo builds your site, your copy of list.html will be used instead of the theme’s list.html.\n Enable Social-Metadata and SEO These include OpenGraph, Twitter Cards and Schema.\nparams: env: production or set HUGO_ENV as “production” in system env-vars\n Failed to find a valid digest in the ‘integrity’ attribute for resource … ? Read about How Subresource Integrity helps: Subresource_Integrity\nWhy was the asset not loading ? : How_browsers_handle_Subresource_Integrity\nSolution:\nSet the following in config.yml\nparams: assets: disableFingerprinting: true Linked Issues:\n https://stackoverflow.com/questions/65056585/hugo-theme-not-loading https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/ Bundling Custom css with theme’s assets For adding custom css to be bundled inside one minimized css Create folder in yout project directory as\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── assets/ └── css/ └── extended/ All css files inside assets/css/extended will be bundled !\nNote: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended\nLinked Issues:\n Papermod Theme: How to add custom CSS? Custom Head / Footer Custom css/js can be added by way mentioned below.\n.(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── layouts ├── partials │ ├── comments.html │ ├── extend_footer.html Create a html page in directory structure as shown above.\nContents of extend_head.html will be added to head of page.\nand contents of extend_footer.html will be added to bottom of page.\n Add menu to site You can add menu entries which will appear in the header of every page.\nTo do so, add a menu section to your site’s config.yml:\nmenu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 name controls what will be displayed for the menu entry. url sets the URL that the entry points to. weight is used to control the positioning of entries.\nFor more information on menus, see the Hugo wiki page.\n Pin a Post Post can be pinned/ displayed top on the list by adding a weight= var to page-variables\nexample:\n--- title: \"My Important post\" date: 2020-09-15T11:30:03+00:00 weight: 1 --- --- title: \"My 2nd Important post\" date: 2020-09-15T11:30:03+00:00 weight: 2 --- Adding Custom Favicon(s) We support the following paths under /static directory and can be added accordingly.\n favicon.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png safari-pinned-tab.svg Favicon(s) can be generated by Favicon.io\nand can be simply put in /static folder.\n Other way is to add favicon(s) NOT located in /static folder.\nIn site config add the following:\nparams: assets: favicon: \"\" favicon16x16: \"\" favicon32x32: \"\" apple_touch_icon: \"\" safari_pinned_tab: \"\" absolute url means direct links to external resource: ex. https://web.site/someimage.png example:\nparams: assets: favicon: \"/favicon.ico\" favicon16x16: \"/favicon-16x16.png\" favicon32x32: \"/favicon-32x32.png\" apple_touch_icon: \"/apple-touch-icon.png\" safari_pinned_tab: \"/safari-pinned-tab.svg\" Centering image in markdown Add #center after image to center align an image\n When using figure shortcode\nuse align=center to center image with captions\nex.\n{{figure align=center src=\"image.jpg\" }} Using Hugo’s Syntax highlighter “chroma” Disable Highlight.js in site config.yml\nparams: assets: disableHLJS: true Set hugo’s markdown styling in site config.yml\nmarkup: highlight: # anchorLineNos: true codeFences: true guessSyntax: true lineNos: true # noClasses: false style: monokai If you want lineNos: true, the background won’t be proper. This will only work with noClasses: false or pygmentsUseClasses: true. Read Generate Syntax Highlighter CSS\nAdd the following to assets/css/extended/custom.css\n.chroma { background-color: unset; } More Info : Configure Markup - Highlight\n Search not working ? If you are using a CDN to server assets from a different domain, search would break\nWhy? Take a look at fastsearch.js#L35.\nWe fetch the index.json (where the search function looks for the keywords typed) one level up of the website search.min.js is hosted on.\nWe have used this insted of assigning baseURL so as to work with multilingual websites ex. example.com/fr/ and websites being placed under a subdirectory ex. example.com/blog/.\nTo fix for single language websites hosting assets from CDN, this you may override fastsearch.js#L35 and placing appropriate URL as in\nxhr.open(\"GET\", \"https://example.com/index.json\"); References Override a Hugo theme ","wordCount":"785","inLanguage":"en","datePublished":"2021-01-20T00:00:00Z","dateModified":"2021-01-20T00:00:00Z","author":{"@type":"Person","name":"Aditya Telange"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-faq/"},"publisher":{"@type":"Organization","name":"PaperMod","logo":{"@type":"ImageObject","url":"https://adityatelange.github.io/hugo-PaperMod/favicon.ico"}}}</script></head><body id=top><script>localStorage.getItem("pref-theme")==="dark"?document.body.classList.add('dark'):localStorage.getItem("pref-theme")==="light"?document.body.classList.remove('dark'):window.matchMedia('(prefers-color-scheme: dark)').matches&&document.body.classList.add('dark')</script><header class=header><nav class=nav><div class=logo><a href=https://adityatelange.github.io/hugo-PaperMod/ accesskey=h title="PaperMod (Alt + H)">PaperMod</a>
|
||
<span class=logo-switches><button id=theme-toggle accesskey=t title="(Alt + T)"><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></button><ul class=lang-switch><li>|</li><li><a href=https://adityatelange.github.io/hugo-PaperMod/fr/ title=French aria-label=:fr:>🇫🇷</a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/fa/ title=Fa aria-label=Fa>Fa</a></li></ul></span></div><ul id=menu><li><a href=https://adityatelange.github.io/hugo-PaperMod/archives title=Archive><span>Archive</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/categories/ title=Categories><span>Categories</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/search/ title="Search (Alt + /)" accesskey=/><span>Search</span></a></li><li><a href=https://adityatelange.github.io/hugo-PaperMod/tags/ title=Tags><span>Tags</span></a></li></ul></nav></header><main class=main><article class=post-single><header class=post-header><div class=breadcrumbs><a href=https://adityatelange.github.io/hugo-PaperMod/>Home</a> » <a href=https://adityatelange.github.io/hugo-PaperMod/posts/>Posts</a> » <a href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/>PaperMod</a></div><h1 class=post-title>FAQs<sup><span class=entry-isdraft> [draft]</span></sup></h1><div class=post-meta><span title="2021-01-20 00:00:00 +0000 UTC">January 20, 2021</span> · 4 min · Aditya Telange | <a href=https://github.com/adityatelange/hugo-PaperMod/tree/exampleSite/content/posts/papermod/papermod-faq.md rel="noopener noreferrer" target=_blank>Suggest Changes</a></div></header><div class=toc><details><summary accesskey=c title="(Alt + C)"><span class=details>Table of Contents</span></summary><div class=inner><ul><li><a href=#intro aria-label=Intro>Intro</a></li><li><a href=#override-theme-template aria-label="Override theme template">Override theme template</a></li><li><a href=#enable-social-metadata-and-seo aria-label="Enable Social-Metadata and SEO">Enable Social-Metadata and SEO</a></li><li><a href=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-- aria-label="Failed to find a valid digest in the &lsquo;integrity&rsquo; attribute for resource &hellip; ?">Failed to find a valid digest in the ‘integrity’ attribute for resource … ?</a></li><li><a href=#bundling-custom-css-with-themes-assets aria-label="Bundling Custom css with theme&rsquo;s assets">Bundling Custom css with theme’s assets</a></li><li><a href=#custom-head--footer aria-label="Custom Head / Footer">Custom Head / Footer</a></li><li><a href=#add-menu-to-site aria-label="Add menu to site">Add menu to site</a></li><li><a href=#pin-a-post aria-label="Pin a Post">Pin a Post</a></li><li><a href=#adding-custom-favicons aria-label="Adding Custom Favicon(s)">Adding Custom Favicon(s)</a></li><li><a href=#centering-image-in-markdown aria-label="Centering image in markdown">Centering image in markdown</a></li><li><a href=#using-hugos-syntax-highlighter-chroma aria-label="Using Hugo&rsquo;s Syntax highlighter &ldquo;chroma&rdquo;">Using Hugo’s Syntax highlighter “chroma”</a></li><li><a href=#search-not-working- aria-label="Search not working ?">Search not working ?</a></li><li><a href=#references aria-label=References>References</a></li></ul></div></details></div><div class=post-content><h2 id=intro>Intro<a hidden class=anchor aria-hidden=true href=#intro>#</a></h2><ul><li><p><strong>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.</strong></p></li><li><p>You can find any <a href="https://www.google.com/search?q=yml+to+toml">YML to TOML</a> converters if necessary.</p></li></ul><hr><h2 id=override-theme-template>Override theme template<a hidden class=anchor aria-hidden=true href=#override-theme-template>#</a></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><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-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><div class=highlight><pre style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-shell data-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><h2 id=enable-social-metadata-and-seo>Enable Social-Metadata and SEO<a hidden class=anchor aria-hidden=true href=#enable-social-metadata-and-seo>#</a></h2><p>These include OpenGraph, Twitter Cards and Schema.</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>env</span>: <span style=color:#ae81ff>production</span>
|
||
</code></pre></div><p>or set <code>HUGO_ENV</code> as “production” in system env-vars</p><hr><h2 id=failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->Failed to find a valid digest in the ‘integrity’ attribute for resource … ?<a hidden class=anchor aria-hidden=true href=#failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource-->#</a></h2><p>Read about How Subresource Integrity helps: <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity>Subresource_Integrity</a></p><p>Why was the <code>asset</code> not loading ? : <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#How_browsers_handle_Subresource_Integrity>How_browsers_handle_Subresource_Integrity</a></p><p><strong>Solution:</strong></p><p>Set the following in <code>config.yml</code></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>assets</span>:
|
||
<span style=color:#f92672>disableFingerprinting</span>: <span style=color:#66d9ef>true</span>
|
||
</code></pre></div><p>Linked Issues:</p><ul><li><a href=https://stackoverflow.com/questions/65056585/hugo-theme-not-loading>https://stackoverflow.com/questions/65056585/hugo-theme-not-loading</a></li><li><a href=https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource>https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource</a></li><li><a href=https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/>https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/</a></li></ul><hr><h2 id=bundling-custom-css-with-themes-assets>Bundling Custom css with theme’s assets<a hidden class=anchor aria-hidden=true href=#bundling-custom-css-with-themes-assets>#</a></h2><ul><li>For adding custom css to be bundled inside one minimized css</li></ul><p>Create folder in yout project directory as</p><pre><code>.(site root)
|
||
├── config.yml
|
||
├── content/
|
||
├── theme/hugo-PaperMod/
|
||
└── assets/
|
||
└── css/
|
||
└── extended/ <---
|
||
├── custom_css1.css <---
|
||
└── any_name.css <---
|
||
</code></pre><p>All <code>css</code> files inside <code>assets/css/extended</code> will be bundled !</p><p><strong>Note</strong>: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under <code>assets/css/extended</code></p><p>Linked Issues:</p><ul><li><a href=https://discourse.gohugo.io/t/papermod-theme-how-to-add-custom-css/30165>Papermod Theme: How to add custom CSS?</a></li></ul><hr><h2 id=custom-head--footer>Custom Head / Footer<a hidden class=anchor aria-hidden=true href=#custom-head--footer>#</a></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><h2 id=add-menu-to-site>Add menu to site<a hidden class=anchor aria-hidden=true href=#add-menu-to-site>#</a></h2><p>You can add menu entries which will appear in the header of every page.</p><p>To do so, add a <code>menu</code> section to your site’s <code>config.yml</code>:</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>menu</span>:
|
||
<span style=color:#f92672>main</span>:
|
||
- <span style=color:#f92672>identifier</span>: <span style=color:#ae81ff>categories</span>
|
||
<span style=color:#f92672>name</span>: <span style=color:#ae81ff>categories</span>
|
||
<span style=color:#f92672>url</span>: <span style=color:#ae81ff>/categories/</span>
|
||
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>10</span>
|
||
- <span style=color:#f92672>identifier</span>: <span style=color:#ae81ff>tags</span>
|
||
<span style=color:#f92672>name</span>: <span style=color:#ae81ff>tags</span>
|
||
<span style=color:#f92672>url</span>: <span style=color:#ae81ff>/tags/</span>
|
||
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>20</span>
|
||
- <span style=color:#f92672>identifier</span>: <span style=color:#ae81ff>example</span>
|
||
<span style=color:#f92672>name</span>: <span style=color:#ae81ff>example.org</span>
|
||
<span style=color:#f92672>url</span>: <span style=color:#ae81ff>https://example.org</span>
|
||
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>30</span>
|
||
</code></pre></div><p><code>name</code> controls what will be displayed for the menu entry.
|
||
<code>url</code> sets the URL that the entry points to.
|
||
<code>weight</code> is used to control the positioning of entries.</p><p>For more information on menus, see the <a href=https://gohugo.io/content-management/menus/>Hugo wiki page</a>.</p><hr><h2 id=pin-a-post>Pin a Post<a hidden class=anchor aria-hidden=true href=#pin-a-post>#</a></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><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>title</span>: <span style=color:#e6db74>"My Important post"</span>
|
||
<span style=color:#f92672>date</span>: <span style=color:#e6db74>2020-09-15T11:30:03</span><span style=color:#ae81ff>+00</span>:<span style=color:#ae81ff>00</span>
|
||
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>1</span>
|
||
---
|
||
|
||
</code></pre></div><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>title</span>: <span style=color:#e6db74>"My 2nd Important post"</span>
|
||
<span style=color:#f92672>date</span>: <span style=color:#e6db74>2020-09-15T11:30:03</span><span style=color:#ae81ff>+00</span>:<span style=color:#ae81ff>00</span>
|
||
<span style=color:#f92672>weight</span>: <span style=color:#ae81ff>2</span>
|
||
---
|
||
|
||
</code></pre></div><hr><h2 id=adding-custom-favicons>Adding Custom Favicon(s)<a hidden class=anchor aria-hidden=true href=#adding-custom-favicons>#</a></h2><p>We support the following paths under <code>/static</code> directory
|
||
and can be added accordingly.</p><ul><li><code>favicon.ico</code></li><li><code>favicon-16x16.png</code></li><li><code>favicon-32x32.png</code></li><li><code>apple-touch-icon.png</code></li><li><code>safari-pinned-tab.svg</code></li></ul><ol><li><p>Favicon(s) can be generated by <a href=https://favicon.io>Favicon.io</a></p><p>and can be simply put in <code>/static</code> folder.</p></li><li><p>Other way is to add favicon(s) NOT located in <code>/static</code> folder.</p><p>In site config add the following:</p><pre><code>params:
|
||
assets:
|
||
favicon: "<link / absolute url>"
|
||
favicon16x16: "<link / absolute url>"
|
||
favicon32x32: "<link / absolute url>"
|
||
apple_touch_icon: "<link / absolute url>"
|
||
safari_pinned_tab: "<link / absolute url>"
|
||
</code></pre><ul><li><code>absolute url</code> means direct links to external resource: ex. <a href=https://web.site/someimage.png>https://web.site/someimage.png</a></li></ul><p>example:</p><pre><code>params:
|
||
assets:
|
||
favicon: "/favicon.ico"
|
||
favicon16x16: "/favicon-16x16.png"
|
||
favicon32x32: "/favicon-32x32.png"
|
||
apple_touch_icon: "/apple-touch-icon.png"
|
||
safari_pinned_tab: "/safari-pinned-tab.svg"
|
||
</code></pre></li></ol><hr><h2 id=centering-image-in-markdown>Centering image in markdown<a hidden class=anchor aria-hidden=true href=#centering-image-in-markdown>#</a></h2><p>Add <code>#center</code> after image to center align an image</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-md data-lang=md>
|
||
</code></pre></div><p><strong>When using <a href=https://gohugo.io/content-management/shortcodes/><code>figure</code></a> shortcode</strong></p><p>use <code>align=center</code> to center image with captions</p><p>ex.</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-md data-lang=md>{{< <span style=color:#f92672>figure</span> <span style=color:#a6e22e>align</span><span style=color:#f92672>=</span><span style=color:#e6db74>center</span> <span style=color:#a6e22e>src</span><span style=color:#f92672>=</span><span style=color:#e6db74>"image.jpg"</span> >}}
|
||
</code></pre></div><hr><h2 id=using-hugos-syntax-highlighter-chroma>Using Hugo’s Syntax highlighter “chroma”<a hidden class=anchor aria-hidden=true href=#using-hugos-syntax-highlighter-chroma>#</a></h2><ol><li><p>Disable Highlight.js in site <code>config.yml</code></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>assets</span>:
|
||
<span style=color:#f92672>disableHLJS</span>: <span style=color:#66d9ef>true</span>
|
||
</code></pre></div></li><li><p>Set hugo’s markdown styling in site <code>config.yml</code></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>markup</span>:
|
||
<span style=color:#f92672>highlight</span>:
|
||
<span style=color:#75715e># anchorLineNos: true</span>
|
||
<span style=color:#f92672>codeFences</span>: <span style=color:#66d9ef>true</span>
|
||
<span style=color:#f92672>guessSyntax</span>: <span style=color:#66d9ef>true</span>
|
||
<span style=color:#f92672>lineNos</span>: <span style=color:#66d9ef>true</span>
|
||
<span style=color:#75715e># noClasses: false</span>
|
||
<span style=color:#f92672>style</span>: <span style=color:#ae81ff>monokai</span>
|
||
</code></pre></div></li><li><p>If you want <code>lineNos: true</code>, the background won’t be proper.
|
||
This will only work with <code>noClasses: false</code> or <code>pygmentsUseClasses: true</code>.
|
||
Read <a href=https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css>Generate Syntax Highlighter CSS</a></p><p>Add the following to <code>assets/css/extended/custom.css</code></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-css data-lang=css>.<span style=color:#a6e22e>chroma</span> {
|
||
<span style=color:#66d9ef>background-color</span>: <span style=color:#66d9ef>unset</span>;
|
||
}
|
||
</code></pre></div><p>More Info : <a href=https://gohugo.io/getting-started/configuration-markup#highlight>Configure Markup - Highlight</a></p></li></ol><hr><h2 id=search-not-working->Search not working ?<a hidden class=anchor aria-hidden=true href=#search-not-working->#</a></h2><p>If you are using a CDN to server assets from a different domain, search would break</p><p>Why? Take a look at <a href=https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35>fastsearch.js#L35</a>.</p><p>We fetch the <code>index.json</code> (where the search function looks for the keywords typed) one level up of the website <code>search.min.js</code> is hosted on.</p><p>We have used this insted of assigning <code>baseURL</code> so as to work with multilingual websites ex. <code>example.com/fr/</code> and websites being placed under a subdirectory ex. <code>example.com/blog/</code>.</p><p>To fix for <em>single</em> language websites hosting assets from CDN, this you may <a href=#override-theme-template>override</a> <a href=https://github.com/adityatelange/hugo-PaperMod/blob/fb4988cfb6d0d6e4e489f17d89f0fa618def3396/assets/js/fastsearch.js#L35>fastsearch.js#L35</a> and placing appropriate URL as in</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-js data-lang=js><span style=color:#a6e22e>xhr</span>.<span style=color:#a6e22e>open</span>(<span style=color:#e6db74>"GET"</span>, <span style=color:#e6db74>"https://example.com/index.json"</span>);
|
||
</code></pre></div><hr><h2 id=references>References<a hidden class=anchor aria-hidden=true href=#references>#</a></h2><ul><li><a href=https://zwbetz.com/override-a-hugo-theme/>Override a Hugo theme</a></li></ul></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-features/><span class=title>« Prev Page</span><br><span>Features</span></a>
|
||
<a class=next href=https://adityatelange.github.io/hugo-PaperMod/posts/papermod/papermod-icons/><span class=title>Next Page »</span><br><span>Icons</span></a></nav><div class=share-buttons><a target=_blank rel="noopener noreferrer" aria-label="share FAQs on twitter" href="https://twitter.com/intent/tweet/?text=FAQs&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%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 FAQs on linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%2f&title=FAQs&summary=FAQs&source=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%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 FAQs on reddit" href="https://reddit.com/submit?url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%2f&title=FAQs"><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-29.714 16.378.0 29.706 13.333 29.706 29.714.0 16.374-13.328 29.698-29.706 29.698zM160.91 295.348c0-16.381 13.328-29.71 29.714-29.71 16.369.0 29.689 13.329 29.689 29.71.0 16.373-13.32 29.693-29.689 29.693-16.386.0-29.714-13.32-29.714-29.693z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share FAQs on facebook" href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%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 512H342.978V319.085h66.6l12.672-82.621h-79.272v-53.617c0-22.603 11.073-44.636 46.58-44.636H425.6v-70.34s-32.71-5.582-63.982-5.582c-65.288.0-107.96 39.569-107.96 111.204v62.971h-72.573v82.621h72.573V512h-191.104c-34.524.0-62.554-28.03-62.554-62.554V62.554c0-34.524 28.029-62.554 62.554-62.554h386.892z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share FAQs on whatsapp" href="https://api.whatsapp.com/send?text=FAQs%20-%20https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%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.892zm-58.673 127.703c-33.842-33.881-78.847-52.548-126.798-52.568-98.799.0-179.21 80.405-179.249 179.234-.013 31.593 8.241 62.428 23.927 89.612l-25.429 92.884 95.021-24.925c26.181 14.28 55.659 21.807 85.658 21.816h.074c98.789.0 179.206-80.413 179.247-179.243.018-47.895-18.61-92.93-52.451-126.81zM263.976 403.485h-.06c-26.734-.01-52.954-7.193-75.828-20.767l-5.441-3.229-56.386 14.792 15.05-54.977-3.542-5.637c-14.913-23.72-22.791-51.136-22.779-79.287.033-82.142 66.867-148.971 149.046-148.971 39.793.014 77.199 15.531 105.329 43.692 28.128 28.16 43.609 65.592 43.594 105.4-.034 82.149-66.866 148.983-148.983 148.984zm81.721-111.581c-4.479-2.242-26.499-13.075-30.604-14.571-4.105-1.495-7.091-2.241-10.077 2.241-2.986 4.483-11.569 14.572-14.182 17.562-2.612 2.988-5.225 3.364-9.703 1.12-4.479-2.241-18.91-6.97-36.017-22.23C231.8 264.15 222.81 249.484 220.198 245s-.279-6.908 1.963-9.14c2.016-2.007 4.48-5.232 6.719-7.847 2.24-2.615 2.986-4.484 4.479-7.472 1.493-2.99.747-5.604-.374-7.846-1.119-2.241-10.077-24.288-13.809-33.256-3.635-8.733-7.327-7.55-10.077-7.688-2.609-.13-5.598-.158-8.583-.158-2.986.0-7.839 1.121-11.944 5.604-4.105 4.484-15.675 15.32-15.675 37.364.0 22.046 16.048 43.342 18.287 46.332 2.24 2.99 31.582 48.227 76.511 67.627 10.685 4.615 19.028 7.371 25.533 9.434 10.728 3.41 20.492 2.929 28.209 1.775 8.605-1.285 26.499-10.833 30.231-21.295 3.732-10.464 3.732-19.431 2.612-21.298-1.119-1.869-4.105-2.99-8.583-5.232z"/></svg></a><a target=_blank rel="noopener noreferrer" aria-label="share FAQs on telegram" href="https://telegram.me/share/url?text=FAQs&url=https%3a%2f%2fadityatelange.github.io%2fhugo-PaperMod%2fposts%2fpapermod%2fpapermod-faq%2f"><svg viewBox="2 2 28 28"><path d="M26.49 29.86H5.5a3.37 3.37.0 01-2.47-1 3.35 3.35.0 01-1-2.47V5.48A3.36 3.36.0 013 3 3.37 3.37.0 015.5 2h21A3.38 3.38.0 0129 3a3.36 3.36.0 011 2.46V26.37a3.35 3.35.0 01-1 2.47 3.38 3.38.0 01-2.51 1.02zm-5.38-6.71a.79.79.0 00.85-.66L24.73 9.24a.55.55.0 00-.18-.46.62.62.0 00-.41-.17q-.08.0-16.53 6.11a.59.59.0 00-.41.59.57.57.0 00.43.52l4 1.24 1.61 4.83a.62.62.0 00.63.43.56.56.0 00.4-.17L16.54 20l4.09 3A.9.9.0 0021.11 23.15zM13.8 20.71l-1.21-4q8.72-5.55 8.78-5.55c.15.0.23.0.23.16a.18.18.0 010 .06s-2.51 2.3-7.52 6.8z"/></svg></a></div></footer></article></main><footer class=footer><span>© 2022 <a href=https://adityatelange.github.io/hugo-PaperMod/>PaperMod</a></span>
|
||
<span>Powered by
|
||
<a href=https://gohugo.io/ rel="noopener noreferrer" target=_blank>Hugo</a> &
|
||
<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 (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(a=>{a.addEventListener("click",function(b){b.preventDefault();var a=this.getAttribute("href").substr(1);window.matchMedia('(prefers-reduced-motion: reduce)').matches?document.querySelector(`[id='${decodeURIComponent(a)}']`).scrollIntoView():document.querySelector(`[id='${decodeURIComponent(a)}']`).scrollIntoView({behavior:"smooth"}),a==="top"?history.replaceState(null,null," "):history.pushState(null,null,`#${a}`)})})</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(b=>{const c=b.parentNode.parentNode,a=document.createElement('button');a.classList.add('copy-code'),a.innerText='copy';function d(){a.innerText='copied!',setTimeout(()=>{a.innerText='copy'},2e3)}a.addEventListener('click',e=>{if('clipboard'in navigator){navigator.clipboard.writeText(b.textContent),d();return}const a=document.createRange();a.selectNodeContents(b);const c=window.getSelection();c.removeAllRanges(),c.addRange(a);try{document.execCommand('copy'),d()}catch(a){}c.removeRange(a)}),c.classList.contains("highlight")?c.appendChild(a):c.parentNode.firstChild==c||(b.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName=="TABLE"?b.parentNode.parentNode.parentNode.parentNode.parentNode.appendChild(a):b.parentNode.appendChild(a))})</script></body></html> |