Custom Head and Header Navigation

Head Customization and Analytics Tools

Use the head field in config.yml to configure website analytics tools (Google Analytics, Bing Clarity, Umami) and custom head content:

1
head:
2
    # Google Analytics 4 tracking ID (format: G-XXXXXXXXXX)
3
    googleAnalyticsId: "G-XXXXXXXXXX"
4

5
    # Microsoft Bing Clarity project ID
6
    bingClarityId: "your-clarity-id"
7

8
    # Umami analytics configuration
9
    umami:
10
        id: "your-umami-website-id" # Website ID
11
        url: "https://umami.example.com/umami.js" # Umami script URL
12

13
    # Additional custom head content (HTML string)
14
    anyhead: |
15
        <!-- Custom styles -->
16
        <style>:root { --theme-color: #42b883; }</style>
17
        <!-- Other custom scripts -->

Analytics Tools Overview

• Google Analytics: Just fill in googleAnalyticsId, and the theme will automatically load the GA4 script.
• Bing Clarity: Fill in bingClarityId, and the theme will automatically load the Microsoft Clarity tracking code.
• Umami: Both id (website ID) and url (script address) must be provided.

All analytics scripts run in a Web Worker using partytown, so they won’t affect page performance.

Migrating from Legacy Configuration

Users who previously inserted scripts directly via anyhead are recommended to migrate to the new structured configuration:

• Remove analytics scripts from anyhead
• Fill in the corresponding tracking IDs into the appropriate configuration fields
• Keep other custom content in anyhead

Header Navigation

Navigation configuration comes from the navs array in config.yml:

1
navs:
2
    - title: Home
3
      icon: home
4
      link: /
5
    - title: Posts
6
      icon: archive
7
      link: /archives
8
    - title: Categories
9
      icon: folder
10
      link: /categories
11
    - title: Tags
12
      icon: tag
13
      link: /tags
14
    - title: Words
15
      icon: quote
16
      link: /words
17
    - title: Links
18
      icon: link
19
      link: /links
20
    - title: About
21
      icon: user
22
      link: /about
23
    - title: Travellings
24
      icon: train-front
25
      link: https://www.travellings.cn/go

Notes:

• link supports internal paths or full external links; icon uses Lucide Icons standard names (e.g., home, train-front).
• To add a new navigation item, append it following the same structure; the search entry is built-in and does not need manual configuration.

Common Operations

• Add analytics tools: Configure the corresponding tracking ID under head, no need to manually write scripts.
• Add custom head content: Use head.anyhead to insert additional HTML snippets.
• Add new navigation items: Append items at the end of navs; external links must include the protocol (https://).
• Change favicon: Modify the favicon path in config.yml (supports absolute or site-relative paths).