内容创作 on KOK博客

文章写作

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

文章写作

文章是 PrimeEdge 的主要内容类型，适合发布长文博客。

创建文章

hugo new content posts/my-first-post.md

文章 Front Matter

---
title: "文章标题"
description: "文章描述，用于 SEO 和摘要"
date: 2024-01-15T10:00:00+08:00
lastmod: 2024-01-16T12:00:00+08:00
draft: false
tags: ["hugo", "tutorial"]
categories: ["技术"]
author: "作者名"
featured: true              # 是否设为精选
comments: true              # 是否开启评论
toc: true                   # 是否显示目录
cover: "/images/cover.jpg"   # 封面图
---

Front Matter 字段说明

字段	必填	说明
`title`	是	文章标题
`description`	否	文章描述，SEO 和列表摘要使用
`date`	是	发布日期
`lastmod`	否	最后修改日期
`draft`	否	草稿状态，true 时不发布
`tags`	否	标签数组
`categories`	否	分类数组
`author`	否	作者名，覆盖默认作者
`featured`	否	设为精选文章
`comments`	否	是否开启评论，默认 true
`toc`	否	是否显示目录，默认 true
`cover`	否	封面图路径

封面图

设置封面图

---
cover: "/images/my-cover.jpg"
---

封面图建议

尺寸: 1200x630 像素（推荐）
格式: WebP 或 JPG
大小: 控制在 200KB 以内
内容: 与文章主题相关，避免纯文字

自动生成封面

如果不设置封面图，文章列表会显示默认占位图。

文章摘要

PrimeEdge 自动提取文章前 150 字符作为摘要。你也可以手动设置摘要分隔符：

这是文章摘要，会显示在列表页面。





这是正文内容，不会显示在列表页面。

目录（TOC）

文章默认显示目录，基于 H2-H4 标题自动生成。

笔记

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

笔记

笔记是 PrimeEdge 的轻量级内容类型，适合快速记录短内容、想法和片段。

特点

简洁快速: 无需复杂 Front Matter
轻量发布: 适合短内容、碎碎念
时间线展示: 按时间倒序排列
无目录: 页面更简洁

创建笔记

hugo new content notes/my-note.md

笔记 Front Matter

---
title: "笔记标题"
date: 2024-01-15T10:00:00+08:00
tags: ["想法", "随笔"]
---

笔记的 Front Matter 比文章更简洁：

字段	必填	说明
`title`	是	笔记标题
`date`	是	发布时间
`tags`	否	标签
`draft`	否	草稿状态

与文章的区别

特性	笔记	文章
长度	短内容	长文
目录	无	有
封面图	无	有
评论	可选	默认开启
摘要	全文	自动生成
布局	紧凑	完整

适用场景

日常想法记录
技术片段备忘
阅读摘抄
待办事项
灵感记录
生活随笔

笔记模板

创建 archetypes/notes.md：

文档

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

文档

PrimeEdge 提供文档布局，适合编写技术文档、教程和说明文档。

特点

侧边栏导航: 层级清晰的文档目录
文档首页: 展示文档概览
上一篇/下一篇: 文档间快速导航
适合长文: 支持复杂的内容结构

创建文档

文档首页

创建 content/docs/_index.md：

---
title: "文档"
description: "项目文档中心"
---

# 欢迎使用

这是文档首页，可以在这里写文档概述。

单篇文档

hugo new content docs/guide/installation.md

---
title: "安装指南"
description: "如何安装和配置"
weight: 1
---

文档结构

建议的文档组织结构：

content/docs/
├── _index.md              # 文档首页
├── getting-started/       # 入门指南
│   ├── _index.md
│   ├── installation.md
│   └── quick-start.md
├── configuration/         # 配置说明
│   ├── _index.md
│   ├── basic.md
│   └── advanced.md
├── api/                   # API 文档
│   ├── _index.md
│   └── reference.md
└── faq.md                 # 常见问题

Front Matter

---
title: "文档标题"
description: "文档描述"
weight: 1          # 排序权重，数字越小越靠前
draft: false
---

文档导航

侧边栏

文档页面的侧边栏自动根据目录结构生成：

投资笔记

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

投资笔记

PrimeEdge 提供专门的投资笔记模块，支持盘前计划和盘后复盘两种笔记类型，并在列表页集成收益率统计面板，自动计算年度/月度收益、跑赢上证指数幅度、最大回撤等核心指标。

功能概览

盘前计划 — 记录早盘思路、今日关注标的、持仓操作预案
盘后复盘 — 记录当日盈亏、交易明细、重要消息、经验总结、高手动向
收益率统计面板 — 自动复利计算、月均收益、跑赢上证指数对比、最大回撤
日历热力图 — 每日盈亏以日历形式可视化呈现
月度走势图表 — 按年分组的月度收益柱状图
历史记录 — 按年份汇总总收益和跑赢大盘幅度

目录结构

content/investing/
├── _index.md              # 投资笔记首页
├── 2026/
│   ├── 01/
│   │   └── 2026-01-25-post.md
│   ├── 03/
│   │   └── 2026-03-31-post.md
│   └── 04/
│       ├── 2026-04-21-post.md   # 盘后复盘
│       └── 2026-04-22-pre.md    # 盘前计划

创建投资笔记首页

创建 content/investing/_index.md：

