Installation | Update
Read Install and Update instructions here...
From c18b4fea21dc90d6ed8d913aade50dc478230351 Mon Sep 17 00:00:00 2001
From: adityatelange Archive
Read Install and Update instructions here...
Get known about All Features in PaperMod...
Frequently Asked Questions...
List of all Icons supported by PaperMod...
List of Front Matter variables used by PaperMod...
Welcome to demo of hugo’s theme PaperMod.
Read Install and Update instructions here...
Get known about All Features in PaperMod...
Frequently Asked Questions...
List of all Icons supported by PaperMod...
List of Front Matter variables used by PaperMod...
Contains posts related to PaperMod...
Contains posts related to PaperMod...
Read Install and Update instructions here...
Get known about All Features in PaperMod...
Frequently Asked Questions...
List of all Icons supported by PaperMod...
List of Front Matter variables used by PaperMod...
Read Install and Update instructions here...
Get known about All Features in PaperMod...
Frequently Asked Questions...
List of all Icons supported by PaperMod...
List of Front Matter variables used by PaperMod...
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.
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:
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.
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
.
These include OpenGraph, Twitter Cards and Schema.
params:
diff --git a/posts/papermod/papermod-features/index.html b/posts/papermod/papermod-features/index.html
index 09d07b97..c999d43a 100644
--- a/posts/papermod/papermod-features/index.html
+++ b/posts/papermod/papermod-features/index.html
@@ -1,14 +1,22 @@
-Features | PaperMod Features
Table of Contents
- Assets (js/css)
- Default Theme light/dark/auto
- Theme Switch Toggle (enabled by default)
- Archives Layout
- Regular Mode (default-mode)
- Home-Info Mode
- Profile Mode
- Search
- Draft Page indication
- Post Cover Image
- Share Buttons on post
- Show post reading time
- Show Table of Contents (Toc) on blog post
- Multiple Authors
- Comments
- AccessKeys
- Enhanced SEO
- Multilingual Support
- Misc
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
params:
+Features | PaperMod Features
Table of Contents
- Intro
- Assets (js/css)
- Default Theme light/dark/auto
- Theme Switch Toggle (enabled by default)
- Archives Layout
- Regular Mode (default-mode)
- Home-Info Mode
- Profile Mode
- Search
- Draft Page indication
- Post Cover Image
- Share Buttons on post
- Show post reading time
- Show Table of Contents (Toc) on blog post
- BreadCrumb Navigation
- Other Posts suggestion below a post
- Multiple Authors
- Comments
- AccessKeys
- Enhanced SEO
- Multilingual Support
- Misc
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
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 :
disableThemeToggle: true
-
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
Archives Layout
Create a page with archive.md
in content
directory with following content
---
-title: "Archive" # in any language you want
-layout: "archives" # is necessary
-url: "/archive"
-summary: "archive"
+
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
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)
![regular](images/regular.jpg)
Home-Info Mode
![homeinfo](images/homeinfo.jpg)
Use 1st entry as some Information
add following to config file
params:
@@ -21,7 +29,7 @@
url: "<link>"
- name: "<platform 2>"
url: "<link2>"
-
ex. config.yml#L106
Profile Mode
![profile](images/profile.jpg)
Shows Index/Home page as Full Page with Social Links and Image
add following to config file
params:
+
ex. config.yml#L106
Profile Mode
![profile](https://raw.githubusercontent.com/adityatelange/hugo-PaperMod/exampleSite/content/posts/papermod/papermod-features/images/profile.jpg)
Shows Index/Home page as Full Page with Social Links and Image
add following to config file
params:
profileMode:
enabled: true
title: "<Title>" # optional default will be site title
@@ -40,7 +48,7 @@
url: "<link>"
- name: "<platform 2>"
url: "<link2>"
-
Search
Add the following to site config, config.yml
outputs:
+
Search
PaperMod uses Fuse.js Basic for seach functionality
Add the following to site config, config.yml
outputs:
home:
- HTML
- RSS
@@ -49,10 +57,13 @@
title: "Search" # in any language you want
layout: "search" # is necessary
# url: "/archive"
+# description: "Description for Search"
summary: "search"
---
-
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.
params:
+
To hide a particular page from being searched, add it in post’s fron’t matter
---
+searchHidden: true
+
ex: search.md
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.
params:
fuseOpts:
isCaseSensitive: false
shouldSort: true
@@ -61,7 +72,7 @@
threshold: 0.4
minMatchCharLength: 0
keys: ["title", "permalink", "summary", "content"]
-
ex: search.md
Draft Page indication
adds [draft]
mark to indicate draft pages.
Post Cover Image
In post’s page-variables add :
cover:
+
Draft Page indication
adds [draft]
mark to indicate draft pages.
Post Cover Image
In post’s page-variables add :
cover:
image: "<image path/url>"
# can also paste direct link from external site
# ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png
@@ -80,7 +91,15 @@
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
-
Multiple Authors
To Use multiple authors for a post, in post-variables:
---
+
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
+---
+
+
Other Posts suggestion below a post
Adds a Previous / Next post suggestion under a single post
params:
+ ShowPostNavLinks: true
+
Multiple Authors
To Use multiple authors for a post, in post-variables:
---
author: ["Me", "You"]
---
diff --git a/posts/papermod/papermod-icons/index.html b/posts/papermod/papermod-icons/index.html
index 261e1915..d2039fde 100644
--- a/posts/papermod/papermod-icons/index.html
+++ b/posts/papermod/papermod-icons/index.html
@@ -1,12 +1,12 @@
-Icons | PaperMod Icons [draft]
Table of Contents
Social Icons
No. name platform link 1 123rf 123rf.com 2 adobestock stock.adobe.com 3 behance behance.net 4 buymeacoffee buymeacoffee.com 5 codepen codepen.io 6 cryptohack cryptohack.org 7 dev dev.to 8 discogs discogs.com 9 discord discord.com 10 dreamstime dreamstime.com 11 dribbble dribbble.com 12 email - 13 facebook facebook.com 14 freepik freepik.com 15 github github.com 16 gitlab gitlab.com 17 hackerrank hackerrank.com 18 hackthebox hackthebox.eu 19 instagram instagram.com 20 kakaotalk kakaocorp.com/service/KakaoTalk 21 keybase keybase.io 22 kofi ko-fi.com 23 lastfm last.fm 24 linkedin linkedin.com 25 mastodon mastodon.social 26 medium medium.com 27 mixcloud mixcloud.com 28 nuget nuget.org 29 paypal paypal.com 30 qq qq.com 31 reddit reddit.com 32 rss - 33 soundcloud soundcloud.com 34 shutterstock shutterstock.com 35 slack slack.com 36 snapchat snapchat.com/add 37 sourcerer sourcerer.io 38 stackoverflow stackoverflow.com 39 steam steampowered.com 40 telegram telegram.org 41 twitch twitch.tv 42 twitter twitter.com 43 youtube youtube.com 44 other -
Usage :
socialIcons: # optional
+Icons | PaperMod Icons [draft]
Table of Contents
Social Icons
No. Name Platform Link 1 123rf 123rf.com 2 adobestock stock.adobe.com 3 behance behance.net 4 buymeacoffee buymeacoffee.com 5 codepen codepen.io 6 cryptohack cryptohack.org 7 dev dev.to 8 discogs discogs.com 9 discord discord.com 10 dreamstime dreamstime.com 11 dribbble dribbble.com 12 email - 13 facebook facebook.com 14 freepik freepik.com 15 github github.com 16 gitlab gitlab.com 17 hackerrank hackerrank.com 18 hackthebox hackthebox.eu 19 instagram instagram.com 20 kakaotalk kakaocorp.com/service/KakaoTalk 21 keybase keybase.io 22 kofi ko-fi.com 23 lastfm last.fm 24 linkedin linkedin.com 25 mastodon mastodon.social 26 medium medium.com 27 mixcloud mixcloud.com 28 nuget nuget.org 29 paypal paypal.com 30 qq qq.com 31 reddit reddit.com 32 rss - 33 soundcloud soundcloud.com 34 shutterstock shutterstock.com 35 slack slack.com 36 snapchat snapchat.com/add 37 sourcerer sourcerer.io 38 stackoverflow stackoverflow.com 39 steam steampowered.com 40 telegram telegram.org 41 twitch twitch.tv 42 twitter twitter.com 43 youtube youtube.com 44 other -
Usage :
socialIcons: # optional
- name: "<NAME>"
url: "<link>"
- name: "<NAME>"
url: "<link2>"
Share Icons
No. Platform 1 twitter 2 linkedin 3 reddit 4 facebook 5 whatsapp 6 telegram
Usage:
params:
ShowShareButtons: true
-
You can see Below how share Icons Look.
© 2021 PaperMod
·
Powered by Hugo
diff --git a/posts/papermod/papermod-installation/index.html b/posts/papermod/papermod-installation/index.html
index fd9bd3eb..a9ea4df3 100644
--- a/posts/papermod/papermod-installation/index.html
+++ b/posts/papermod/papermod-installation/index.html
@@ -1,12 +1,12 @@
-Installation | Update | PaperMod Installation | Update
Guide
Follow Quick Start guide to setup hugo and create a new site.
+
Installation | Update | PaperMod Installation | Update
Guide
Follow Quick Start guide to setup hugo and create a new site.
Make sure you install latest version of hugo(>=0.74.0)
.
After you have created a new site, at Step 3 follow the steps:
Method 1
Inside the folder of your Hugo site, run:
git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1
Note: You may use --branch v3.0
to end of above command if you want to stick to specific release.
Updating theme :
cd themes/PaperMod
git pull
Method 2
you can use as submodule with
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1
git submodule update --init --recursive
-
Note: You may use --branch v3.0
to end of above command if you want to stick to specific release.
Updating theme :
git submodule update --remote --merge
-
Method 3
Or you can Download as Zip from Github Page and extract in your themes directory
Finally …
Add in config.yml
:
theme: "PaperMod"
+
Note: You may use --branch v4.0
to end of above command if you want to stick to specific release.
Updating theme :
git submodule update --remote --merge
+
Method 3
Or you can Download as Zip from Github Page and extract in your themes directory
Direct Links:
Finally …
Add in config.yml
:
theme: "PaperMod"
Quick Links
Sample config.yml
Example Site Structure is present here: exampleSite
Use appropriately
baseURL: "https://examplesite.com"
title: ExampleSite
paginate: 5
@@ -117,13 +117,13 @@ git submodule update --init --recursive
url: https://example.org
weight: 30
# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
+# pygmentsUseClasses: true
# markup:
# highlight:
# # anchorLineNos: true
# codeFences: true
# guessSyntax: true
# lineNos: true
-# # noClasses: false
# style: monokai
Sample Page.md
---
title: "My 1st post"
@@ -142,6 +142,7 @@ git submodule update --init --recursive
disableHLJS: true # to disable highlightjs
disableShare: false
disableHLJS: false
+searchHidden: true
cover:
image: "<image path/url>" # image path/url
alt: "<alt text>" # alt text
@@ -150,6 +151,7 @@ git submodule update --init --recursive
hidden: true # only hide on current single page
---
+
You can use it by creating archetypes/post.md
hugo new --kind post <name>
© 2021 PaperMod
·
Powered by Hugo
diff --git a/posts/papermod/papermod-variables/index.html b/posts/papermod/papermod-variables/index.html
index b5e8cb8a..96e0957d 100644
--- a/posts/papermod/papermod-variables/index.html
+++ b/posts/papermod/papermod-variables/index.html
@@ -1,5 +1,24 @@
-Variables | Front Matter | PaperMod Variables | Front Matter [draft]
Table of Contents
Below are variables used with this theme…
Site Variables under Params
name type example Description env string ‘production’ To set env to production title string ‘My Blog’ To set title description string ‘This is a blog of mine’ To set site description author string |list ‘Me’ | [‘Me’,‘You’] To show multiple Authors images string ‘myimage.png’ Link or path of image for opengraph, twitter-cards ShowReadingTime boolean true | false To show read time in post meta ShowShareButtons boolean true | false To show/hide share buttons under post defaultTheme string light | dark | auto To set default theme disableThemeToggle boolean true | false To disable theme toggle icon shown besides label disableSpecial1stPost boolean true | false To disable no-card special appearance of 1st post hidemeta boolean true | false To Hide meta elements : date, read-time, author and available-translations for page showtoc boolean true | false To show/hide Table of Contents tocopen boolean true | false To keep open ToC by default on page load comments boolean true | false To show/hide comments fuseOpts socialIcons analytics.google.SiteVerificationTag string “XYZabc” label.text string ‘Home’ To display different label text other than title label.icon string ‘/apple-touch-icon.png’ To display a logo image in label label.iconHeight integer 35 To set size of label logo image assets.favicon string ‘icon.ico’ To set favicon, can be path or external link assets.disableHLJS assets.disableFingerprinting cover.linkFullImages boolean true | false To open full size cover images on click on cover cover.responsiveImages boolean true | false To enable/disable generation of responsive cover images cover.hidden cover.hiddenInList cover.hiddenInSingle profileMode.enabled profileMode.title profileMode.imageUrl profileMode.imageWidth profileMode.imageHeight profileMode.imageTitle profileMode.buttons
Page Variables
Name Type Example Description showtoc boolean true | false To show/hide Table of Contents tocopen boolean true | false To keep open ToC by default on page load hidemeta boolean true | false To Hide meta elements : date, read-time, author and available-translations for page comments boolean true | false To show/hide comments description string ‘description text’ Show Post Description under Title disableShare boolean true | false To hide/show share icons under a page disableHLJS author string |list ‘Me’ | [‘Me’,‘You’] To show multiple Authors cover.image string ‘featured.jpg’ To add a cover image cover.caption string ‘caption for image’ To add caption to cover image cover.alt string ‘this is cover image’ Alternate text to show if image doesn’t load/show up cover.relative boolean true | false To use relative path for cover image, used in hugo Page-bundles cover.hidden weight integer 5 To set page order or to pin a post to Top of list
PaperMod
Installation | Update
Read Install and Update instructions here...
January 20, 2021 · 3 min · Aditya Telange Features
Get known about All Features in PaperMod...
January 20, 2021 · 5 min · Aditya Telange FAQs [draft]
Frequently Asked Questions...
January 20, 2021 · 4 min · Aditya Telange Icons [draft]
List of all Icons supported by PaperMod...
January 20, 2021 · 1 min · Aditya Telange Variables | Front Matter [draft]
List of Front Matter variables used by PaperMod...
January 20, 2021 · 3 min · Aditya Telange © 2021 PaperMod
·
Powered by Hugo
·