本文摘抄自：
莱特雷-letere
并补充相关内容，在此感谢大佬的分享
📚 导航目录
🚀 核心特点与优势
Hugo Stack 主题的自定义 Widget 功能为博客侧边栏提供了极大的灵活性，主要特点包括：
✨ 核心优势
- 🔄 无缝集成：与 Stack 主题完美融合，无需修改主题源码
- 🎨 高度自定义：支持 HTML、CSS、JavaScript 全栈开发
- 📱 响应式设计：自动适配桌面和移动端布局
- ⚡ 性能优化：组件按需加载，不影响页面整体性能
🔧 技术特性
- 基于 Hugo 的模板系统，使用
partials 机制
- 支持现代前端技术栈（Vue/React 组件需编译后使用）
- 样式隔离，避免与主题样式冲突
🛠️ 实现方法详解
📁 文件结构规划
创建以下目录结构来组织自定义 Widget：
1
2
3
4
5
6
7
|
layouts/
└── partials/
└── widget/
├── clock.html # 时钟组件
├── weather.html # 天气组件
├── recent-posts.html # 最新文章
└── custom-stats.html # 统计信息
|
📝 基础模板结构
每个 Widget 应遵循以下标准结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!-- 组件容器 -->
<div class="custom-widget widget-{{.Name}}">
<!-- HTML 内容区域 -->
<div class="widget-content">
<!-- 你的组件内容 -->
</div>
</div>
<!-- 组件样式 -->
<style>
.widget-{{.Name}} {
/* 组件样式 */
margin: 1rem 0;
padding: 1rem;
background: var(--card-background);
border-radius: 8px;
box-shadow: var(--shadow-l1);
}
</style>
<!-- 组件脚本 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 组件交互逻辑
console.log('{{.Name}} widget loaded');
});
</script>
|
⚙️ 配置文件注册
在 hugo.yaml 中注册 Widget：
1
2
3
4
5
6
|
widgets:
homepage:
- type: clock # 时钟小部件
- type: search # 搜索小部件
- type: notification # 公告栏
- type: archives # 归档小部件
|
一、⏰ 时钟组件
🎯 项目背景
基于开源项目
pure-css3-clock
创建一个精美的 CSS3 时钟 Widget。
📋 实现步骤
步骤 1：创建组件文件
1
2
|
# 创建 Widget 文件
touch layouts/partials/widget/clock.html
|
步骤 3：配置注册
在 hugo.yaml 中添加：
1
2
3
4
5
6
|
widgets:
homepage:
- type: clock # 时钟小部件
- type: search # 搜索小部件
- type: notification # 公告栏
- type: archives # 归档小部件
|
二、📢 公告栏
📋 实现步骤
步骤 1：创建组件文件
1
2
|
# 创建 Widget 文件
touch layouts/partials/widget/notification.html
|
步骤 3：配置注册
在 hugo.yaml 中添加：
1
2
3
4
5
6
|
widgets:
homepage:
- type: clock # 时钟小部件
- type: search # 搜索小部件
- type: notification # 公告栏
- type: archives # 归档小部件
|
三、📊 站点统计信息与 i18n
- ✨ 功能：在页脚显示博客运行时间、文章统计和访问量数据，支持多语言
- 📌 展示格式：
- 本站稳定运行： x 天
- 共发表文章数： x 篇
- 本站总访问量： x 次
📋 实现步骤
步骤 1：创建组件文件
- 📌 位置：创建
./layouts/partials/widget/information.html 文件内添加如下代码:
步骤 3：配置注册
在 hugo.yaml 中添加：
1
2
3
4
5
6
7
|
widgets:
homepage:
- type: clock # 时钟小部件
- type: search # 搜索小部件
- type: notification # 公告栏
- type: information # 站点信息
- type: archives # 归档小部件
|
步骤 4：配置 i18n
- 📌 位置：在主题目录
/i18n/zh-cn.yaml 下找到对应语言的文件，在属性 footer 下添加相应字段，结果如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
footer:
# 本站稳定运行：x天
runtime1:
other: 本站稳定运行：
runtime2:
other: 天
# 共发表文章数：x 篇
count1:
other: 共发表文章数：
count2:
other: 篇
# 本站总访问量：X次
pv1:
other: 本站总访问量：
pv2:
other: 次
|
步骤 5：CSS 美化
📌 位置：修改./assets/scss/custom.scss(文件不存在则自己创建)，将以下代码复制进去
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.count_info {
border: 1px solid #ddd;
border-radius: 25px;
font-weight: bold;
padding-left: 30px !important; /* 调整内容与容器左侧边缘的距离 */
transition: transform 0.2s ease;
}
.count_info:hover {
transform: scale(1.06); /* 鼠标悬停-卡片放大 */
}
.number-highlight {
color: var(--hover-text-color); /* 数值颜色修改 */
font-weight: 600;
}
[data-scheme="dark"] .count_info {
border: 1px solid #39393900;
padding: 12px;
border-radius: 20px;
background: #3f3f3f;
color: #fff;
}
|
🎯 总结与应用场景
🌟 成功案例展示
通过自定义 Widget，你可以实现多种实用功能：
-
📊 数据展示类
-
🎯 交互功能类
-
📱 社交媒体集成
🚀 最佳实践总结
- 📝 代码组织：保持 HTML、CSS、JavaScript 分离和模块化
- 🎯 用户体验：确保 Widget 加载快速且不影响主要内容
- 🔧 维护性：添加适当的注释和文档
- 📱 兼容性：测试不同浏览器和设备上的表现
🔮 扩展可能性
自定义 Widget 的潜力无限，你可以：
- 集成第三方 API 服务
- 创建复杂的交互式图表
- 实现实时数据更新
- 构建迷你应用（如计算器、倒计时等）
💫 开始创作吧！ 利用 Hugo Stack 主题的强大扩展性，将你的创意转化为独特的侧边栏组件，让博客更加个性化和功能丰富。
📌 提示：在实际部署前，建议在本地充分测试 Widget 的功能和性能表现，确保为用户提供流畅的浏览体验。
