Features / Mods

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.

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

1
2
3
4

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

To disable it :

1

disableThemeToggle: true

You can refer following table for better understanding…

Archives Layout

Create a page with archive.md in content directory with following content

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

and add the following to it

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

Note: Archives Layout does not support Multilingual Month Translations.

ex: archives.md

Regular Mode (default-mode)

Home-Info Mode

Use 1st entry as some Information

add following to config file

params:
  homeInfoParams:
    Title: Hi there wave
    Content: Can be Info, links, about...

  socialIcons: # optional
    - name: "<platform>"
      url: "<link>"
    - name: "<platform 2>"
      url: "<link2>"

Profile Mode

Shows Index/Home page as Full Page with Social Links and Image

add following to config file

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

params:
  profileMode:
    enabled: true
    title: "<Title>" # optional default will be site title
    subtitle: "This is subtitle"
    imageUrl: "<image link>" # optional
    imageTitle: "<title of image as alt>" # optional
    imageWidth: 120 # custom size
    imageHeight: 120 # custom size
    buttons:
      - name: Archive
        url: "/archive"
      - name: Github
        url: "https://github.com/"

  socialIcons: # optional
    - name: "<platform>"
      url: "<link>"
    - name: "<platform 2>"
      url: "<link2>"

Search Page

PaperMod uses Fuse.js Basic for search functionality

Add the following to site config, config.yml

1
2
3
4
5

outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

Create a page with search.md in content directory with following content

1
2
3
4
5
6
7
8

---
title: "Search" # in any language you want
layout: "search" # necessary for search
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "placeholder text in search input box"
---

To hide a particular page from being searched, add it in post’s frontmatter

1

searchHidden: true

ex: search.md

Search Page also has Key bindings:

• Arrow keys to move up/down the list
• Enter key (return) or Right Arrow key to go to the highlighted page
• Escape key to clear searchbox and results

For Multilingual use search.<lang>.md ex. search.es.md.

Note: Search will work only on current language, user is currently on !

Customizing Fusejs Options

Refer https://fusejs.io/api/options.html for Options, Add those as shown below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

params:
  fuseOpts:
    isCaseSensitive: false
    shouldSort: true
    location: 0
    distance: 1000
    threshold: 0.4
    minMatchCharLength: 0
    # limit: 10 # refer: https://www.fusejs.io/api/methods.html#search
    keys: ["title", "permalink", "summary", "content"]

Draft Page indication

adds [draft] mark to indicate draft pages.

Post Cover Image

In post’s page-variables add :

1
2
3
4
5
6
7

cover:
  image: "<image path/url>"
  # can also paste direct link from external site
  # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
  alt: "<alt text>"
  caption: "<text>"
  relative: false # To use relative path for cover image, used in hugo Page-bundles

When you include images in the Page Bundle, multiple sizes of the image will automatically be provided using the HTML5 srcset field.

To reduce generation time and size of the site, you can disable this feature using

1
2
3

params:
  cover:
    responsiveImages: false

To enable hyperlinks to the full image size on post pages, use

1
2
3

params:
  cover:
    linkFullImages: true

Share Buttons on post

Displays Share Buttons at Bottom of each post

to show share buttons add

params:
  ShowShareButtons: true

Show post reading time

Displays Reading Time (the estimated time, in minutes, it takes to read the content.)

To show reading time add

Params:
  ShowReadingTime: true

Show Table of Contents (Toc) on blog post

Displays ToC on blog-pages

To show ToC add following to page-variables

ShowToc: true

To keep Toc Open by default on a post add following to page-variables:

TocOpen: true

BreadCrumb Navigation

Adds BreadCrumb Navigation above Post’s Title to show subsections and Navigation to Home

params:
  ShowBreadCrumbs: true

Can be diabled for particular page’s front-matter

---
ShowBreadCrumbs: false
---

Edit Link for Posts

Add a button to suggest changes by using the file path of the post to link to a edit destination.

For site config use:

Params:
  editPost:
    URL: "https://github.com/<path_to_repo>/content"
    Text: "Suggest Changes" # edit text
    appendFilePath: true # to append file path to Edit link

Can be modified for individual pages

---
editPost:
  URL: "https://github.com/<path_to_repo>/content"
  Text: "Suggest Changes" # edit text
  appendFilePath: true # to append file path to Edit link
---

The example above would yield the following link for the post file posts/post-name.md: https://github.com/<path_to_repo>/content/posts/post-name.md

Since the link generated is a regular HTML anchor tag <a href=...>, you can also use other URL schemas like mailto://, e.g. URL: "mailto://[email protected]?subject=Suggesting changes for "

Other Posts suggestion below a post

Adds a Previous / Next post suggestion under a single post

params:
  ShowPostNavLinks: true

Code Copy Button

Adds a copy button in code block to copy the code it contains

params:
  ShowCodeCopyButtons: true

Multiple Authors

To Use multiple authors for a post, in post-variables:

---
author: ["Me", "You"]
---

To use Multiple Authors Site-wide, in config.yml:

params:
  author: ["Me", "You"]

Comments

to add comments, create a html file

layouts/partials/comments.html

and paste code provided by your comments provider

also in config add this

params:
  comments: true

read more about this hugo-comments

AccessKeys

c - ToC Open/Close
g - Go To Top
h - Home (according to current lang)
t - Theme toggle
/ - Jumps to search page if in menu

What’s AccessKeys ?

Enhanced SEO

Enabled only when env: production

• Rich Results/Snippets Support

Twitter Cards Support

• The Twitter Cards metadata, except twitter:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description).
• The twitter:image uses the Post Cover Image, if present.
• In the absence of a cover images, the first image from the images frontmatter (a list) is used.

  images:
    - image_01.png
    - image_02.png
  

• Finally, if neither of those are provided, twitter:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name.

OpenGraph support

• The OpenGraph metadata, except og:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description).
• The og:image uses the Post Cover Image, if present.
• In the absence of a cover images, the first image from the images frontmatter (a list) is used.

  images:
    - image_01.png
    - image_02.png
  

• Finally, if neither of those are provided, og:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name.
• For pages, you can also add audio (using frontmatter audio: filename.ext) and/or videos.

  videos:
    - filename01.mov
    - filename02.avi
  

Multilingual Support

Misc

Scroll-Bar themed (by default)

Smooth Scroll between in-page links (by default)

Scroll-to-Top Button (by default)

Displays a Scroll-to-Top button in right-bottom corner

Google Analytics integration

Syntax highlighting

RSS feeds