hugo theme fiber

Tema Hugo untuk kaum minimalis. Fiber menggunakan JavaScript dan CSS minimum agar situs Anda dapat memuat lebih cepat! Juga memiliki UI bersih yang bagus untuk mata!!

Daftar isi

• Instalasi
  • Menggunakan Submodul
  • Langsung mengunduh tema
• Fitur
  • SEO Siap
  • Kode pendek
    • ASCIINema
    • Bisakah saya menggunakan
  • Klik untuk Menyalin Kode
  • Catatan Indah
• Tangkapan layar
• Pengaturan Tema
  • Mencantumkan konten di Beranda
    • Daftar blog, catatan, dll
    • Mencantumkan konten khusus
  • Penyorotan Kode
  • Item Menu
  • Judul Situs
• Menulis Konten
  • Menulis Catatan
  • Masalah depan

Instalasi

Ada dua cara tema ini dapat digunakan dengan situs berbasis Hugo.

1. Menggunakan Submodul Git (disarankan)
2. Langsung mengunduh tema ke <hugo-site-root>/themes/

Menggunakan Submodul

1. Buat situs Anda menggunakan hugo new site SITE_NAME
2. cd ke SITE_NAME
3. Inisialisasi repo git: git init . Ini diperlukan karena kita harus menambahkan submodul git.
4. Tambahkan submodul dengan menjalankan git submodule add [email protected]:abdus/hugo-theme-fiber.git themes/hugo-theme-fiber
5. Sekarang, mulai server Hugo secara lokal menggunakan hugo serve

Jika ada pembaruan di repositori tema, Anda dapat menariknya menggunakan git submodule update --remote

Langsung mengunduh tema

Gunakan metode ini jika Anda tidak dapat menggunakan Git karena alasan tertentu.

1. Unduh ini dan ekstrak kontennya ke SITE_ROOT/themes/hugo-theme-fiber/ .
2. Mulai Hugo secara lokal dengan menjalankan hugo serve dari terminal.

Fitur

SEO Siap

Tema ini dimuat dengan SEO dasar serta data JSON-LD minimal dari Schema.org

Kode pendek

Selain kode pendek yang siap pakai, ia juga memiliki beberapa kode pendek berguna lainnya yang terkadang terbukti bermanfaat.

ASCIINema

Sematkan Pemeran AsciiNema. Kode pendek yang digunakan: {{< asciinema id="id of a public cast" >}}

Bisakah saya menggunakan

Kode pendek ini menampilkan data terbaru dari situs caniuse.com. Berguna untuk pengembang web. Contoh:

{{ < caniuse feature =" abortcontroller " periods =" future_1,current,past_1,past_2 "
> }}

Klik untuk Menyalin Kode

Pengunjung situs web dapat menyalin konten blok kode apa pun hanya dengan satu klik. Ini tidak akan merusak lekukan kode!

Catatan Indah

Apa pun yang Anda masukkan ke dalam content/notes , akan mendapat penjelasan kasar. Hal ini memudahkan untuk mengenali hal-hal penting dari catatan.

Anotasi Kasar dikontrol menggunakan tag seperti strong , em dan strikethrough . Untuk membuat entri notes baru, pertama-tama Anda harus membuat direktori content/notes . Kemudian gunakan hugo new notes/file-name.md untuk menghasilkan Catatan. File ini akan berisi informasi tentang cara membubuhi keterangan dengan tag yang disebutkan di atas.

Tangkapan layar

Pengaturan Tema

Mencantumkan konten di Beranda

Beranda dapat dikonfigurasi dengan dua cara berbeda. Anda dapat membuat daftar bagian favorit/paling penting dari direktori content .

Atau tempatkan konten khusus di dalamnya.

Atau Anda bisa melakukan keduanya! Pastikan untuk membuat file content/_index.md yang memiliki title properti di dalam fromtmatter. Properti title ini berguna untuk SEO. Contoh:

 ---
title : " Welcome to my Homepage "
---

<!-- content goes here --> 

Daftar blog, catatan, dll

Untuk membuat daftar konten di beranda, Anda perlu menyetel variabel bernama mainSections di file config.toml . Contoh:

[ params ]
mainSections = [ " posts " ]

Mencantumkan konten khusus

Untuk membuat daftar konten khusus, cukup letakkan di dalam content/_index.md dengan frontmatter yang sesuai.

Penyorotan Kode

Secara default, Hugo tidak akan menggunakan kelas apa pun. Tapi ini tidak akan berfungsi untuk tema ini karena beberapa fitur bergantung padanya.

Anda perlu menjalankan kelas untuk blok kode. Inilah cara Anda melakukannya:

 # file: config.toml
[ markup ]
[ markup . highlight ]
codeFences = true
noClasses = false

Item Menu

Secara default, hanya ada satu item menu di menu atas. Untuk menambahkan lebih banyak item di sana, kita perlu mendefinisikan item menu di dalam config.toml . Berikut adalah contoh dari config.toml situs saya :

[ menu ]

  [[ menu . main ]]
    identifier = " me "
    name = " Me "
    url = " /me/ "
    weight = 10


  [[ menu . main ]]
    identifier = " keys "
    name = " keys "
    url = " /keys/ "
    weight = 10

  [[ menu . main ]]
    identifier = " categories "
    name = " categories "
    url = " /categories "
    weight = 10

  [[ menu . main ]]
    identifier = " notes "
    name = " notes "
    url = " /notes/ "
    weight = 10

Judul Situs

Judul situs dikontrol oleh parameter berikut di config.toml :

[ params ]
  title = " abdus.xyz "
  mainSections = [ " posts " ]

Menulis Konten

Menulis Catatan

Notes adalah jenis hard-code khusus dalam tema ini. Konten semacam ini akan mendapat anotasi kasar (yang memudahkan pengelolaan catatan).

Buat halaman catatan menggunakan perintah hugo new notes/your-filename.md untuk mempelajari cara menggunakan anotasi kasar dalam halaman catatan.

Pola dasar untuk jenis Catatan disertakan.

Masalah depan

Tema ini menggunakan frontmatter untuk menangani deskripsi posting khusus dan gambar meta untuk SEO. Jika tidak dapat menemukan meta.image dan meta.description , ia akan kembali ke /images/default-meta-image.png dan .Summary .

Gunakan dua bidang ini di frontmatter seperti ini:

 ---
...
...
meta :
image : " https://example.com/some-image.png "
  description : " your custom desc "
...
...
---

<!-- content goes here -->