一、多语言

Hugo 对多语言站点的支持非常完善，内容组织方式也相对灵活，可以按文件名后缀、目录结构等多种方式来管理

这部分我主要参考的是 Hugo 官方文档中的 章节，文档写得很清晰，覆盖了大多数使用场景：

  • 多语言内容如何组织
  • 不同语言的菜单与参数配置
  • URL 生成规则

二、关于页

为了支持中英文切换，我在 content 目录下分别创建了对应语言的关于页：

content/
├── about.zh.md
└── about.en.md

通过这种方式，Hugo 会根据当前语言自动匹配并渲染对应页面，不需要额外写逻辑，维护成本也比较低

三、菜单栏添加FontAwesome图标

  1. 访问
  2. 在 FontAwesome 首页，点击 Start for Free 按钮，输入自己的邮箱
  3. 点击 Send Kit Embed Code 按钮，根据提示进行注册
  4. 获取 script 引入代码，添加到 extend_head.html

layouts/partials/extend_head.html

<!-- 引入fontawesome图标 -->
<script
  src="https://kit.fontawesome.com/xxxxxx.js"
  crossorigin="anonymous"
></script>

四、设置站点图标

站点图标相关的资源统一放在 static 目录下，然后在 hugo.yaml 中进行配置

步骤很简单：

  1. 将 favicon 相关文件放入 static 目录
  2. 在配置文件中声明各类图标路径，示例配置如下
assets:
  disableHLJS: true
  favicon: "/favicon.ico"
  favicon16x16: "/favicon-16x16.png"
  favicon32x32: "/favicon-32x32.png"
  apple_touch_icon: "/favicon-apple-touch-icon.png"
  safari_pinned_tab: "/safari-pinned-tab.svg"

这样在不同设备和浏览器下，都能正确显示站点图标

五、调整站点字体

站点字体的调整单独写了一篇记录，这里不再展开，可以直接参考：

这篇记录会随着站点调整持续补充更新

如果本文对你有所帮助，可以请我喝杯咖啡

（完）