配置指南 on KOK博客

基本配置

Mon, 01 Jan 0001 00:00:00 +0000

基本配置

站点信息

基础配置

baseURL = 'https://yourdomain.com'     # 站点地址
languageCode = 'zh-CN'                  # 语言代码
defaultContentLanguage = 'zh'           # 默认语言
title = '我的博客'                       # 站点标题
theme = 'PrimeEdge'                     # 主题名称

作者信息

[params.author]
  name = "你的名字"                      # 作者名称
  bio = "一句话介绍自己"                  # 作者简介
  avatar = "/images/avatar.jpg"          # 头像路径

作者信息会显示在：

文章页面的作者栏
关于页面
部分页面的侧边栏

站点头部

[params.header]
  site_name = "站点名称"                 # 站点名称

site_name 会显示在：

导航栏 Logo 位置
首页预加载动画
页面标题前缀

分页配置

[pagination]
  pagerSize = 10                         # 每页文章数量

分类和标签

[taxonomies]
  category = 'categories'                # 分类
  tag = 'tags'                           # 标签
  series = 'series'                      # 系列（可选）

输出格式

[outputs]
  home = ['HTML', 'RSS', 'JSON']         # 首页输出格式
  page = ['HTML']                        # 页面输出格式
  section = ['HTML', 'RSS']              # 章节输出格式

JSON 输出用于搜索功能，必须包含。

图片处理

[imaging]
  quality = 75                           # 图片质量
  resampleFilter = 'lanczos'             # 重采样滤镜

安全设置

[security]
  [security.funcs]
    getenv = ['^HUGO_', '^CI$']          # 允许的环境变量

完整示例

baseURL = 'https://kok.plus'
languageCode = 'zh-CN'
defaultContentLanguage = 'zh'
title = 'KOK.PLUS'
theme = 'PrimeEdge'

[pagination]
  pagerSize = 10

[taxonomies]
  category = 'categories'
  tag = 'tags'

[params]
  [params.author]
    name = "KOK"
    bio = "Say what's on my mind, read books I enjoy"
    avatar = "/images/tx.jpeg"
  
  [params.header]
    site_name = "KOK.PLUS"

[outputs]
  home = ['HTML', 'RSS', 'JSON']
  page = ['HTML']
  section = ['HTML', 'RSS']

[imaging]
  quality = 75
  resampleFilter = 'lanczos'

下一步

首页配置 - 配置横幅和副标题
导航菜单 - 配置顶部导航

首页配置

Mon, 01 Jan 0001 00:00:00 +0000

首页配置

PrimeEdge 首页包含横幅区域、打字机动画副标题和最新文章列表。

横幅配置

横幅是首页的视觉焦点，支持浅色/深色模式切换。

[params.banner]
  light = "/images/wallhaven-wqery6-light.webp"  # 浅色模式横幅
  dark = "/images/wallhaven-wqery6-dark.webp"    # 深色模式横幅

横幅图片建议

尺寸: 建议 1920x600 像素或更宽
格式: WebP 格式最佳，兼顾质量和体积
内容: 选择简洁、不干扰文字阅读的图片
双版本: 准备浅色和深色两个版本，确保在两种模式下都有良好视觉效果

图片存放位置

将横幅图片放入 static/images/ 目录：

static/
└── images/
    ├── wallhaven-wqery6-light.webp
    └── wallhaven-wqery6-dark.webp

打字机副标题

首页横幅下方会显示打字机动画效果的多行副标题。

[params.banner]
  subtitle = [
    "Say what's on my mind, read books I enjoy",
    "Discuss what's around me, walk my own path",
    "An independent blog since 2007"
  ]

配置说明

每行文字会依次显示，带有打字机效果
支持任意数量的行数
建议使用简短有力的句子
可以使用 HTML 标签，如 <br> 换行

示例配置

[params.banner]
  subtitle = [
    "记录生活点滴",
    "分享技术心得",
    "探索未知世界",
    "与你共同成长"
  ]

导航菜单

Mon, 01 Jan 0001 00:00:00 +0000

导航菜单

PrimeEdge 支持自定义顶部导航栏，可以添加任意数量的菜单项。

基础配置

在 hugo.toml 中使用 [[params.nav]] 定义导航菜单：

[[params.nav]]
  name = "首页"
  url = "/"
  icon = "fa-solid fa-house"

[[params.nav]]
  name = "文章"
  url = "/posts/"
  icon = "fa-solid fa-pen-nib"

[[params.nav]]
  name = "关于"
  url = "/about/"
  icon = "fa-solid fa-user"

菜单项参数

每个菜单项支持以下参数：

参数	必填	说明
`name`	是	菜单显示文字
`url`	是	链接地址，支持相对路径和绝对路径
`icon`	否	Font Awesome 图标类名

图标使用

PrimeEdge 使用 Font Awesome 6 图标库。

常用图标

# 基础图标
fa-solid fa-house        # 首页
fa-solid fa-pen-nib      # 文章/博客
fa-solid fa-book         # 文档
fa-solid fa-user         # 关于
fa-solid fa-envelope     # 联系

