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 123rf123rf.com 2 adobestockstock.adobe.com 3 behancebehance.net 4 buymeacoffeebuymeacoffee.com 5 codepencodepen.io 6 cryptohackcryptohack.org 7 devdev.to 8 discogsdiscogs.com 9 discorddiscord.com 10 dreamstimedreamstime.com 11 dribbbledribbble.com 12 email- 13 facebookfacebook.com 14 freepikfreepik.com 15 githubgithub.com 16 gitlabgitlab.com 17 hackerrankhackerrank.com 18 hacktheboxhackthebox.eu 19 instagraminstagram.com 20 kakaotalkkakaocorp.com/service/KakaoTalk 21 keybasekeybase.io 22 kofiko-fi.com 23 lastfmlast.fm 24 linkedinlinkedin.com 25 mastodonmastodon.social 26 mediummedium.com 27 mixcloudmixcloud.com 28 nugetnuget.org 29 paypalpaypal.com 30 qqqq.com 31 redditreddit.com 32 rss- 33 soundcloudsoundcloud.com 34 shutterstockshutterstock.com 35 slackslack.com 36 snapchatsnapchat.com/add 37 sourcerersourcerer.io 38 stackoverflowstackoverflow.com 39 steamsteampowered.com 40 telegramtelegram.org 41 twitchtwitch.tv 42 twittertwitter.com 43 youtubeyoutube.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 linkedin3 reddit4 facebook5 whatsapp6 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 envstring ‘production’ To set env to production titlestring ‘My Blog’ To set title descriptionstring ‘This is a blog of mine’ To set site description authorstring |list ‘Me’ | [‘Me’,‘You’] To show multiple Authors imagesstring ‘myimage.png’ Link or path of image for opengraph, twitter-cards ShowReadingTimeboolean true | false To show read time in post meta ShowShareButtonsboolean true | false To show/hide share buttons under post defaultThemestring light | dark | auto To set default theme disableThemeToggleboolean true | false To disable theme toggle icon shown besides label disableSpecial1stPostboolean true | false To disable no-card special appearance of 1st post hidemetaboolean true | false To Hide meta elements : date, read-time, author and available-translations for page showtocboolean true | false To show/hide Table of Contents tocopenboolean true | false To keep open ToC by default on page load ShowPostNavLinksboolean true | false Show Previous and Next Posts below a Post ShowBreadCrumbsboolean true | false Show BreadCrumb Navigation above single post/page commentsboolean true | false To show/hide comments analytics.google.SiteVerificationTagstring “XYZabc” Site Verification Tag for Google Analytics analytics.bing.SiteVerificationTagstring “XYZabc” Site Verification Tag for Bing analytics.yandex.SiteVerificationTagstring “XYZabc” Site Verification Tag for Yandex fuseOpts- - Details socialIcons- - Details label- - Details assets- - Details cover- - Details profileMode- - Details
label
name type example Description label.textstring ‘Home’ To display different label text other than title label.iconstring ‘/apple-touch-icon.png’ To display a logo image in label label.iconHeightinteger 35 To set size of label logo image
profileMode
name type example Description profileMode.enabledboolean true | false For enabling profileMode, needs to be explicitly set profileMode.titlestring “Title” Title profileMode.subtitlestring “subtitle here” Subtitle profileMode.imageUrlstring “image.png” | “https://example.com/image.jpg" Image URL or Link profileMode.imageWidthstring “150” Width of image profileMode.imageHeightstring “150” Height of image profileMode.imageTitlestring “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.faviconstring ‘icon.ico’ To set favicon, can be path or external link assets.disableHLJSboolean true | false To disable Highlight.js loading assets.disableFingerprintingboolean true | false To disable Sub-Resource integrity for assets
cover
name type example Description cover.linkFullImagesboolean true | false To open full size cover images on click on cover cover.responsiveImagesboolean true | false To enable/disable generation of responsive cover images cover.hiddenboolean true | false To hide everywhere but not in structured data cover.hiddenInListboolean true | false To hide on list pages and home cover.hiddenInSingleboolean 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 showtocboolean true | false To show/hide Table of Contents tocopenboolean true | false To keep open ToC by default on page load hidemetaboolean true | false To Hide meta elements : date, read-time, author and available-translations for page commentsboolean true | false To show/hide comments descriptionstring ‘description text’ Show Post Description under Title disableShareboolean true | false To hide/show share icons under a page disableHLJSboolean true | false To disable Highlight.js loading searchHiddenboolean true | false Hide page from search ShowBreadCrumbsboolean true | false Show BreadCrumb Navigation above single post/page authorstring |list ‘Me’ | [‘Me’,‘You’] To show multiple Authors cover.imagestring ‘featured.jpg’ To add a cover image cover.captionstring ‘caption for image’ To add caption to cover image cover.altstring ‘this is cover image’ Alternate text to show if image doesn’t load/show up cover.relativeboolean true | false To use relative path for cover image, used in hugo Page-bundles cover.hiddenboolean true | false To hide on current single page weightinteger 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
·