terminal hugo theme

terminal-hugo-tema

Tema untuk hugo dibuat menggunakan pustaka CSS tailwind dan keluarga font mono

Demo Langsung

https://nayanseth.com

Pengaturan

1. Tema ini menggunakan CSS tailwind
2. [Opsional] Cara Menggunakan Tailwind
   1. Secara default, file tailwind.css yang ada akan digunakan dalam tema tetapi jika Anda ingin bermain-main dengan tailwind ikuti langkah-langkah yang disebutkan di bawah ini
   2. Ada dua file konfigurasi untuk tailwind yang terletak di direktori assets/csss/tailwind
      1. Untuk dev run npm run dev -> Ini menghasilkan semua kemungkinan kelas CSS dari tailwind. Beberapa mungkin masih tertinggal
      2. Untuk prod run npm run prod -> Ini hanya menghasilkan kelas CSS dari tailwind yang Anda gunakan dalam tema
3. hugo new site <SITE_NAME>
4. cd <SITE_NAME>
5. git submodule add [email protected]:techbarrack/terminal-hugo-theme.git themes/terminal
6. Ganti konten <SITE_NAME>/hugo.yaml dengan <SITE_NAME>/themes/terminal/hugo.yaml
7. Di direktori root situs hugo, buat direktori: mkdir -p layouts/partials/third_party_js . Direktori ini untuk menyimpan segala jenis javascript pihak ketiga seperti Google Analytics, Disqus, dll
8. Jalankan situs web hugo server --buildDrafts --disableFastRender --gc --ignoreCache --noHTTPCache --forceSyncStatic --verbose -w

Memodifikasi Isi

1. Batalkan komentar pada atribut abaikanFiles di <SITE_NAME>/hugo.yaml
2. Mulai tambahkan file di <SITE_NAME>/content dengan mereplikasi apa yang ada di <SITE_NAME>/themes/terminal/content
3. Perbarui konten meta di head.html

JS Pihak Ketiga

1. Buat sebagian di <SITE_NAME>/layouts/partials/third_party_js/<FILE>.html
2. Semua file di folder third_party_js akan disertakan sebelum tag </body>

Kode pendek

• {{< svg logo="blah" >}} -> Gunakan kode berikut untuk menambahkan svg di file penurunan harga
  1. Tambahkan svg sebagai file .html di layouts/content/svg
• HTML mentah

 {{< rawhtml >}}
  <div>This is raw HTML content</div>
{{< /rawhtml >}}

Referensi

Beberapa tautan referensi untuk info tambahan tentang cara melakukan sesuatu di 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/
• Ikon SVG