Hugo 主题
Toha
一个用于个人作品集的简单 Hugo 主题
[!IMPORTANT] 如果您正在从 v3(基于 `git submodule`)主题迁移到 v4(基于 `hugo modules`)主题,请阅读此迁移指南。
Toha
一个用于个人作品集的 Hugo 主题,具有简约的设计和响应能力。
- 示例站点: hugo-toha.github.io
- 文档: toha-guides.netlify.app
功能
- 简约设计
- 完全响应式
- 多语言支持
- 精心设计的卡片
- 经验时间线
- 成就图库
- 用于分类帖子的侧边栏
- 短代码
- 分析支持
- GoatCounter
- counter.dev
- Google Analytics
- Matomo/Piwik
- Umami
- 评论支持
- Disqus
- Valine
- Uttarances
- Giscus
有关功能的更多详细信息,请访问此处。
可用翻译
- 英语
- বাংলা
- 法语
- 印度尼西亚语
- 德语
- 西班牙语
- 简体中文
- 繁體中文
- 印地语
- 意大利语
- 日语
- 韩语
- 俄语
- 芬兰语
- 越南语
- 阿塞拜疆语
- 土耳其语
- 阿拉伯语(العربية)
- 欧洲葡萄牙语
- 加泰罗尼亚语
- 巴西葡萄牙语
- 荷兰语
- 希伯来语
要了解更多关于如何翻译您的站点的信息,请访问此处。遵循此示例站点的数据和帖子格式。
屏幕截图
以下是示例站点的一些屏幕截图。
主页部分
列表页面
阅读页面
要求
- Hugo 版本 0.128.0(扩展版)或更高版本
- Go 语言 1.18 或更高版本(hugo 模块需要)
- Node 版本 v18.x 或更高版本,npm 8.x 或更高版本。
用法
使用此主题的最简单方法是 Fork hugo-toha.github.io 示例仓库。然后根据您的需要更改配置。
如果您想从头开始,请按照以下步骤操作
1. 在您的仓库中初始化 Hugo 模块
首先,在您的仓库中初始化 Hugo 模块。这将创建一个 `go.mod` 文件。
hugo mod init github.com/<your username>/<your repo name>
2. 将此主题添加为您的模块依赖项
现在,在您的 `hugo.yaml` 文件中,添加一个 `module` 部分。
# Use Hugo modules to add theme
module:
imports:
- path: github.com/hugo-toha/toha/v4
查看此示例 hugo.yaml 以供进一步参考。
3. 更新您的模块
现在,运行此命令以将此主题加载为您的模块。
hugo mod tidy
在本地运行
现在,您可以通过以下步骤在本地运行您的 Hugo 站点
1. 生成节点依赖配置
现在运行以下命令以生成节点依赖配置。这将在您的仓库中创建一个 `package.json` 文件。
hugo mod npm pack
2. 安装依赖项
使用以下命令安装节点依赖项
npm install
3. 运行您的站点
现在,使用以下命令在本地运行您的站点。
hugo server -w
当您首次运行站点时,它将使用默认参数启动。它应该看起来类似于示例站点。但是,由于我们尚未配置它们,因此主页上不会有任何部分。您可以通过遵循此处的指南来配置您的站点。
短代码
以下是一些您可以与此主题一起使用的方便的短代码。
- 警告
- 图像
- 拆分
- 垂直空间
- 视频
- Mermaid
贡献
您可以通过多种方式为此主题做出贡献。您可以报告错误、提交功能请求、发送 PR、分享您的想法等。
非常欢迎 Pull 请求,我很乐意进行审查。只需遵循以下原则
- 保持简单。
- 保持与设计一致。
- 尽可能少地使用依赖项。
- 保持耐心。
我不是 Web 开发人员。我创建此主题是为了满足个人需求。因此,代码中存在一些缺陷是合理的。请随时提出问题并提出 PR 以确认这些问题。
本地开发
对于本地开发,您可以在主题子模块中进行更改,并针对您自己的站点或此示例站点在本地测试更改。
Fork
首先,Fork 此仓库。然后,按照以下步骤使用 Fork 的主题进行本地开发,
针对示例站点运行 Fork 的主题
如果您想针对此示例站点运行本地开发,请按照以下步骤操作
# go to exampleSite directory
$ cd exampleSite
# install hugo modules
$ hugo mod tidy
# install dependencies
$ hugo mod npm pack
$ npm install
# run the example site locally
$ hugo server -w
现在,您可以对主题进行更改,它们将立即反映在正在运行的站点上。如果您需要更改任何配置,可以在 exampleSite
文件夹内的 hugo.yaml
文件中进行更改。 如果您需要添加任何内容或数据,可以在 exampleSite
目录内创建相应的文件夹,并在其中添加所需的内容或数据。
针对您自己的站点运行 Fork 的主题
如果您想针对您自己的站点运行本地开发,请按照以下步骤操作
替换主题模块
打开您站点的 go.mod
文件,并将 github.com/hugo-toha/toha/v4
替换为您 fork 的仓库路径。例如,如果您的 fork 仓库是 github.com/<您的 GitHub 用户名>/toha
,则将 github.com/hugo-toha/toha/v4
替换为 github.com/<您的 GitHub 用户名>/toha/v4
。
module github.com/hugo-toha/hugo-toha.github.io
go 1.19
require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
replace(
github.com/hugo-toha/toha/v4 => github.com/<your-github-user>/toha/v4 <git branch>
)
对于交互式开发,您可以用本地克隆的 fork 替换主题。例如,如果您已将 fork 克隆到 /home/my-projects/toha
中,则将 github.com/hugo-toha/toha/v4
替换为 /home/my-projects/toha
。
module github.com/hugo-toha/hugo-toha.github.io
go 1.19
require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect
replace(
github.com/hugo-toha/toha/v4 => /home/my-projects/toha
)
更新依赖项
# update hugo modules
$ hugo mod tidy
# install dependencies
$ hugo mod npm pack
$ npm install
在本地运行您的站点
$ hugo server -w
从那里,您可以在使用正在运行的 Hugo 站点或示例站点进行测试的同时,更改主题的源代码。
打开一个 PR
当更改看起来不错时,请提交它们并将其推送到您的 fork。
# stage all the changes
$ git add .
# commit the changes with a meaning full commit message
$ git commit -m "A meaningful commit message"
# push the commit to your fork
$ git push my-fork my-feature-branch
然后,从您自己的 fork 的 my-feature-branch
分支向 hugo-toha/toha 的 main
分支打开一个 PR。
归属
- 感谢 Anup Deb 的设计指导。
- 许多插图均取自 iconscout。