Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...
404
PaperMod
☄️ Fast | ☁️ Fluent | 🌙 Smooth | 📱 Responsive
+PaperModL2 Posts | PaperModL2 Posts
+
\ No newline at end of file
+ PaperMod
\ No newline at end of file
diff --git a/fr/posts/markdown-syntax/index.html b/fr/posts/markdown-syntax/index.html
index 9fa6f7df..8efd1190 100644
--- a/fr/posts/markdown-syntax/index.html
+++ b/fr/posts/markdown-syntax/index.html
@@ -1,17 +1,17 @@
-PaperMod
☄️ Fast | ☁️ Fluent | 🌙 Smooth | 📱 ResponsivePosts
+Posts | PaperModL2 Posts
Markdown Syntax Guide For L2
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-...
Posts
Markdown Syntax Guide For L2
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...
Markdown Syntax Guide For L2
Sample article showcasing basic Markdown syntax and formatting for HTML elements.
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Headings
The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.
H1
H2
H3
H4
H5
H6
Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
Blockquote without attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. +
Markdown Syntax Guide For L2 | PaperModL2 Markdown Syntax Guide For L2
Sample article showcasing basic Markdown syntax and formatting for HTML elements.This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Headings
The following HTML
<h1>—<h6>elements represent six levels of section headings.<h1>is the highest section level while<h6>is the lowest.H1
H2
H3
H4
H5
H6
Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a
footerorciteelement, and optionally with in-line changes such as annotations and abbreviations.Blockquote without attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
Blockquote with attribution
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
Tables
Tables aren’t part of the core Markdown spec, but Hugo supports them out-of-the-box.
Name Age Bob 27 Alice 23 Inline Markdown within tables
Italics Bold Code italics bold codeCode Blocks
Inline Code
This is Inline CodeOnly
preThis is pre text -Code block with backticks
<!DOCTYPE html> -<html lang="en"> +Code block with backticks
<!DOCTYPE html> +<html lang="en"> <head> - <meta charset="utf-8" /> + <meta charset="utf-8" /> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body> </html> -Code block with backticks and language specified
1 +Code block with backticks and language specified
1 2 3 4 @@ -22,18 +22,18 @@ This is pre text 9 10 11 -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Example HTML5 Document</title> - <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."> - </head> - <body> - <p>Test</p> - </body> -</html> -Code block indented with four spaces
<!doctype html> +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Example HTML5 Document</title> + <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."> + </head> + <body> + <p>Test</p> + </body> +</html> +Code block indented with four spaces
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -43,16 +43,16 @@ This is pre text <p>Test</p> </body> </html> -Code block with Hugo’s internal highlight shortcode
<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Example HTML5 Document</title> -</head> -<body> - <p>Test</p> -</body> -</html>Gist
List Types
Ordered List
- First item
- Second item
- Third item
Unordered List
- List item
- Another item
- And another item
Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Other Elements — abbr, sub, sup, kbd, mark
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
SearchL2
PaperMod
Welcome to demo of hugo’s theme PaperMod.
- PaperMod is a simple but fast and responsive theme with useful feature-set that enhances UX.
- Do give a 🌟 on Github !
- PaperMod is based on theme Paper.
Installation | Update
Read Install and Update instructions here
Features
Learn About All Features in PaperMod
FAQs [draft]
Frequently Asked Questions
Icons [draft]
List of all Icons supported by PaperMod
Variables | Front Matter [draft]
List of Front Matter variables used by PaperMod
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. -...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo. +
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. +...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. +...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo. ...
Math Typesetting
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. -...
Emoji Support
Emoji can be enabled in a Hugo project in a number of ways. -...
Emoji Support
Emoji can be enabled in a Hugo project in a number of ways. +...
Emoji Support
Guide to emoji usage in Hugo
Emoji can be enabled in a Hugo project in a number of ways.
The emojify function can be called directly in templates or Inline Shortcodes.
To enable emoji globally, set enableEmoji to true in your site’s configuration and then you can type emoji shorthand codes directly in content files; e.g.
🙈 🙈 🙉 🙉 🙊 🙊
The Emoji cheat sheet is a useful reference for emoji shorthand codes.
N.B. The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.
.emoji {
-font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
-}Posts
+Posts | PaperMod Posts
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
-...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo.
+...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
+...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo.
...
Math Typesetting
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
-...
Emoji Support
Emoji can be enabled in a Hugo project in a number of ways.
-...
Posts
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. -...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo. +...
Rich Content
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds. +...
Placeholder Text
Lorem est tota propiore conpellat pectoribus de pectora summo. ...
Math Typesetting
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries. -...
Emoji Support
Emoji can be enabled in a Hugo project in a number of ways. -...
Emoji Support
Emoji can be enabled in a Hugo project in a number of ways. +...
Markdown Syntax Guide
Sample article showcasing basic Markdown syntax and formatting for HTML elements.
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Headings
The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.
H1
H2
H3
H4
H5
H6
Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.
Blockquote without attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. +
Markdown Syntax Guide | PaperMod Markdown Syntax Guide
Sample article showcasing basic Markdown syntax and formatting for HTML elements.This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
Headings
The following HTML
<h1>—<h6>elements represent six levels of section headings.<h1>is the highest section level while<h6>is the lowest.H1
H2
H3
H4
H5
H6
Paragraph
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
Blockquotes
The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a
footerorciteelement, and optionally with in-line changes such as annotations and abbreviations.Blockquote without attribution
Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.
Blockquote with attribution
Don’t communicate by sharing memory, share memory by communicating.
— Rob Pike1
Tables
Tables aren’t part of the core Markdown spec, but Hugo supports them out-of-the-box.
Name Age Bob 27 Alice 23 Inline Markdown within tables
Italics Bold Code italics bold codeCode Blocks
Inline Code
This is Inline CodeOnly
preThis is pre text -Code block with backticks
<!DOCTYPE html> -<html lang="en"> +Code block with backticks
<!DOCTYPE html> +<html lang="en"> <head> - <meta charset="utf-8" /> + <meta charset="utf-8" /> <title>Example HTML5 Document</title> </head> <body> <p>Test</p> </body> </html> -Code block with backticks and language specified
1 +Code block with backticks and language specified
1 2 3 4 @@ -22,18 +22,18 @@ This is pre text 9 10 11 -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Example HTML5 Document</title> - <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."> - </head> - <body> - <p>Test</p> - </body> -</html> -Code block indented with four spaces
<!doctype html> +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8" /> + <title>Example HTML5 Document</title> + <meta name="description" content="Sample article showcasing basic Markdown syntax and formatting for HTML elements."> + </head> + <body> + <p>Test</p> + </body> +</html> +Code block indented with four spaces
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> @@ -43,17 +43,17 @@ This is pre text <p>Test</p> </body> </html> -Code block with Hugo’s internal highlight shortcode
<!doctype html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <title>Example HTML5 Document</title> -</head> -<body> - <p>Test</p> -</body> -</html>Gist
List Types
Ordered List
- First item
- Second item
- Third item
Unordered List
- List item
- Another item
- And another item
Nested list
- Fruit
- Apple
- Orange
- Banana
- Dairy
- Milk
- Cheese
Other Elements — abbr, sub, sup, kbd, mark
GIF is a bitmap image format.
H2O
Xn + Yn = Zn
Press CTRL+ALT+Delete to end the session.
Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.
Math Typesetting
A brief guide to setup KaTeX
Table of Contents
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
In this example we will be using KaTeX
- Create a partial under
/layouts/partials/math.html - Within this partial reference the Auto-render Extension or host these scripts locally.
- Include the partial in your templates (
extend_head.html) like so: - refer ISSUE #236
{{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
-{{ end }}
-- To enable KaTex globally set the parameter
mathtotruein a project’s configuration - To enable KaTex on a per page basis include the parameter
math: truein content files
Note: Use the online reference of Supported TeX Functions
-Examples
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
Block math:
$$ +
Math Typesetting
A brief guide to setup KaTeX
Table of Contents
Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.
In this example we will be using KaTeX
- Create a partial under
/layouts/partials/math.html - Within this partial reference the Auto-render Extension or host these scripts locally.
- Include the partial in your templates (
extend_head.html) like so: - refer ISSUE #236
{{ if or .Params.math .Site.Params.math }}
+{{ partial "math.html" . }}
+{{ end }}
+- To enable KaTex globally set the parameter
mathtotruein a project’s configuration - To enable KaTex on a per page basis include the parameter
math: truein content files
Note: Use the online reference of Supported TeX Functions
Examples
Inline math: \(\varphi = \dfrac{1+\sqrt5}{2}= 1.6180339887…\)
Block math:
$$ \varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } } $$
Posts -
PaperMod
Contains posts related to PaperMod
PaperMod -
Contains posts related to PaperMod
Installation | Update
Read Install and Update instructions here
Features
Learn About All Features in PaperMod
FAQs [draft]
Frequently Asked Questions
Icons [draft]
List of all Icons supported by PaperMod
Variables | Front Matter [draft]
List of Front Matter variables used by 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”
- Search not working ?
- References
Intro
We’ll be using
yml/yamlformat for all examples down below, I recommend usingymlovertomlas 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:
- env: production
-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/
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)
+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”
- Search not working ?
- 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:
+ env: production
+
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/
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/
@@ -15,7 +15,7 @@ When Hugo builds your site, your copy of list.html will be used ins
└── extended/ <---
├── 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)
+
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/
├── theme/hugo-PaperMod/
@@ -25,68 +25,70 @@ When Hugo builds your site, your copy of list.html will be used ins
│ ├── extend_footer.html <---
│ └── extend_head.html <---
└── robots.txt
-
Create a html page in directory structure as shown above.
Contents of extend_head.html will be added to head of page.
and contents of extend_footer.html will be added to bottom of page.
Add menu to site
You can add menu entries which will appear in the header of every page.
To do so, add a menu section to your site’s config.yml:
menu:
- main:
- - identifier: categories
- name: categories
- url: /categories/
- weight: 10
- - identifier: tags
- name: tags
- url: /tags/
- weight: 20
- - identifier: example
- name: example.org
- url: https://example.org
- weight: 30
-
name controls what will be displayed for the menu entry.
+
Create a html page in directory structure as shown above.
Contents of extend_head.html will be added to head of page.
and contents of extend_footer.html will be added to bottom of page.
Add menu to site
You can add menu entries which will appear in the header of every page.
To do so, add a menu section to your site’s config.yml:
menu:
+ main:
+ - identifier: categories
+ name: categories
+ url: /categories/
+ weight: 10
+ - identifier: tags
+ name: tags
+ url: /tags/
+ weight: 20
+ - identifier: example
+ name: example.org
+ url: https://example.org
+ weight: 30
+
name controls what will be displayed for the menu entry.
url sets the URL that the entry points to.
-weight is used to control the positioning of entries.
For more information on menus, see the Hugo wiki page.
Pin a Post
Post can be pinned/ displayed top on the list by adding a weight=<num> var to page-variables
example:
---
-title: "My Important post"
-date: 2020-09-15T11:30:03+00:00
-weight: 1
----
-
---
-title: "My 2nd Important post"
-date: 2020-09-15T11:30:03+00:00
-weight: 2
----
-
Adding Custom Favicon(s)
We support the following paths under /static directory
-and can be added accordingly.
favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngsafari-pinned-tab.svg
Favicon(s) can be generated by Favicon.io
and can be simply put in /static folder.
Other way is to add favicon(s) NOT located in /static folder.
In site config add the following:
params:
+weight is used to control the positioning of entries.For more information on menus, see the Hugo wiki page.
Pin a Post
Post can be pinned/ displayed top on the list by adding a weight=<num> var to page-variables
example:
---
+title: "My Important post"
+date: 2020-09-15T11:30:03+00:00
+weight: 1
+---
+
+
---
+title: "My 2nd Important post"
+date: 2020-09-15T11:30:03+00:00
+weight: 2
+---
+
+
Adding Custom Favicon(s)
We support the following paths under /static directory
+and can be added accordingly.
favicon.icofavicon-16x16.pngfavicon-32x32.pngapple-touch-icon.pngsafari-pinned-tab.svg
Favicon(s) can be generated by Favicon.io
and can be simply put in /static folder.
Other way is to add favicon(s) NOT located in /static folder.
In site config add the following:
params:
assets:
- favicon: "<link / absolute url>"
- favicon16x16: "<link / absolute url>"
- favicon32x32: "<link / absolute url>"
- apple_touch_icon: "<link / absolute url>"
- safari_pinned_tab: "<link / absolute url>"
-
absolute url means direct links to external resource: ex. https://web.site/someimage.png
example:
params:
+ favicon: "<link / absolute url>"
+ favicon16x16: "<link / absolute url>"
+ favicon32x32: "<link / absolute url>"
+ apple_touch_icon: "<link / absolute url>"
+ safari_pinned_tab: "<link / absolute url>"
+
absolute url means direct links to external resource: ex. https://web.site/someimage.png
example:
params:
assets:
- favicon: "/favicon.ico"
- favicon16x16: "/favicon-16x16.png"
- favicon32x32: "/favicon-32x32.png"
- apple_touch_icon: "/apple-touch-icon.png"
- safari_pinned_tab: "/safari-pinned-tab.svg"
-
Centering image in markdown
Add #center after image to center align an image
-
When using figure shortcode
use align=center to center image with captions
ex.
{{< figure align=center src="image.jpg" >}}
-
Using Hugo’s Syntax highlighter “chroma”
Disable Highlight.js in site config.yml
params:
- assets:
- disableHLJS: true
-
Set hugo’s markdown styling in site config.yml
markup:
- highlight:
- # anchorLineNos: true
- codeFences: true
- guessSyntax: true
- lineNos: true
- # noClasses: false
- style: monokai
-
If you want lineNos: true, the background won’t be proper.
+ favicon: "/favicon.ico"
+ favicon16x16: "/favicon-16x16.png"
+ favicon32x32: "/favicon-32x32.png"
+ apple_touch_icon: "/apple-touch-icon.png"
+ safari_pinned_tab: "/safari-pinned-tab.svg"
+
Centering image in markdown
Add #center after image to center align an image
+
When using figure shortcode
use align=center to center image with captions
ex.
{{< figure align=center src="image.jpg" >}}
+
Using Hugo’s Syntax highlighter “chroma”
Disable Highlight.js in site config.yml
params:
+ assets:
+ disableHLJS: true
+
Set hugo’s markdown styling in site config.yml
markup:
+ highlight:
+ # anchorLineNos: true
+ codeFences: true
+ guessSyntax: true
+ lineNos: true
+ # noClasses: false
+ style: monokai
+
If you want lineNos: true, the background won’t be proper.
This will only work with noClasses: false or pygmentsUseClasses: true.
-Read Generate Syntax Highlighter CSS
Add the following to assets/css/extended/custom.css
.chroma {
- background-color: unset;
-}
-
More Info : Configure Markup - Highlight
Search not working ?
If you are using a CDN to server assets from a different domain, search would break
Why? Take a look at fastsearch.js#L35.
We fetch the index.json (where the search function looks for the keywords typed) one level up of the website search.min.js is hosted on.
We have used this insted of assigning baseURL so as to work with multilingual websites ex. example.com/fr/ and websites being placed under a subdirectory ex. example.com/blog/.
To fix for single language websites hosting assets from CDN, this you may override fastsearch.js#L35 and placing appropriate URL as in
xhr.open("GET", "https://example.com/index.json");
-
References
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
- Edit Link for Posts
- Other Posts suggestion below a post
- Code Copy Button
- Multiple Authors
- Comments
- AccessKeys
- Enhanced SEO
- Multilingual Support
- Misc
Intro
We’ll be using
yml/yamlformat for all examples down below, I recommend usingymlovertomlas 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
.
-├── 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)
Home-Info Mode
Use 1st entry as some Information
add following to config file
params:
- homeInfoParams:
- Title: Hi there wave
- Content: Can be Info, links, about...
-
- socialIcons: # optional
- - name: "<platform>"
- url: "<link>"
- - name: "<platform 2>"
- url: "<link2>"
-Profile Mode
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
- subtitle: "This is subtitle"
- imageUrl: "<image link>" # optional
- imageTitle: "<title of image as alt>" # optional
- imageWidth: 120 # custom size
- imageHeight: 120 # custom size
- buttons:
- - name: Archive
- url: "/archive"
- - name: Github
- url: "https://github.com/"
-
- socialIcons: # optional
- - name: "<platform>"
- url: "<link>"
- - name: "<platform 2>"
- url: "<link2>"
-Search Page
PaperMod uses Fuse.js Basic for search functionality
Add the following to site config, config.yml
outputs:
- home:
- - HTML
- - RSS
- - JSON # is necessary
-Create a page with search.md 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"
-placeholder: "placeholder text in search input box"
----
-To hide a particular page from being searched, add it in post’s frontmatter
---
-searchHidden: true
-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 the 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
- 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 :
cover:
- 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>"
- 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
params:
- cover:
- responsiveImages: false
-To enable hyperlinks to the full image size on post pages, use
params:
- cover:
- linkFullImages: true
-Share Buttons on post
Displays Share Buttons at Bottom of each post
to show share buttons add
params:
- 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
Params:
- 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
-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
----
-Edit Link for Posts
Add a button to suggest changes by using the file path of the post to link to a edit destination.
For site config use:
Params:
- editPost:
- URL: "https://github.com/<path_to_repo>/content"
- Text: "Suggest Changes" # edit text
- appendFilePath: true # to append file path to Edit link
-Can be modified for individual pages
---
-editPost:
- URL: "https://github.com/<path_to_repo>/content"
- Text: "Suggest Changes" # edit text
- appendFilePath: true # to append file path to Edit link
----
-The example above would yield the following link for the post file posts/post-name.md:
+
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
- Edit Link for Posts
- Other Posts suggestion below a post
- Code Copy Button
- Multiple Authors
- Comments
- AccessKeys
- Enhanced SEO
- Multilingual Support
- Misc
Intro
We’ll be using
yml/yamlformat for all examples down below, I recommend usingymlovertomlas 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
.
+├── 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)
Home-Info Mode
Use 1st entry as some Information
add following to config file
params:
+ homeInfoParams:
+ Title: Hi there wave
+ Content: Can be Info, links, about...
+
+ socialIcons: # optional
+ - name: "<platform>"
+ url: "<link>"
+ - name: "<platform 2>"
+ url: "<link2>"
+Profile Mode
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
+ subtitle: "This is subtitle"
+ imageUrl: "<image link>" # optional
+ imageTitle: "<title of image as alt>" # optional
+ imageWidth: 120 # custom size
+ imageHeight: 120 # custom size
+ buttons:
+ - name: Archive
+ url: "/archive"
+ - name: Github
+ url: "https://github.com/"
+
+ socialIcons: # optional
+ - name: "<platform>"
+ url: "<link>"
+ - name: "<platform 2>"
+ url: "<link2>"
+Search Page
PaperMod uses Fuse.js Basic for search functionality
Add the following to site config, config.yml
outputs:
+ home:
+ - HTML
+ - RSS
+ - JSON # is necessary
+Create a page with search.md 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"
+placeholder: "placeholder text in search input box"
+---
+To hide a particular page from being searched, add it in post’s frontmatter
---
+searchHidden: true
+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 the 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
+ 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 :
cover:
+ 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>"
+ 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
params:
+ cover:
+ responsiveImages: false
+To enable hyperlinks to the full image size on post pages, use
params:
+ cover:
+ linkFullImages: true
+Share Buttons on post
Displays Share Buttons at Bottom of each post
to show share buttons add
params:
+ 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
Params:
+ 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
+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
+---
+Edit Link for Posts
Add a button to suggest changes by using the file path of the post to link to a edit destination.
For site config use:
Params:
+ editPost:
+ URL: "https://github.com/<path_to_repo>/content"
+ Text: "Suggest Changes" # edit text
+ appendFilePath: true # to append file path to Edit link
+Can be modified for individual pages
---
+editPost:
+ URL: "https://github.com/<path_to_repo>/content"
+ Text: "Suggest Changes" # edit text
+ appendFilePath: true # to append file path to Edit link
+---
+The example above would yield the following link for the post file posts/post-name.md:
https://github.com/<path_to_repo>/content/posts/post-name.md
| Parameter | Required | Default Value |
|---|---|---|
| editPost.URL | true | - |
| editPost.appendFilePath | false | false |
| editPost.Text | false | “Edit” |
Since the link generated is a regular HTML anchor tag <a href=...>, you can
also use other URL schemas like mailto://, e.g.
-URL: "mailto://mail@example.com?subject=Suggesting changes for "
Other Posts suggestion below a post
Adds a Previous / Next post suggestion under a single post
params:
- ShowPostNavLinks: true
-Code Copy Button
Adds a copy button in code block to copy the code it contains
params:
- ShowCodeCopyButtons: 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:
params:
- author: ["Me", "You"]
-Comments
to add comments, create a html file
layouts/partials/comments.html
and paste code provided by your comments provider
also in config add this
params:
- comments: true
-read more about this hugo-comments
AccessKeys
c - ToC Open/Close
-g - Go To Top
-h - Home (according to current lang)
-t - Theme toggle
-/ - Jumps to search page if in menu
-Enhanced SEO
Enabled only when env: production
Twitter Cards Support
- The Twitter Cards metadata, except
twitter:imageshould not require +URL: "mailto://mail@example.com?subject=Suggesting changes for "Other Posts suggestion below a post
Adds a Previous / Next post suggestion under a single post
params: + ShowPostNavLinks: true +Code Copy Button
Adds a
copybutton in code block to copy the code it containsparams: + ShowCodeCopyButtons: 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:params: + author: ["Me", "You"] +Comments
to add comments, create a html file
layouts/partials/comments.htmland paste code provided by your comments provider
also in config add this
params: + comments: true +read more about this hugo-comments
AccessKeys
c - ToC Open/Close +g - Go To Top +h - Home (according to current lang) +t - Theme toggle +/ - Jumps to search page if in menu +Enhanced SEO
Enabled only when
env: productionTwitter Cards Support
- The Twitter Cards metadata, except
twitter:imageshould not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). - The
twitter:imageuses the Post Cover Image, if present. - In the absence of a cover images, the first image from the
images-frontmatter (a list) is used.images: - - image_01.png - - image_02.png - - Finally, if neither of those are provided,
twitter:imagecomes from the first +frontmatter (a list) is used.images: + - image_01.png + - image_02.png + - Finally, if neither of those are provided,
twitter:imagecomes from the first Page Bundle image withfeaturein the name, with a fallback to the first image withcoverorthumbnailin the name.
OpenGraph support
- The OpenGraph metadata, except
og:imageshould not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). - The
og:imageuses the Post Cover Image, if present. - In the absence of a cover images, the first image from the
images-frontmatter (a list) is used.images: - - image_01.png - - image_02.png - - Finally, if neither of those are provided,
og:imagecomes from the first +frontmatter (a list) is used.images: + - image_01.png + - image_02.png + - Finally, if neither of those are provided,
og:imagecomes from the first Page Bundle image withfeaturein the name, with a fallback to the first image withcoverorthumbnailin the name. - For pages, you can also add audio (using frontmatter
audio: filename.ext) and/or -videos.videos: - - filename01.mov - - filename02.avi -
Multilingual Support
Misc
Scroll-Bar themed (by default)
Smooth Scroll between in-page links (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
- The Twitter Cards metadata, except
Icons [draft]
Table of Contents
Social Icons
| Name | Platform Link |
|---|---|
123rf | 123rf.com |
adobestock | stock.adobe.com |
apple music | music.apple.com |
behance | behance.net |
bilibili | bilibili.com |
bitcoin | - |
buymeacoffee | buymeacoffee.com |
codepen | codepen.io |
cryptohack | cryptohack.org |
ctftime | ctftime.org |
cv | - |
deezer | deezer.com |
dev | dev.to |
discogs | discogs.com |
discord | discord.com |
dreamstime | dreamstime.com |
dribbble | dribbble.com |
email | - |
facebook | facebook.com |
flickr | flickr.com |
freepik | freepik.com |
gitea | gitea.io |
github | github.com |
gitlab | gitlab.com |
goodreads | goodreads.com |
googlescholar | scholar.google.com |
guruShots | gurushots.com |
hackerone | hackerone.com |
hackerrank | hackerrank.com |
hackthebox | hackthebox.eu |
instagram | instagram.com |
itchio | itch.io |
kaggle | - |
kakaotalk | kakaocorp.com/service/KakaoTalk |
key | - |
keybase | keybase.io |
kofi | ko-fi.com |
komoot | - |
lastfm | last.fm |
letterboxd | - |
liberapay | liberapay.com |
linkedin | linkedin.com |
mastodon | mastodon.social |
matrix | matrix.org |
medium | medium.com |
monero | - |
mixcloud | mixcloud.com |
nuget | nuget.org |
paypal | paypal.com |
peertube | - |
pgp | - |
phone | - |
ploywork | ploywork.com |
qq | qq.com |
reddit | reddit.com |
researchgate | researchgate.net |
rss | - |
serverfault | serverfault.com |
soundcloud | soundcloud.com |
shutterstock | shutterstock.com |
slack | slack.com |
snapchat | snapchat.com/add |
spotify | spotify.com |
stackoverflow | stackoverflow.com |
steam | steampowered.com |
strava | strava.com |
telegram | telegram.org |
| `tiktok | tiktok.com |
twitch | twitch.tv |
twitter | twitter.com |
unsplash | unsplash.com |
xda | xda-developers.com |
xing | xing.com |
ycombinator | ycombinator.com |
youtube | youtube.com |
other | - |
Usage :
socialIcons:
- - name: "kofi"
- url: "https://kofi.com"
- - name: "twitter"
- url: "https://twitter.com"
-Share Icons
| No. | Platform |
|---|---|
twitter (also generates hash tags from tags linked with post) | |
linkedin | |
reddit | |
facebook | |
whatsapp | |
telegram |
Usage:
params:
- ShowShareButtons: true
-params:
- ShareButtons: ["linkedin", "twitter"] # To customize which share buttons to be enabled on page
-Installation | Update
Intro
- We’ll be using
yml/yamlformat for all examples down below, I recommend usingymlovertomlas it is easier to read. - You can find any YML to TOML converters if necessary.
Guide
Follow Quick Start guide to setup
-
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.83.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 v5.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 --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
-git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
-Note: You may use --branch v5.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"
-Method 4
Install Go programming language in your operating system.
Intialize your own hugo mod
hugo mod init YOUR_OWN_GIT_REPOSITORY
-- Add PaperMod in your
config.ymlfile
module:
+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
+ 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.83.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 v5.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 --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
+git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)
+
Note: You may use --branch v5.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"
+
Method 4
Install Go programming language in your operating system.
Intialize your own hugo mod
hugo mod init YOUR_OWN_GIT_REPOSITORY
+
- Add PaperMod in your
config.yml file
module:
imports:
- path: github.com/adityatelange/hugo-PaperMod
-
- Update theme
hugo mod get -u
-
Quick Links
Sample config.yml
Example Site Structure is present here: exampleSite
Use appropriately
baseURL: "https://examplesite.com/"
-title: ExampleSite
-paginate: 5
-theme: PaperMod
-
-enableRobotsTXT: true
-buildDrafts: false
-buildFuture: false
-buildExpired: false
-
-googleAnalytics: UA-123-45
-
-minify:
- disableXML: true
- minifyOutput: true
-
-params:
- env: production # to enable google analytics, opengraph, twitter-cards and schema.
- title: ExampleSite
- description: "ExampleSite description"
- keywords: [Blog, Portfolio, PaperMod]
- author: Me
- # author: ["Me", "You"] # multiple authors
- images: ["<link or path of image for opengraph, twitter-cards>"]
- DateFormat: "January 2, 2006"
- defaultTheme: auto # dark, light
- disableThemeToggle: false
-
- ShowReadingTime: true
- ShowShareButtons: true
- ShowPostNavLinks: true
- ShowBreadCrumbs: true
- ShowCodeCopyButtons: false
- ShowWordCount: true
- ShowRssButtonInSectionTermList: true
- UseHugoToc: true
- disableSpecial1stPost: false
- disableScrollToTop: false
- comments: false
- hidemeta: false
- hideSummary: false
- showtoc: false
- tocopen: false
-
- assets:
- # disableHLJS: true # to disable highlight.js
- # disableFingerprinting: true
- favicon: "<link / abs url>"
- favicon16x16: "<link / abs url>"
- favicon32x32: "<link / abs url>"
- apple_touch_icon: "<link / abs url>"
- safari_pinned_tab: "<link / abs url>"
-
- label:
- text: "Home"
- icon: /apple-touch-icon.png
- iconHeight: 35
-
- # profile-mode
- profileMode:
- enabled: false # needs to be explicitly set
- title: ExampleSite
- subtitle: "This is subtitle"
- imageUrl: "<img location>"
- imageWidth: 120
- imageHeight: 120
- imageTitle: my image
- buttons:
- - name: Posts
- url: posts
- - name: Tags
- url: tags
-
- # home-info mode
- homeInfoParams:
- Title: "Hi there \U0001F44B"
- Content: Welcome to my blog
-
- socialIcons:
- - name: twitter
- url: "https://twitter.com/"
- - name: stackoverflow
- url: "https://stackoverflow.com"
- - name: github
- url: "https://github.com/"
-
- analytics:
- google:
- SiteVerificationTag: "XYZabc"
- bing:
- SiteVerificationTag: "XYZabc"
- yandex:
- SiteVerificationTag: "XYZabc"
-
- cover:
- hidden: true # hide everywhere but not in structured data
- hiddenInList: true # hide on list pages and home
- hiddenInSingle: true # hide on single page
-
- editPost:
- URL: "https://github.com/<path_to_repo>/content"
- Text: "Suggest Changes" # edit text
- appendFilePath: true # to append file path to Edit link
-
- # for search
- # https://fusejs.io/api/options.html
- fuseOpts:
- isCaseSensitive: false
- shouldSort: true
- location: 0
- distance: 1000
- threshold: 0.4
- minMatchCharLength: 0
- keys: ["title", "permalink", "summary", "content"]
-menu:
- main:
- - identifier: categories
- name: categories
- url: /categories/
- weight: 10
- - identifier: tags
- name: tags
- url: /tags/
- weight: 20
- - identifier: example
- name: example.org
- url: https://example.org
- weight: 30
-# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
-pygmentsUseClasses: true
-markup:
- highlight:
- noClasses: false
- # anchorLineNos: true
- # codeFences: true
- # guessSyntax: true
- # lineNos: true
- # style: monokai
-
Sample Page.md
---
-title: "My 1st post"
-date: 2020-09-15T11:30:03+00:00
-# weight: 1
-# aliases: ["/first"]
-tags: ["first"]
-author: "Me"
-# author: ["Me", "You"] # multiple authors
-showToc: true
-TocOpen: false
-draft: false
-hidemeta: false
-comments: false
-description: "Desc Text."
-canonicalURL: "https://canonical.url/to/page"
-disableHLJS: true # to disable highlightjs
-disableShare: false
-disableHLJS: false
-hideSummary: false
-searchHidden: true
-ShowReadingTime: true
-ShowBreadCrumbs: true
-ShowPostNavLinks: true
-ShowWordCount: true
-ShowRssButtonInSectionTermList: true
-UseHugoToc: true
-cover:
- image: "<image path/url>" # image path/url
- alt: "<alt text>" # alt text
- caption: "<text>" # display caption under cover
- relative: false # when using page bundles set this to true
- hidden: true # only hide on current single page
-editPost:
- URL: "https://github.com/<path_to_repo>/content"
- Text: "Suggest Changes" # edit text
- appendFilePath: true # to append file path to Edit link
----
-
You can use it by creating archetypes/post.md
hugo new --kind post <name>
-
- Update theme
hugo mod get -u
+Quick Links
Sample config.yml
Example Site Structure is present here: exampleSite
Use appropriately
baseURL: "https://examplesite.com/"
+title: ExampleSite
+paginate: 5
+theme: PaperMod
+
+enableRobotsTXT: true
+buildDrafts: false
+buildFuture: false
+buildExpired: false
+
+googleAnalytics: UA-123-45
+
+minify:
+ disableXML: true
+ minifyOutput: true
+
+params:
+ env: production # to enable google analytics, opengraph, twitter-cards and schema.
+ title: ExampleSite
+ description: "ExampleSite description"
+ keywords: [Blog, Portfolio, PaperMod]
+ author: Me
+ # author: ["Me", "You"] # multiple authors
+ images: ["<link or path of image for opengraph, twitter-cards>"]
+ DateFormat: "January 2, 2006"
+ defaultTheme: auto # dark, light
+ disableThemeToggle: false
+
+ ShowReadingTime: true
+ ShowShareButtons: true
+ ShowPostNavLinks: true
+ ShowBreadCrumbs: true
+ ShowCodeCopyButtons: false
+ ShowWordCount: true
+ ShowRssButtonInSectionTermList: true
+ UseHugoToc: true
+ disableSpecial1stPost: false
+ disableScrollToTop: false
+ comments: false
+ hidemeta: false
+ hideSummary: false
+ showtoc: false
+ tocopen: false
+
+ assets:
+ # disableHLJS: true # to disable highlight.js
+ # disableFingerprinting: true
+ favicon: "<link / abs url>"
+ favicon16x16: "<link / abs url>"
+ favicon32x32: "<link / abs url>"
+ apple_touch_icon: "<link / abs url>"
+ safari_pinned_tab: "<link / abs url>"
+
+ label:
+ text: "Home"
+ icon: /apple-touch-icon.png
+ iconHeight: 35
+
+ # profile-mode
+ profileMode:
+ enabled: false # needs to be explicitly set
+ title: ExampleSite
+ subtitle: "This is subtitle"
+ imageUrl: "<img location>"
+ imageWidth: 120
+ imageHeight: 120
+ imageTitle: my image
+ buttons:
+ - name: Posts
+ url: posts
+ - name: Tags
+ url: tags
+
+ # home-info mode
+ homeInfoParams:
+ Title: "Hi there \U0001F44B"
+ Content: Welcome to my blog
+
+ socialIcons:
+ - name: twitter
+ url: "https://twitter.com/"
+ - name: stackoverflow
+ url: "https://stackoverflow.com"
+ - name: github
+ url: "https://github.com/"
+
+ analytics:
+ google:
+ SiteVerificationTag: "XYZabc"
+ bing:
+ SiteVerificationTag: "XYZabc"
+ yandex:
+ SiteVerificationTag: "XYZabc"
+
+ cover:
+ hidden: true # hide everywhere but not in structured data
+ hiddenInList: true # hide on list pages and home
+ hiddenInSingle: true # hide on single page
+
+ editPost:
+ URL: "https://github.com/<path_to_repo>/content"
+ Text: "Suggest Changes" # edit text
+ appendFilePath: true # to append file path to Edit link
+
+ # for search
+ # https://fusejs.io/api/options.html
+ fuseOpts:
+ isCaseSensitive: false
+ shouldSort: true
+ location: 0
+ distance: 1000
+ threshold: 0.4
+ minMatchCharLength: 0
+ keys: ["title", "permalink", "summary", "content"]
+menu:
+ main:
+ - identifier: categories
+ name: categories
+ url: /categories/
+ weight: 10
+ - identifier: tags
+ name: tags
+ url: /tags/
+ weight: 20
+ - identifier: example
+ name: example.org
+ url: https://example.org
+ weight: 30
+# Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
+pygmentsUseClasses: true
+markup:
+ highlight:
+ noClasses: false
+ # anchorLineNos: true
+ # codeFences: true
+ # guessSyntax: true
+ # lineNos: true
+ # style: monokai
+Sample Page.md
---
+title: "My 1st post"
+date: 2020-09-15T11:30:03+00:00
+# weight: 1
+# aliases: ["/first"]
+tags: ["first"]
+author: "Me"
+# author: ["Me", "You"] # multiple authors
+showToc: true
+TocOpen: false
+draft: false
+hidemeta: false
+comments: false
+description: "Desc Text."
+canonicalURL: "https://canonical.url/to/page"
+disableHLJS: true # to disable highlightjs
+disableShare: false
+disableHLJS: false
+hideSummary: false
+searchHidden: true
+ShowReadingTime: true
+ShowBreadCrumbs: true
+ShowPostNavLinks: true
+ShowWordCount: true
+ShowRssButtonInSectionTermList: true
+UseHugoToc: true
+cover:
+ image: "<image path/url>" # image path/url
+ alt: "<alt text>" # alt text
+ caption: "<text>" # display caption under cover
+ relative: false # when using page bundles set this to true
+ hidden: true # only hide on current single page
+editPost:
+ URL: "https://github.com/<path_to_repo>/content"
+ Text: "Suggest Changes" # edit text
+ appendFilePath: true # to append file path to Edit link
+---
+You can use it by creating archetypes/post.md
hugo new --kind post <name>
+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 |
keywords | list | [blog, page] | Add keywords for Home page |
DateFormat | string | “January 2, 2006” | The format of date strings in the website. Details |
languageAltTitle | string | “English” | Alternate title in Multilingual Mode |
ShowReadingTime | boolean | true | false | To show read time in post meta |
ShowShareButtons | boolean | true | false | To show/hide share buttons under post |
ShowCodeCopyButtons | boolean | true | false | To show/hide Code Copy button |
ShowFullTextinRSS | boolean | true | false | To show Content in RSS feed |
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 |
disableScrollToTop | boolean | true | false | To disable ScrollToTop button |
disableAnchoredHeadings | boolean | true | false | To disable Anchored Headings |
hideMeta | boolean | true | false | To Hide meta elements : date, read-time, author and available-translations for page |
hideSummary | boolean | true | false | To Hide summary being shown in list pages |
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 |
ShareButtons | list | [“linkedin”, “twitter”] | To customize which share buttons to be enabled on page |
ShowWordCount | boolean | true | false | To word count to metadata |
ShowRssButtonInSectionTermList | boolean | true | false | To show RSS icon in Section, Term and List pages |
UseHugoToc | boolean | true | false | To use Hugo’s default Toc instead of custom |
comments | boolean | true | false | To show/hide comments |
hideFooter | boolean | true | false | To Hide Footer Text om the end of page |
CanonicalLinkText | string | ‘Originally published at’ | To show text before canonical URL’s hostname |
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 |
schema | - | - | Details |
fuseOpts | - | - | Details |
socialIcons | - | - | Details |
label | - | - | Details |
assets | - | - | Details |
cover | - | - | Details |
profileMode | - | - | Details |
editPost | - | - | Details |
Site Variables
| name | type | example | Description |
|---|---|---|---|
copyright | string | **[example.site](https://example.site)** | This is HUGO’s site variable, which can also render markdown content |
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 |
assets.theme_color | string | ‘#color’ | To set custom meta theme-color |
assets.msapplication_TileColor | string | ‘#color’ | To set custom msapplication_TileColor |
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 |
schema
| name | type | example | Description |
|---|---|---|---|
schema.publisherType | string | ‘Organization’ | https://schema.org/publisher |
schema.sameAs | list | [“URL1”, “URL2”] | Set https://schema.org/sameAs |
fuseOpts
Refer: https://fusejs.io/api/options.html
fuseOpts:
- isCaseSensitive: false
- shouldSort: true
- location: 0
- distance: 1000
- threshold: 0.4
- minMatchCharLength: 0
- keys: ["title", "permalink", "summary", "content"] ## can be less but not more than shown in list
-socialIcons
socialIcons:
- - name: "<platform>"
- url: "<link>"
- - name: "<platform 2>"
- url: "<link2>"
-editPost
editPost:
- URL: "https://github.com/<path_to_repo>/content"
- Text: "Suggest Changes" # edit text
- appendFilePath: true # to append file path to Edit link
-Note: Same format is being used by Page Variables
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 |
canonicalURL | string | “https://canonical.url/to/page" | To add canonical URL to posts |
ShowCanonicalLink | boolean | true | false | To show canonical URL’s hostname |
CanonicalLinkText | string | ‘Originally published at’ | To show text before canonical URL’s hostname |
disableShare | boolean | true | false | To hide/show share icons under a page |
disableHLJS | boolean | true | false | To disable Highlight.js loading |
disableAnchoredHeadings | boolean | true | false | To disable Anchored Headings |
searchHidden | boolean | true | false | Hide page from search |
hideSummary | boolean | true | false | To Hide summary being shown in list pages |
hideFooter | boolean | true | false | To Hide Footer Text om the end of page |
ShowReadingTime | boolean | true | false | To show read time in post meta |
ShowBreadCrumbs | boolean | true | false | Show BreadCrumb Navigation above single post/page |
ShowPostNavLinks | boolean | true | false | Show Previous and Next Posts below a Post |
ShowCodeCopyButtons | boolean | true | false | To show/hide Code Copy button |
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.responsiveImages | boolean | true | false | To enable/disable generation of responsive cover images |
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 |
ShareButtons | list | [“linkedin”, “twitter”] | To customize which share buttons to be enabled on page |
ShowWordCount | boolean | true | false | To word count to metadata |
ShowRssButtonInSectionTermList | boolean | true | false | To show RSS icon in Section, Term and List pages |
UseHugoToc | boolean | true | false | To use Hugo’s default Toc instead of custom |
robotsNoIndex | boolean | true | false | To hide a particular page from indexing by search engines |
Placeholder Text
Lorem Ipsum Dolor Si Amet
Table of Contents
Lorem est tota propiore conpellat pectoribus de pectora summo.
Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.
- Exierant elisi ambit vivere dedere
- Duce pollice
- Eris modo
- Spargitque ferrea quos palude
Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.
- Comas hunc haec pietate fetum procerum dixit
- Post torum vates letum Tiresia
- Flumen querellas
- Arcanaque montibus omnes
- Quidem et
Vagus elidunt
Mane refeci capiebant unda mulcebat
Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. Faces illo pepulere tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.
Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.
Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel mitis temploque vocatus, inque alis, oculos nomen non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides parte.
Rich Content
A brief description of Hugo Shortcodes
Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.
YouTube Privacy Enhanced Shortcode
Twitter Simple Shortcode
“In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.”
— Graphic Design History (@DesignReviewed) January 17, 2019
— Jan Tschichold pic.twitter.com/gcv7SrhvJb
Vimeo Simple Shortcode
Search
Series
PaperMod -
Installation | Update
Read Install and Update instructions here
Themes Guide
+Themes Guide | PaperMod Themes Guide
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-...
Themes Guide
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...
css
+css | PaperMod css
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
-...
css
Markdown Syntax Guide
This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme. -...