terminal hugo theme

ターミナルヒューゴのテーマ

tailwind CSS ライブラリと mono フォント ファミリーを使用して作成された Hugo 用のテーマ

ライブデモ

https://nayanseth.com

設定

1. このテーマはtailwind CSSを使用しています
2. [オプション] Tailwind の使用方法
   1. デフォルトでは、既存のtailwind.cssファイルがテーマで使用されますが、tailwind を試してみたい場合は、以下の手順に従ってください。
   2. tailwind の 2 つの構成ファイルはassets/csss/tailwindディレクトリにあります。
      1. dev の場合はnpm run devを実行します -> これにより、tailwind から可能なすべての CSS クラスが生成されます。まだ取り残されている人もいるかもしれない
      2. prod の場合は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を作成します。このディレクトリには、Google Analytics、disqus などのあらゆる種類のサードパーティ JavaScript が保存されます。
8. Web サイト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" >}} -> 次のコードを使用してマークダウン ファイルに svg を追加します
  1. svgを.htmlファイルとしてlayouts/content/svgに追加します。
• 生の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 アイコン