Unduh hugo toigian - Unduh Kode Sumber hugo toigian

hugo toigian

Kategori lainnya

1.0.0

Unduh

Hugo Toigian

Tema Hugo minimal dengan Tailwind CSS

Toigian - Tối giản (Vietnam): Minimalis (bahasa Inggris)
Penafian : Saya bukan pengembang front-end, hanya orang yang suka mengutak-atik sesuatu, jadi kode saya mungkin tidak cantik/bersih. Saya mencoba mempelajari Tailwind CSS, dan hasilnya adalah hugo-toigian.

0. Etalase
1. Fitur
2. Prasyarat
3. Instalasi
3. Konfigurasi
- 3.1. Konfigurasi situs
- 3.2. Konfigurasi halaman
4. Kode pendek
5. Kustomisasi
6. Berkontribusi
7. Kredit

0. Etalase

Tangkapan layar ini mungkin sudah usang. Lihatlah situs demo untuk yang terbaru.

Gelap	Lampu

1. Fitur

Desain minimalis ( tối giản ). Sangat terinspirasi oleh mellow.dev.
Gunakan palet warna Rosé Pine yang minimalis dan berkelas.
Dapat disesuaikan.
Mendukung mode terang/gelap.
Penghitung bersarang untuk pos.
Daftar isi mengambang samping.
Kode pendek yang berguna.
Dukungan komentar.
Penyorotan sintaksis: gunakan solusi sisi server (Chroma, Hugo bawaan), saya telah menambahkan gaya Rosé Pine ke Chroma, jadi semuanya memiliki suasana yang sama.

2. Prasyarat

git , npm diinstal.
Versi Hugo "diperpanjang" minimum v0.93.0 dan lebih tinggi.

snap install hugo --channel=extended

PostCSS Hugo Pipe memerlukan paket JavaScript postcss-cli untuk diinstal di lingkungan ( npm install -g postcss postcss-cli ) bersama dengan plugin PostCSS apa pun yang digunakan (misalnya, npm install -g autoprefixer ). Jika Anda menggunakan paket Hugo Snap, PostCSS dan plugin harus diinstal secara lokal dalam direktori situs Hugo Anda, misalnya, npm install postcss-cli tanpa flag -g.

3. Instalasi

Buka direktori root situs web Hugo Anda, atau buat situs baru dengan:

hugo new site hugo-example-site
cd hugo-example-site
git init

Tambahkan tema.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Instal modul Nodejs.

 cd themes/hugo-toigian
npm install

Terakhir, perbarui tema di file konfigurasi config.toml Anda di direktori root situs web Hugo Anda.

 theme = " hugo-toigian "

Jalankan server untuk melihat pratinjau langsungnya.

hugo server -DF --disableFastRender

Buat halaman statis

hugo --environment production --minify

3. Konfigurasi

3.1. Konfigurasi situs

Ada beberapa opsi konfigurasi yang dapat Anda tambahkan ke file config.toml.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Konfigurasi halaman

Anda dapat menentukan parameter tambahan di bagian depan setiap halaman.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Kode pendek

Periksa kode pendek.

5. Kustomisasi

Parsial: Ada sebagian tata letak yang tersedia agar Anda dapat dengan mudah mengganti komponen tema di layouts/partials/ .

Sebagian kosong	Penempatan	Penggunaan
`layouts/partials/custom/head.html`	Sebelum menutup tag `<head>`	Tambahkan css/js khusus
`layouts/partials/custom/content-before.html`	Sebelum konten halaman
`layouts/partials/custom/content-after.html`	Setelah konten halaman
`layouts/partials/font.html`		Impor font khusus

Kustomisasi ekstra:

Mengajukan	Keterangan
`assets/css/custom.css`	Sesuaikan atau ganti gaya css

Misalnya Anda tidak menyukai font yang dipilih (Inconsolata), dan ingin menggunakan font pilihan Anda sendiri, ikuti langkah-langkah berikut:

Buat layouts/partials/font.html untuk mengimpor font Anda:

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

Buat assets/css/custom.css :

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Berkontribusi

Seperti yang sudah Anda ketahui, saya bukan pengembang front-end. Oleh karena itu, jika Anda menemukan sesuatu yang salah atau ingin melakukan perbaikan, jangan ragu untuk membuka issue/pull request.

Tujuan utamanya adalah: