熊记录主题语法指南详解
全面的 Markdown 语法和主题功能指南，包括基本元素、代码块、表格和音频播放器功能
本综合指南展示了此 Hugo 博客主题中可用的完整 Markdown 语法和主题功能范围。它展示了基本 HTML 元素的样式，并介绍了音频播放器等特殊功能。
文本格式和标题
以下部分展示了可用的六个级别的章节标题。<h1> 是最高章节级别，而 <h6> 是最低级别。
H1
H2
H3
H4
H5
H6
段落和文本流
标准段落文本在主题内自然流动。以下是带有类 Lorem Ipsum 内容的示例：
Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.
Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.
块引用和引用
块引用元素表示从另一个来源引用的内容，可选地带有必须在 footer 或 cite 元素内的引用，以及可选地带有内联更改，如注释和缩写。
无归属的块引用
Tiam, ad mint andaepu dandae nostion secatur sequo quae. 注意 您可以在块引用中使用 Markdown 语法。
带归属的块引用
不要通过共享内存来通信，而是通过通信来共享内存。
— Rob Pike1
表格和数据展示
表格不是核心 Markdown 规范的一部分，但 Hugo 开箱即用地支持它们。以下是不同表格格式选项的示例：
| 姓名 | 年龄 |
|---|---|
| Bob | 27 |
| Alice | 23 |
表格内的内联 Markdown
| 斜体 | 粗体 | 代码 |
|---|---|---|
| 斜体 | 粗体 | 代码 |
代码块和语法高亮
此主题支持多种显示代码的方式，每种方式都有其自己的样式和用例。
使用反引号的代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>示例 HTML5 文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>
使用四个空格缩进的代码块
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>示例 HTML5 文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>
使用 Hugo 内部高亮短代码的代码块
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>示例 HTML5 文档</title>
</head>
<body>
<p>测试</p>
</body>
</html>列表和组织
不同的列表类型有助于分层组织内容，并为信息提供清晰的结构。
有序列表
- 第一项
- 第二项
- 第三项
无序列表
- 列表项
- 另一个项
- 还有一个项
嵌套列表
- 水果
- 苹果
- 橙子
- 香蕉
- 乳制品
- 牛奶
- 奶酪
特殊 HTML 元素
主题正确样式化各种 HTML 元素，以增强排版和用户体验。
GIF 是一种位图图像格式。
H2O
Xn + Yn = Zn
按 Command + Shift + D 结束会话。
大多数 蝾螈 是夜行性的，捕食昆虫、蠕虫和其他小生物。
图像和媒体
本节演示如何使用 Markdown 语法将图像添加到您的博客文章中。
带有替代文本的基本图像
您将看到：一个蓝色的占位图像，带有文本"示例图像"，与您的内容内联显示。
带链接的图像
您将看到：一个绿色的占位图像，作为指向指定 URL 的可点击链接。
带有自定义样式的图像
<img src="https://via.placeholder.com/350x200/E74C3C/FFFFFF?text=样式化+图像"
alt="带边框的样式化图像"
style="border: 3px solid #2C3E50; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);" />
您将看到：一个红色的占位图像，带有深色边框、圆角和微妙的阴影效果。
带标题的图像
<figure>
<img src="https://via.placeholder.com/450x250/9B59B6/FFFFFF?text=图+标题" alt="带图标题的图像" />
<figcaption><em>图：带有正确语义标题的图像</em></figcaption>
</figure>
您将看到：一个紫色的占位图像，包装在语义图元素中，下方带有斜体标题。
最后但并非最不重要的是，上面的示例使用占位图像进行演示。在您的实际文章中，将 URL 替换为 Hugo 静态目录中的真实图像路径（例如，/images/your-image.jpg）或带有适当归属的外部来源。
音频播放器功能
此主题包括一个与博客文章无缝集成的自定义音频播放器。音频播放器功能包括：
- 带有悬停效果的播放/暂停按钮
- 与主题颜色匹配的进度条
- 当前时间显示
- 音量控制和静音按钮
- 键盘可访问性
- 适用于所有设备的响应式设计
如何向文章添加音频
要在任何博客文章中包含音频播放器，只需在您的前言中添加 audio 参数：
title = "我的博客文章"
audio = "/audio/my-audio-file.aac"
音频播放器支持常见的音频格式：
- AAC (.aac)
- MP3 (.mp3)
- WAV (.wav)
音频播放器样式
音频播放器自动适应主题的颜色方案，包括暗模式支持。它使用与博客其余部分相同的设计语言，以获得一致的体验。
播放器位于文章元数据（作者、阅读时间、日期）之后和主要内容之前，使想要收听文章音频版本的读者能够轻松发现。
本指南展示了主题如何处理各种内容类型，并为创建具有视觉和音频元素的丰富、格式良好的博客文章提供了参考。
项目展示卡片
您可以使用简约、响应式的卡片来展示您的项目。这些卡片设计简洁且不显眼，同时仍提供专业的展示。
基本卡片结构
以下是右侧有图像、左侧有文本的项目卡片示例：
Vibe 博客平台
使用 Hugo 和 Bear 主题构建的简约博客平台。具有响应式设计、音频支持和清晰的排版。
如何使用
要创建您自己的项目卡片，请使用此 HTML 结构：
<a href="your-project-url" class="project-card">
<div class="project-card-content">
<h3 class="project-card-title">您的项目名称</h3>
<p class="project-card-description">您的项目及其关键功能的简要描述。</p>
</div>
<img src="your-image-url" alt="项目预览" class="project-card-image">
</a>
响应式行为
卡片完全响应式：
- 桌面：水平布局，图像在右侧
- 移动端：垂直布局，图像在文本下方
- 悬停效果：悬停时边框和阴影的微妙变化
- 可点击：整个卡片作为指向您项目的链接
图像指南
- 推荐尺寸：桌面 120×80px，移动端 16:9 宽高比
- 格式：JPG、PNG 或 WebP
- 优化：保持图像在 100KB 以下以实现快速加载
- 放置：将图像存储在
static/images/文件夹中，并使用/images/filename.jpg引用
多卡片示例
您可以堆叠多个卡片以创建项目画廊：
AI 客户服务机器人
多语言聊天机器人，将客户服务响应时间减少 60%。使用 Python 和 OpenAI API 构建。
提示工程工具包
用于 LLM 应用程序的交互式提示库和测试框架，包含 200+ 精选示例。
卡片与您现有的主题颜色无缝集成，并自动适应亮模式和暗模式。
API 定价展示
此主题包含一个专门的定价卡系统，设计用于显示 API 定价信息，灵感来自 OpenAI 的定价结构。这些卡片非常适合展示不同的服务层级、模型比较或定价明细。
GPT-风格的定价卡
以下是如何使用专用定价卡组件显示 API 定价的示例：
GPT-5
适用于各行业编码和代理任务的最佳模型
价格
GPT-5 mini
更快、更便宜的 GPT-5 版本，适用于定义明确的任务
价格
GPT-5 nano
最快、最便宜的 GPT-5 版本—非常适合摘要和分类任务
价格
GPT-5 Turbo
适用于实时应用和对话式 AI 的高速模型
价格
如何使用定价卡
要创建您自己的定价展示，请使用此 HTML 结构：
<div class="pricing-grid">
<div class="pricing-card">
<div class="pricing-card-header">
<h3 class="pricing-card-title">服务名称</h3>
<p class="pricing-card-description">服务或模型功能的简要描述</p>
</div>
<hr class="pricing-card-separator" />
<div class="pricing-section">
<h4 class="pricing-section-title">价格</h4>
<div class="pricing-item">
<span class="pricing-item-label">• 输入:</span>
<span class="pricing-item-value">$X.XXX / 1M tokens</span>
</div>
<div class="pricing-item pricing-item-cached">
<span class="pricing-item-label">• 缓存输入:</span>
<span class="pricing-item-value">$X.XXX / 1M tokens</span>
</div>
<div class="pricing-item">
<span class="pricing-item-label">• 输出:</span>
<span class="pricing-item-value">
<span class="pricing-item-highlight">$XX.XXX / 1M tokens</span>
</span>
</div>
</div>
</div>
</div>
定价卡功能
定价卡包括几个专门的功能：
- 响应式网格布局: 在桌面上自动从3列调整为在移动设备上的单列
- 悬停效果: 悬停时有细微的动画和边框颜色变化
- 缓存定价: 对折扣缓存输入定价使用特殊样式，带斜体文本
- 高亮值: 使用
pricing-item-highlight类来强调重要的定价层级 - 多部分: 支持在基本结构之外添加额外的定价部分
- 暗黑模式支持: 自动适应亮色和暗色主题
自定义选项
您可以通过以下方式自定义定价卡：
- 添加更多部分: 为功能、限制等添加额外的
pricing-sectiondiv - 高亮层级: 为特色或高级定价使用
pricing-item-highlight - 自定义描述: 在标题中添加详细的功能描述
- 灵活布局: 网格自动适应任意数量的卡片
示例用例
这些定价卡非常适用于：
- API 文档: 显示不同模型层级及其成本
- 服务比较: 比较多个产品的特性和定价
- 产品层级: 展示不同的订阅级别或使用计划
- 资源定价: 显示计算、存储或带宽成本
定价显示与您博客现有的设计系统无缝集成，并提供一种专业的方式来展示与现代 API 文档标准相匹配的定价信息。
Comments