Getting Started

Welcome to the hugo-theme-fluency wiki!

Installation & Update

Install with Git Submodule:

git submodule add https://github.com/wayjam/hugo-theme-fluency.git themes/fluency

Next, add theme: fluency in config.yml. After completing the above steps, use the following command to preview the project in the browser: hugo server

To update with:

git submodule update --rebase --remote

Configuration

Highlight

Enable highlight as below.

pygmentsUseClasses: true # enable theme-defined highlight style
pygmentsCodefences: true

Menus

More info about hugo menus, please refer to Hugo - Menus.

Navbar Menu

menu:
  main:
    - identifier: posts
      name: posts
      url: posts/
      weight: 1
    - identifier: tags
      name: tags
      url: tags/
      weight: 2
    - identifier: archives
      name: archives
      url: archives/
      weight: 3
    - identifier: about
      name: about
      url: about/
      weight: 4  # order by asc

Footer Menu

menu:
  footer:
    - identifier: twitter
      url: "https://twitter.com/gohugoio"
      name: Twitter
    - identifier: github
      url: "https://github.com/gohugoio"
      name: Github

3. Pagination

You can set different page size for every layouts.

params:
  pageSize:
    index: 5
    list: 10
    terms: 60
    archives: 20

Copyright

params:
  copyright: "© 2021 <a href='https://github.com/wayjam/hugo-theme-fluency'>Hugo Theme Fluency</a>."

HTML string is allowed.

Main Sections

Main sections will list at index page. Section name will be shown before every post date when mainSections is greater than one.

params:
  mainSections:
    - posts
    - pics

Math Typesetting

Just add params.mathRender: true to config, then katex.js(provided by katex.org) will load from cdn in regular page.

Comment

params:
  disableComment: true
  disableCommentByType:
    - page
  thirdPartyComment: |
    this is your comment

If you want to use Disqus as commenting service, just add disqusShortname: your-name to config.

Comment will be hidden when disableComment is true. And if you just wanna some type of content hide comments, disableCommentByType can be used. Here is an example of content which comments was disabled.

# exampleSite/content/about.md
---
date: 2019-05-28
type: page
title: "About"
---

Other third-party comment systems are also supported, such as valine can by configured with multi-line.

  thirdPartyComment: |
    <div id="vcomments"></div>
    <script src="//cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
    <script type="text/javascript">
          new Valine({
              el: '#vcomments',
              appId: 'app-id',
              appKey: 'app-key',
              placeholder: 'feel free to comment',
              avatar: 'robohash',
              highlight: true,
              requiredFields: ['nick','mail'],
              meta: ['nick','mail','link'],
      });
    </script>

Feature

  disableSocialShare: false
  disableIndexSummary: false
  disableAnchorHeading: false
  disableBreadcrumb: false
  enableFullContentRSS: true

FAQ

1. minification breaks inline SVG

Hugo added configurations to works with inline-svg: https://github.com/gohugoio/hugo/issues/6750. Just only disable minify with svg. Here is an example:

minify:
  disableSVG: true