Configuration

Qiandu reads configuration from hugo.yaml in the root directory of the Hugo website. In the configuration file, you can configure all options for the site. You can find the configuration file for this site in exampleSite/hugo.yaml as a start.

Navigation Bar

Menu

The menu in the upper right corner is configured in menu.main in the configuration file:

menu:
  main:
    - name: Documentation
      pageRef: /docs
      weight: 1
    - name: Blog
      pageRef: /blog
      weight: 2
    - name: About
      pageRef: /about
      weight: 3
    - name: Search
      weight: 4
      params:
        type: search
    - name: GitHub
      weight: 5
      url: ""
      params:
        icon: github

There are several different types of menu items:

1. Link to a page in the site with pageRef

   - name: Documentation
     pageRef: /docs
2. Link to an external URL with url

   - name: GitHub
     url: "https://github.com"
3. Search bar with type: search

   - name: Search
     params:
       type: search
4. Icon

   - name: GitHub
     params:
       icon: github

These menu items can be sorted by setting weight.

Sidebar

Primary Sidebar

The primary sidebar is automatically generated from the content directory structure.

For more details, go to Directory Structure.

Additional Links

Additional links for the sidebar are configured in the menu.sidebar section of the configuration file:

menu:
  sidebar:
    - name: More
      params:
        type: separator
      weight: 1
    - name: "About"
      pageRef: "/about"
      weight: 2
    - name: "Docs ↗"
      url: "https://gohugo.io/name/"
      weight: 3

Right Sidebar

Table of Contents

The table of contents is automatically generated based on the title in the content file. You can disable it by setting toc: false in front matter.

---
title: Configuration
toc: false
---

Edit this page link

To configure the edit this page link, we can set params.editURL.base in the configuration file:

params:
editURL:
base: "https://github.com/your-username/your-repo/edit/main"

The edit link will be automatically generated for each page. To set an edit link for a specific page, you can set the editURL in the front matter of the page:

---
title: Configuration
editURL: "https://example.com/edit/this/page"
---

Footer

Copyright Notice

To modify the copyright text that appears in the footer of your website, you need to create a file called “i18n/en.yaml”. In this file, fill in the new copyright text, like this:

copyright: "© 2024 Qiandu.org"

You can find a sample i18n/en.yaml file in the GitHub repository. Alternatively, you can use Markdown formatting in the copyright text.

Others

Favicon

To customize the favicon, place the icon file in the static folder to override the default favicon in the theme:

Include the favicon.ico and favicon.svg files in your project to ensure that the site’s favicon displays correctly.

While favicon.ico is generally suitable for older browsers, favicon.svg is supported by modern browsers, so a more modern approach is to add favicon-dark.svg to provide a better experience in dark mode.

Feel free to use a tool like favicon.io or favycon to generate these icons.

Color Theme Configuration

Use the theme setting to configure the default theme mode and a toggle button that allows visitors to switch between light or dark mode.

params:
theme:
# light | dark | system
default: system
displayToggle: true

Options for theme.default:

• light - Use light mode only
• dark - Use dark mode only
• system - Follow system

theme.displayToggle controls the display of a toggle button for changing themes. When set to true, visitors can switch between light or dark mode, overriding the default.

Page width

The page width can be adjusted via the params.page.width parameter in the config file:

params:
page:
# full (100%), wide (90rem), normal (1280px)
width: wide

There are three options: full, wide, and normal. The default page width mode is normal.

Similarly, the width of the navbar and footer can be adjusted via params.navbar.width and params.footer.width.

Search

Full-text search powered by FlexSearch is enabled by default. To customize the search index, set params.search.flexsearch.index in the configuration file:

params:
# Search
search:
enable: true
type: flexsearch

flexsearch:
# index page by: content | summary | heading | title
index: content

Options for flexsearch.index:

• content - Search the entire content
• summary - Summary Hugo Content Summaries
• heading - First and second level headings
• title - Search titles only

To customize the tokenization, set params.search.flexsearch.tokenize in the configuration file:

params:
# ...
flexsearch:
# full | forward | reverse | strict
tokenize: forward

Options for flexsearch.tokenize:

• strict - Strict word matching
• forward - Word prefix matching
• reverse - Word prefix and suffix matching
• full - Word substring matching.

Under the default word segmentation logic, a Chinese sentence is a “word”

To exclude a page from the search index, change excludeSearch: true in the front matter:

---
title: Configuration
excludeSearch: true
---

Google Analytics

To enable Google Analytics, set services.googleAnalytics.ID:

services:
  googleAnalytics:
    ID: G-MEASUREMENT_ID