hugo dream plus
Yume
Tema ini adalah versi yang ditingkatkan dari tema Dream oleh Yue Yang dan berisi banyak fitur baru seperti:
Tema ini dapat digunakan untuk dua tujuan:
Proyek ini mematuhi Kode Etik Kovenan Kontributor. Dengan berpartisipasi, Anda diharapkan untuk menegakkan kode ini. Harap laporkan perilaku yang tidak dapat diterima ke [email protected].
Instalasi
Memulai
Dokumentasi
Hampir selesai
Berkontribusi
Lisensi
Tema dapat diinstal dengan menjalankan perintah berikut di dalam folder situs web Hugo Anda.
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursiveSetelah tema telah berhasil diinstal, Anda harus melakukan sedikit penyetelan tema untuk memenuhi selera Anda.
Di dalam folder exampleSite , Anda akan menemukan file config, cards.toml dan posts.toml yang dapat digunakan untuk mengubah tema.
Anda harus menggunakan file konfigurasi ini sebagai dasar untuk situs Anda, karena mereka mengurus deklarasi variabel yang diperlukan , yang dapat Anda edit sesuai dengan kebutuhan Anda.
Tentukan diri Anda melalui variabel konfigurasi berikut di params di bawah tabel author seperti yang ditunjukkan:
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "Setelah itu, isi variabel sosial di akhir file konfigurasi. Tema ini mendukung situs sosial berikut: (contoh diberikan)
| Tautan Sosial | Variabel | Contoh inisialisasi |
|---|---|---|
| GitHub | GitHub | github = "username" |
email = "[email protected]" | ||
twitter = "username" | ||
facebook = "username" | ||
| YouTube | YouTube | youtube = "username" |
| Sedang | sedang | medium = "username" |
linkedin = "username" | ||
| Stackoverflow | Stackoverflow | stackoverflow = "number/username" |
| Codepen | codepen | codepen = "username" |
reddit = "username" |
Variabel -variabel ini harus berada di tabel [social] config.toml atau yang setara dengan YAML atau JSON .
[ social ]
github = " UtkarshVerma "Setelah ini selesai, tulis bagian " Tentang Saya " dari situs web Anda dalam Markdown sebagaimana diarahkan di sini: kesalahan dan tentang halaman.
Seperti yang dinyatakan sebelumnya, tema ini memiliki dua tampilan, tampilan kartu dan tampilan posting . Jenis rendering tampilan tergantung pada jenis konten yang Anda beri makan untuk Dream Plus . Karena itu:
cards di /content mengaktifkan tampilan kartu .posts di /content mengaktifkan tampilan posting .Variabel
contentTypesekarang telah digunakan.
Salah satu perbedaan yang jelas antara kedua tampilan adalah bahwa tampilan kartu tidak mendukung posting, melainkan mengarahkan kembali ke tautan yang ditentukan, sementara tampilan posting melakukannya. Anda dapat mengujinya dengan mengunjungi situs saya (dinyatakan di atas) yang menggunakannya. Juga, pembuatan pos/kartu dilakukan secara berbeda untuk kedua pandangan. Ini sebagai berikut:
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creationSetelah ini, cukup buka kartu penurunan harga/posting Anda dan berikan parameter untuk kartu/posting.
Ada dua cara berbeda untuk mengonfigurasi latar belakang tema ini. Pengaturan ini saling eksklusif.
Untuk mengatur warna latar belakang tertentu, lakukan melalui variabel color . Jika Anda ingin mengatur kombinasi warna acak sebagai latar belakang Anda sebagai gantinya, tinggalkan saja variabel warna yang tidak disetel .
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent Tentukan gambar yang ingin Anda tetapkan sebagai latar belakang melalui array images . Jika Anda lebih suka satu latar belakang gambar, maka cukup berikan nilai tunggal ke array. Misalnya:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background Memberikan beberapa gambar ke array images memungkinkan fitur latar belakang gambar acak dari Dream Plus, yang bersepeda latar belakang dalam array yang diberikan setiap kali situs dimuat ulang. Anda juga dapat mengaburkan latar belakang sampai batas tertentu melalui variabel blur .
Semua variabel yang mengonfigurasi latar belakang harus ditempatkan di dalam tabel
backrounddi bawahparams
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "Sampul untuk setiap kartu pos atau kartu diproses oleh Dream Plus menggunakan pemrosesan gambar Hugo untuk waktu pemuatan situs web yang lebih cepat. Jalur pencarian untuk file sampul seperti yang dinyatakan di bawah ini:
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
Menentukan gambar sampul melalui frontmatter kini telah sudah usang. Penutup kartu sekarang dapat didefinisikan melalui frontmatter melalui kuncicover. Namun pemrosesan gambar tidak akan berlaku pada sampul tersebut. Juga, sampul FrontMatter diprioritaskan daripada sumber daya gambar , oleh karena itu, untuk membuat sampul sumber daya gambar render, Anda harus menghapus kunci penutup dari frontmatter terlebih dahulu.
Anda juga dapat memodifikasi proses pemrosesan gambar melalui variabel coverArgs di [params.features] . Argumen yang disahkan harus untuk fungsi .Resize karena itulah yang dimanfaatkan Dream Plus. Misalnya,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image Anda dapat mengonfigurasi situs web Anda berdasarkan perangkat klien dengan menggunakan variabel isMobile JS. Memang true ketika perangkat klien adalah ponsel dan sebaliknya.
Tema ini mendukung kustomisasi total halaman tentang dan kesalahan . Halaman -halaman ini dapat disesuaikan melalui file about.md dan 404.md Dream Plus membaca file yang dinyatakan di atas sebagai teks penurunan harga biasa dan kemudian membuatnya. Setelah selesai menulis file dan memodifikasinya sesuai dengan kebutuhan Anda, tempel di folder content situs Hugo Anda. Jika Anda tidak ingin halaman -halaman ini dibangun oleh Hugo dan disajikan dengan tautan mereka sendiri seperti <website>.<domain>/about atau <website>.<domain>/404 . Maka Anda dapat memberitahu Hugo untuk mengabaikan ini melalui variabel ignoreFiles di file config.toml Anda sebagai berikut:
ignoreFiles = [ " content/404.md " , " content/about.md " ] Anda juga dapat mengatur favicon khusus untuk situs web Anda melalui variabel konfigurasi favicon di bawah params . Misalnya,
[params]
favicon = "/images/defaultFav.ico"
Skrip situs web Shorte.st telah diimplementasikan dalam tema ini. Untuk menggunakannya, Anda harus mengonfigurasinya melalui tabel shortest di bawah params .
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define Jika Anda ingin mengontrol jumlah posting/kartu yang dimiliki halaman, maka Anda dapat melakukannya menggunakan variabel konfigurasi paginate .
paginate = 4 # Defaults to 10 Juga, tag, saat diaktifkan, tidak akan semua ditampilkan di header dan bilah samping secara default. Hanya 8 tag teratas (artikel-wajib-bijaksana) yang ditampilkan di sana untuk menghindari kemacetan. Namun dapat ditimpa menggunakan variabel tagLimit dari tabel [params.tag] .
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tagsAda beberapa konfigurasi kecil lainnya juga. Anda dapat mengaturnya dengan mengacu pada komentar di dalam file konfigurasi.
Dokumentasi untuk repositori ini saat ini sedang bekerja dan ditambahkan ke wiki repositori ini. Kontribusi wiki sangat disambut. Jangan ragu untuk bertanya kepada saya tentang fitur tema ini untuk itu.
Setelah menyelesaikan konfigurasi, Anda siap melakukannya. Jadi, uji situs web Anda menggunakan:
hugo serverSitus Anda sekarang harus tersedia secara lokal di http: // localhost: 1313 untuk tujuan pengujian.
Untuk menguji situs contoh, Anda harus secara eksplisit menentukan file konfigurasi ke Hugo. Ini dilakukan sebagai berikut:
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.tomlMenemukan sesuatu yang menarik untuk ditambahkan ke tema ini atau lebih tepatnya? Bug? Beri tahu saya tentang hal itu melalui pelacak masalah. Permintaan tarik juga diterima. Untuk instruksi lebih rinci tentang cara berkontribusi, lihat contributing.md
Tema ini dirilis di bawah lisensi MIT .
