基于 Hugo Theme Stack 的芯片版图技术博客。

本项目是一个使用 Hugo 静态网站生成器构建的技术博客，专注于芯片版图（IC Layout）相关技术内容。网站使用 Hugo Theme Stack 主题，提供卡片式设计风格。

• 网站地址: chiplayout.net
• 主题: Hugo Theme Stack
• 语言: 中文（简体）

• 📝 基于 Hugo 的静态博客系统
• 🎨 卡片式设计风格
• 📱 响应式布局，支持移动端
• 🔍 内置搜索功能
• 🏷️ 分类和标签系统
• 📊 文章归档功能
• 🌙 支持深色模式（主题功能）
• 💻 Cadence/SKILL 语法高亮 - 使用 Prism.js 实现专业语法高亮
• 🖼️ 图片自动优化 - 自动监控并转换为 WebP 格式，提升加载速度
• 🦶 增强的 Footer 功能 - 集成 Prism.js 支持，显示运行时间和统计信息

• Hugo (推荐使用扩展版本)
• Git

1. 克隆项目：

git clone https://cnb.cool/chiplayout.net/hugo-theme-stack.git
cd hugo-theme-stack

2. 安装依赖（如果需要）：

npm install

3. 启动开发服务器：

hugo server

4. 访问 http://localhost:1313 查看网站

hugo

构建后的文件将输出到 public/ 目录。

.
├── assets/          # 资源文件（SCSS、TypeScript等）
├── content/         # 内容文件（文章、页面等）
├── layouts/         # 自定义布局模板
├── static/          # 静态资源文件
├── themes/          # Hugo 主题
├── hugo.toml        # Hugo 配置文件
└── scripts/         # 辅助脚本

项目集成了 Prism.js 语法高亮引擎，专门支持 Cadence/SKILL 语言（芯片版图设计常用语言）。

实现方式：

• 使用 Prism.js 作为补充方案，与 Hugo 默认的 Chroma 高亮引擎共存
• 通过服务端模板路由，skill/cadence 代码块使用 Prism.js，其他语言继续使用 Chroma
• 支持明暗主题切换，样式与 Chroma 保持一致

使用方法： 在 Markdown 中使用代码块时，指定语言为 skill 或 cadence：

```skill
procedure(myProcedure()
  printf("Hello, SKILL!")
)
```

技术实现：

• 自定义模板：layouts/_default/_markup/render-codeblock.html
• Prism.js 集成：layouts/partials/footer/prism.html
• SKILL 语法定义：static/js/prism-skill.js
• TypeScript 支持：assets/ts/prism-skill.ts

项目提供了图片自动优化工具，支持批量转换和实时监控。

功能特性：

• 🔄 自动监控模式 - 监听文件变化，自动处理新添加或修改的图片
• 🖼️ WebP 转换 - 自动将图片转换为 WebP 格式，显著减小文件大小
• 📦 批量处理 - 支持批量处理多个目录的图片
• ⚡ 智能跳过 - 自动跳过已处理的文件，避免重复转换

使用方法：

# 安装依赖
npm install

# 批量处理图片
npm run optimize

# 监听模式（自动处理新图片）
npm run optimize:watch

# 高级选项
node scripts/optimize-images.js --input=./static/images --quality=85 --keep-original

配置说明：

• 默认处理目录：static/images、static/logo、content/categories
• WebP 质量：85（可在配置中调整）
• 支持格式：JPEG、PNG、GIF、BMP、TIFF

详细配置和使用说明请参考 scripts/README.md。

项目在 Footer 中集成了以下增强功能：

已添加的功能：

• Prism.js 集成 - 在 Footer 中加载 Prism.js 用于 SKILL/Cadence 语法高亮
• 运行时间显示 - 显示网站运行时长（年/月/天）
• 统计信息 - 显示文章总数和总字数
• 最后更新时间 - 显示网站最后更新时间

实现位置：

• Footer 模板：layouts/partials/footer/include.html
• Prism.js 加载：layouts/partials/footer/prism.html
• 统计功能：主题内置（通过 hugo.yaml 配置启用）

分类页面实现了响应式多列布局，提升内容展示效率。

实现方式：

