Hugo + Stack 主题自定义 Widget 指南 ✨

本文摘抄自：莱特雷-letere
并补充相关内容，在此感谢大佬的分享

📚 导航目录

🚀 核心特点与优势
🛠️ 实现方法详解
🎯 总结与应用场景

🚀 核心特点与优势

Hugo Stack 主题的自定义 Widget 功能为博客侧边栏提供了极大的灵活性，主要特点包括：

✨ 核心优势

🔄 无缝集成：与 Stack 主题完美融合，无需修改主题源码
🎨 高度自定义：支持 HTML、CSS、JavaScript 全栈开发
📱 响应式设计：自动适配桌面和移动端布局
⚡ 性能优化：组件按需加载，不影响页面整体性能

🔧 技术特性

基于 Hugo 的模板系统，使用 partials 机制
支持现代前端技术栈（Vue/React 组件需编译后使用）
样式隔离，避免与主题样式冲突

🛠️ 实现方法详解

📁 文件结构规划

创建以下目录结构来组织自定义 Widget：

layouts/
└── partials/
    └── widget/
        ├── clock.html          # 时钟组件
        ├── weather.html        # 天气组件
        ├── recent-posts.html   # 最新文章
        └── custom-stats.html   # 统计信息

📝 基础模板结构

每个 Widget 应遵循以下标准结构：

<!-- 组件容器 -->
<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：

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

步骤 2：修改后的 clock.html

步骤 3：配置注册

在 hugo.yaml 中添加：

widgets:
    homepage:
        - type: clock # 时钟小部件
        - type: search # 搜索小部件
        - type: notification # 公告栏
        - type: archives # 归档小部件

二、📢 公告栏

📋 实现步骤

步骤 1：创建组件文件

1 2	# 创建 Widget 文件 touch layouts/partials/widget/notification.html

步骤 2：修改后的 notification.html

步骤 3：配置注册

在 hugo.yaml 中添加：

widgets:
    homepage:
        - type: clock # 时钟小部件
        - type: search # 搜索小部件
        - type: notification # 公告栏
        - type: archives # 归档小部件

三、📊 站点统计信息与 i18n

✨ 功能：在页脚显示博客运行时间、文章统计和访问量数据，支持多语言
📌 展示格式：
- 本站稳定运行： x 天
- 共发表文章数： x 篇
- 本站总访问量： x 次

📋 实现步骤

步骤 1：创建组件文件

📌 位置：创建./layouts/partials/widget/information.html 文件内添加如下代码:

步骤 2：修改后的 information.html

步骤 3：配置注册

在 hugo.yaml 中添加：

widgets:
    homepage:
        - type: clock # 时钟小部件
        - type: search # 搜索小部件
        - type: notification # 公告栏
        - type: information # 站点信息
        - type: archives # 归档小部件

步骤 4：配置 i18n

📌 位置：在主题目录/i18n/zh-cn.yaml 下找到对应语言的文件，在属性 footer 下添加相应字段，结果如下:

footer:  
 # 本站稳定运行：x天
 runtime1:  
 other: 本站稳定运行：  
 runtime2:  
 other: 天  
  
 # 共发表文章数：x 篇
 count1:  
 other: 共发表文章数：  
 count2:  
 other: 篇

 # 本站总访问量：X次  
 pv1:  
 other: 本站总访问量：  
 pv2:  
 other: 次

步骤 5：CSS 美化

📌 位置：修改./assets/scss/custom.scss(文件不存在则自己创建)，将以下代码复制进去

.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;
}