---
title: "投资笔记"
description: "记录交易心得，复盘每日操作，积累投资智慧"
---

笔记类型

投资笔记分为两种类型，通过 note_type 字段区分。

盘前计划（pre-market）

盘前计划用于记录每日开盘前的思路、观察池和操作预案。

好物推荐

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

好物推荐

PrimeEdge 提供好物推荐布局，用于分享和推荐优质的产品、工具和服务。

特点

产品卡片: 美观的产品展示
精选标记: 标记特别推荐的好物
分类展示: 按类别组织推荐
购买链接: 支持外链到购买页面

创建好物推荐

好物首页

创建 content/good-things/_index.md：

---
title: "好物推荐"
description: "我使用过的好产品"
---

单条推荐

hugo new content good-things/macbook-pro.md

---
title: "MacBook Pro 14"
date: 2024-01-15T10:00:00+08:00
type: "good-things"
category: "数码产品"
featured: true              # 精选标记
brand: "Apple"
price: "¥14,999"
purchase_url: "https://www.apple.com/macbook-pro/"
---

Front Matter 字段

字段	必填	说明
`title`	是	产品名称
`date`	是	推荐日期
`type`	是	固定为 `good-things`
`category`	否	产品分类
`featured`	否	是否精选推荐
`brand`	否	品牌
`price`	否	价格
`purchase_url`	否	购买链接
`tags`	否	标签

好物模板

创建 archetypes/good-things.md：

相册页面

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

相册页面

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

创建相册页面

创建 content/photos.md：

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

相册模板结构

相册页面使用 layouts/page/photos.html 模板，包含：

瀑布流图片网格
灯箱浏览功能
键盘导航支持

添加照片

方式一：直接修改模板

编辑 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: "风景摄影"
  - src: "/images/photos/photo2.jpg"
    title: "城市夜景"
  - src: "/images/photos/photo3.jpg"
    title: "自然风光"

然后在模板中遍历：

{{ range .Site.Data.photos.photos }}
<div class="photo-item" data-src="{{ .src }}">
  <img src="{{ .src }}" alt="{{ .title }}" loading="lazy">
  <div class="photo-overlay">
    <span class="photo-title">{{ .title }}</span>
  </div>
</div>
{{ end }}

图片存放

将图片放入 static/images/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 图标
标题: 网站名称
描述: 简短介绍（建议 20 字以内）

完整示例

技术开发分类

<section class="bookmark-group" id="tech" data-category="tech">
  <h2 class="bookmark-group-title">
    <span class="bookmark-group-icon"><i class="fa-solid fa-code"></i></span>
    <span>技术开发</span>
  </h2>
  <div class="bookmark-cards">
    <a href="https://github.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">GitHub</h3>
        <p class="bookmark-card-desc">全球最大的代码托管平台</p>
      </div>
    </a>
    
    <a href="https://stackoverflow.com" target="_blank" rel="noopener" class="bookmark-link-card">
      <div class="bookmark-card-icon">
        <i class="fa-brands fa-stack-overflow"></i>
      </div>
      <div class="bookmark-card-content">
        <h3 class="bookmark-card-title">Stack Overflow</h3>
        <p class="bookmark-card-desc">程序员问答社区</p>
      </div>
    </a>
  </div>
</section>

分类导航

页面顶部有分类导航栏，点击可筛选显示：

友情链接

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>

友链卡片结构

每个友链包含：

头像: 博主头像（建议 60x60px）
标题: 博客名称
描述: 简短介绍（建议 30 字以内）

完整示例

<h2 class="links-category" id="tech">
  <i class="fa-solid fa-laptop-code"></i>
  技术博客
</h2>
<div class="links-list">
  <a href="https://example1.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://example1.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">技术大佬的博客</h3>
      <p class="link-desc">分享前后端开发经验</p>
    </div>
  </a>
  
  <a href="https://example2.com" class="link-item" target="_blank" rel="noopener">
    <div class="link-avatar">
      <img src="https://example2.com/avatar.jpg" alt="" loading="lazy">
    </div>
    <div class="link-body">
      <h3 class="link-title">前端小能手</h3>
      <p class="link-desc">Vue、React 实战教程</p>
    </div>
  </a>
</div>

分类建议

可以按以下方式分类友链：

内容创作 on KOK博客

文章写作

文章写作

创建文章

文章 Front Matter

Front Matter 字段说明

封面图

设置封面图

封面图建议

自动生成封面

文章摘要

目录（TOC）

笔记

笔记

特点

创建笔记

笔记 Front Matter

与文章的区别

适用场景

笔记模板

文档

文档

特点

创建文档

文档首页

单篇文档

文档结构

Front Matter

文档导航

侧边栏

投资笔记

投资笔记

功能概览

目录结构

创建投资笔记首页

笔记类型

盘前计划（pre-market）

好物推荐

好物推荐

特点

创建好物推荐

好物首页

单条推荐

Front Matter 字段

推荐内容格式

好物模板

相册页面

相册页面

创建相册页面

相册模板结构

添加照片

方式一：直接修改模板

方式二：使用数据文件

图片存放

书签页面

书签页面

创建书签页面

书签分类

添加书签

书签卡片结构

完整示例

技术开发分类

分类导航

友情链接

友情链接

创建友链页面

添加友链

友链卡片结构

完整示例

分类建议