Skip to content

面包屑图标重构

概述

本次重构将面包屑导航中的图标配置从硬编码在模板中改为在各个 section 的_index.md文件中定义，实现了更优雅和可维护的设计。

重构内容

1. 配置文件更新

为以下 section 的_index.md文件添加了icon参数：

中文版本 (content/zh/)

  • blog/_index.md: icon: "fa-solid fa-blog"
  • book/_index.md: icon: "fa-solid fa-book"
  • notice/_index.md: icon: "fa-solid fa-bullhorn"
  • podcast/_index.md: icon: "fa-solid fa-podcast"
  • about/_index.md: icon: "fa-solid fa-user"
  • community/_index.md: icon: "fa-solid fa-users"
  • contact/_index.md: icon: "fa-solid fa-envelope"
  • slide/_index.md: icon: "fa-solid fa-presentation-screen"
  • schedule/_index.md: icon: "fa-solid fa-calendar"
  • travel/_index.md: icon: "fa-solid fa-plane"
  • search/_index.md: icon: "fa-solid fa-search"

英文版本 (content/en/)

  • blog/_index.md: icon: "fa-solid fa-blog"
  • book/_index.md: icon: "fa-solid fa-book"
  • about/_index.md: icon: "fa-solid fa-user"
  • contact/_index.md: icon: "fa-solid fa-envelope"
  • search/_index.md: icon: "fa-solid fa-search"
  • travel/_index.md: icon: "fa-solid fa-plane"

2. 面包屑模板重构

重构前

面包屑模板中包含大量的if-else判断，每个 section 都需要硬编码其图标类名：

{{ if eq .Section "blog" }}
  <i class="fa-solid fa-blog"></i>
{{ else if eq .Section "book" }}
  <i class="fa-solid fa-book"></i>
{{ else if eq .Section "notice" }}
  <i class="fa-solid fa-bullhorn"></i>
...
{{ end }}

重构后

使用动态获取 section 页面的图标配置：

{{ $sectionPage := .Site.GetPage (printf "/%s" .Section) }}
{{ $icon := "fa-solid fa-folder" }}
{{ if $sectionPage.Params.icon }}
  {{ $icon = $sectionPage.Params.icon }}
{{ end }}

<i class="{{ $icon }}"></i>

优势

  1. 可维护性: 图标配置集中在各自的_index.md文件中，便于管理和修改
  2. 扩展性: 新增 section 时只需在对应的_index.md文件中添加icon参数即可
  3. 代码简洁: 大幅减少了模板中的条件判断代码
  4. 配置清晰: 每个 section 的图标配置与其内容描述在同一文件中，更加直观

特殊处理

  • trans section: 由于其特殊性质（翻译文章归类到博客），仍然使用特殊的语言图标 fa-solid fa-language
  • book section: 根据层级使用不同图标
  • 顶级：fa-solid fa-book
  • 书籍首页：fa-solid fa-book-open
  • 章节页面：fa-solid fa-folder
  • 默认图标: 对于没有配置图标的 section，使用 fa-solid fa-folder 作为默认图标

使用方法

要为新的 section 添加图标，只需在对应的_index.md文件的 front matter 中添加：

---
title: "Section Title"
icon: "fa-solid fa-your-icon"  # 添加这一行
---

支持所有 Font Awesome 6 solid 风格的图标类名。