Hugo 主题
Tokiwa
一个受常磐色 (tokiwa-iro) 启发的极简博客主题。
- 作者: He Yeshuang
- GitHub 星星: 109
- 更新时间: 2024-12-08
- 许可证: MIT
- 标签: 博客 极简 响应式
主题 Tokiwa
主题 Tokiwa 是一个极简的博客主题。常磐色是这个主题的主色调和名称。
基于 Jim Frenette 的 Hugo Starter Theme 和 Tailwind CSS 构建。灵感来自 Tailwind Toolbox - Minimalist-Blog。
这个主题专门为中文字符进行了优化,同时也适用于其他语言。
截图
在线演示地址:https://heysh.xyz/hugo-theme-tokiwa/。
安装
Git 子模块
在你的 Hugo 站点文件夹中运行
$ git submodule add https://github.com/heyeshuang/hugo-theme-tokiwa.git themes/hugo-theme-tokiwa
Hugo 模块
在你的 Hugo 站点文件夹中运行
$ hugo mod init https://github.com/<YOUR_NAME>/<THEME_NAME>
$ hugo mod get https://github.com/heyeshuang/hugo-theme-tokiwa
然后添加到你的 hugo.toml
[module]
[[module.imports]]
path = "github.com/heyeshuang/hugo-theme-tokiwa"
可用配置参数
disqusShortname = "YOURSHORTNAME"
googleAnalytics = "UA-1234567890" # or "G-xxxxxxxx" in Google Analytics v4, in hugo v0.82+
[params]
description = """
Tokiwa-iro is the theme color of this site.
"""
math = true # for introducing $KaTEX$
env = "production" # for Google Analytics and DISQUS.
useChineseFonts = true # for font Noto Serif etc.
bannerFont = "fonts/exampleFont" # custom your own font for the title.
postDateFormat = "2006-1-2" # override custom date format posts.
[menu]
# Shown in the side menu.
[[menu.main]]
name = "Posts"
weight = 1
identifier = "post"
url = "/post/"
[[menu.main]]
name = "Tags"
url = "/tags/"
weight = 2
[social]
instagram="http://example.com/"
bilibili="http://example.com/"
weibo="http://example.com/"
zhihu="http://example.com/"
twitter="http://twitter.com/"
gitlab="http://gitlab.com/"
youtube="http://youtube.com/"
github="http://github.com/"
一个完整的 config.toml
示例在 exampleSite
文件夹中。
开发此主题
安装 node 模块
cd blog/themes/hugo-theme-tokiwa
npm i
使用 sourcemaps 的未压缩开发构建
cd blog/themes/hugo-theme-tokiwa
npm run dev
使用 npm run build 构建生产版本。CSS 和 JavaScript 文件将输出到启动主题的 dist 文件夹中。例如:
cd blog/themes/hugo-theme-tokiwa
npm run build
鸣谢
- hugoBasicExample 用于模拟数据。
- Tailwind CSS
- Hugo 静态站点生成器空白启动主题
- Tailwind Toolbox - Minimalist-Blog
- 字体。
杨任东竹石体
用于开头的横幅。此字体可用于商业用途。但是,我想知道它是否与GPLMIT 兼容,所以我用exampleSite
中的exampleFont
替换了它。请参阅config.toml
。 - 以及开放、热情的思源宋体 CN。对于中文单词来说,总是一个不错的选择。基于 OFL 1.1。
- Remix-Design 制作的精美图标。基于 Apache 2.0。
- fuse.js 用于模糊搜索,以及一篇关于如何使用它的博客文章(中文)。
谢谢。
许可证
MIT