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/ Archive Page . ├── config.yml ├── content/ │ ├── archives.md and add the following to it --- title: "Archive" layout: "archives" url: "/archives/" summary: archives --- Bundling Custom css with theme’s assets For adding custom css to be bundled inside one minimized css Create folder in yout project directory as .(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── assets/ └── css/ └── extended/ 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: Papermod Theme: How to add custom CSS? Custom Head / Footer Custom css/js can be added by way mentioned below. .(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── layouts ├── partials │ ├── comments.html │ ├── extend_footer.html 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= 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.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png safari-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: "" favicon16x16: "" favicon32x32: "" apple_touch_icon: "" safari_pinned_tab: "" 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 ![name](path/to/image.png#center) References Override a Hugo theme
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/ Archive Page . ├── config.yml ├── content/ │ ├── archives.md and add the following to it --- title: "Archive" layout: "archives" url: "/archives/" summary: archives --- Bundling Custom css with theme’s assets For adding custom css to be bundled inside one minimized css Create folder in yout project directory as .(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── assets/ └── css/ └── extended/ 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: Papermod Theme: How to add custom CSS? Custom Head / Footer Custom css/js can be added by way mentioned below. .(site root) ├── config.yml ├── content/ ├── theme/hugo-PaperMod/ └── layouts ├── partials │ ├── comments.html │ ├── extend_footer.html 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= 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.ico favicon-16x16.png favicon-32x32.png apple-touch-icon.png safari-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: "" favicon16x16: "" favicon32x32: "" apple_touch_icon: "" safari_pinned_tab: "" 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 ![name](path/to/image.png#center) 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. Add the following to assets/css/extended/custom.css .chroma { background-color: unset; } More Info : Configure Markup - Highlight References Override a Hugo theme
Guide Follow Quick Start guide to setup hugo and create a new site. Make sure you install latest version of hugo(=0.74.0). After you have created a new site, at Step 3 follow the steps: Method 1 Inside the folder of your Hugo site, run: git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 Note: You may use --branch v3.0 to end of above command if you want to stick to specific release. Updating theme : cd themes/PaperMod git pull Method 2 you can use as submodule with git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 git submodule update --init --recursive Note: You may use --branch v3.0 to end of above command if you want to stick to specific release. Updating theme : git submodule update --remote --merge Method 3 Or you can Download as Zip from Github Page and extract in your themes directory Finally … Add in config.yml: theme: "PaperMod" 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" author: Me # author: ["Me", "You"] # multiple authors images: [""] defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true disableSpecial1stPost: false comments: false hidemeta: 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 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" cover: hidden: true # hide everywhere but not in structured data hiddenInList: true # hide on list pages and home hiddenInSingle: true # hide on single page # 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 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." disableHLJS: true # to disable highlightjs disableShare: false disableHLJS: false 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 ---
Guide Follow Quick Start guide to setup hugo and create a new site. Make sure you install latest version of hugo(=0.74.0). After you have created a new site, at Step 3 follow the steps: Method 1 Inside the folder of your Hugo site, run: git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1 Note: You may use --branch v3.0 to end of above command if you want to stick to specific release. Updating theme : cd themes/PaperMod git pull Method 2 you can use as submodule with git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod --depth=1 git submodule update --init --recursive Note: You may use --branch v3.0 to end of above command if you want to stick to specific release. Updating theme : git submodule update --remote --merge Method 3 Or you can Download as Zip from Github Page and extract in your themes directory Finally … Add in config.yml: theme: "PaperMod" 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" author: Me # author: ["Me", "You"] # multiple authors images: [""] defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true disableSpecial1stPost: false comments: false hidemeta: 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 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" cover: hidden: true # hide everywhere but not in structured data hiddenInList: true # hide on list pages and home hiddenInSingle: true # hide on single page # 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 # markup: # highlight: # # anchorLineNos: true # codeFences: true # guessSyntax: true # lineNos: true # # noClasses: false # 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." disableHLJS: true # to disable highlightjs disableShare: false disableHLJS: false 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 ---