• 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

Default Theme light/dark/auto

    # 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 :

disableThemeToggle: true

You can refer following table for better understanding…

defaultThemedisableThemeTogglechecks local storage?checks system theme?Info
autotrueNoYesonly system theme
falseYes (if not->2)Yes (2)switch present
darktrueNoNoforce dark only
falseYesNoswitch present
lighttrueNoNoforce light only
falseYesNoswitch present

Archives Layout

Create a page with in content directory with following content

├── config.yml
├── content/
│   ├──   <--- Create 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.


Regular Mode (default-mode)


Home-Info Mode


Use 1st entry as some Information

add following to config file

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

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

ex. config.yml#L106

Profile Mode


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

add following to config file

        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
            - name: Archive
            url: "/archive"
            - name: Github
            url: ""

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

Search Page

PaperMod uses Fuse.js Basic for seach functionality

Add the following to site config, config.yml

        - HTML
        - RSS
        - JSON # is necessary

Create a page with in content directory with following content

title: "Search" # in any language you want
layout: "search" # is necessary
# url: "/archive"
# description: "Description for Search"
summary: "search"

To hide a particular page from being searched, add it in post’s fron’t matter

searchHidden: true


Search Page also has Key bindings:

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

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

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

Customizing Fusejs Options

Refer for Options, Add those as shown below.

        isCaseSensitive: false
        shouldSort: true
        location: 0
        distance: 1000
        threshold: 0.4
        minMatchCharLength: 0
        keys: ["title", "permalink", "summary", "content"]

Draft Page indication

adds [draft] mark to indicate draft pages.

Post Cover Image

In post’s page-variables add :

    image: "<image path/url>"
    # can also paste direct link from external site
    # ex.
    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

        responsiveImages: false

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

        linkFullImages: true

Share Buttons on post

Displays Share Buttons at Bottom of each post

to show share buttons add

    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

    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

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

    ShowBreadCrumbs: true

Can be diabled for particular page’s front-matter

ShowBreadCrumbs: false

Other Posts suggestion below a post

Adds a Previous / Next post suggestion under a single post

    ShowPostNavLinks: 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:

    author: ["Me", "You"]


to add comments, create a html file


and paste code provided by your comments provider

also in config add this

    comments: true

read more about this hugo-comments


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

Multilingual Support


Scroll-Bar themed (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