你好,Hugo

欢迎来到这个用 Hugo 搭建的博客。这是一篇示例文章。

接下来

• 用 hugo new content posts/我的新文章.md 创建新文章
• 编辑内容后用 hugo server 本地预览
• 用 hugo 命令构建静态文件到 public/

简单、快速、就绪。

示例:常用命令

# 本地预览(含草稿)
hugo server -D

# 构建静态站点到 public/
hugo --gc --minify

package main

import "fmt"

func main() {
    fmt.Println("你好,Hugo!")
}

音频播放示例

使用内置的 audio 短代码嵌入音频文件，支持播放、进度拖拽和键盘操作：

音频文件放在 static/audio/ 目录中，通过 audio 短代码引用即可。

视频外链示例

用 Hugo 自带的 youtube 短代码嵌入 YouTube 视频，自适应宽度：

Bilibili 用自建的 bilibili 短代码，按 BV 号嵌入（同样自适应）：

译者注示例

用 t 短代码包裹译者补充内容，渲染成带左侧细边的 aside，与正文区分开：

{{< t >}}
**译者注：** 写在这里的内容会显示为译者注。
{{< /t >}}

下面是三种常见用法：

文本对比示例

下面三种方式展示「前后对比」效果，从轻量到结构化递进。

Demo 1：行级 diff（终端式）

最轻量——直接用 diff 语言的代码块，Hugo 内置 chroma 就能高亮增删行（红删绿增），无需任何短代码：

  function greet(name) {
-   console.log("hello, " + name)
+   console.log(`你好，${name}`)
  }

Demo 2：并排两栏（文本对比）

用自建的 compare 短代码左右并排，适合对比文案、段落：

Demo 3：并排两栏（git diff 风格）

Demo 2 只是并排展示，没有标出具体哪几行变了。这一版用 diffview 手写——给变更行加红绿背景和左侧色条，效果等同 GitHub 的 side-by-side diff：

func sum(nums []int) int {    var total int    for i := 0; i < len(nums); i++ {        total += nums[i]    }    return total}

func sum(nums []int) (total int) {    for _, n := range nums {        total += n    }    return total}

代价：纯静态站点无法在构建时自动算两段文本的 diff，所以变更行得手动用 <span class="diff-line--del"> / diff-line--add 标注（代码里的 <、> 要转义成 <、>）。想完全自动化见 Demo 4。

Demo 4：自动渲染（diff2html）

Demo 3 的手动标注写多了烦。这一版引入 diff2html（~95 KB，已下载到 static/vendor/ 本地加载，不走 CDN），直接贴一段真实的 unified diff，库自动算出左右对比和红绿高亮：

四种方式怎么选：只是行内增删 → Demo 1；并排看文案 → Demo 2；并排且手动标变更行（零 JS）→ Demo 3；贴 unified diff 自动渲染 → Demo 4。窄屏下并排都会自动横向滚动或堆叠。

地图示例

用自建的 map 短代码嵌入交互式地图（基于 Leaflet + OpenStreetMap，免 API key）。滚动缩放已关闭，点按 +/− 或触屏双指缩放；右上角「↺」可复位到初始视野。

Demo 1：单个地点

最简单——给一个经纬度和弹出标签：

{{< map lat="30.5728" lng="104.0668" zoom="12" popup="成都" />}}

Demo 2：多个标记点

一行一个 纬度, 经度, 标签，按顺序标在地图上：

{{< map zoom="12" lat="23.13" lng="113.28" >}}
23.1066, 113.3245, 广州塔
23.1252, 113.2459, 陈家祠
23.1847, 113.2990, 白云山
{{< /map >}}

Demo 3：GPX 轨迹

把 GPX 文件放进 static/tracks/，用 gpx 参数引用，自动画线并适配视野：

{{< map gpx="/tracks/demo.gpx" base="osm" />}}

三种用法按需选：标一个地方 → Demo 1；多点打卡 → Demo 2；展示徒步/骑行/自驾路线 → Demo 3。底图默认高德（中文路网），可用 base="osm" 切换为 OpenStreetMap；坐标默认按 GCJ-02（高德拾取）处理，用谷歌/GPS 数据时加 coord="wgs84"。