# 内容类型
fa-solid fa-note-sticky  # 笔记
fa-solid fa-images       # 相册
fa-solid fa-bookmark     # 书签
fa-solid fa-link         # 友链
fa-solid fa-heart        # 好物
fa-solid fa-chart-line   # 投资

# 功能
fa-solid fa-search       # 搜索
fa-solid fa-comment-dots # 留言
fa-solid fa-rss          # RSS
fa-solid fa-tags         # 标签
fa-solid fa-folder       # 分类

图标查找

访问 Font Awesome 图标库搜索更多图标。

社交链接

Mon, 01 Jan 0001 00:00:00 +0000

社交链接

PrimeEdge 在页脚区域显示社交媒体图标链接，方便访客关注你的社交账号。

基础配置

在 hugo.toml 中使用 [[params.social]] 定义社交链接：

[[params.social]]
  name = "GitHub"
  url = "https://github.com/username"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Twitter"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-twitter"

社交链接参数

参数	必填	说明
`name`	是	平台名称，用于 aria-label
`url`	是	个人主页链接
`icon`	是	Font Awesome 品牌图标类名

支持的社交平台

代码托管

[[params.social]]
  name = "GitHub"
  url = "https://github.com/username"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Gitee"
  url = "https://gitee.com/username"
  icon = "fa-brands fa-git-alt"

[[params.social]]
  name = "GitLab"
  url = "https://gitlab.com/username"
  icon = "fa-brands fa-gitlab"

社交媒体

[[params.social]]
  name = "Twitter / X"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-x-twitter"

[[params.social]]
  name = "微博"
  url = "https://weibo.com/username"
  icon = "fa-brands fa-weibo"

[[params.social]]
  name = "知乎"
  url = "https://www.zhihu.com/people/username"
  icon = "fa-brands fa-zhihu"

即时通讯

[[params.social]]
  name = "QQ"
  url = "tencent://message/?uin=123456789"
  icon = "fa-brands fa-qq"

[[params.social]]
  name = "Telegram"
  url = "https://t.me/username"
  icon = "fa-brands fa-telegram"

[[params.social]]
  name = "Discord"
  url = "https://discord.gg/invitecode"
  icon = "fa-brands fa-discord"

内容平台

[[params.social]]
  name = "YouTube"
  url = "https://youtube.com/@username"
  icon = "fa-brands fa-youtube"

[[params.social]]
  name = "Bilibili"
  url = "https://space.bilibili.com/userid"
  icon = "fa-brands fa-bilibili"

[[params.social]]
  name = "小红书"
  url = "https://www.xiaohongshu.com/user/profile/userid"
  icon = "fa-solid fa-book-open"

专业平台

[[params.social]]
  name = "LinkedIn"
  url = "https://linkedin.com/in/username"
  icon = "fa-brands fa-linkedin"

[[params.social]]
  name = "掘金"
  url = "https://juejin.cn/user/userid"
  icon = "fa-solid fa-book"

[[params.social]]
  name = "CSDN"
  url = "https://blog.csdn.net/username"
  icon = "fa-solid fa-code"

完整示例

[[params.social]]
  name = "GitHub"
  url = "https://github.com/kok777"
  icon = "fa-brands fa-github"

[[params.social]]
  name = "Gitee"
  url = "https://gitee.com/k_ok"
  icon = "fa-brands fa-git-alt"

[[params.social]]
  name = "微博"
  url = "https://weibo.com/tlk8"
  icon = "fa-brands fa-weibo"

[[params.social]]
  name = "QQ"
  url = "tencent://message/?uin=5131408"
  icon = "fa-brands fa-qq"

[[params.social]]
  name = "Twitter"
  url = "https://twitter.com/username"
  icon = "fa-brands fa-x-twitter"

[[params.social]]
  name = "知乎"
  url = "https://www.zhihu.com/people/username"
  icon = "fa-brands fa-zhihu"

图标样式

社交图标默认样式：

页脚配置

Mon, 01 Jan 0001 00:00:00 +0000

页脚配置

PrimeEdge 页脚包含版权信息、备案号、运行时间和 CDN 赞助商标识。

基础配置

[params.footer]
  startYear = "2007"                    # 网站起始年份
  totalWords = "25.6k words"            # 站点总字数（可选）
  icp = "京ICP备12345678号"              # ICP 备案号（中国大陆）
  gongan = "京公网安备11010102001234号"  # 公安备案号（中国大陆）

配置项说明

起始年份

startYear 显示在版权信息中：

[params.footer]
  startYear = "2007"

站点统计

totalWords 显示站点总字数（需手动更新或使用外部统计）：

[params.footer]
  totalWords = "25.6k words"

备案信息

中国大陆网站需要显示 ICP 和公安备案：

[params.footer]
  icp = "京ICP备12345678号"
  gongan = "京公网安备11010102001234号"

备案号会自动链接到工信部和公安备案查询页面。

CDN 赞助商

如果使用了 CDN 服务，可以在页脚显示赞助商 Logo：

[params.footer.cdn]
  name = "Upyun"
  url = "https://www.upyun.com/"
  logo = "/images/upyun.png"

