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/integrity 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: "" url: "" - name: "" url: "" ex. config.yml#L106 Profile Mode Shows Index/Home page as Full Page with Social Links and Image add following to config file params: profileMode: enabled: true title: "" # optional default will be site title subtitle: "This is subtitle" imageUrl: "" # optional imageTitle: "" # optional imageWidth: 120 # custom size imageHeight: 120 # custom size buttons: - name: Archive url: "/archive" - name: Github url: "https://github.com/" socialIcons: # optional - name: "" url: "" - name: "" url: "" Search Page PaperMod uses Fuse.js Basic for seach 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" --- To hide a particular page from being searched, add it in post’s fron’t matter --- 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 highlighted page Escape key to clear searchbox and results For Multilingual use search..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: "" # can also paste direct link from external site # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt: "" caption: "" 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//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//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//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 , 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 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 What’s AccessKeys ? Enhanced SEO Enabled only when env: production Rich Results/Snippets Support Twitter Cards Support The Twitter Cards metadata, except twitter:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The twitter:image uses 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:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name. OpenGraph support The OpenGraph metadata, except og:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The og:image uses 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:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in 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
Intro We’ll be using yml/yaml format for all examples down below, I recommend using yml over toml as it is easier to read. You can find any YML to TOML converters if necessary. Assets (js/css) The following is enabled by default minification - makes the assets size smallest as possible. bundling - bundles all the styles in one single asset fingerprint/intergity check. Default Theme light/dark/auto params: # defaultTheme: light # defaultTheme: dark defaultTheme: auto # to switch between dark or light according to browser theme Theme Switch Toggle (enabled by default) Shows icon besides title of page to change theme To disable it : disableThemeToggle: true You can refer following table for better understanding… defaultTheme disableThemeToggle checks local storage? checks system theme? Info auto true No Yes only system theme false Yes (if not->2) Yes (2) switch present dark true No No force dark only false Yes No switch present light true No No force light only false Yes No switch present Archives Layout Create a page with archive.md in content directory with following content . ├── 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: "" url: "" - name: "" url: "" Profile Mode Shows Index/Home page as Full Page with Social Links and Image add following to config file params: profileMode: enabled: true title: "" # optional default will be site title subtitle: "This is subtitle" imageUrl: "" # optional imageTitle: "" # optional imageWidth: 120 # custom size imageHeight: 120 # custom size buttons: - name: Archive url: "/archive" - name: Github url: "https://github.com/" socialIcons: # optional - name: "" url: "" - name: "" url: "" Search Page PaperMod uses Fuse.js Basic for seach 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 fron’t matter --- 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 highlighted page Escape key to clear searchbox and results For Multilingual use search..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: "" # can also paste direct link from external site # ex. https://i.ibb.co/K0HVPBd/paper-mod-profilemode.png alt: "" caption: "" 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//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//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//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 , 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 What’s AccessKeys ? Enhanced SEO Enabled only when env: production Rich Results/Snippets Support Twitter Cards Support The Twitter Cards metadata, except twitter:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The twitter:image uses 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:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in the name. OpenGraph support The OpenGraph metadata, except og:image should not require additional configuration, since it is generated from metadata that you should already have (for instance the page title and description). The og:image uses 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:image comes from the first Page Bundle image with feature in the name, with a fallback to the first image with cover or thumbnail in 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
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 ctftime ctftime.org 8 dev dev.to 9 discogs discogs.com 10 discord discord.com 11 dreamstime dreamstime.com 12 dribbble dribbble.com 13 email - 14 facebook facebook.com 15 flickr flickr.com 16 freepik freepik.com 17 gitea gitea.io 18 github github.com 19 gitlab gitlab.com 20 goodreads goodreads.com 21 hackerone hackerone.com 22 hackerrank hackerrank.com 23 hackthebox hackthebox.eu 24 instagram instagram.com 25 itchio itch.io 26 kakaotalk kakaocorp.com/service/KakaoTalk 27 keybase keybase.io 28 kofi ko-fi.com 29 lastfm last.fm 30 liberapay liberapay.com 31 linkedin linkedin.com 32 mastodon mastodon.social 33 matrix matrix.org 34 medium medium.com 35 mixcloud mixcloud.com 36 nuget nuget.org 37 paypal paypal.com 38 qq qq.com 39 reddit reddit.com 40 rss - 41 serverfault serverfault.com 42 soundcloud soundcloud.com 43 shutterstock shutterstock.com 44 slack slack.com 45 snapchat snapchat.com/add 46 sourcerer sourcerer.io 47 spotify spotify.com 48 stackoverflow stackoverflow.com 49 steam steampowered.com 50 telegram telegram.org 51 twitch twitch.tv 52 twitter twitter.com 53 unsplash unsplash.com 54 xda xda-developers.com 55 youtube youtube.com 56 other - Usage : socialIcons: - name: "kofi" url: "https://kofi.com" - name: "twitter" url: "https://twitter.com" Share Icons No. Platform 1 twitter (also generates hash tags from tags linked with post) 2 linkedin 3 reddit 4 facebook 5 whatsapp 6 telegram Usage: params: ShowShareButtons: true
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
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 -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 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 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: Master Branch (Latest) v5.0 v4.0 v3.0 v2.0 v1.0 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 Papermod - Features Papermod - FAQs Papermod - Variables Papermod - Icons ChangeLog 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 pygmentsUseClasses: true 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: [""] DateFormat: "January 2, 2006" defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true ShowPostNavLinks: true ShowBreadCrumbs: true ShowCodeCopyButtons: false disableSpecial1stPost: false disableScrollToTop: false comments: false hidemeta: false hideSummary: false showtoc: false tocopen: false assets: # disableHLJS: true # to disable highlight.js # disableFingerprinting: true favicon: "" favicon16x16: "" favicon32x32: "" apple_touch_icon: "" safari_pinned_tab: "" 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: "" 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//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: # # 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 ShowRssButtonInSectionTermList: true cover: image: "" # image path/url alt: "" # alt text caption: "" # 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//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
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 -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: Master Branch (Latest) v6.0 v5.0 v4.0 v3.0 v2.0 v1.0 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 Papermod - Features Papermod - FAQs Papermod - Variables Papermod - Icons ChangeLog 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: [""] 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: "" favicon16x16: "" favicon32x32: "" apple_touch_icon: "" safari_pinned_tab: "" 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: "" 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//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 alt: "" # alt text caption: "" # 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//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
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 ShowRssButtonInSectionTermList boolean true | false To show/hide RSS Copy button in Section and Term list 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 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 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 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: "" url: "" - name: "" url: "" editPost editPost: URL: "https://github.com//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 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 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 ShowRssButtonInSectionTermList boolean true | false To show/hide RSS Copy button in Section and Term list author string |list ‘Me’ | [‘Me’,‘You’] To show multiple Authors cover.image string ‘featured.jpg’ To add a cover image cover.caption string ‘caption for image’ To add caption to cover image cover.alt string ’this is cover image’ Alternate text to show if image doesn’t load/show up cover.relative boolean true | false To use relative path for cover image, used in hugo Page-bundles cover.hidden boolean true | false To hide on current single page weight integer 5 To set page order or to pin a post to Top of list
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: "" url: "" - name: "" url: "" editPost editPost: URL: "https://github.com//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