hugo-WonderMod/content/posts/papermod/papermod-how-to.md

title	summary	date	showtoc	tocOpen	aliases	tags	author	draft
Papermod - How To's Guide	FAQs	2020-09-18T11:30:03+05:30	true	true	/papermod-how-to-guide	PaperMod	Aditya Telange	true

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.

• You can find any YML to TOML converters if necessary.

---

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.

Let's say you wish the list was different. All you have to do is copy the list template:

your-site/themes/papermod/layouts/_defaults/list.html

And paste it under your own layouts folder:

your-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.

---

Enable Social-Metadata and SEO

These include OpenGraph, Twitter Cards and Schema.

params:
    env: production

or set HUGO_ENV as "production" in system env-vars

---

Archive Page

.
├── config.yml
├── content/
│   ├── archives.md   <--- Create archive.md here
│   └── posts/
├── static/
└── themes/
    └── hugo-PaperMod/

and add the following to it

---
title: "Archive"
layout: "archives"
url: "/archives/"
summary: archives
---

---

Custom Head / Footer

Custom css/js can be added by way mentioned below.

.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── layouts
    ├── partials
    │   ├── comments.html
    │   ├── extend_footer.html <---
    │   └── extend_head.html   <---
    └── robots.txt

Create a html page in directory structure as shown above.

Contents of extend_head.html will be added to head of page.

and contents of extend_footer.html will be added to bottom of page.

---

Pin a Post

Post can be pinned/ displayed top on the list by adding a weight=<num> var to page-variables

example:

---
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.

• favicon.ico
• favicon-16x16.png
• favicon-32x32.png
• apple-touch-icon.png
• safari-pinned-tab.svg
• site.webmanifest

1. Favicon(s) can be generated by Favicon.io

   and can be simply put in /static folder.

2. Other way is to add favicon(s) NOT located in /static folder.

   In site config add the following:

   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>"
   

   • absolute url means direct links to external resource: ex. https://web.site/someimage.png

   example:

   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"
   

---

References

• Override a Hugo theme