搜索

自定义head与header导航

更新时间： 2026-02-03 04:00:00
🕒 阅读时间：3 min read 📝 字数：1442 👀 阅读量： Loading...

head 自定义与分析工具

使用 config.yml 的 head 字段配置网站分析工具（Google Analytics、Bing Clarity、Umami）和自定义头部内容：

head:
  # Google Analytics 4 跟踪 ID (格式: G-XXXXXXXXXX)
  googleAnalyticsId: "G-XXXXXXXXXX"


  # Microsoft Bing Clarity 项目 ID
  bingClarityId: "your-clarity-id"


  # Umami 分析配置
  umami:
    id: "your-umami-website-id" # 网站 ID
    url: "https://umami.example.com/umami.js" # Umami 脚本 URL


  # 额外自定义头部内容（HTML字符串）
  anyhead: |
    <!-- 自定义样式 -->
    <style>:root { --theme-color: #42b883; }</style>
    <!-- 其他自定义脚本 -->

分析工具说明

  • Google Analytics: 只需填写 googleAnalyticsId，主题会自动加载 GA4 脚本
  • Bing Clarity: 填写 bingClarityId，主题会自动加载 Microsoft Clarity 跟踪代码
  • Umami: 需要同时填写 id（网站ID）和 url（脚本地址）

所有分析脚本都使用 partytown 在 Web Worker 中运行，不会影响页面性能。

旧版配置迁移

之前使用 anyhead 直接插入脚本的用户，建议迁移到新的结构化配置：

  • 删除 anyhead 中的分析脚本
  • 将对应的跟踪 ID 填入相应的配置字段
  • 保留其他自定义内容在 anyhead 中

header 导航

导航配置来自 config.yml 的 navs 数组：

navs:
  - title: 首页
    icon: home
    link: /
  - title: 文章
    icon: archive
    link: /archives
  - title: 分类
    icon: folder
    link: /categories
  - title: 标签
    icon: tag
    link: /tags
  - title: 友链
    icon: link
    link: /links
  - title: 关于
    icon: user
    link: /about
  - title: 开往
    icon: airplay
    link: https://www.travellings.cn/go

说明：

  • link 支持站内路径或完整外链；icon 使用 Feather Icons 名称。
  • 需要新增导航项时，按相同结构追加；搜索入口已内置，无需手动配置。

常见操作

  • 添加分析工具：在 head 下配置对应的跟踪 ID，无需手动编写脚本。
  • 添加自定义头部内容：使用 head.anyhead 插入额外的 HTML 片段。
  • 新增导航：在 navs 末尾追加项，外链需包含协议（https://）。
  • 更换 favicon：修改 config.yml 中的 favicon 路径（支持绝对或站点内路径）。

自定义head与header导航

作者：xingwangzhe

本文链接： https://stalux.needhelp.icu/posts/0035a0ee/

本文采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。