常见 CDN 赞助商

# 又拍云
[params.footer.cdn]
  name = "Upyun"
  url = "https://www.upyun.com/"
  logo = "/images/upyun.png"

# 七牛云
[params.footer.cdn]
  name = "Qiniu"
  url = "https://www.qiniu.com/"
  logo = "/images/qiniu.png"

# 腾讯云
[params.footer.cdn]
  name = "Tencent Cloud"
  url = "https://cloud.tencent.com/"
  logo = "/images/tencent-cloud.png"

运行时间

PrimeEdge 自动计算并显示网站运行时间，从 startYear 开始计算。

评论系统

Mon, 01 Jan 0001 00:00:00 +0000

评论系统

PrimeEdge 集成 Twikoo 评论系统，一个简洁、安全、免费的静态网站评论解决方案。

什么是 Twikoo

Twikoo 是一个基于腾讯云开发的静态网站评论系统，特点：

免费使用（腾讯云开发有免费额度）
无需服务器，Serverless 架构
支持邮件通知、微信通知
支持 Markdown 语法
支持表情包
支持管理员后台

快速部署

1. 创建腾讯云开发环境

登录腾讯云开发控制台
创建新环境（选择免费版）
进入环境，点击「新建」→「云函数」
选择「Twikoo」模板创建

2. 获取环境 ID

创建完成后，在环境概览页面获取环境 ID（envId）：

https://your-env-id-xxx.service.tcloudbase.com

3. 配置主题

在 hugo.toml 中添加：

[params.twikoo]
  enable = true
  envId = "https://your-env-id-xxx.service.tcloudbase.com"
  version = "1.7.7"

配置参数

参数	必填	默认值	说明
`enable`	是	`false`	是否启用评论
`envId`	是	-	Twikoo 环境 ID 或 URL
`version`	否	`1.7.7`	Twikoo CDN 版本
`region`	否	-	腾讯云区域（如 `ap-shanghai`）
`lang`	否	`zh-CN`	语言：zh-CN, zh-TW, en
`path`	否	-	自定义评论路径

完整配置示例

[params.twikoo]
  enable = true
  envId = "https://twikoo-xxx-xxx.service.tcloudbase.com"
  version = "1.7.7"
  region = "ap-shanghai"
  lang = "zh-CN"

评论显示位置

评论系统默认显示在：

搜索功能

Mon, 01 Jan 0001 00:00:00 +0000

搜索功能

PrimeEdge 集成基于 Fuse.js 的客户端搜索，无需后端服务即可实现全文搜索。

搜索特点

客户端搜索: 基于 Fuse.js，无需服务器
即时结果: 输入即搜索，无延迟
模糊匹配: 支持拼写容错
多字段搜索: 搜索标题、内容、标签
键盘快捷键: 按 / 快速打开搜索

启用搜索

搜索功能默认启用，需要确保以下配置：

1. 输出 JSON 格式

在 hugo.toml 中配置：

[outputs]
  home = ["HTML", "RSS", "JSON"]
  page = ["HTML"]
  section = ["HTML", "RSS"]

[outputFormats]
  [outputFormats.Search]
    mediaType = "application/json"
    baseName = "search"
    isPlainText = true

2. 创建搜索索引模板

创建 layouts/_default/index.json：

{{- $.Scratch.Add "index" slice -}}
{{- range site.RegularPages -}}
  {{- $.Scratch.Add "index" (dict "title" .Title "content" .Plain "permalink" .Permalink "summary" .Summary "tags" .Params.tags "categories" .Params.categories) -}}
{{- end -}}
{{- $.Scratch.Get "index" | jsonify -}}

使用方法

打开搜索

点击导航栏搜索图标
按键盘 / 键
在搜索页面直接输入

搜索语法

语法	说明	示例
关键词	模糊匹配	`hugo`
精确匹配	引号包裹	`"hugo theme"`
多关键词	空格分隔	`hugo blog`

搜索结果

搜索结果包含：

配置指南 on KOK博客

基本配置

基本配置

站点信息

基础配置

作者信息

站点头部

分页配置

分类和标签

输出格式

图片处理

安全设置

完整示例

下一步

首页配置

首页配置

横幅配置

横幅图片建议

图片存放位置

打字机副标题

配置说明

示例配置

热门文章

导航菜单

导航菜单

基础配置

菜单项参数

图标使用

常用图标

图标查找

社交链接

社交链接

基础配置

社交链接参数

支持的社交平台

代码托管

社交媒体

即时通讯

内容平台

专业平台

完整示例

图标样式

页脚配置

页脚配置

基础配置

配置项说明

起始年份

站点统计

备案信息

CDN 赞助商

常见 CDN 赞助商

运行时间

评论系统

评论系统

什么是 Twikoo

快速部署

1. 创建腾讯云开发环境

2. 获取环境 ID

3. 配置主题

配置参数

完整配置示例

评论显示位置

搜索功能

搜索功能

搜索特点

启用搜索

1. 输出 JSON 格式

2. 创建搜索索引模板

使用方法

打开搜索

搜索语法

搜索结果