terminal hugo theme

终端 Hugo 主题

使用 Tailwind CSS 库和 Mono 字体系列制作的 Hugo 主题

现场演示

https://nayanseth.com

设置

1. 这个主题使用顺风CSS
2. [可选]如何使用Tailwind
   1. 默认情况下，现有的tailwind.css文件将在主题中使用，但如果您想使用 tailwind，请按照下面提到的步骤操作
   2. tailwind 有两个配置文件位于assets/csss/tailwind目录中
      1. 对于 dev run npm run dev -> 这会从 tailwind 生成所有可能的 CSS 类。有些可能仍然被排除在外
      2. 对于 prod run npm run prod -> 这仅从您在主题中使用的 tailwind 生成 CSS 类
3. hugo new site <SITE_NAME>
4. cd <SITE_NAME>
5. git submodule add [email protected]: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中创建部分
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.io/methods/page/
• https://gohugo.io/methods/pages/groupbydate/
• https://gohugo.io/content-management/taxonomies/
• https://gohugo.io/templates/taxonomy-templates/
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/templates/taxonomy-templates/#example-list-tags-in-a-single-page-template
• https://gohugo.io/methods/page/scratch/
• https://gohugo.io/functions/collections/dictionary/
• https://gohugo.io/methods/page/paginate/
• https://discourse.gohugo.io/t/better-term-listing/10261
• https://gohugo.io/templates/partials/
• https://mertbakir.gitlab.io/hugo/pass-arguments-in-partials-hugo/
• SVG 图标