Hugo 主题
Top Hat
Top Hat 是一个简单的 Hugo 主题,专为博客而设计。
实时预览
我自己的博客 nohat.dev 使用了这个主题
功能
它支持
- 语法高亮
- 精选文章
- 导航
- 标签
- 字数统计和阅读时间
如何安装
你可以通过两种方式使用该主题,从仓库下载文件或使用 git 子模块
从仓库下载文件
从此链接下载 .zip 文件,并将内容解压到 themes/tophat
文件夹
然后打开你的 hugo.toml
文件并添加以下标签
theme = "tophat"
使用 git 子模块
运行这些命令以创建一个使用 tophat 主题的 Hugo 站点
hugo new site my-blog
cd my-blog
git init
git submodule add https://github.com/sergiobarriel/tophat-theme.git themes/tophat
echo "theme = 'tophat'" >> hugo.toml
hugo server
如果你想用最新的更改更新主题,只需运行命令
git submodule update --remote
如何配置主题
选项
你应该在你的 hugo.toml
文件中配置最少的选项
theme = "TopHat"
title = "Your blog name"
baseURL = "https://example.com/"
languageCode = "en-us"
paginate = 5
默认的分页是 10 个项目,但你可以设置不同的数字。
参数
[params]
subtitle = "Your blog subtitle"
description = "Your blog description"
author = "Sergio Barriel"
main = "post"
featured = true
# You can customize the visibility of some elements like date, reading time, words counter and tags inside article by setting true or false
show_date_on_article = true
show_reading_time_on_article = true
show_words_count_on_article = true
show_tags_on_article = true
菜单
[menu]
[[menu.main]]
identifier = "about"
name = "About"
url = "/pages/about/"
[[menu.main]]
identifier = "contact"
name = "Contact"
url = "/pages/contact/"
[[menu.social]]
identifier = "twitter"
name = "Twitter"
url = "https://twitter.com/sergiobarriel"
[[menu.social]]
identifier = "github"
name = "Github"
url = "https://github.com/sergiobarriel"
谷歌分析
如果你想从谷歌分析跟踪遥测数据,只需在你的 hugo.toml 文件中添加 googleAnalytics
标签
googleAnalytics = "G-XXXXXXXXXX"
语法高亮
你可以通过根据这些参数覆盖 hugo.toml 文件中的选项来定制高亮配置
[markup]
[markup.highlight]
anchorLineNos = false
codeFences = true
guessSyntax = false
hl_Lines = ''
hl_inline = false
lineAnchors = ''
lineNoStart = 1
lineNos = false
lineNumbersInTable = true
noClasses = true
noHl = false
style = 'dracula'
tabWidth = 4
请参阅样式库,全面了解可用的样式以及它们可能的外观。
自定义样式
在 assets/scss
文件夹中有一些 scss
文件,因此你可以根据需要自定义样式,然后使用 sass 命令进行转换
sass styles.scss ../css/styles.css
赞助
如果你喜欢这个项目,可以考虑在 ko-fi.com 上捐款
贡献者/合作者
这些人通过建议、错误纠正或打开问题为仓库做出了贡献。 谢谢 😊
- foldfree
- christian-cell
支持
你可以通过 Twitter @sergiobarriel 联系我,或者如果你有问题,可以打开一个 🙂