设计目标
侧边栏是博客中信息密度最高的区域之一。一个好的侧边栏设计需要满足：
- 模块化：每个功能组件独立封装，可插拔
- 可排序：管理员可自由调整模块的显示顺序
- 可配置：每个模块拥有独立的参数配置
- 一致性：所有模块共享统一的视觉风格
架构设计
配置驱动
在 hugo.toml 中通过 widgets 数组定义侧边栏：
1[[params.widgets]]
2 type = "profile"
3 width = "full"
4
5[[params.widgets]]
6 type = "announcement"
7 width = "full"
8
9[[params.widgets]]
10 type = "categories"
11 width = "full"
12 params = { limit = 8, depth = 1 }
13
14[[params.widgets]]
15 type = "tags"
16 width = "full"
17 params = { limit = 20, paginate = true }
18
19[[params.widgets]]
20 type = "statistics"
21 width = "full"
数组的顺序即侧边栏的显示顺序，新增和删除只需在数组中增删条目。
模块类型与参数
| 模块 | type | 可配置参数 |
|---|---|---|
| 个人资料 | profile | avatar, bg, socials, description |
| 站点公告 | announcement | title, content, link |
| IP 访客 | visitor | - |
| 日历 | calendar | - |
| 倒计时 | countdown | main, additions |
| 最新文章 | recentPosts | limit |
| 最新评论 | newestComments | limit |
| 分类导航 | categories | limit, depth |
| 标签云 | tags | limit, paginate |
| 打赏 | reward | wechat, alipay |
| 公众号 | qrcode | image, title, text |
| 站点统计 | statistics | - |
模板实现
主容器
1{{/* layouts/partials/sidebar.html */}}
2<aside class="sidebar">
3 {{- range .Site.Params.widgets -}}
4 {{- $widgetPath := printf "widgets/%s.html" .type -}}
5 {{- if templates.Exists (printf "partials/%s" $widgetPath) -}}
6 <div class="widget widget-{{ .type }} widget-{{ .width | default "full" }}">
7 {{- partial $widgetPath (dict "Site" $.Site "Params" .params) -}}
8 </div>
9 {{- end -}}
10 {{- end -}}
11</aside>
这里的关键是 templates.Exists，它能检查模板文件是否存在，从而实现安全的动态加载。
模块模板示例：个人资料
1{{/* layouts/partials/widgets/profile.html */}}
2<div class="widget-profile">
3 <div class="profile-bg" style="background-image: url('{{ .Params.bg }}')"></div>
4 <img class="profile-avatar" src="{{ .Params.avatar }}" alt="头像">
5 <h3 class="profile-name">{{ .Params.name | default .Site.Title }}</h3>
6 <p class="profile-desc">{{ .Params.description }}</p>
7 <div class="profile-socials">
8 {{- range .Params.socials -}}
9 <a href="{{ .url }}" target="_blank" rel="noopener" title="{{ .name }}">
10 <i class="{{ .icon }}"></i>
11 </a>
12 {{- end -}}
13 </div>
14</div>
模块模板示例：站点统计
1{{/* layouts/partials/widgets/statistics.html */}}
2<div class="widget-statistics">
3 {{- $postCount := len (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
4 {{- $catCount := len .Site.Taxonomies.categories -}}
5 {{- $tagCount := len .Site.Taxonomies.tags -}}
6 <div class="stat-item">
7 <span class="stat-number">{{ $postCount }}</span>
8 <span class="stat-label">文章</span>
9 </div>
10 <div class="stat-item">
11 <span class="stat-number">{{ $catCount }}</span>
12 <span class="stat-label">分类</span>
13 </div>
14 <div class="stat-item">
15 <span class="stat-number">{{ $tagCount }}</span>
16 <span class="stat-label">标签</span>
17 </div>
18</div>
视觉一致性
所有模块共享 CSS 基类 .widget：
1.widget {
2 background: var(--card-bg);
3 border-radius: 12px;
4 padding: 20px;
5 margin-bottom: 20px;
6 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
7 transition: box-shadow 0.3s ease;
8}
9.widget:hover {
10 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
11}
12
13.widget-title {
14 font-size: 18px;
15 font-weight: 700;
16 margin-bottom: 16px;
17 padding-bottom: 10px;
18 border-bottom: 2px solid var(--primary-color);
19}
暗黑模式适配
1[data-theme="dark"] .widget {
2 background: var(--card-bg-dark);
3 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
4}
5[data-theme="dark"] .widget:hover {
6 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
7}
后台可视化配置
Lumin Admin 后台提供了拖拽排序的侧边栏管理面板：
- 拖拽调整模块顺序
- 开启/关闭模块
- 编辑模块参数
- 实时预览侧边栏效果
配置修改后立即同步写入 hugo.toml，下次 Hugo 构建时生效。
总结
侧边栏模块化设计的优势：
- 极低的维护成本：新增模块只需创建 HTML 模板 + 配置条目
- 高度的灵活性：每个模块参数独立，排列顺序自由
- 统一的视觉风格：共享基类 + 独立定制，保证一致性
- 对新手友好：可视化后台管理，无需手动编辑代码
留言评论
期待你的想法评论加载中