Hugo 主题
终端
Terminal 是一个受 macOS 上终端的 cobalt 2 主题启发的 主题。 它使用 tailwind CSS 来实现外观和感觉
terminal-hugo-theme
一个使用 tailwind CSS 库和等宽字体系列制作的 Hugo 主题
在线演示
https://nayanseth.com
设置
- 这个主题使用 tailwind CSS
- [可选] 如何使用 Tailwind 1. 默认情况下,主题将使用现有的
tailwind.css
文件,但如果您想使用 tailwind,请按照下面提到的步骤操作 2. 在assets/csss/tailwind
目录下有两个 tailwind 配置文件 1. 对于开发,运行npm run dev
-> 这会从 tailwind 生成所有可能的 CSS 类。 有些可能仍然会遗漏 2. 对于生产,运行npm run prod
-> 这只会从 tailwind 生成你在主题中使用的 CSS 类 hugo new site <SITE_NAME>
cd <SITE_NAME>
git submodule add [email protected]:techbarrack/terminal-hugo-theme.git themes/terminal
- 将
<SITE_NAME>/hugo.yaml
的内容替换为<SITE_NAME>/themes/terminal/hugo.yaml
- 在 Hugo 网站的根目录下,创建目录:
mkdir -p layouts/partials/third_party_js
。此目录用于存储任何类型的第三方 javascript,如 google analytics、disqus 等 - 运行网站
hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w
修改内容
- 取消注释
<SITE_NAME>/hugo.yaml
中的 ignoreFiles 属性 - 通过复制
<SITE_NAME>/themes/terminal/content
中存在的内容,开始在<SITE_NAME>/content
中添加文件 - 更新
head.html
中的元内容
第三方 JS
- 在
<SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
中创建 partials third_party_js
文件夹中的所有文件将在</body>
标记之前被包含
短代码
{{< svg logo="blah" >}}
-> 使用以下代码在 markdown 文件中添加 svg- 在
layouts/content/svg
中将 svg 添加为 .html 文件
- 在
- 原始 HTML
{{< rawhtml >}}
<div>This is raw HTML content</div>
{{< /rawhtml >}}
参考
关于如何在 Hugo 中执行操作的一些额外信息参考链接
- https://gohugo.com.cn/methods/page/
- https://gohugo.com.cn/methods/pages/groupbydate/
- https://gohugo.com.cn/content-management/taxonomies/
- https://gohugo.com.cn/templates/taxonomy-templates/
- https://gohugo.com.cn/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
- https://gohugo.com.cn/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
- https://gohugo.com.cn/methods/page/scratch/
- https://gohugo.com.cn/functions/collections/dictionary/
- https://gohugo.com.cn/methods/page/paginate/
- https://discourse.gohugo.io/t/better-term-listing/10261
- https://gohugo.com.cn/templates/partials/
- https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
- SVG 图标