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 圖標