Markdown on Leanku 的博客

内容写作指南：Front Matter 与排版

Fri, 20 Dec 2024 00:00:00 +0000

Front Matter 全字段

每篇文章开头用 --- 包裹的 YAML 就是 front matter。完整字段：

 1---
 2title: "文章标题" # 必填
 3date: 2025-01-15 # 必填：发布时间（决定排序与归档）
 4lastmod: 2025-01-20 # 可选：详情页显示"最后更新于"
 5description: "摘要，列表页显示" # 强烈建议手写（见"摘要"一节）
 6featured: "images/hero.jpg" # 特色图（static/ 下路径；也可用 Page Bundle）
 7slug: "my-post" # 可选：URL 末尾段（默认取文件名）
 8categories: ["技术"] # 分类（可多个）
 9tags: ["hugo", "写作"] # 标签（可多个）
10author: "Leanku" # 可选：覆盖站点默认作者
11sticky: true # 可选：列表页显示"精选"徽标
12draft: true # 草稿（hugo server -D 才显示）
13keywords: ["hugo", "主题"] # 可选：meta keywords（缺省用 tags）
14canonicalURL: "" # 可选：手动指定 canonical（转载声明用）
15robotsNoIndex: true # 可选：单篇屏蔽索引
16images: ["images/hero.jpg"] # 可选：OG/JSON-LD 图片列表（缺省取 featured）
17---

特色图：两种用法

方式	说明	示例
`featured` 参数	指向 `static/` 下路径	`featured: "images/covers/theme-intro.svg"`
Page Bundle	文章目录 `index.md` + 图片	`content/post/xxx/index.md` + `hero.jpg`，自动取包内第一张图

列表页特色图统一 2:1 比例裁切（object-fit: cover），建议源图 ≥ 1200×600；本站示例用的是同比例的 SVG 封面，文字不会裁切。

代码高亮与 Markdown 进阶排版

Mon, 02 Dec 2024 00:00:00 +0000

本主题内置 Hugo Chroma 代码高亮：Atom One Dark 深色配色、行号、长行横向滚动与一键复制。

代码块用法

三个反引号 + 语言名即可，语法高亮由 Chroma 自动完成：

1package main
2
3import "fmt"
4
5func main() {
6 // 支持 Go/Python/JS/TOML/Bash 等 100+ 语言
7 fmt.Println("Hello, Period!")
8}

需要高亮指定行时，用 highlight 短代码 + hl_lines（行号从 1 计）：

11func add(a, b int) int {
2 return a + b // ← 这一行会被背景高亮
3}

Bash 示例（注意行号会自动生成）：

1hugo server -D
2hugo --minify && npx pagefind --site public

每个代码块右上角有复制按钮（悬停高亮），点击即复制全文。

高亮配置

1[markup.highlight]
2 codeFences = true
3 noClasses = false # 使用 Chroma 类名（配合主题内置 chroma.css）
4 lineNos = true # 行号
5 lineNumbersInTable = false
6 style = "onedark" # 与 themes/period/assets/css/chroma.css 对应
7 tabWidth = 4

换配色风格：运行 hugo gen chromastyles --style=<风格名>（如 github、monokai、 friendly），把输出覆盖到 themes/period/assets/css/chroma.css，再同步修改 markup.highlight.style 即可；换成浅色风格时记得同步调整 themes/period/assets/scss/_base.scss 里 .highlight 块的深色适配（边框/复制按钮配色）。

自建网站分析工具：Umami 完全指南

Mon, 02 Dec 2024 00:00:00 +0000

在网站上线后，了解访客从何而来、关注哪些内容，是持续优化的基础。但 Google Analytics 的复杂配置和隐私合规问题，让不少站长望而却步。如果你希望数据完全由自己掌控，又不想牺牲分析能力，Umami 是一个非常值得考虑的选择。

一、什么是 Umami？

Umami 是一个开源、轻量且注重隐私的网站分析工具，定位为 Google Analytics 的替代方案。它的核心特点可以用几个关键词概括：

开源免费，自托管：代码遵循 MIT 许可证，任何人都可以自由使用和修改。你可以将其部署在自己的服务器或云平台上，所有数据都存储在你控制的环境中，无需依赖任何第三方服务。
隐私友好，无需 Cookie：Umami 默认不使用 Cookie，也不收集个人身份信息（PII），符合 GDPR、CCPA 等隐私法规要求。这意味着你不用再为 Cookie 同意弹窗而烦恼。
轻量高效，不影响性能：前端跟踪脚本体积极小，通常小于 2KB，对网站加载速度的影响几乎可以忽略不计。
界面简洁，功能实用：仪表盘清晰展示实时访客数、页面浏览量（PV）、独立访客（UV）、流量来源、设备类型、热门页面等核心指标。

简单来说，Umami 回归了网站分析的本质——了解你的访客，而不打扰他们。

二、 Umami 的优势

相比于其他统计工具，Umami 的优势非常突出：

特点	具体说明
数据所有权	自托管部署，所有数据归你所有，不存在数据被第三方利用的风险。
不限网站数量	一个 Umami 实例可以同时监控无限个网站，甚至子域名和单个 URL。
绕过广告拦截器	因为统计脚本运行在你自己的域名下，可以有效避免被广告拦截器屏蔽。
多账户与共享	可以为团队或客户创建独立账号，也可以通过唯一 URL 公开分享统计数据。
持续进化	最新版本（v3.1.0）已加入会话回放（Session Replay）、自定义看板（Boards）和 Core Web Vitals 性能监控等专业功能。

三、安装 Umami

对于大多数用户，使用 Docker Compose 是最快捷、最可靠的部署方式。它会帮你把 Umami 应用和 PostgreSQL 数据库一起搞定，维护起来也方便。

此处以Docker为例安装

3.1 前提

A server with Node.js version 18.18+.
A PostgreSQL database version v12.14+.

3.2 拉取项目源码或者手动创建docker-compose.yml

 1---
 2services:
 3 umami:
 4 image: ghcr.io/umami-software/umami:latest
 5 ports:
 6 - "3000:3000"
 7 environment:
 8 DATABASE_URL: postgresql://umami:umami@db:5432/umami
 9 APP_SECRET: replace-me-with-a-random-string
10 # Required for two-factor authentication, generate with: openssl rand -hex 32
11 TWO_FACTOR_ENCRYPTION_KEY: replace-me-with-a-64-character-hex-string
12 depends_on:
13 db:
14 condition: service_healthy
15 init: true
16 restart: always
17 healthcheck:
18 test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
19 interval: 5s
20 timeout: 5s
21 retries: 5
22 db:
23 image: postgres:15-alpine
24 environment:
25 POSTGRES_DB: umami
26 POSTGRES_USER: umami
27 POSTGRES_PASSWORD: umami
28 volumes:
29 - umami-db-data:/var/lib/postgresql/data
30 restart: always
31 healthcheck:
32 test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
33 interval: 5s
34 timeout: 5s
35 retries: 5
36volumes:
37 umami-db-data:

3.3 启动服务

1docker compose up -d

3.4 验证部署

在浏览器中访问 http://你的服务器IP:3000，如果看到 Umami 的登录页面，就说明部署成功了。默认的登录账号是 admin，密码是 umami