So Simple adalah tema Jekyll sederhana untuk kata-kata dan gambar Anda. Dibangun untuk menyediakan:
Lihat apa yang baru di CHANGELOG. dokumentasi v2 .
Keterangan | ||
---|---|---|
Postingan dengan gambar pahlawan berukuran besar. | Pratinjau | Sumber |
Postingan dengan berbagai elemen HTML umum yang menunjukkan bagaimana tema menata elemen tersebut. | Pratinjau | Sumber |
Posting yang menampilkan kode yang disorot. | Pratinjau | Sumber |
Sebuah postingan yang menampilkan gambar dengan berbagai macam keberpihakan. | Pratinjau | Sumber |
Semua postingan dikelompokkan berdasarkan tahun. | Pratinjau | Sumber |
Semua postingan dikelompokkan berdasarkan kategori. | Pratinjau | Sumber |
Semua postingan dikelompokkan berdasarkan tag. | Pratinjau | Sumber |
Halaman kategori. | Pratinjau | Sumber |
Daftar dokumen dalam tampilan grid. | Pratinjau | Sumber |
Contoh postingan tambahan dapat dilihat di situs demo. File sumber untuk ini (dan seluruh situs demo) dapat ditemukan di folder /docs
.
Jika Anda menjalankan Jekyll v3.5+ dan hosting mandiri, Anda dapat dengan cepat menginstal tema tersebut sebagai permata Ruby. Jika Anda menghosting dengan Halaman GitHub, Anda dapat memasangnya sebagai tema jarak jauh atau langsung menyalin semua file tema (lihat struktur di bawah) ke dalam proyek Anda.
Tambahkan baris ini ke Gemfile
situs Jekyll Anda (atau buat yang baru):
gem "jekyll-theme-so-simple"
Tambahkan baris ini ke file _config.yml
situs Jekyll Anda:
theme : jekyll-theme-so-simple
Kemudian jalankan Bundler untuk menginstal permata tema dan dependensinya:
bundle install
Halaman GitHub telah menambahkan dukungan penuh untuk tema apa pun yang dihosting GitHub.
Ganti gem "jekyll"
dengan:
gem "github-pages" , group : :jekyll_plugins
Jalankan bundle update
dan verifikasi bahwa semua permata terpasang dengan benar.
Tambahkan remote_theme: "mmistakes/[email protected]"
ke file _config.yml
Anda. Hapus entri theme:
atau remote_theme:
lainnya.
Catatan: Situs Jekyll Anda akan langsung dapat dilihat di http://USERNAME.github.io. Jika tidak, Anda dapat memaksa pembangunan kembali dengan memasukkan komitmen kosong ke GitHub (lihat di bawah untuk detail selengkapnya).
Jika Anda menghosting beberapa situs berbasis Jekyll dengan nama pengguna GitHub yang sama, Anda harus menggunakan Halaman Proyek, bukan Halaman Pengguna. Pada dasarnya Anda mengganti nama repo menjadi sesuatu selain USERNAME.github.io dan membuat cabang gh-pages
dari master
. Untuk detail lebih lanjut tentang cara kerjanya, periksa dokumentasi GitHub.
Jika Anda melakukan fork atau mengunduh repo so-simple-theme
Anda dapat menghapus file dan folder berikut dengan aman:
.github
docs
example
.editorconfig
.gitattributes
banner.js
CHANGELOG.md
Gemfile
jekyll-theme-so-simple.gemspec
package.json
Rakefile
README.md
README-OLD.md
screenshot.png
Jika Anda menggunakan Ruby Gem atau versi tema jarak jauh dari So Simple, peningkatan versi tidak terlalu merepotkan.
Untuk memeriksa versi mana yang saat ini Anda gunakan, lihat sumber situs yang Anda buat dan Anda akan mendapatkan sesuatu yang mirip dengan:
<!--
So Simple Jekyll Theme 3.0.0
Copyright 2013-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/so-simple-theme/blob/master/LICENSE
-->
Ini akan berada di bagian atas setiap file .html
, /assets/css/main.css
, dan /assets/js/main.js
.
Cukup jalankan bundle update
jika Anda menggunakan Bundler (memiliki Gemfile
) atau gem update jekyll-theme-so-simple
jika tidak.
Pastikan Anda memiliki versi terbaru yang ditetapkan di _config.yml
remote_theme: "mmistakes/[email protected]"
Catatan: Jika @xxx
dihilangkan, cabang master
tema saat ini akan digunakan. Disarankan untuk "mengunci" remote_theme
pada versi tertentu untuk menghindari perubahan yang dapat menyebabkan gangguan pada situs Anda.
Langkah selanjutnya memerlukan pembangunan kembali situs Halaman GitHub Anda sehingga dapat melakukan pembaruan tema terbaru. Hal ini dapat dicapai dengan meningkatkan komitmen ke repo GitHub Anda.
Komit kosong juga akan menyelesaikan pekerjaan jika Anda tidak memiliki apa pun untuk didorong saat ini:
git commit --allow-empty -m "Force rebuild of site"
Jika Anda ingin mendapatkan hasil maksimal dari alur kerja Jekyll + GitHub Pages, Anda harus menggunakan Git. Untuk menarik pembaruan tema secara manual, Anda harus terlebih dahulu memastikan ada remote upstream. Jika Anda melakukan fork pada repo tema, kemungkinan besar Anda siap melakukannya.
Untuk memeriksa ulang, jalankan git remote -v
dan verifikasi bahwa Anda dapat mengambil dari origin https://github.com/mmistakes/so-simple-theme.git
.
Untuk menambahkannya Anda dapat melakukan hal berikut:
git remote add upstream https://github.com/mmistakes/so-simple-theme.git
Sekarang Anda dapat menarik komitmen apa pun yang dibuat pada cabang master
tema dengan:
git pull upstream master
Bergantung pada jumlah penyesuaian yang Anda buat setelah forking, kemungkinan akan terjadi konflik penggabungan. Selesaikan semua file konflik yang ditandai Git, lakukan perubahan yang ingin Anda pertahankan, lalu komit.
Cara lain untuk menangani pembaruan adalah mengunduh tema --- mengganti tata letak, penyertaan, dan aset Anda dengan yang lebih baru secara manual. Untuk memastikan Anda tidak melewatkan perubahan apa pun, tinjau riwayat penerapan tema untuk melihat apa yang berubah.
Berikut daftar singkat folder/file penting yang perlu Anda perhatikan:
Nama | |
---|---|
_layouts | Ganti semuanya. Terapkan pengeditan jika Anda menyesuaikan tata letak apa pun. |
_includes | Ganti semuanya. Terapkan pengeditan jika Anda menyesuaikan penyertaan apa pun. |
assets | Ganti semuanya. Terapkan pengeditan jika Anda mengkustomisasi stylesheet atau skrip. |
_sass | Ganti semuanya. Terapkan pengeditan jika Anda mengkustomisasi sebagian Sass. |
_data/navigation.yml | Aman untuk disimpan. Pastikan tidak ada perubahan atau penambahan struktural yang besar. |
_data/text.yml | Aman untuk disimpan. Pastikan tidak ada perubahan atau penambahan struktural yang besar. |
_config.yml | Aman untuk disimpan. Pastikan tidak ada perubahan atau penambahan struktural yang besar. |
Catatan: Jika Anda tidak melihat versi terbaru, pastikan untuk membersihkan cache browser dan CDN. Tergantung pada lingkungan hosting Anda, versi lama /assets/css/main.css
, /assets/js/main.min.js
, atau *.html
file mungkin di-cache.
Tata letak, penyertaan, sebagian Sass, dan file data semuanya ditempatkan di lokasi defaultnya. Stylesheet dan skrip dapat ditemukan di assets
, dan beberapa file terkait pengembangan di direktori root proyek.
Harap dicatat: Jika Anda menginstal So Simple melalui Ruby Gem atau metode tema jarak jauh, file tema yang ditemukan di /_layouts
, /_includes
, /_sass
, dan /assets
akan hilang dari proyek Anda. Ini normal karena dibundel dengan permata jekyll-theme-so-simple
.
├── _data # data files
| ├── navigation.yml # navigation bar links
| └── text.yml # theme text
├── _includes # theme includes
├── _layouts # theme layouts (see below for usage)
├── _sass # Sass partials
├── assets
| ├── css
| | └── main.scss
| └── js
| └── main.min.js
├── _config.yml # sample configuration
└── index.md # sample home page (recent posts/not paginated)
Setelah membuat Gemfile
dan menginstal tema, Anda perlu menambahkan dan mengedit file berikut:
_config.yml
/_data/navigation.yml
/_data/text.yml
index.md
Catatan: Lihat dokumentasi penomoran halaman di bawah untuk petunjuk tentang cara mengaktifkannya di halaman beranda.
jekyll new
Menggunakan perintah jekyll new
akan membuat Anda siap dan bekerja paling cepat.
Edit file Gemfile
dan _config.yml
Anda dengan mengikuti panduan instalasi di atas dan panduan konfigurasi di bawah, lalu buat _data/text.yml
seperti yang diinstruksikan sebelumnya.
Konfigurasi elemen seluruh situs ( locale
, title
, description
, url
, logo
, author
, dll.) terjadi di _config.yml
proyek Anda. Lihat contoh konfigurasi di repo ini untuk referensi tambahan.
Nama | Keterangan | Contoh |
---|---|---|
locale | Bahasa utama untuk situs ini. | "en-us" |
title | Judul situs. | "My Awesome Site" |
description | Deskripsi singkat. | "This is my site, it is awesome." |
baseurl | Digunakan untuk menguji situs web dengan url dasar yang sama dengan situs yang akan digunakan. | /my-base-path |
url | URL lengkap ke situs Anda. | "https://your-site.com" |
logo | Jalur ke logo seluruh situs yang digunakan di masthead. | /images/your-logo.png |
Tiga skin (default, terang, dan gelap) tersedia untuk mengubah palet warna tema.
default.css | light.css | dark.css |
---|---|---|
skin : " /assets/css/skins/default.css "
skin : " /assets/css/skins/light.css "
skin : " /assets/css/skins/dark.css "
Untuk menggunakan skin custom selain yang disediakan:
/assets/css/skins/default.scss
ke repo lokal Anda.skin
di _config.yml
untuk mereferensikan file .css
skin baru ini. site.locale
digunakan untuk mendeklarasikan bahasa utama untuk setiap halaman web dalam situs.
Contoh: lokal: "en-US"
menetapkan atribut lang untuk situs tersebut ke dalam bahasa Inggris Amerika Serikat, sedangkan en-GB
untuk bahasa Inggris Inggris. Kode negara bersifat opsional dan variasi locale: "en"
juga dapat diterima. Untuk menemukan bahasa dan kode negara Anda, periksa tabel referensi ini.
Mengatur lokal dengan benar penting untuk mengaitkan teks lokal yang ditemukan dalam file data teks.
Catatan: Tema defaultnya adalah teks dalam bahasa Inggris ( en
, en-US
, en-GB
). Jika Anda mengubah lokal di _config.yml
ke sesuatu yang lain, pastikan untuk menambahkan kunci lokal yang sesuai dan teks terjemahan ke _data/text.yml
.
Nama host dasar dan protokol untuk situs Anda. Jika Anda menghosting dengan Halaman GitHub, ini akan menjadi seperti url: "https://github.io.mmistakes"
atau url: "https://your-site.com"
jika Anda memiliki nama domain khusus.
Halaman GitHub sekarang memaksa https://
untuk situs baru, jadi berhati-hatilah saat mengatur URL Anda untuk menghindari peringatan konten campuran.
Catatan: Jekyll mengganti nilai url
dengan http://localhost:4000
saat menjalankan jekyll serve
locally dalam pengembangan. Jika Anda ingin menghindari perilaku ini, setel JEKYLL_ENV=production
untuk memaksa lingkungan melakukan produksi.
Opsi ini menyebabkan berbagai kebingungan di komunitas Jekyll. Jika Anda tidak menghosting situs Anda sebagai Halaman Proyek GitHub atau dalam subfolder (misalnya, /blog
), jangan mengacaukannya.
Dalam kasus situs demo So Simple , situs ini dihosting di GitHub di https://mmistakes.github.io/so-simple-theme. Untuk mengatur jalur dasar ini dengan benar, saya akan menggunakan url: "https://mmistakes.github.io"
dan baseurl: "/so-simple-theme"
.
Untuk informasi lebih lanjut tentang cara menggunakan site.url
dan site.baseurl
dengan benar sebagaimana dimaksud oleh pengelola Jekyll, lihat postingan Parker Moore tentang subjek tersebut.
Catatan: Saat menggunakan baseurl
ingatlah untuk menyertakannya sebagai bagian dari tautan dan jalur aset di konten Anda. Nilai url:
dan baseurl: "/blog"
akan membuat situs lokal Anda terlihat di http://localhost:4000/blog dan bukan http://localhost:4000. Anda dapat menambahkan semua aset dan jalur tautan internal Anda dengan {{ site.baseurl }}
atau menggunakan relative_url
Jekyll.
Untuk menggunakan nilai contoh di atas jalur gambar berikut {{ '/images/my-image.jpg' | relative_url }}
akan ditampilkan dengan benar sebagai http://localhost:4000/blog/images/my-image.jpg
.
Tanpa filter relative_url
, jalur aset tersebut akan hilang /blog
dan gambar di halaman Anda akan rusak.
Anda dapat mengubah format tanggal default dengan menentukan date_format
di _config.yml
. Ia menerima salah satu format tanggal Liquid standar.
Misalnya nilai default "%B %-d, %Y"
dapat diubah seperti ini:
date_format : " %Y-%m-%d "
Aktifkan perkiraan waktu membaca cuplikan di seluruh situs dengan read_time: true
. 200
telah ditetapkan sebagai nilai kata per menit default — yang dapat diubah melalui words_per_minute
di file _config.yml
Anda.
read_time : true
words_per_minute : 200
Aktifkan MathJax (mesin tampilan JavaScript untuk matematika) di seluruh situs dengan
mathjax :
enable : true
Opsi combo
memungkinkan Anda memilih kombinasi komponen MathJax--defaultnya adalah "tex-svg." Dan, opsi tags
memungkinkan Anda mengontrol penomoran persamaan--pilihannya adalah "ams" (default), "all", dan "none".
Konfigurasi sampel:
mathjax :
enable : true # MathJax equations, e.g. true, false (default)
combo : " tex-svg " # "tex-svg" (default), "tex-mml-chtml", etc.
tags : " ams " # "none", "ams" (default), "all"
Gunakan Google Fonts dengan mudah di seluruh situs Anda dengan mengganti name
dan weights
font yang sesuai. Pasangan font yang disarankan adalah sebagai berikut:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "
Catatan: Jika jenis font lain digunakan, pastikan untuk menambahkan, lalu ganti variabel SCSS berikut di /assets/css/main.scss
dengan nilai font-family
yang disediakan Google.
$serif-font-family : " Lora " , serif ;
$sans-serif-font-family : " Source Sans Pro " , sans-serif ;
$monospace-font-family : Menlo, Consolas, Monaco, " Courier New " , Courier ,
monospace ;
$base-font-family : $sans-serif-font-family ;
$headline-font-family : $sans-serif-font-family ;
$title-font-family : $serif-font-family ;
$description-font-family : $serif-font-family ;
$meta-font-family : $serif-font-family ;
Lihat dokumentasi stylesheet di bawah untuk informasi lebih lanjut tentang mengganti variabel default tema.
Pisahkan daftar utama postingan di halaman beranda menjadi beberapa halaman dengan mengaktifkan penomoran halaman.
Sertakan plugin jekyll-paginate
di Gemfile
Anda.
group :jekyll_plugins do
gem "jekyll-paginate"
end
Tambahkan jekyll-paginate
ke array plugins
(sebelumnya gems
) di file _config.yml
Anda dan pengaturan pagination berikut:
paginate : 10 # amount of posts to show per page
paginate_path : /page:num/
Buat index.html
(atau ganti nama index.md
) di root proyek Anda dan tambahkan baris depan berikut:
layout : home
paginate : true
Untuk mengindeks konten lengkap dokumen Anda untuk digunakan di halaman pencarian, setel search_full_content
ke true
di _config.yml
:
search_full_content : true
Catatan: Postingan dalam jumlah besar akan meningkatkan ukuran indeks pencarian, sehingga berdampak pada kinerja pemuatan halaman. Menyetel search_full_content
ke false
(default) membatasi pengindeksan hingga 50 kata pertama dari konten isi.
Secara default, kategori dan tag yang ditambahkan ke postingan tidak ditautkan ke halaman arsip taksonomi. Untuk mengaktifkan perilaku ini dan menautkan ke halaman dengan postingan yang dikelompokkan berdasarkan kategori atau tag, tambahkan yang berikut ini:
category_archive_path : " /categories/# "
tag_archive_path : " /tags/# "
Jalur ini harus meniru tautan permanen yang digunakan untuk halaman arsip kategori dan tag Anda. #
di akhir diperlukan untuk menargetkan bagian taksonomi yang benar pada halaman.
Misalnya jika Anda membuat categories.md
dengan materi depan berikut:
title : Categories Archive
layout : categories
permalink : /foo/
Anda harus mengubah category_archive_path
menjadi "/foo/#
agar tautan kategori berfungsi dengan baik.
Catatan: Anda dapat membuat halaman kategori dan tag khusus secara manual dengan layout: category
dan layout: tag
. Atau gunakan plugin seperti jekyll-archives atau jekyll-paginate-v2 untuk membuatnya secara otomatis.
Jika Anda memiliki akun Disqus , Anda dapat menampilkan bagian komentar di bawah setiap postingan.
Untuk mengaktifkan komentar Disqus, tambahkan nama pendek Disqus Anda ke file _config.yml
proyek Anda:
disqus :
shortname : my_disqus_shortname
Komentar hanya muncul dalam produksi ketika dibuat dengan nilai lingkungan berikut: JEKYLL_ENV=production
untuk menghindari pencemaran akun Disqus Anda dengan konten localhost
.
Jika Anda tidak ingin menampilkan komentar untuk postingan tertentu, Anda dapat menonaktifkannya dengan menambahkan comments: false
pada bagian depan postingan tersebut.
Untuk mengaktifkan Google Analytics , tambahkan ID pelacakan Anda ke _config.yml
seperti:
google_analytics : UA-NNNNNNNN-N
Mirip dengan komentar Disqus di atas, skrip pelacakan Google Analytics hanya akan muncul dalam produksi ketika menggunakan nilai lingkungan berikut: JEKYLL_ENV=production
.
Untuk opsi konfigurasi selengkapnya, pastikan untuk membaca dokumentasi untuk: jekyll-seo-tag , jekyll-feed , jekyll-paginate , dan jekyll-sitemap .
Tema ini menyediakan layout berikut, yang dapat Anda gunakan dengan mengatur layout
bagian depan pada setiap halaman, seperti:
---
layout : name
---
layout: default
Tata letak ini menangani semua perancah halaman dasar yang menempatkan konten halaman di antara elemen masthead dan footer. Semua tata letak lainnya mewarisi tata letak ini dan memberikan gaya dan fitur tambahan di dalam blok {{ content }}
.
layout: post
Tata letak ini mengakomodasi materi depan berikut:
Nama | Jenis | Keterangan |
---|---|---|
image | Rangkaian | Jalur ke gambar besar yang terkait dengan postingan. Juga digunakan untuk OpenGraph, Twitter Cards, dan thumbnail feed situs jika diaktifkan. Ukuran gambar yang disarankan. |
image.path | Rangkaian | Sama seperti di atas. Digunakan ketika thumbnail atau caption perlu ditetapkan ke objek image juga. |
image.caption | Rangkaian | Menjelaskan gambar atau memberikan kredit. Penurunan harga diperbolehkan. |
author | Objek atau string | Tentukan name penulis postingan, picture , twitter , links , dll. |
comments | Boolean | Nonaktifkan komentar dengan comments: false . |
share | Boolean | Tambahkan tautan berbagi sosial ke kiriman dengan share: true . |
Contoh gambar postingan:
image :
path : /images/post-image-lg.jpg
thumbnail : /images/post-image-th.jpg
caption : " Photo credit [Unsplash](https://unsplash.com/) "
Catatan: bagian depan image.feature
sudah tidak digunakan lagi, untuk mendukung jekyll-seo-tag sepenuhnya. Jika Anda tidak menggunakan thumbnail
atau caption
gambar postingan dapat ditetapkan secara lebih ringkas sebagai image: /images/your-post-image.jpg
.
Contoh penulis postingan:
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe
Catatan: Informasi penulis dapat dipusatkan di _data/authors.yml
dengan melakukan hal berikut di bagian depan dokumen:
author : johndoe
Dengan kunci penulis yang sesuai di _data/authors.yml
:
johndoe :
name : John Doe
picture : /images/john-doe.jpg
twitter : johndoe
Catatan: ukuran yang disarankan author.picture
adalah 150 x 150
piksel.
Untuk menentukan tautan apa yang muncul di sidebar penulis, gunakan kunci authors.links
di _config.yml
atau /_data/authors.yml
.
Nama | Keterangan |
---|---|
title | Menjelaskan tautannya. Tidak terlihat, digunakan untuk tujuan aksesibilitas. |
url | URL tujuan tautan tersebut. |
icon | Sesuai dengan ikon Font Awesome misalnya, fab fa-twitter-square . |
Contoh:
author :
links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : Instagram
url : https://instagram.com/username
icon : fab fa-instagram
- title : GitHub
url : https://github.com/username
icon : fab fa-github-square
Catatan: Untuk menonaktifkan tautan penulis sepenuhnya gunakan gunakan:
author :
links : false
layout: page
Secara visual tata letak ini terlihat dan berfungsi serupa dengan layout: post
, dengan perbedaan sebagai berikut.
Tata letak halaman membentuk dasar untuk beberapa tata letak lainnya seperti home
, posts
, categories
, tags
, collection
, category
, tag
, dan search
.
layout: home
Tata letak ini mengakomodasi materi depan yang sama dengan layout: page
, dengan tambahan berikut:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid
Ketika penomoran halaman tidak diaktifkan, halaman secara default menampilkan 10 posting terbaru. Untuk mengubah jumlah postingan yang ditampilkan, tetapkan nilai batas dengan menambahkan berikut ini ke bagian depan halaman.
posts_limit : 5
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
layout: posts
Tata letak ini menampilkan semua postingan yang dikelompokkan berdasarkan tahun penerbitannya. Ini mengakomodasi materi depan yang sama dengan layout: page
.
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
layout: categories
Tata letak ini menampilkan semua kategori posting yang dikelompokkan. Ini mengakomodasi materi depan yang sama dengan layout: page
.
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
layout: tags
Tata letak ini menampilkan semua postingan yang dikelompokkan berdasarkan tag. Ini mengakomodasi materi depan yang sama dengan layout: page
.
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
layout: collection
Tata letak ini menampilkan semua dokumen yang dikelompokkan berdasarkan koleksi tertentu. Ini mengakomodasi materi depan yang sama dengan layout: page
dengan tambahan berikut:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse
Untuk membuat halaman yang memperlihatkan semua dokumen dalam koleksi recipes
Anda akan membuat recipes.md
di root proyek Anda dan menambahkan bagian depan ini:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes
Secara default, dokumen ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman. Jika Anda ingin mengurutkan koleksi berdasarkan judul, tambahkan sort_by: title
. Jika Anda ingin penyortiran terbalik, tambahkan sort_order: reverse
. Jika Anda hanya mencari daftar yang menampilkan judul resep (tanpa kutipan), tambahkan show_excerpts: false
.
layout: category
Tata letak ini menampilkan semua postingan yang dikelompokkan berdasarkan kategori tertentu. Ini mengakomodasi materi depan yang sama dengan layout: page
dengan tambahan berikut:
taxonomy : # category name
entries_layout : # list (default), grid
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
Untuk membuat halaman yang menampilkan semua posting yang ditugaskan ke kategori foo
Anda akan membuat foo.md
di root proyek Anda dan menambahkan materi depan ini:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foo
layout: tag
Tata letak ini menampilkan semua postingan yang dikelompokkan berdasarkan tag tertentu. Ini mengakomodasi materi depan yang sama dengan layout: page
dengan tambahan berikut:
taxonomy : # tag name
entries_layout : # list (default), grid
Secara default, postingan ditampilkan dalam tampilan daftar. Untuk mengubah ke tampilan kisi, tambahkan entries_layout: grid
ke bagian depan halaman.
Untuk membuat halaman yang menampilkan semua posting yang ditetapkan ke tag foo bar
Anda akan membuat foo-bar.md
di root proyek Anda dan menambahkan materi depan ini:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo bar
layout: search
Tata letak ini menampilkan formulir pencarian dan menampilkan halaman terkait berdasarkan kueri.
Indeks konten halaman: title
, excerpt
, content
(bila diaktifkan), categories
, tags
, dan url
.
Jika Anda ingin mengecualikan halaman/postingan tertentu dari indeks pencarian, setel tanda pencarian ke false
di bagian depannya.
search : false
Untuk mengindeks konten lengkap dokumen Anda, setel search_full_content
ke true
di _config.yml
:
search_full_content : true
Catatan: Postingan dalam jumlah besar akan meningkatkan ukuran indeks pencarian, sehingga berdampak pada kinerja pemuatan halaman. Menyetel search_full_content
ke false
(default) membatasi pengindeksan hingga 50 kata pertama dari konten isi.
Ukuran gambar yang disarankan dalam piksel adalah sebagai berikut:
Gambar | Keterangan | Ukuran |
---|---|---|
site.logo | Logo seluruh situs yang digunakan di kepala tiang. | 200 x 200 |
page.image.path | Gambar dokumen lebar penuh yang besar. | Gambar yang tinggi akan mendorong konten ke bawah halaman. 1600 x 600 adalah ukuran menengah yang bagus untuk dituju. |
page.image | Singkatan dari page.image.path bila digunakan sendiri (tanpa thumbnail , caption , atau variabel lainnya). | Sama seperti page.image.path |
page.image.thumbnail | Gambar dokumen kecil yang digunakan dalam tampilan kisi. | 400 x 200 |
author.picture | Gambar penulis di sidebar postingan. | 150 x 150 |
Untuk mengubah teks yang ditemukan di seluruh tema, salin file /_data/text.yml
berikut dan sesuaikan seperlunya.
Saat menambahkan teks baru, pastikan kuncinya cocok dengan kode bahasa/negara ini, yang mungkin digunakan untuk site.locale
.
Untuk menentukan halaman apa yang ditautkan di navigasi atas:
Buat file /_data/navigation.yml
.
Tambahkan halaman sesuai urutan kemunculannya yang Anda inginkan:
- title : Posts
url : /posts/
- title : Categories
url : /categories/
- title : External Page
url : https://whatever-site.com/page.html
- title : Search
url : /search/
Catatan: Judul yang panjang atau banyak tautan dapat menyebabkan bilah navigasi terpecah menjadi beberapa baris, terutama pada layar yang lebih kecil. Ingatlah hal ini saat Anda mengembangkan navigasi utama situs Anda.
Informasi penulis digunakan sebagai data meta untuk posting "menurut baris" dan menyebarkan bidang creator
kartu ringkasan Twitter dengan materi depan berikut di _config.yml
:
author :
name : John Doe
twitter : johndoetwitter
picture : /images/johndoe.png
Informasi penulis di seluruh situs dapat diganti di bagian depan dokumen dengan cara yang sama:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /images/janedoe.png
Atau dengan menentukan kunci terkait di bagian depan dokumen, yang ada di site.data.authors
. Misalnya, Anda memiliki yang berikut ini di bagian depan dokumen:
author : megaman
Dan Anda memiliki yang berikut ini di _data/authors.yml
:
megaman :
name : Mega Man
twitter : megamantwitter
picture : /images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /images/drlight.png
Saat ini author.picture
hanya digunakan dalam layout: post
. Ukuran yang disarankan adalah 150 x 150
piksel.
Tautan footer dan teks hak cipta keduanya dapat dikustomisasi.
Tautan footer disetel di _config.yml
di bawah kunci footer_links
.
Nama | Keterangan |
---|---|
title | Menjelaskan tautannya. Tidak terlihat, digunakan untuk tujuan aksesibilitas. |
url | URL tujuan tautan tersebut. |
icon | Sesuai dengan ikon Font Awesome 5 misalnya, fab fa-twitter-square . |
Contoh:
footer_links :
- title : Twitter
url : https://twitter.com/username
icon : fab fa-twitter-square
- title : GitHub
url : https://github.com/mmistakes
icon : fab fa-github-square
- title : Feed
url : atom.xml
icon : fas fa-rss-square
Catatan: Untuk menonaktifkan tautan footer sepenuhnya, gunakan footer_links: false
.
Secara default, hak cipta memasukkan tahun ini, site.title
, dan kata-kata "Powered by Jekyll & So Simple."
Untuk mengubahnya, tambahkan copyright
ke _config.yml
Anda seperti ini (Penurunan harga diperbolehkan):
copyright : " This site is made with <3 by *me, myself, and I*. "
Anda dapat menganggap pembantu Jekyll ini sebagai kode pendek. Karena Halaman GitHub tidak mengizinkan sebagian besar plugin --- tag khusus tidak ada. Sebaliknya tema yang dimanfaatkan termasuk melakukan hal serupa.
Sematkan video dari YouTube/Vimeo atau konten iframe
lainnya dengan ukuran responsif agar sesuai dengan lebar induknya.
Parameter | Diperlukan | Keterangan |
---|---|---|
url | Ya | URL video atau iframe misalnya https://www.youtube.com/watch?v=-PVofD2A9t8 |
ratio | Opsional | Rasio konten video atau iframe. 21:9 , 16:9 , 4:3 , 1:1 . Jika rasio tidak ditetapkan maka digunakan 16:9 . |
Contoh:
{% include responsive-embed url="https://www.youtube.com/watch?v=-PVofD2A9t8" ratio="16:9" %}
Untuk menyertakan daftar isi yang dibuat secara otomatis untuk postingan dan halaman, tambahkan pembantu berikut di tempat yang Anda inginkan untuk menampilkannya.
{% include toc %}
So Simple 3 adalah penulisan ulang besar-besaran dari keseluruhan tema. Perubahan yang paling menonjol dirangkum di bawah ini, diikuti dengan perubahan yang lebih spesifik.
Dapat dikatakan bahwa Anda mungkin ingin membuang semua file _layouts
, _includes
, _sass
, .css
, dan .js
dari v2 dan menggunakan permata Ruby atau opsi instalasi tema jarak jauh.
_layouts
, _includes
, _sass
, dan JavaScript telah dibangun kembali.site.url
dan site.baseurl
dengan benar dengan memanfaatkan filter relative_url
dan absolute_url
./_includes/open-graph.html
khusus dengan jekyll-seo-tag .tags
dan posts
) agar lebih mudah digunakan.404.md
atom.xml
khusus dengan jekyll-feed .favicon.ico
dan favicon.png
default.float
telah digunakan sehingga segala sesuatunya tidak terlihat terlalu rusak di browser yang tidak mendukung display: grid
dan flexbox. Format telah diubah dari en_US
(dengan garis bawah) menjadi en-US
dengan tanda hubung.
site.owner
sekarang menjadi site.author
untuk mendukung jekyll-seo-tag dan jekyll-feed dengan lebih baik.
v2 | v3 |
---|---|
site.owner.name | site.author.name |
site.owner.avatar | site.author.picture |
site.owner.email | site.author.email |
site.owner.twitter | site.twitter |
site.owner.google.analytics | tidak digunakan lagi , diganti dengan jekyll-seo-tag |
site.owner.bing-verify | tidak digunakan lagi , diganti dengan jekyll-seo-tag |
site.owner.google.analytics
sekarang menjadi site.google_analytics
. Lihat dokumentasi untuk informasi lebih lanjut.
site.owner.disqus-shortname
sekarang menjadi site.disqus.shortname
. Lihat dokumentasi informasi lebih lanjut.
Untuk menonaktifkan komentar pada postingan tertentu, tambahkan comments: false
di bagian depannya.
search_omit
telah diubah namanya menjadi search
. Untuk mengecualikan posting atau halaman dari pencarian, tambahkan search: false
ke bagian depannya.
Saat menetapkan jalur gambar untuk hal-hal seperti site.logo
, page.image.path
, author.picture
, dll. jalur tersebut sekarang memerlukan jalur relatif atau absolut penuh.
Dalam So Simple v2, semua gambar ditempatkan di /images/
dan ditempatkan di depan hanya dengan nama file. Agar gambar dapat dimuat dengan benar, Anda sekarang harus menambahkan semua jalur dengan /images/
... jika Anda menyimpan gambar di sana, misalnya /images/your-image.jpg
.
Untuk mendukung plugin Jekyll seperti jekyll-seo-tag, jekyll-feed, dan jekyll-sitemap, sebagian besar kunci image
telah diganti namanya. Sesuaikan bagian depan di semua postingan dan halaman Anda.
v2 | v3 |
---|---|
image.feature | image.path |
image.thumb | image.thumbnail |
image.credit | image.caption (Penurunan harga diperbolehkan) |
image.creditlink | tidak lagi digunakan **image.caption** sebagai gantinya |
Sebuah postingan dengan materi depan v2 berikut:
image :
feature : feature-image-filename.jpg
thumb : thumb-image-filename.jpg
credit : Michael Rose
creditlink : https://mademistakes.com
Akan diubah menjadi materi depan v3 berikut:
image :
path : /images/feature-image-filename.jpg
thumbnail : /images/thumb-image-filename.jpg
caption : " [Michael Rose](https://mademistakes) "
Langkah kasar untuk memigrasikan stok fork So Simple v2 (tanpa perubahan) ke yang terbaru.
Hapus _includes/
, _layouts/
, _sass/
, jshintrc
, Gruntfile.js
, dan search.json
.
Edit Gemfile
untuk metode instalasi permata Ruby atau Halaman GitHub dan ikuti instruksi tersebut.
Tambahkan Google Font berikut ke _config.yml
:
google_fonts :
- name : " Source Sans Pro "
weights : " 400,400i,700,700i "
- name : " Lora "
weights : " 400,400i,700,700i "
Edit _config.yml
dengan memperhatikan kunci-kunci yang telah diganti namanya atau memiliki persyaratan jalur relatif baru. locale
, logo
, dan owner
adalah tempat yang baik untuk memulai.
Ganti nama semua contoh image.feature
, image.thumb
, dan image.credit
di postingan/halaman mengikuti perubahan gambar di atas.
Hapus konten isi di index.html
dan ubah layout: page
menjadi layout: home
. Konfigurasikan penomoran halaman jika perlu.
Hapus konten isi di /search/index.md
dan ubah layout: page
menjadi layout: search
.
Hapus konten isi di /tags/index.md
dan ubah layout: page
menjadi layout: tags
.
Hapus konten isi di /articles/index.md
dan ubah layout: page
menjadi layout: category
dan tambahkan taxonomy: articles
.
Hapus konten isi di /body/index.md
dan ubah layout: page
menjadi layout: category
dan tambahkan taxonomy: blog
.
Ganti nama bagian depan modified
di postingan/halaman menjadi last_modified_at
untuk meningkatkan paritas dengan plugin yang mendukungnya.
Tambahkan tag_archive_path: "/tags/#"
ke _config.yml
untuk mengaktifkan tautan tag di sidebar meta postingan.
Ganti nama avatar
menjadi picture
di _data/authors.yml
(dan di bagian depan postingan/halaman mana pun), dan edit jalur yang mengikuti perubahan jalur gambar di atas.
Saat memasang sebagai permata Ruby atau tema jarak jauh, file tema inti ( _layouts
, _includes
, _sass
, assets
, dll.) tidak akan ada di proyek Anda.
Struktur default, gaya, dan skrip tema ini dapat diganti dan disesuaikan dengan dua cara berikut:
File tema dapat diganti dengan menempatkan file dengan nama yang sama ke dalam direktori _includes
atau _layouts
proyek Anda. Misalnya:
_includes/social-share.html
, buat direktori _includes
di proyek Anda, salin _includes/social-share.html
dari folder permata So Simple ke <your_project>/_includes
dan edit file itu. ProTip: untuk menemukan file tema di komputer Anda, jalankan bundle show jekyll-theme-so-simple
. Ini mengembalikan lokasi file tema berbasis permata.
Tema ini dilengkapi dengan dua file untuk membantu memasukkan markup dan konten khusus ke lokasi yang telah ditentukan sebelumnya.
Keterangan | |
---|---|
_includes/head-custom.html | Disisipkan di dalam elemen <head> untuk menambahkan metadata, favicon, dll. |
_includes/footer-custom.html | Disisipkan di dalam elemen <footer> sebelum skrip situs dan informasi hak cipta. |
Untuk mengganti Sass default (terletak di direktori _sass
tema), lakukan salah satu hal berikut:
Salin langsung dari permata So Simple
bundle show jekyll-theme-so-simple
untuk mendapatkan jalur ke sana)./assets/css/main.scss
dari sana ke <your_project>
.<your_project>/assets/css/main.scss
.Salin dari repo ini.
<your_project>
.<your_project/assets/css/main.scss
. Catatan: Untuk menyesuaikan sebagian Sass sebenarnya yang dibundel dalam permata, Anda perlu menyalin seluruh isi direktori _sass
ke <your_project>
. Karena cara Jekyll mengimpor file-file ini semuanya atau tidak sama sekali. Mengganti sebagian (atau dua) Sass tidak akan berfungsi seperti _includes
dan _layouts
.
Untuk melakukan penyesuaian dasar pada gaya tema, variabel Sass dapat diganti dengan menambahkan ke <your_project>/assets/css/main.scss
. Misalnya, untuk mengubah warna aksen yang digunakan di seluruh tema, tambahkan baris berikut sebelum semua baris @import
:
$accent-color : tomato ;
Untuk mengganti JavaScript default yang disertakan dalam tema, lakukan salah satu hal berikut:
Salin langsung dari permata So Simple
bundle show jekyll-theme-so-simple
untuk mendapatkan jalur ke sana)./assets/js/main.js
dari sana ke <your_project>
.<your_project>/assets/js/main.js
.Salin dari repo ini.
/assets/js/main.js
ke <your_project>
.<your_project>/assets/js/main.js
. File /assets/js/main.min.js
tema dibuat dari plugin jQuery dan skrip lain yang ditemukan di /assets/js/
.
├── assets
| ├── js
| | ├── lunr # Lunr search plugin
| | | ├── lunr.xx.js # Lunr language plugins
| | | ├── ...
| | | ├── lunr.min.js
| | | └── lunr.stemmer.support.min.js
| | ├── plugins
| | | ├── jquery.smooth-scroll.min.js # make same-page links scroll smoothly
| | | ├── lity.min.js # responsive lightbox
| | | └── table-of-contents.js # table of contents toggle
| | ├── main.js # jQuery plugin settings and other scripts
| | ├── main.min.js # concatenated and minified scripts
| | ├── search-data.json # search index used by Lunr
Untuk mengubah atau menambahkan skrip Anda sendiri, sertakan skrip tersebut dalam assets/js/main.js
lalu buat kembali menggunakan npm run build:js
. Lihat di bawah untuk lebih jelasnya.
Jika Anda menambahkan skrip tambahan ke /assets/js/plugins/
dan ingin skrip tersebut digabungkan dengan skrip lainnya, pastikan untuk memperbarui skrip uglify
di package.json
. Hal yang sama berlaku untuk skrip yang Anda hapus.
Anda juga dapat menambahkan skrip ke elemen <head>
atau penutup </body>
dengan menambahkan jalur ke array berikut di _config.yml
.
Contoh:
head_scripts :
- https://code.jquery.com/jquery-3.2.1.min.js
- /assets/js/your-custom-head-script.js
footer_scripts :
- /assets/js/your-custom-footer-script.js
Catatan: Jika Anda menetapkan jalur ke footer_scripts
file /assets/js/main.min.js
tema akan dinonaktifkan. Skrip ini mencakup plugin dan skrip lain yang akan berhenti berfungsi kecuali Anda secara khusus menambahkannya ke array footer_scripts
.
Tema ini menggunakan Font Awesome SVG dengan versi JS untuk ikonografinya. Lokasi menonjol munculnya ikon-ikon ini ada di sidebar penulis dan tautan footer.
Untuk menyiapkan lingkungan Anda untuk mengembangkan tema ini:
cd
ke /example
dan jalankan bundle install
.Untuk menguji tema secara lokal saat Anda mengubahnya:
cd
ke dalam folder root repo (misalnya jekyll-theme-so-simple
).bundle exec rake preview
dan buka browser Anda ke http://localhost:4000/example/
. Ini memulai server Jekyll menggunakan file tema dan isi direktori example/
. Saat modifikasi dilakukan, segarkan browser Anda untuk melihat perubahan apa pun.
Dalam upaya mengurangi ketergantungan, serangkaian skrip npm digunakan untuk membangun main.min.js
alih-alih menjalankan tugas seperti Gulp atau Grunt. Jika alat-alat tersebut lebih sesuai dengan gaya Anda maka gunakan saja.
Untuk memulai:
cd
ke root proyek Anda. Catatan: Jika Anda memutakhirkan tema dari versi sebelumnya, pastikan Anda menyalin package.json
sebelum menjalankan npm install
. Anda mungkin juga perlu menghapus direktori node_modules
Anda.
Jika semuanya berjalan dengan baik, menjalankan npm run build:js
akan memampatkan/menggabungkan main.js
dan semua skrip plugin ke dalam /assets/js/main.min.js
.
Menemukan kesalahan ketik dalam dokumentasi? Meminta fitur atau perbaikan bug? Telusuri terbitan terbuka dan tertutup sebelum mengirimkan terbitan untuk menghindari duplikasi.
Permintaan tarik juga dihargai. Jika ini adalah pertama kalinya Anda, mungkin ada gunanya membaca Alur GitHub.
Jika kontribusi Anda menambah atau mengubah perilaku tema, pastikan untuk memperbarui dokumentasi dan/atau contoh konten. Dokumentasi ada di README.md sementara contoh postingan, halaman, dan koleksi ada di folder docs
dan example
.
Saat mengirimkan permintaan tarik:
master
dan beri nama yang bermakna (misalnya my-awesome-new-feature
).Michael Rose
Lisensi MIT (MIT)
Hak Cipta (c) 2013-2019 Michael Rose dan kontributor
Izin dengan ini diberikan, secara gratis, kepada siapa pun yang memperoleh salinan perangkat lunak ini dan file dokumentasi terkait ("Perangkat Lunak"), untuk menggunakan Perangkat Lunak tanpa batasan, termasuk tanpa batasan hak untuk menggunakan, menyalin, memodifikasi, menggabungkan , mempublikasikan, mendistribusikan, mensublisensikan, dan/atau menjual salinan Perangkat Lunak, dan mengizinkan orang yang menerima Perangkat Lunak untuk melakukan hal tersebut, dengan tunduk pada ketentuan berikut:
Pemberitahuan hak cipta di atas dan pemberitahuan izin ini akan disertakan dalam semua salinan atau sebagian besar Perangkat Lunak.
PERANGKAT LUNAK INI DISEDIAKAN "APA ADANYA", TANPA JAMINAN APA PUN, TERSURAT MAUPUN TERSIRAT, TERMASUK NAMUN TIDAK TERBATAS PADA JAMINAN KELAYAKAN UNTUK DIPERDAGANGKAN, KESESUAIAN UNTUK TUJUAN TERTENTU, DAN TIDAK ADA PELANGGARAN. DALAM KEADAAN APA PUN PENULIS ATAU PEMEGANG HAK CIPTA TIDAK BERTANGGUNG JAWAB ATAS KLAIM, KERUSAKAN, ATAU TANGGUNG JAWAB LAINNYA, BAIK DALAM TINDAKAN KONTRAK, HUKUM ATAU LAINNYA, YANG TIMBUL DARI, ATAU SEHUBUNGAN DENGAN PERANGKAT LUNAK ATAU PENGGUNAAN ATAU HAL-HAL LAIN DALAM PERANGKAT LUNAK.
So Simple menyertakan Font Awesome, Hak Cipta (c) 2017 Dave Gandy. Font Awesome didistribusikan berdasarkan ketentuan SIL OFL 1.1 dan Lisensi MIT.
So Simple menggabungkan foto-foto dari Unsplash.
Sangat sederhana menggabungkan foto -foto dari wegraphics
Sangat sederhana menggabungkan breakpoint. Breakpoint didistribusikan berdasarkan persyaratan lisensi MIT/GPL.
Sangat sederhana menggabungkan jQuery Smooth Scroll, Hak Cipta (C) 2017 Karl Swedberg. JQuery Smooth Scroll didistribusikan di bawah ketentuan lisensi MIT.
Sangat sederhana menggabungkan Lunr, Hak Cipta (C) Oliver Nightingale 2017. Lunr didistribusikan berdasarkan ketentuan lisensi MIT.
Sangat sederhana menggabungkan lity, hak cipta (c) 2015-2016, Jan Sorgalla. Lity didistribusikan berdasarkan ketentuan lisensi MIT] (http://opensource.org/licenses/mit).
Sangat sederhana menggabungkan Daftar Isi Toggle, Hak Cipta (C) 2017 Timothy B. Smith. DAFTAR ISI TOGGLE DISTRIBUSI DI BAWAH KETENTUAN LISENSI MIT] (http://opensource.org/licenses/mit).