主题特色

Resound 是一个功能丰富、设计优雅的 Hugo 博客主题，具有以下特点：

核心功能

1. 响应式设计 - 完美适配手机、平板、桌面
2. 侧边栏导航 - 抽屉式设计，支持多级菜单
3. 文章目录 - 自动生成，滚动高亮
4. 站内搜索 - 快速、准确的前端搜索
5. 归档分类 - 按年月分组，易于浏览

高级特性

• 🎤 幻灯片模式 - 基于 Reveal.js
• 📊 数学公式 - MathJax 支持
• 📈 图表渲染 - Mermaid 支持
• 💬 评论系统 - Giscus 集成
• 📊 数据分析 - Google Analytics

快速开始

安装主题

git submodule add https://github.com/ifeitao/hugo-theme-resound.git themes/resound

配置站点

在 hugo.toml 中设置：

theme = 'resound'

[params]
  slogan = '你的网站标语'
  author = '你的名字'

创建文章

hugo new posts/my-first-post.md

使用技巧

启用目录

在文章的 front matter 中添加：

toc: true

代码高亮

支持多种编程语言的语法高亮：

def hello_world():
    print("Hello, Resound!")
    return True

function greet(name) {
  console.log(`Hello, ${name}!`);
  return true;
}

表格支持

列表和引用

无序列表：

• 第一项
• 第二项
  • 子项 2.1
  • 子项 2.2
• 第三项

有序列表：

1. 首先
2. 其次
3. 最后

引用：

Resound - Make Your Content Resound

让你的内容产生回响

进阶功能

查看其他示例文章了解更多高级功能：

• 数学公式示例
• Mermaid图表示例
• 幻灯片演示

获取帮助

• 📖 完整文档
• 🐛 报告问题
• 💡 功能建议

开始你的创作之旅吧！ 🚀

行内公式

在文本中可以使用行内公式，例如：质能方程 $E = mc^2$ 是物理学中最著名的公式之一。

勾股定理：$a^2 + b^2 = c^2$

欧拉公式：$e^{i\pi} + 1 = 0$

块级公式

积分

高斯积分：

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

分部积分：

$$ \int u dv = uv - \int v du $$

求和

$$ \sum_{i=1}^{n} i = \frac{n(n+1)}{2} $$

无穷级数：

$$ \sum_{n=0}^{\infty} \frac{1}{2^n} = 2 $$

矩阵

$$ \begin{pmatrix} a & b \ c & d \end{pmatrix} \begin{pmatrix} x \ y \end{pmatrix}

\begin{pmatrix} ax + by \ cx + dy \end{pmatrix} $$

单位矩阵：

$$ I = \begin{pmatrix} 1 & 0 & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \end{pmatrix} $$

方程组

线性方程组：

$$ \begin{cases} x + y = 5 \ 2x - y = 1 \end{cases} $$

微分方程

$$ \frac{dy}{dx} + P(x)y = Q(x) $$

极限

$$ \lim_{x \to \infty} \frac{1}{x} = 0 $$

$$ \lim_{n \to \infty} \left(1 + \frac{1}{n}\right)^n = e $$

复杂公式

傅里叶变换

$$ F(\omega) = \int_{-\infty}^{\infty} f(t) e^{-i\omega t} dt $$

薛定谔方程

$$ i\hbar\frac{\partial}{\partial t}\Psi(\mathbf{r},t) = \hat{H}\Psi(\mathbf{r},t) $$

麦克斯韦方程组

$$ \begin{align} \nabla \cdot \mathbf{E} &= \frac{\rho}{\epsilon_0} \ \nabla \cdot \mathbf{B} &= 0 \ \nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \ \nabla \times \mathbf{B} &= \mu_0\mathbf{J} + \mu_0\epsilon_0\frac{\partial \mathbf{E}}{\partial t} \end{align} $$

贝叶斯公式

$$ P(A|B) = \frac{P(B|A)P(A)}{P(B)} $$

特殊符号

希腊字母

$\alpha, \beta, \gamma, \delta, \epsilon, \zeta, \eta, \theta$

$\Alpha, \Beta, \Gamma, \Delta, \Epsilon, \Zeta, \Eta, \Theta$

$\pi, \phi, \psi, \omega, \Omega, \Sigma, \Lambda$

运算符

$\times, \div, \pm, \mp, \cdot, \ast, \circ$

$\leq, \geq, \neq, \approx, \equiv, \sim$

$\in, \notin, \subset, \supset, \subseteq, \supseteq$