• 使用 CSS Grid 布局实现多列显示
• 响应式断点：
  • 中等屏幕（≥768px）：双列布局
  • 大屏幕（≥1024px）：三列布局
• 自动处理边框和间距，确保视觉一致性

技术细节：

• 使用 grid-template-columns: repeat(2, 1fr) 实现双列
• 使用 grid-template-columns: repeat(3, 1fr) 实现三列
• 通过 :nth-child() 选择器处理边框逻辑
• 最后一行的元素自动移除下边框

实现位置：

• themes/hugo-theme-stack/assets/scss/partials/article.scss - .article-list--compact 样式类

优化了分类 Widget 中的图标显示，缩小图标尺寸以提升视觉平衡。

实现方式：

• 通过 CSS 覆盖默认图标大小
• 调整 .widget-icon svg 的 width 和 height 属性
• 保持图标比例和清晰度

实现位置：

• themes/hugo-theme-stack/assets/scss/partials/widgets.scss - .widget-icon 样式类

项目提供了便捷的 Git 更新脚本，可以自动根据 .gitignore 规则同步远程仓库：

.\git-update.ps1 -Message "你的提交信息"

./git-update.sh "你的提交信息"

脚本会自动：

• 检查并移除应被忽略但仍被跟踪的文件
• 确保只有符合 .gitignore 规则的文件才会被提交
• 自动提交并推送到远程仓库

本项目基于 Hugo Theme Stack 主题进行了以下自定义修改：

1. Cadence/SKILL 语法高亮支持

   • 添加了 Prism.js 语法高亮引擎
   • 创建了自定义 SKILL/Cadence 语言定义
   • 实现了与 Chroma 的双引擎共存方案
   • 文件位置：
     • layouts/_default/_markup/render-codeblock.html - 代码块渲染模板
     • layouts/partials/footer/prism.html - Prism.js 加载脚本
     • static/js/prism-skill.js - SKILL 语法定义
     • assets/ts/prism-skill.ts - TypeScript 支持

2. 图片优化工具

   • 实现了图片自动监控和转换功能
   • 支持批量转换为 WebP 格式
   • 支持监听模式，自动处理新图片
   • 文件位置：
     • scripts/optimize-images.js - 图片优化脚本
     • scripts/README.md - 使用文档

3. Footer 功能增强

   • 集成了 Prism.js 加载逻辑
   • 添加了运行时间和统计信息显示
   • 文件位置：
     • layouts/partials/footer/include.html - Footer 包含模板
     • layouts/partials/footer/prism.html - Prism.js 集成

4. Git 工作流优化

   • 创建了自动同步脚本，根据 .gitignore 规则管理文件
   • 文件位置：
     • git-update.ps1 - PowerShell 脚本
     • git-update.sh - Bash 脚本

5. 分类页多列显示

   • 实现了分类页面的响应式多列布局
   • 在中等屏幕（≥768px）时显示双列，大屏幕（≥1024px）时显示三列
   • 使用 CSS Grid 布局，自动处理边框和间距
   • 实现位置：
     • themes/hugo-theme-stack/assets/scss/partials/article.scss - .article-list--compact 样式
     • 响应式断点：md (768px) 双列，lg (1024px) 三列

6. 分类图标优化

   • 缩小了分类 Widget 中的图标尺寸，提升视觉平衡
   • 默认图标大小从 32px 调整为更小的尺寸
   • 实现位置：
     • themes/hugo-theme-stack/assets/scss/partials/widgets.scss - .widget-icon 样式
     • 可通过自定义样式覆盖默认大小

本项目完全保留并遵循 Hugo Theme Stack 的原创声明和许可证要求。

本项目使用 Hugo Theme Stack 主题。

Copyright

Licensed under the GNU General Public License v3.0

Please do not remove the "Theme Stack designed by Jimmy" text and link.

If you want to port this theme to another blogging platform, please let me know🙏.

• 主题仓库: CaiJimmy/hugo-theme-stack
• 主题文档: stack.jimmycai.com
• 演示站点: demo.stack.jimmycai.com

本项目遵循 GNU General Public License v3.0。

欢迎提交 Issue 和 Pull Request！

• 网站: chiplayout.net

---

Theme Stack designed by Jimmy