Hugo 主题

上一个/下一个: 所有主题

终端

Terminal 是一个受 macOS 上终端的 cobalt 2 主题启发的 主题。 它使用 tailwind CSS 来实现外观和感觉

下载
Terminal

terminal-hugo-theme

一个使用 tailwind CSS 库和等宽字体系列制作的 Hugo 主题

在线演示

https://nayanseth.com

Theme Screenshot

设置

  1. 这个主题使用 tailwind CSS
  2. [可选] 如何使用 Tailwind 1. 默认情况下，主题将使用现有的 tailwind.css 文件，但如果您想使用 tailwind，请按照下面提到的步骤操作 2. 在 assets/csss/tailwind 目录下有两个 tailwind 配置文件 1. 对于开发，运行 npm run dev -> 这会从 tailwind 生成所有可能的 CSS 类。 有些可能仍然会遗漏 2. 对于生产，运行 npm run prod -> 这只会从 tailwind 生成你在主题中使用的 CSS 类
  3. hugo new site <SITE_NAME>
  4. cd <SITE_NAME>
  5. git submodule add git@github.com:techbarrack/terminal-hugo-theme.git themes/terminal
  6. 将 <SITE_NAME>/hugo.yaml 的内容替换为 <SITE_NAME>/themes/terminal/hugo.yaml
  7. 在 Hugo 网站的根目录下，创建目录：mkdir -p layouts/partials/third_party_js。此目录用于存储任何类型的第三方 javascript，如 google analytics、disqus 等
  8. 运行网站 hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w

修改内容

  1. 取消注释 <SITE_NAME>/hugo.yaml 中的 ignoreFiles 属性
  2. 通过复制 <SITE_NAME>/themes/terminal/content 中存在的内容，开始在 <SITE_NAME>/content 中添加文件
  3. 更新 head.html 中的元内容

第三方 JS

  1. 在 <SITE_NAME>/layouts/partials/third_party_js/<FILE>.html 中创建 partials
  2. third_party_js 文件夹中的所有文件将在 </body> 标记之前被包含

短代码

  • {{< svg logo="blah" >}} -> 使用以下代码在 markdown 文件中添加 svg
    1. 在 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 图标

另请参阅