2020-09-17 10:58:09 +02:00
---
2021-01-13 16:02:37 +01:00
title: "Features"
2020-10-27 14:26:59 +01:00
summary: Get known about All Features in PaperMod
2020-09-17 10:58:09 +02:00
date: 2020-09-16T11:30:03+05:30
showToc: true
weight: 2
2020-10-27 14:16:08 +01:00
aliases: ["/papermod-features"]
tags: ["PaperMod"]
2020-09-17 10:58:09 +02:00
author: "Aditya Telange"
2020-09-24 08:24:04 +02:00
tocopen: true
2020-09-17 10:58:09 +02:00
---
2020-10-06 09:31:20 +02:00
### Assets (js/css)
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
The following is enabled by default
2020-10-27 14:16:08 +01:00
- [minification ](https://gohugo.io/hugo-pipes/minification/ ) - makes the assets size smallest as possible.
- [bundling ](https://gohugo.io/hugo-pipes/bundling/ ) - bundles all the styles in one single asset
- [fingerprint/intergity ](https://gohugo.io/hugo-pipes/fingerprint/ ) check.
2020-09-17 10:58:09 +02:00
---
2020-10-06 09:31:20 +02:00
### Default Theme light/dark/auto
2020-09-17 10:58:09 +02:00
```yml
params:
2020-10-06 09:31:20 +02:00
# defaultTheme: light
# defaultTheme: dark
defaultTheme: auto # to switch between dark or light according to browser theme
2020-09-17 10:58:09 +02:00
```
2020-10-27 14:16:08 +01:00
2020-10-06 09:31:20 +02:00
< / details >
2020-09-17 10:58:09 +02:00
2020-10-06 09:31:20 +02:00
---
2020-09-17 10:58:09 +02:00
2020-10-06 09:31:20 +02:00
### Theme Switch Toggle (enabled by default)
2020-09-24 07:48:03 +02:00
2020-10-06 09:31:20 +02:00
Shows icon besides title of page to change theme
To disable it :
2020-09-24 07:48:03 +02:00
```yml
2020-10-27 14:16:08 +01:00
disableThemeToggle: true
2020-09-24 07:48:03 +02:00
```
2020-11-04 10:38:16 +01:00
You can refer following table for better understanding...
| `defaultTheme` | `disableThemeToggle` | checks local storage? | checks system theme? | Info |
| -------------- | -------------------- | --------------------- | -------------------- | ----------------- |
| `auto` | true | No | Yes | only system theme |
| | false | Yes (if not->2) | Yes (2) | _switch present_ |
| `dark` | true | No | No | force dark only |
| | false | Yes | No | _switch present_ |
| `light` | true | No | No | force light only |
| | false | Yes | No | _switch present_ |
2020-09-17 10:58:09 +02:00
---
2020-10-06 09:31:20 +02:00
### Archives Layout
2020-09-17 10:58:09 +02:00
2020-10-26 17:26:58 +01:00
Create a page with `archive.md` in `content` directory with following content
2020-09-17 10:58:09 +02:00
```yml
2020-10-26 17:26:58 +01:00
---
title: "Archive" # in any language you want
layout: "archives" # is necessary
url: "/archive"
summary: "archive"
---
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
```
2020-10-26 17:26:58 +01:00
**Note:** Archives Layout does not support Multilingual Month Translations.
2020-10-06 09:31:20 +02:00
ex: [archives.md ](https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/archives.md )
2020-09-17 10:58:09 +02:00
---
2020-10-27 15:12:19 +01:00
### Regular Mode (default-mode)
![regular ](images/regular.webp )
---
2020-10-06 09:31:20 +02:00
### Home-Info Mode
2020-09-17 10:58:09 +02:00
2020-10-27 15:12:19 +01:00
![homeinfo ](images/homeinfo.webp )
2020-09-17 10:58:09 +02:00
Use 1st entry as some Information
add following to config file
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
```yml
params:
homeInfoParams:
Title: Hi there wave
Content: Can be Info, links, about...
socialIcons: # optional
- name: "< platform > "
url: "< link > "
- name: "< platform 2 > "
url: "< link2 > "
```
2020-12-05 20:43:22 +01:00
ex. [here ](https://github.com/adityatelange/hugo-PaperMod/blob/exampleSite/config.yml#L106 )
2020-09-17 10:58:09 +02:00
---
2020-10-06 09:31:20 +02:00
### Profile Mode
2020-09-17 10:58:09 +02:00
2020-10-27 15:12:19 +01:00
![profile ](images/profile.webp )
2020-09-17 10:58:09 +02:00
Shows Index/Home page as Full Page with Social Links and Image
add following to config file
```yml
params:
profileMode:
enabled: true
title: "< Title > " # optional default will be site title
imageUrl: "< image link > " # optional
imageTitle: "< title of image as alt > " # optional
2020-11-09 07:56:07 +01:00
imageWidth: 120 # custom size
imageHeight: 120 # custom size
2020-09-17 10:58:09 +02:00
buttons:
- name: Archive
url: "/archive"
- name: Github
url: "https://github.com/"
socialIcons: # optional
- name: "< platform > "
url: "< link > "
- name: "< platform 2 > "
url: "< link2 > "
```
---
2020-12-06 17:56:32 +01:00
### Search
Add the following to site config, `config.yml`
```yml
outputs:
home:
- HTML
- RSS
- JSON # is necessary
```
Create a page with `search.md` in `content` directory with following content
```yml
---
title: "Search" # in any language you want
layout: "search" # is necessary
# url: "/archive"
summary: "search"
---
```
For Multilingual use `search.<lang>.md` ex. `search.es.md` .
**Note:** Search will work only on current language, user is currently on !
2020-12-15 14:34:01 +01:00
**Customizing Fusejs Options**
Refer https://fusejs.io/api/options.html for Options, Add those as shown below.
```yml
params:
fuseOpts:
isCaseSensitive: false
shouldSort: true
location: 0
distance: 1000
threshold: 0.4
minMatchCharLength: 0
keys: ["title", "permalink", "summary", "content"]
```
2020-12-06 17:56:32 +01:00
ex: [search.md ](https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/search.md )
---
2020-10-06 09:31:20 +02:00
### Draft Page indication
2020-09-17 10:58:09 +02:00
adds `[draft]` mark to indicate draft pages.
---
2020-10-06 09:31:20 +02:00
### Post Cover Image
2020-09-24 07:48:03 +02:00
In post's page-variables add :
```yml
2020-10-06 09:31:20 +02:00
cover:
2020-10-27 14:16:08 +01:00
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 > "
2020-09-24 07:48:03 +02:00
```
2020-10-22 16:05:14 +02:00
When you include images in the [Page Bundle ](https://gohugo.io/content-management/page-bundles/ ), 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
2020-10-27 14:16:08 +01:00
2020-10-22 16:05:14 +02:00
```yml
params:
2020-10-27 14:16:08 +01:00
cover:
responsiveImages: false
2020-10-22 16:05:14 +02:00
```
To enable hyperlinks to the full image size on post pages, use
2020-10-27 14:16:08 +01:00
2020-10-22 16:05:14 +02:00
```yml
params:
2020-10-27 14:16:08 +01:00
cover:
linkFullImages: true
2020-10-22 16:05:14 +02:00
```
2020-09-24 08:24:04 +02:00
---
2020-10-06 09:31:20 +02:00
### Share Buttons on post
2020-09-17 10:58:09 +02:00
Displays Share Buttons at Bottom of each post
to show share buttons add
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
```yml
params:
ShowShareButtons: true
```
---
2020-10-06 09:31:20 +02:00
### Show post reading time
2020-09-17 10:58:09 +02:00
Displays Reading Time (the estimated time, in minutes, it takes to read the content.)
To show reading time add
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
```yml
Params:
ShowReadingTime: true
```
---
2020-10-06 09:31:20 +02:00
### Show Table of Contents (Toc) on blog post
2020-09-17 10:58:09 +02:00
Displays ToC on blog-pages
To show ToC add following to page-variables
2020-10-27 14:16:08 +01:00
2020-09-17 10:58:09 +02:00
```yml
ShowToc: true
```
2020-09-24 08:24:04 +02:00
To keep Toc Open **by default** on a post add following to page-variables:
2020-10-27 14:16:08 +01:00
2020-09-24 07:48:03 +02:00
```yml
TocOpen: true
```
2020-09-17 10:58:09 +02:00
---
2020-10-25 08:48:45 +01:00
### Multiple Authors
To Use multiple authors for a post, in post-variables:
```yml
---
author: ["Me", "You"]
---
2020-10-27 14:16:08 +01:00
2020-10-25 08:48:45 +01:00
```
To use Multiple Authors Site-wide, in `config.yml` :
```yml
params:
author: ["Me", "You"]
```
---
2020-10-06 09:31:20 +02:00
### Comments
2020-09-17 10:58:09 +02:00
to add comments, create a html file
`layouts/partials/comments.html`
and paste code provided by your comments provider
also in config add this
2020-09-24 08:24:04 +02:00
2020-09-17 10:58:09 +02:00
```yml
params:
comments: true
```
2020-09-24 08:24:04 +02:00
read more about this [here ](https://gohugo.io/content-management/comments/ )
2020-09-17 10:58:09 +02:00
---
2021-01-13 16:02:37 +01:00
### AccessKeys
```text
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 ? ](https://www.w3schools.com/tags/att_global_accesskey.asp )
---
### Enhanced SEO
**Enabled only when `env: prod` **
- [Rich Results/Snippets Support ](https://support.google.com/webmasters/answer/7506797?hl=en )
- Twitter Cards Support
- Open-Graph support
---
### Multilingual Support
---
2020-10-06 09:31:20 +02:00
### Misc
2020-09-17 10:58:09 +02:00
2020-10-06 09:31:20 +02:00
#### Scroll-Bar themed (by default)
#### Smooth Scroll between in-page links (by default)
#### Scroll-to-Top Button (by default)
2021-01-13 16:02:37 +01:00
```text
2020-10-06 09:31:20 +02:00
Displays a Scroll-to-Top button in right-bottom corner
2021-01-13 16:02:37 +01:00
```
2020-10-06 09:31:20 +02:00
#### Google Analytics integration
#### Syntax highlighting
#### RSS feeds