个人尝试以安知鱼主题为样本,将它从 Hexo 复刻到 Hugo 主题中使用。
在 Hugo 站点中新建一个主题 HeoGo:hugo new theme HeoGo
。考虑到obsidian更支持yaml格式的文件,手动修改hugo主题配置文件.toml为.yaml。
拆解HeoGo主题项目文件
# 主配置区
│ hugo.yaml # 全局配置文件(替代Hexo的_config.yml),定义站点URL、主题参数等
│ LICENSE # 主题授权协议文件
│ README.md # 主题使用文档
│ theme.toml # 主题元数据声明(兼容Hugo Modules)
# 内容模板系统
├─archetypes
│ default.md # 文章原型模板(类似Hexo的scaffolds),定义Front Matter默认结构
# 资源处理区
├─assets # 前端资源处理核心(支持SCSS/JS编译)
│ ├─css # 样式源文件(编译后输出到/static/css)
│ │ main.css # 主样式入口(建议改用SCSS模块化开发)
│ └─js
│ main.js # 全局脚本入口(可集成右键菜单、评论弹幕等交互功能)
# 内容存储区
├─content
│ │ _index.md # 站点首页内容(替代Hexo的source/index.md)
│ └─posts # 文章存储目录(对应Hexo的source/_posts)
│ │ post-1.md # 基础文章(Markdown格式)
│ │ post-2.md
│ │ _index.md # posts目录的元数据描述文件
│ └─post-3 # Page Bundle文章包(支持内嵌图片资源)
│ bryce-canyon.jpg # 文章专属图片资源
│ index.md # 文章主体(通过引用图片)
# 数据存储区(暂为空)
├─data # 预留数据目录(存储自定义JSON/YAML数据)
# 多语言支持区(暂为空)
├─i18n # 多语言配置文件目录(需创建en.yaml/zh-CN.yaml)
# 模板引擎架构
├─layouts
│ ├─partials # 可复用组件库(对应Hexo的layout/includes)
│ │ │ footer.html # 页脚模板(需集成访问统计代码)
│ │ │ head.html # HTML头部模板(包含CSS/JS加载逻辑)
│ │ │ header.html # 导航栏组件(需支持多级菜单配置)
│ │ │ menu.html # 侧边栏菜单模板(可添加分类/标签云)
│ │ │ terms.html # 分类/标签聚合页模板
│ │ └─head # 头部资源子模块
│ │ css.html # CSS加载逻辑(建议改用Hugo Pipes处理SCSS)
│ │ js.html # JS加载逻辑(支持异步加载优化)
│ └─_default # 基础模板组
│ baseof.html # 基础布局框架(类似Hexo的layout.pug)
│ home.html # 首页定制模板(可添加特色模块)
│ list.html # 列表页模板(文章归档/分类展示)
│ single.html # 文章详情页模板(需集成评论系统)
# 静态资源区
└─static # 无需编译的静态文件(直接复制到输出目录)
favicon.ico # 站点图标(对应Hexo的source/favicon.ico)
在hugo.yaml文件里添加命令:theme: 'HeoGo'
以配置主题。
修改archetypes与content文件夹下的markdown文件为yaml的frontmatter。