$\cup, \cap, \emptyset, \infty, \partial, \nabla$

箭头

$\rightarrow, \leftarrow, \Rightarrow, \Leftarrow, \leftrightarrow, \Leftrightarrow$

$\uparrow, \downarrow, \Uparrow, \Downarrow$

使用方法

在文章的 front matter 中启用 MathJax：

---
mathjax: true
---

然后使用 $...$ 表示行内公式，使用 $$...$$ 表示块级公式。

MathJax 让数学公式变得优雅！ ✨

流程图

简单流程图

graph TD
    A[开始] --> B{是否登录?}
    B -->|是| C[显示主页]
    B -->|否| D[跳转登录页]
    C --> E[结束]
    D --> E

复杂流程图

graph LR
    A[用户请求] --> B{验证Token}
    B -->|有效| C[查询数据库]
    B -->|无效| D[返回401]
    C --> E{数据存在?}
    E -->|是| F[返回数据]
    E -->|否| G[返回404]
    F --> H[记录日志]
    G --> H
    D --> H
    H --> I[结束]

时序图

API调用时序图

sequenceDiagram
    participant C as 客户端
    participant S as 服务器
    participant D as 数据库
    
    C->>S: 发送请求
    activate S
    S->>D: 查询数据
    activate D
    D-->>S: 返回结果
    deactivate D
    S-->>C: 返回响应
    deactivate S

用户认证流程

sequenceDiagram
    participant U as 用户
    participant F as 前端
    participant B as 后端
    participant DB as 数据库
    
    U->>F: 输入用户名密码
    F->>B: POST /login
    B->>DB: 验证凭据
    DB-->>B: 返回用户信息
    B->>B: 生成Token
    B-->>F: 返回Token
    F-->>U: 登录成功

类图

classDiagram
    class Animal {
        +String name
        +int age
        +eat()
        +sleep()
    }
    class Dog {
        +String breed
        +bark()
    }
    class Cat {
        +String color
        +meow()
    }
    Animal <|-- Dog
    Animal <|-- Cat

状态图

stateDiagram-v2
    [*] --> 草稿
    草稿 --> 审核中: 提交审核
    审核中 --> 已发布: 审核通过
    审核中 --> 草稿: 审核拒绝
    已发布 --> 已归档: 归档
    已归档 --> [*]

甘特图

gantt
    title 项目开发计划
    dateFormat  YYYY-MM-DD
    section 设计阶段
    需求分析           :a1, 2024-01-01, 7d
    UI设计             :a2, after a1, 5d
    section 开发阶段
    前端开发           :b1, after a2, 10d
    后端开发           :b2, after a2, 12d
    section 测试阶段
    集成测试           :c1, after b1 b2, 5d
    上线部署           :c2, after c1, 2d

饼图

pie title 编程语言使用占比
    "Python" : 35
    "JavaScript" : 30
    "Go" : 20
    "Rust" : 10
    "其他" : 5

Git图

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    branch feature
    checkout feature
    commit
    checkout main
    merge feature
    commit

ER图（实体关系图）

