功能页面 on KOK博客

相册

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

相册

PrimeEdge 提供瀑布流相册页面，支持灯箱浏览和键盘导航。

创建相册页面

创建 content/photos.md：

---
title: "相册"
description: "记录生活中的美好瞬间"
layout: "photos"
---

layout: "photos" 是关键，它告诉 Hugo 使用相册专用模板渲染此页面。

添加照片

方式一：直接修改模板

编辑 layouts/page/photos.html，添加图片：

<div class="photo-item" data-src="/images/photos/photo1.jpg">
  <img src="/images/photos/photo1.jpg" alt="照片描述" loading="lazy">
  <div class="photo-overlay">
    <span class="photo-title">照片标题</span>
  </div>
</div>

方式二：使用数据文件

创建 data/photos.yml：

photos:
  - src: "/images/photos/photo1.jpg"
    title: "照片标题"
    desc: "照片描述"
  - src: "/images/photos/photo2.jpg"
    title: "另一张照片"
    desc: "另一张描述"

然后在模板中读取数据文件渲染。

方式三：使用内容页

在 content/photos/ 目录下创建独立的图片内容页，每个文件对应一张照片：

---
title: "照片标题"
date: 2024-01-15
cover: "/images/photos/photo1.jpg"
description: "照片描述"
---

相册功能特点

瀑布流布局 — 图片按不同高度自动排列，视觉效果好
灯箱浏览 — 点击任意图片进入全屏浏览模式
键盘导航 — 灯箱模式下按左右方向键切换图片，按 ESC 退出
懒加载 — 图片进入视口时才加载，减少初始请求
响应式 — 自动适配不同屏幕尺寸，移动端为两列，桌面端为多列

图片建议

格式: 优先使用 WebP，兼容性更好
尺寸: 宽度建议 800-1200px，文件大小控制在 300KB 以内
命名: 使用有意义的文件名，避免中文和空格

Front Matter 字段

字段	必填	说明
`title`	是	相册页面标题
`description`	否	相册页面描述
`layout`	是	固定为 `photos`

下一步

书签 - 创建网站收藏页面
好物推荐 - 创建产品推荐页面

书签

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

书签

PrimeEdge 提供分类书签页面，支持按分类筛选和图标展示。

创建书签页面

创建 content/bookmarks.md：

---
title: "书签"
description: "收藏有用的网站和工具"
layout: "bookmarks"
---

书签分类

默认包含以下分类：

分类	ID	图标	说明
全部	all	-	显示所有书签
技术开发	tech	fa-code	开发相关网站
实用工具	tools	fa-toolbox	在线工具
设计资源	design	fa-palette	设计相关
阅读学习	read	fa-book-open	学习平台
其他	other	fa-miscellaneous	其他收藏

添加书签

编辑 layouts/page/bookmarks.html，在对应分类下添加：

<a href="https://example.com" target="_blank" rel="noopener" class="bookmark-link-card">
  <div class="bookmark-card-icon">
    <i class="fa-brands fa-github"></i>
  </div>
  <div class="bookmark-card-content">
    <h3 class="bookmark-card-title">网站名称</h3>
    <p class="bookmark-card-desc">网站描述</p>
  </div>
</a>

书签卡片结构

每个书签卡片包含：

图标 — 使用 Font Awesome 图标类
标题 — 网站名称
描述 — 一句话介绍
链接 — 点击在新标签页打开

分类筛选

书签页面顶部有分类筛选标签，点击后只显示该分类下的书签。切换时有平滑的动画过渡。

友情链接

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

友情链接

PrimeEdge 提供友情链接页面，以卡片形式展示友链信息。

创建友链页面

创建 content/links.md：

---
title: "友情链接"
layout: "links"
type: "page"
description: "互联网上的邻居们"
---

添加友链

在 content/links.md 的 Front Matter 后添加 HTML：

<!-- 分类标题 -->
<h2 class="links-category" id="category-id">
  <i class="fa-solid fa-icon"></i>
  分类名称
</h2>

<!-- 友链列表 -->
<div class="links-list">
  <a href="https://friend-blog.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://friend-blog.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">博客名称</h3>
      <p class="link-desc">博客描述或简介</p>
    </div>
  </a>
</div>

友链卡片结构

每个友链卡片包含：

头像 — 博客或站点的头像图片
标题 — 博客名称
描述 — 简短介绍，建议控制在 30 字以内
链接 — 点击在新标签页打开

分组展示

可以通过添加多个分类标题对友链进行分组，例如：

技术博客
生活随笔
独立开发者

每个分组下的友链以网格形式排列，桌面端一行显示多个卡片。

归档

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

归档

归档页面按时间倒序展示站点所有已发布的文章，是读者快速浏览历史内容的入口。

创建归档页面

在 content/ 根目录创建 archives.md：

---
title: "归档"
description: "按时间浏览所有文章"
layout: "archives"
---

layout: "archives" 是关键，它告诉 Hugo 使用归档专用模板渲染此页面。

归档页面特点

按年分组 — 文章按年份分组，每年一个区块
按月折叠 — 可选展开/折叠某个月份的文章
显示数量 — 每年/每月显示文章数量统计
时间倒序 — 最新的文章排在最前面

Front Matter 字段

字段	必填	说明
`title`	是	页面标题
`description`	否	页面描述
`layout`	是	固定为 `archives`

访问归档页面

创建后归档页面默认路径为 /archives/，建议在导航菜单中添加链接：

[[menu.main]]
  name = "归档"
  url = "/archives/"
  weight = 40

与其他页面的区别

页面	展示方式	适用场景
归档	按时间线平铺	快速定位某时期的文章
分类	按主题分组	按兴趣浏览同类文章
标签	按标签聚合	查找特定话题的文章

下一步

搜索 — 通过关键词查找文章
文章写作 — 了解文章发布规范

搜索

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"]

JSON 输出用于生成搜索索引，必须包含。

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 -}}

3. 搜索按钮

主题导航栏已集成搜索按钮，点击后弹出搜索对话框。也可以使用键盘快捷键 / 快速打开。

搜索界面

搜索对话框包含：

搜索输入框 — 输入关键词即时显示结果
结果列表 — 显示匹配的文章标题和摘要
高亮匹配 — 匹配的关键词在标题中高亮显示
分类标签 — 结果项显示所属分类

搜索配置

在 hugo.toml 中可配置 Fuse.js 的搜索参数：