Installation | Update
Read Install and Update instructions here...
From b83abd34fb278afb890b19abdc97d5b3538273fa 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...
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:
your-site/themes/papermod/layouts/_defaults/list.html
+FAQs | PaperMod FAQs [draft]
Table of Contents
- Intro
- Override theme template
- Enable Social-Metadata and SEO
- Failed to find a valid digest in the ‘integrity’ attribute for resource … ?
- Bundling Custom css with theme’s assets
- Custom Head / Footer
- Add menu to site
- Pin a Post
- Adding Custom Favicon(s)
- Centering image in markdown
- Using Hugo’s Syntax highlighter “chroma”
- References
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:
@@ -7,30 +7,15 @@ When Hugo builds your site, your copy of list.html
will be used ins
or set HUGO_ENV
as “production” in system env-vars
Failed to find a valid digest in the ‘integrity’ attribute for resource … ?
Read about How Subresource Integrity helps: Subresource_Integrity
Why was the asset
not loading ? : How_browsers_handle_Subresource_Integrity
Solution:
Set the following in config.yml
params:
assets:
disableFingerprinting: true
-
Linked Issues:
- https://stackoverflow.com/questions/65056585/hugo-theme-not-loading
- https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource
- https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/
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
----
-
-
Bundling Custom css with theme’s assets
- For adding custom css to be bundled inside one minimized css
Create folder in yout project directory as
.(site root)
+
Linked Issues:
- https://stackoverflow.com/questions/65056585/hugo-theme-not-loading
- https://stackoverflow.com/questions/65040931/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource
- https://blog.gerardbeckerleg.com/posts/hugo-failed-to-find-a-valid-digest-in-the-integrity-attribute-for-resource/
Bundling Custom css with theme’s assets
- For adding custom css to be bundled inside one minimized css
Create folder in yout project directory as
.(site root)
├── config.yml
├── content/
├── theme/hugo-PaperMod/
└── assets/
└── css/
└── extended/ <---
- │ ├── custom_css1.css <---
- │ └── any_name.css <---
+ ├── custom_css1.css <---
+ └── any_name.css <---
All css
files inside assets/css/extended
will be bundled !
Note: blank.css is just the placeholder so that it doesn’t break the theme when no files are present under assets/css/extended
Linked Issues:
Custom Head / Footer
Custom css/js can be added by way mentioned below.
.(site root)
├── config.yml
├── content/
@@ -101,7 +86,7 @@ This will only work with noClasses: false
or pygmentsUseClass
Read Generate Syntax Highlighter CSSAdd the following to assets/css/extended/custom.css
.chroma {
background-color: unset;
}
-
More Info : Configure Markup - Highlight
References
More Info : Configure Markup - Highlight
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.
The following is enabled by default
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 Page
- 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
@@ -33,6 +33,7 @@
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
@@ -48,7 +49,7 @@
url: "<link>"
- name: "<platform 2>"
url: "<link2>"
-
Search
PaperMod uses Fuse.js Basic for seach functionality
Add the following to site config, config.yml
outputs:
+
Search Page
PaperMod uses Fuse.js Basic for seach functionality
Add the following to site config, config.yml
outputs:
home:
- HTML
- RSS
@@ -63,7 +64,7 @@
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:
+
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 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.
params:
fuseOpts:
isCaseSensitive: false
shouldSort: true
@@ -97,9 +98,9 @@
ShowBreadCrumbs: false
---
-
Other Posts suggestion below a post
Adds a Previous / Next post suggestion under a single post
params:
+
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:
---
+
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 82c6a0c1..288ef738 100644
--- a/posts/papermod/papermod-icons/index.html
+++ b/posts/papermod/papermod-icons/index.html
@@ -1,10 +1,10 @@
-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:
+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:
+ - name: "kofi"
+ url: "https://kofi.com"
+ - name: "twitter"
+ url: "https://twitter.com"
+
Share Icons
No. Platform 1 twitter
(also generates hash tags from tags linked with post)2 linkedin
3 reddit
4 facebook
5 whatsapp
6 telegram
Usage:
params:
ShowShareButtons: true
© 2021 PaperMod
diff --git a/posts/papermod/papermod-installation/index.html b/posts/papermod/papermod-installation/index.html
index 4c9a8fee..e79c7d10 100644
--- a/posts/papermod/papermod-installation/index.html
+++ b/posts/papermod/papermod-installation/index.html
@@ -1,10 +1,9 @@
-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
+Installation | Update | PaperMod Installation | Update
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.
Guide
Follow Quick Start guide to setup hugo and create a new site.
Note: Use -f to select yml format
hugo new site <name of site> -f yml
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
+git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
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"
@@ -60,6 +59,7 @@ git submodule update --init --recursive
profileMode:
enabled: false # needs to be explicitly set
title: ExampleSite
+ subtitle: "This is subtitle"
imageUrl: "<img location>"
imageWidth: 120
imageHeight: 120
diff --git a/posts/papermod/papermod-variables/index.html b/posts/papermod/papermod-variables/index.html
index a164d753..fe57f92a 100644
--- a/posts/papermod/papermod-variables/index.html
+++ b/posts/papermod/papermod-variables/index.html
@@ -1,5 +1,11 @@
-Variables | Front Matter | PaperMod Variables | Front Matter [draft]
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 ShowPostNavLinks boolean true | false Show Previous and Next Posts below a Post ShowBreadCrumbs boolean true | false Show BreadCrumb Navigation above single post/page comments boolean true | false To show/hide comments analytics.google.SiteVerificationTag string “XYZabc” Site Verification Tag for Google Analytics analytics.bing.SiteVerificationTag string “XYZabc” Site Verification Tag for Bing analytics.yandex.SiteVerificationTag string “XYZabc” Site Verification Tag for Yandex fuseOpts - - Details socialIcons - - Details label - - Details assets - - Details cover - - Details profileMode - - Details
label
name type example Description 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
profileMode
name type example Description profileMode.enabled boolean true | false profileMode.title string “Title” profileMode.imageUrl string “image.png” | “https://example.com/image.jpg" profileMode.imageWidth string "” profileMode.imageHeight string "" profileMode.imageTitle string “This image is a picture of ..” profileMode.buttons - -
assets
name type example Description assets.favicon string ‘icon.ico’ To set favicon, can be path or external link assets.disableHLJS boolean assets.disableFingerprinting boolean
cover
name type example Description 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 boolean true | fals cover.hiddenInList boolean true | fals cover.hiddenInSingle boolean true | fals
fuseOpts
fuseOpts:
+Variables | Front Matter | PaperMod Variables | Front Matter [draft]
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 ShowPostNavLinks
boolean true | false Show Previous and Next Posts below a Post ShowBreadCrumbs
boolean true | false Show BreadCrumb Navigation above single post/page comments
boolean true | false To show/hide comments analytics.google.SiteVerificationTag
string “XYZabc” Site Verification Tag for Google Analytics analytics.bing.SiteVerificationTag
string “XYZabc” Site Verification Tag for Bing analytics.yandex.SiteVerificationTag
string “XYZabc” Site Verification Tag for Yandex fuseOpts
- - Details socialIcons
- - Details label
- - Details assets
- - Details cover
- - Details profileMode
- - Details
label
name type example Description 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
profileMode
name type example Description profileMode.enabled
boolean true | false For enabling profileMode, needs to be explicitly set profileMode.title
string “Title” Title profileMode.subtitle
string “subtitle here” Subtitle profileMode.imageUrl
string “image.png” | “https://example.com/image.jpg" Image URL or Link profileMode.imageWidth
string “150” Width of image profileMode.imageHeight
string “150” Height of image profileMode.imageTitle
string “This image is a picture of ..” Title of image profileMode.buttons
- - Details
profileMode.buttons
profileMode:
+ buttons:
+ - name: Archive
+ url: "/archive"
+ - name: Github
+ url: "https://github.com/"
+
assets
name type example Description assets.favicon
string ‘icon.ico’ To set favicon, can be path or external link assets.disableHLJS
boolean true | false To disable Highlight.js loading assets.disableFingerprinting
boolean true | false To disable Sub-Resource integrity for assets
cover
name type example Description 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
boolean true | false To hide everywhere but not in structured data cover.hiddenInList
boolean true | false To hide on list pages and home cover.hiddenInSingle
boolean true | false To hide on list pages and home
fuseOpts
Refer: https://fusejs.io/api/options.html
fuseOpts:
isCaseSensitive: false
shouldSort: true
location: 0
@@ -12,13 +18,7 @@
url: "<link>"
- name: "<platform 2>"
url: "<link2>"
-
profileMode:
- buttons:
- - name: Archive
- url: "/archive"
- - name: Github
- url: "https://github.com/"
-
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 boolean true | false searchHidden boolean true | false ShowBreadCrumbs boolean true | false Show BreadCrumb Navigation above single post/page 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 boolean true | false weight integer 5 To set page order or to pin a post to Top of list
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
boolean true | false To disable Highlight.js loading searchHidden
boolean true | false Hide page from search ShowBreadCrumbs
boolean true | false Show BreadCrumb Navigation above single post/page 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
boolean true | false To hide on current single page weight
integer 5 To set page order or to pin a post to Top of list
© 2021 PaperMod
·
Powered by Hugo
diff --git a/series/papermod/index.html b/series/papermod/index.html
index 9d49d729..86b499a4 100644
--- a/series/papermod/index.html
+++ b/series/papermod/index.html
@@ -1,5 +1,5 @@
PaperMod | PaperMod PaperMod
Installation | Update
Read Install and Update instructions here...
January 20, 2021 · 3 min · Aditya Telange © 2021 PaperMod
+
PaperMod
Installation | Update
Read Install and Update instructions here...
January 20, 2021 · 4 min · Aditya Telange © 2021 PaperMod
·
Powered by Hugo
·
diff --git a/tags/papermod/index.html b/tags/papermod/index.html
index 8c3fd83f..952d3411 100644
--- a/tags/papermod/index.html
+++ b/tags/papermod/index.html
@@ -1,5 +1,5 @@
PaperMod | PaperMod 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
+ PaperMod
Installation | Update
Read Install and Update instructions here...
January 20, 2021 · 4 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 · 4 min · Aditya Telange © 2021 PaperMod
·
Powered by Hugo
·