erDiagram
    USER ||--o{ ORDER : places
    USER {
        int id
        string name
        string email
    }
    ORDER ||--|{ ORDER_ITEM : contains
    ORDER {
        int id
        date created_at
        string status
    }
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    PRODUCT {
        int id
        string name
        decimal price
    }
    ORDER_ITEM {
        int quantity
        decimal price
    }

旅程图

journey
    title 用户购物流程
    section 浏览
      浏览商品: 5: 用户
      搜索商品: 4: 用户
    section 购买
      加入购物车: 3: 用户
      结算: 2: 用户, 系统
      支付: 2: 用户, 支付系统
    section 售后
      查看订单: 4: 用户
      收货确认: 5: 用户

使用方法

在文章的 front matter 中启用 Mermaid：

---
mermaid: true
---

然后使用代码块语法：

```mermaid
graph TD
    A --> B
```

更多资源

• Mermaid 官方文档
• 在线编辑器
• 语法参考

用 Mermaid 让图表变得简单！ 📊

一个让你的内容产生回响的 Hugo 主题

..

主要特性

• 响应式设计
• 侧边栏导航
• 文章目录 (TOC)
• 站内搜索
• 幻灯片支持

..

为什么选择 Resound?

• ⚡ 快速 - Hugo 极速构建
• 🎨 优雅 - 简洁的视觉设计
• 🔍 强大 - 丰富的功能特性
• 📱 响应式 - 完美适配各种设备

…

核心功能

..

响应式设计

完美适配

• 📱 手机 (< 570px)
• 📱 平板 (570px - 840px)
• 💻 桌面 (840px - 1024px)
• 🖥️ 大屏 (> 1024px)

..

搜索功能

• 前端搜索
• 快速响应
• 支持中文
• 多关键词

..

文章目录

• 自动生成
• 滚动高亮
• 固定位置
• 响应式显示

…

高级特性

..

幻灯片模式

基于 Reveal.js

• 多种主题
• 转场效果
• 键盘导航
• 触摸支持

..

数学公式

MathJax 支持

质能方程：

$$E = mc^2$$

欧拉公式：

$$e^{i\pi} + 1 = 0$$

..

代码高亮

def hello_world():
    print("Hello, Resound!")
    return True

const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

…

如何使用

..

安装

git submodule add \
  https://github.com/ifeitao/hugo-theme-resound.git \
  themes/resound

..

配置

theme = 'resound'

[params]
  slogan = '让你的内容产生回响'
  author = '你的名字'

..

创建内容

# 创建文章
hugo new posts/my-post.md

# 创建幻灯片
hugo new posts/my-slide.md

在 front matter 中设置：

layout: "slide"
theme: "black"

…

幻灯片操作

..

键盘快捷键

• ← → 左右切换
• ↑ ↓ 上下切换
• Esc 概览模式
• F 全屏模式
• S 演讲者视图

..

主题选择

可选主题：

• black (默认)
• white
• league
• sky
• beige
• simple
• serif

..

转场效果

可选效果：

• none
• fade
• slide
• convex
• concave
• zoom

…

获取帮助

..

资源链接

• 📖 文档
• 🐛 Issues
• 💡 Discussions

..

社区

• GitHub: @ifeitao
• 主题: Resound
• 协议: MIT

…

Thanks!

开始你的创作之旅

Resound - Make Your Content Resound 🎵

按 Esc 查看概览

标题

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

文本样式

粗体文本

斜体文本

粗斜体文本

删除线

列表

无序列表

• 项目 1
• 项目 2
  • 子项目 2.1
  • 子项目 2.2
• 项目 3

有序列表

1. 第一项
2. 第二项
3. 第三项

任务列表

• 已完成任务
• 未完成任务
• 待办事项

链接和图片

链接

Hugo 官网

Resound 主题

图片

![替代文本](/images/example.png)

引用

这是一个引用。

可以跨多行。

嵌套引用：

第一层引用

第二层引用

第三层引用

代码

行内代码

使用 code 表示行内代码。

代码块

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

package main

import "fmt"

func main() {
    fmt.Println("Hello, Resound!")
}

fn main() {
    println!("Hello, Resound!");
}

表格

复杂表格：

分割线

HTML 标签

可以在 Markdown 中使用 HTML：

这是隐藏的内容。

可以包含任何 Markdown 语法。

脚注

这是一个带脚注的文本¹。

这是另一个脚注²。

定义列表

术语1

定义1

术语2

定义2a

定义2b

缩写

HTML 是超文本标记语言。

*[HTML]: Hyper Text Markup Language

Emoji 表情

使用 emoji: :smile: :heart: :thumbsup: :rocket:

GitHub 风格: :octocat: :shipit:

快捷键

Ctrl + C 复制

Ctrl + V 粘贴

Ctrl + Z 撤销

上标和下标

H2O (下标)

X^2^ (上标)

高亮

==高亮文本==

提示框

提示

这是一个提示信息。

警告

这是一个警告信息。

注意

这是一个注意事项。

总结

Markdown 是一种轻量级标记语言，易于学习和使用。Resound 主题完美支持所有 Markdown 语法！

Happy Writing! ✍️

什么是 Hugo？

Hugo 是一个用 Go 语言编写的静态站点生成器，具有以下特点：

• ⚡ 极速构建 - 毫秒级构建速度
• 🎯 简单易用 - 学习曲线平缓
• 🔧 功能强大 - 内置丰富功能
• 📦 单一二进制 - 无需依赖
• 🌐 多语言支持 - 内置国际化

安装 Hugo

macOS

brew install hugo

Linux

# Debian/Ubuntu
sudo apt-get install hugo

# Arch Linux
sudo pacman -S hugo

Windows

choco install hugo-extended

创建站点

初始化项目

# 创建新站点
hugo new site my-blog

# 进入目录
cd my-blog

# 初始化 Git
git init

添加主题

# 使用 Resound 主题
git submodule add \
  https://github.com/ifeitao/hugo-theme-resound.git \
  themes/resound

配置站点

编辑 hugo.toml:

baseURL = 'https://example.com'
languageCode = 'zh-CN'
title = '我的博客'
theme = 'resound'

[params]
  slogan = '记录生活，分享知识'
  author = '你的名字'

创建内容

创建文章

hugo new posts/my-first-post.md

编辑文章

---
title: "我的第一篇文章"
date: 2024-01-10T10:00:00+08:00
categories: ["技术"]
tags: ["Hugo"]
draft: false
---

这是文章内容。

Front Matter

Hugo 支持三种 Front Matter 格式：

YAML:

---
title: "文章标题"
date: 2024-01-10
---

TOML:

+++
title = "文章标题"
date = 2024-01-10
+++

JSON:

{
  "title": "文章标题",
  "date": "2024-01-10"
}

本地开发

启动开发服务器

hugo server -D

参数说明：

• -D - 显示草稿
• --navigateToChanged - 自动导航到修改的页面
• --disableFastRender - 禁用快速渲染

热重载

Hugo 支持热重载，修改文件后浏览器会自动刷新。

构建站点

生产构建

hugo --minify

生成的文件在 public/ 目录。

构建选项

# 指定环境
hugo --environment production

# 生成草稿
hugo -D

# 清理旧文件
hugo --cleanDestinationDir

# 详细输出
hugo -v

目录结构

my-blog/
├── archetypes/       # 内容原型
├── assets/           # 待处理资源
├── content/          # 内容文件
│   └── posts/        # 文章目录
├── data/             # 数据文件
├── layouts/          # 自定义布局
├── public/           # 生成的站点
├── static/           # 静态文件
├── themes/           # 主题目录
│   └── resound/      # Resound 主题
└── hugo.toml         # 配置文件

内容组织

章节（Sections）

content/
├── posts/            # 文章章节
│   ├── _index.md
│   └── post-1.md
├── docs/             # 文档章节
│   └── guide.md
└── about.md          # 单页

分类法（Taxonomies）

默认的分类法：

• categories（分类）
• tags（标签）

自定义分类法：

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

短代码（Shortcodes）

内置短代码

YouTube:

{{< youtube w7Ft2ymGmfc >}}

Twitter:

{{< tweet user="hugo" id="123456" >}}

图片:

{{< figure src="https://hugo-theme-resound.netlify.app/images/example.jpg" title="示例图片" >}}

自定义短代码

创建 layouts/shortcodes/note.html:

<div class="note">
  {{ .Inner }}
</div>

使用：

{{< note >}}
这是一个提示框
{{< /note >}}

数据文件

在 data/ 目录创建 YAML/JSON/TOML 文件：

# data/features.yaml
- name: 响应式
  icon: 📱
- name: 快速
  icon: ⚡

在模板中使用：

{{ range .Site.Data.features }}
  <div>{{ .icon }} {{ .name }}</div>
{{ end }}

部署

GitHub Pages

# .github/workflows/hugo.yml
name: Deploy Hugo site to Pages

on:
  push:
    branches: ["main"]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      - run: hugo --minify
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

Netlify

创建 netlify.toml:

[build]
  publish = "public"
  command = "hugo --minify"

[context.production.environment]
  HUGO_VERSION = "0.120.0"
  HUGO_ENV = "production"

Vercel

在项目设置中配置：

• Build Command: hugo --minify
• Output Directory: public

性能优化

图片处理

{{ $image := resources.Get "images/photo.jpg" }}
{{ $resized := $image.Resize "800x" }}
<img src="{{ $resized.RelPermalink }}">

资源打包

{{ $css := resources.Get "css/main.css" }}
{{ $css := $css | minify | fingerprint }}
<link rel="stylesheet" href="{{ $css.RelPermalink }}">

最佳实践

1. 使用版本控制 - Git 管理内容
2. 模块化内容 - 使用 partials 和 shortcodes
3. 图片优化 - 使用 Hugo 的图片处理功能
4. 缓存优化 - 启用资源指纹
5. SEO优化 - 设置完整的 meta 标签

学习资源

• Hugo 官方文档
• Hugo Discourse
• Hugo GitHub
• Resound 主题

开始使用 Hugo 构建你的站点吧！ 🚀

咖啡的起源

咖啡起源于埃塞俄比亚，据说是一位牧羊人发现他的羊吃了某种浆果后变得异常兴奋。

咖啡传播史

• 9世纪 - 阿拉伯半岛开始种植
• 15世纪 - 传入奥斯曼帝国
• 17世纪 - 进入欧洲
• 18世纪 - 传播到美洲

咖啡豆种类

阿拉比卡（Arabica）

• 占世界产量的 70%
• 风味复杂，酸度明显
• 咖啡因含量较低
• 价格较高

罗布斯塔（Robusta）

• 占世界产量的 30%
• 味道较苦，醇厚度高
• 咖啡因含量较高
• 价格较低

咖啡处理法

日晒法（Natural/Dry Process）

特点：

• 浓郁的果香
• 甜度高
• 醇厚度强

流程：

1. 采摘成熟咖啡果
2. 在阳光下晾晒
3. 去除干燥的果皮
4. 分级包装

水洗法（Washed Process）

特点：

• 干净明亮的风味
• 酸度突出
• 口感清爽

流程：

1. 去除果皮果肉
2. 发酵去除粘膜
3. 清洗干净
4. 干燥处理

蜜处理（Honey Process）

特点：

• 介于日晒和水洗之间
• 甜度好，口感平衡
• 风味多样

烘焙程度

浅烘焙（Light Roast）

• 颜色: 浅棕色
• 风味: 明显的果酸
• 适合: 单品咖啡

中烘焙（Medium Roast）

• 颜色: 中棕色
• 风味: 平衡的酸甜
• 适合: 大多数咖啡

深烘焙（Dark Roast）

• 颜色: 深棕色
• 风味: 苦味明显
• 适合: 意式浓缩

冲煮方法

手冲咖啡

所需器具：

• 手冲壶
• 滤杯
• 滤纸
• 磨豆机
• 电子秤

步骤：

1. 研磨咖啡豆（中细研磨）
2. 温杯并湿润滤纸
3. 投入咖啡粉
4. 闷蒸 30 秒
5. 分段注水
6. 总时间 2-3 分钟

法压壶

特点：

• 操作简单
• 醇厚度高
• 油脂丰富

步骤：

1. 粗研磨咖啡
2. 投入法压壶
3. 注入热水
4. 浸泡 4 分钟
5. 压下滤网
6. 倒出享用

意式浓缩

特点：

• 浓度高
• 口感浓郁
• 制作快速

参数：

• 粉量: 18-20g
• 萃取时间: 25-30秒
• 萃取量: 30-40ml
• 水温: 90-96°C
• 压力: 9bar

品鉴要素

香气（Aroma）

• 花香
• 果香
• 坚果香
• 焦糖香
• 巧克力香

风味（Flavor）

• 酸度
• 甜度
• 苦度
• 咸度
• 鲜味

口感（Body）

• 轻盈
• 中等
• 厚重
• 顺滑
• 粗糙

余韵（Aftertaste）

• 持久度
• 愉悦度
• 层次感

咖啡产区

非洲

埃塞俄比亚：

• 耶加雪菲 - 花香明显
• 西达摩 - 果香浓郁

肯尼亚：

• 酸度明亮
• 果味丰富

中南美洲

哥伦比亚：

• 平衡柔和
• 坚果风味

巴西：

• 醇厚度高
• 巧克力味

亚洲

印度尼西亚：

• 曼特宁 - 草本香气
• 醇厚度强

云南：

• 口感柔和
• 坚果巧克力

咖啡饮品

经典意式

• Espresso - 浓缩咖啡
• Americano - 美式咖啡
• Cappuccino - 卡布奇诺
• Latte - 拿铁
• Macchiato - 玛奇朵
• Flat White - 馥芮白

创意饮品

• Dirty - 脏咖啡
• Spanish Latte - 西班牙拿铁
• Affogato - 阿芙佳朵
• Irish Coffee - 爱尔兰咖啡

咖啡器具

基础器具

• ☕ 手冲壶
• 📏 电子秤
• 🌡️ 温度计
• ⏱️ 计时器
• 🔪 磨豆机

进阶器具

• 🎯 意式咖啡机
• 📊 研磨度分析仪
• 🔬 浓度计
• 💧 水质检测仪

保存方法

咖啡豆储存

• 密封罐保存
• 避免阳光直射
• 远离潮湿
• 避免异味
• 2周内饮用完

研磨粉储存

• 现磨现用
• 密封保存
• 1-2天内用完

健康提示

适量饮用

• 每天 1-3 杯
• 避免空腹
• 下午3点后少喝
• 孕妇减量

咖啡因含量

总结

咖啡是一门艺术，也是一种生活方式。从选豆、烘焙到冲煮，每一步都影响着最终的风味。

享受你的咖啡时光！ ☕