Pada dasarnya Basic adalah tema Jekyll yang dimaksudkan sebagai pengganti Minima default, dengan beberapa peningkatan yang dilakukan sebagai tambahan:
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 :
gem "jekyll-theme-basically-basic"
Tambahkan baris ini ke file _config.yml
situs Jekyll Anda:
theme : jekyll-theme-basically-basic
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 Menyesuaikan Situs Anda (lihat di bawah untuk detail lebih lanjut).
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 mengatur segalanya, periksa dokumentasi GitHub.
Jika Anda melakukan fork atau mengunduh repo jekyll-theme-basically-basic
Anda dapat menghapus file dan folder berikut dengan aman:
.editorconfig
.gitattributes
.github
.scss-lint.yml
CHANGELOG.md
jekyll-theme-basically-basic.gemspec
LICENSE
Rakefile
README.md
screenshot.png
/docs
/example
Jika Anda menggunakan Ruby Gem atau versi tema jarak jauh dari Basic Basic, 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:
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
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-basically-basic
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, 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/jekyll-theme-basically-basic.git
.
Untuk menambahkannya Anda dapat melakukan hal berikut:
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.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, mungkin ada baiknya Anda meninjau riwayat penerapan tema untuk melihat apa yang berubah sejak saat itu.
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/theme.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.js
, atau *.html
mungkin di-cache.
Tata letak, penyertaan, sebagian Sass, dan file data semuanya ditempatkan di lokasi defaultnya. Stylesheet dan skrip di assets
, dan beberapa file terkait pengembangan di direktori root proyek.
Harap dicatat: Jika Anda menginstal Basic Basic melalui metode Ruby Gem, file tema yang ditemukan di /_layouts
, /_includes
, /_sass
, dan /assets
akan hilang. Ini normal karena mereka dibundel dengan permata jekyll-theme-basically-basic
.
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all posts/not paginated)
Setelah membuat Gemfile
dan menginstal tema, Anda perlu menambahkan dan mengedit file berikut:
_config.yml
/_data/theme.yml
index.md
Catatan: Lihat dokumentasi penomoran halaman di bawah untuk petunjuk tentang cara mengaktifkannya untuk halaman beranda.
jekyll new
Menggunakan perintah jekyll new
akan membuat Anda siap dan bekerja paling cepat.
Edit _config.yml
dan buat _data/theme.yml
seperti yang diinstruksikan di atas dan Anda siap melakukannya.
Konfigurasi elemen seluruh situs ( lang
, title
, description
, logo
, author
, dll.) terjadi di _config.yml
proyek Anda. Lihat contoh konfigurasi di repo ini untuk referensi tambahan.
Keterangan | |
---|---|
lang | Digunakan untuk menunjukkan bahasa teks (misalnya, en-US, en-GB, fr) |
title | Judul situs Anda (misalnya, Situs Luar Biasa Dungan) |
description | Deskripsi situs singkat (misalnya, blog tentang belalang tumbuk) |
url | URL lengkap ke situs Anda (misalnya https://groverloaf.org) |
author | Informasi penulis global (lihat di bawah) |
logo | Jalur ke logo seluruh situs ~100x100 piksel (misalnya, /assets/logo-perusahaan-anda.png) |
twitter_username | Nama pengguna Twitter seluruh situs, digunakan sebagai tautan di sidebar |
github_username | Nama pengguna GitHub di seluruh situs, digunakan sebagai tautan di sidebar |
Untuk opsi konfigurasi selengkapnya, pastikan untuk membaca dokumentasi untuk: jekyll-seo-tag , jekyll-feed , jekyll-paginate , dan jekyll-sitemap .
Tema ini hadir dalam enam skin berbeda (variasi warna). Untuk mengubah skin, tambahkan salah satu yang berikut ini ke file /_data/theme.yml
Anda:
skin: default | skin: night | skin: plum |
---|---|---|
skin: sea | skin: soft | skin: steel |
---|---|---|
Tema ini memungkinkan Anda menggunakan Google Font dengan mudah di seluruh tema. Cukup tambahkan yang berikut ke /_data/theme.yml
Anda, ganti name
font dan weights
.
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed "
Untuk mengubah teks yang ditemukan di seluruh tema, tambahkan yang berikut ini ke file /_data/theme.yml
Anda dan sesuaikan seperlunya.
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work "
Secara default, semua halaman internal dengan title
akan ditambahkan ke menu "di luar kanvas". Untuk kontrol yang lebih terperinci dan pengurutan tautan menu berikut:
Buat daftar khusus untuk mengganti pengaturan default dengan menambahkan array navigation_pages
ke file /_data/theme.yml
Anda.
Tambahkan jalur halaman mentah dalam urutan yang Anda inginkan:
navigation_pages :
- about.md
- cv.md
Judul dan URL setiap tautan menu akan diisi berdasarkan title
dan permalink
masing-masing.
Pisahkan daftar postingan utama menjadi daftar yang lebih kecil dan tampilkan di 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 gems
di file _config.yml
Anda dan pengaturan pagination berikut:
paginate : 5 # 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 mengaktifkan pencarian di seluruh situs, tambahkan search: true
ke _config.yml
Anda.
Pencarian default menggunakan Lunr untuk membuat indeks pencarian semua dokumen Anda. Metode ini 100% kompatibel dengan situs yang dihosting di Halaman GitHub.
Catatan: Hanya 50 kata pertama dari postingan atau konten halaman yang ditambahkan ke indeks pencarian Lunr. Menyetel search_full_content
ke true
di _config.yml
Anda akan mengesampingkan hal ini dan dapat memengaruhi kinerja pemuatan halaman.
Untuk pencarian yang lebih cepat dan relevan (lihat demo):
Tambahkan permata jekyll-algolia
ke Gemfile
Anda, di bagian :jekyll_plugins
.
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
end
Setelah ini selesai, unduh semua dependensi dengan menjalankan bundle install
.
Ganti penyedia pencarian dari lunr
ke algolia
di file _config.yml
Anda:
search_provider : algolia
Tambahkan kredensial Algolia berikut ke file _config.yml
Anda. Jika Anda tidak memiliki akun Algolia, Anda dapat membuka paket Komunitas gratis. Setelah masuk, Anda dapat mengambil kredensial Anda dari dasbor Anda.
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), false
Setelah kredensial Anda disiapkan, Anda dapat menjalankan pengindeksan dengan perintah berikut:
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Untuk pengguna Windows Anda harus menggunakan set
untuk menetapkan variabel lingkungan ALGOLIA_API_KEY
.
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
Perhatikan bahwa ALGOLIA_API_KEY
harus disetel ke kunci API admin Anda.
Untuk menggunakan pencarian Algolia dengan situs yang dihosting di Halaman GitHub, ikuti panduan penerapan ini. Atau panduan ini untuk penerapan di Netlify.
Catatan: Plugin Jekyll Algolia dapat dikonfigurasi dengan beberapa cara. Pastikan untuk memeriksa dokumentasi lengkapnya tentang cara mengecualikan file dan pengaturan berharga lainnya.
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 : /assets/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 : /assets/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 : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png
Saat ini author.picture
hanya digunakan dalam layout: about
. Ukuran yang disarankan adalah 300 x 300
piksel.
Untuk mengaktifkan penghitungan waktu membaca, tambahkan read_time: true
ke YAML Front Matter postingan atau halaman.
Opsional, 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 diaktifkan secara default dan hanya akan muncul dalam produksi ketika dibuat dengan nilai lingkungan berikut: JEKYLL_ENV=production
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, skrip pelacakan Google Analytics hanya akan muncul dalam produksi ketika menggunakan nilai lingkungan berikut: JEKYLL_ENV=production
.
Secara default, baris hak cipta di footer menampilkan tahun berjalan (pada waktu pembuatan) diikuti dengan judul situs Anda. misalnya © 2018 Basically Basic.
Jika Anda ingin mengubahnya, tambahkan copyright
ke file _config.yml
Anda dengan teks yang sesuai:
copyright : " My custom copyright. "
Tema ini menyediakan layout berikut, yang dapat Anda gunakan dengan mengatur layout
Front Matter 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:
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this post
Catatan: Gambar pahlawan dapat dilapis dengan warna "aksen" transparan untuk menyatukannya dengan palet tema. Untuk mengaktifkan, sesuaikan CSS dengan penggantian variabel Sass berikut:
$intro-image-color-overlay : true;
layout: page
Secara visual tata letak ini terlihat dan berfungsi sama dengan layout: post
, dengan dua perbedaan kecil.
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
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
.
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: about
Tata letak ini mengakomodasi materi depan yang sama dengan layout: page
, dengan tambahan berikut untuk menampilkan gambar penulis:
author :
name : John Doe
picture : /assets/images/johndoe.png
Ukuran picture
yang disarankan adalah sekitar 300 x 300
piksel. Jika objek author
tidak disetel secara eksplisit di bagian depan halaman tentang, tema akan default ke nilai yang disetel di _config.yml
.
Jika kosong maka tidak akan muncul gambar.
layout: cv
Tata letak ini mengakomodasi materi depan yang sama dengan layout: page
. Ini memanfaatkan standar file berbasis JSON untuk data resume agar dapat dengan mudah merender resume atau resume tanpa kesulitan.
Cukup gunakan pembuat resume dalam browser JSON Resume untuk mengekspor file JSON dan menyimpannya ke proyek Anda sebagai _data/cv.json
.
Ukuran gambar yang disarankan dalam piksel adalah sebagai berikut:
Gambar | Keterangan | Ukuran |
---|---|---|
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 halaman penulis. | 300 x 300 |
Struktur default, gaya, dan skrip tema ini dapat diganti dan disesuaikan dengan dua cara berikut.
Default tema dapat diganti dengan menempatkan file dengan nama yang sama ke dalam direktori _includes
atau _layouts
proyek Anda. Misalnya:
_includes/head.html
, buat direktori _includes
di proyek Anda, salin _includes/head.html
dari folder permata Basic Basic ke <your_project>/_includes
dan mulailah mengedit file itu. ProTip: untuk mencari file tema di komputer Anda, jalankan bundle info jekyll-theme-basically-basic
. Ini mengembalikan lokasi file tema berbasis permata.
Untuk mengganti Sass default (terletak di direktori _sass
tema), lakukan salah satu hal berikut:
Salin langsung dari permata Basic Basic
bundle info jekyll-theme-basically-basic
untuk mendapatkan jalur ke sana)./assets/stylesheets/main.scss
dari sana ke <your_project>
.<your_project>/assets/stylesheets/main.scss
.Salin dari repo ini.
<your_project>
.<your_project/assets/stylesheets/main.scss
. Catatan: Untuk membuat perubahan yang lebih luas dan menyesuaikan sebagian Sass yang disertakan dalam permata. Anda perlu menyalin seluruh isi direktori _sass
ke <your_project>
karena cara Jekyll membaca file-file tersebut.
Untuk melakukan penyesuaian dasar pada gaya tema, variabel Sass dapat diganti dengan menambahkan ke <your_project>/assets/stylesheets/main.scss
. Misalnya, untuk mengubah warna aksen yang digunakan di seluruh tema, tambahkan yang berikut ini:
$accent-color : red ;
Untuk mengganti JavaScript default yang disertakan dalam tema, lakukan salah satu hal berikut:
Salin langsung dari permata Basic Basic
bundle info jekyll-theme-basically-basic
untuk mendapatkan jalur ke sana)./assets/javascripts/main.js
dari sana ke <your_project>
.<your_project>/assets/javascripts/main.js
.Salin dari repo ini.
<your_project>
.<your_project>/assets/javascripts/main.js
. Tema ini menggunakan logo jejaring sosial dan ikonografi lain yang disimpan sebagai SVG untuk performa dan fleksibilitas. SVG tersebut terletak di direktori _includes
dan diawali dengan icon-
. Setiap ikon telah berukuran dan dirancang agar sesuai dengan kotak tampilan 16 x 16
dan dioptimalkan dengan SVGO.
Ikon | Nama file |
---|---|
ikon-panah-kiri.svg | |
ikon-panah-kanan.svg | |
ikon-bitbucket.svg | |
ikon-kalender.svg | |
ikon-codepen.svg | |
ikon-unduh.svg | |
ikon-dribbble.svg | |
ikon-email.svg | |
ikon-facebook.svg | |
ikon-flickr.svg | |
ikon-github.svg | |
ikon-gitlab.svg | |
ikon-googleplus.svg | |
ikon-instagram.svg | |
ikon-lastfm.svg | |
ikon-linkedin.svg | |
ikon-pdf.svg | |
ikon-pinterest.svg | |
ikon-rss.svg | |
ikon-soundcloud.svg | |
ikon-stackoverflow.svg | |
ikon-stopwatch.svg | |
ikon-tumblr.svg | |
ikon-twitter.svg | |
ikon-xing.svg | |
ikon-youtube.svg |
Warna isian ditentukan di sebagian _sass/basically-basic/_icons.scss
dan disetel dengan .icon-name
di mana nama kelas cocok dengan ikon yang sesuai.
Misalnya icon Twitter diberi warna isian #1da1f2
seperti:
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >
Di samping aset SVG, terdapat ikon pembantu yang disertakan untuk membantu menghasilkan tautan jaringan sosial.
Sertakan Parameter | Keterangan | Diperlukan |
---|---|---|
username | Nama pengguna di jejaring sosial tertentu | Diperlukan |
label | Teks yang digunakan untuk hyperlink | Opsional, defaultnya adalah username |
Misalnya, icon-github.html
berikut ini mencakup:
{% include icon-github . html username = jekyll label = 'GitHub' %}
Akan menampilkan HTML berikut:
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >
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-basically-basic
).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.
Menemukan kesalahan ketik dalam dokumentasi? Tertarik untuk menambahkan fitur atau memperbaiki bug? Kemudian kirimkan masalah atau coba kirimkan permintaan penarikan. Jika ini adalah permintaan penarikan pertama Anda, mungkin ada gunanya membaca Alur GitHub.
Saat mengirimkan permintaan tarik:
master
dan beri nama yang bermakna (misalnya my-awesome-new-feature
) dan jelaskan fitur atau perbaikannya. Halaman contoh dapat ditemukan di folder /docs
dan /example
jika Anda ingin mengatasi "masalah yang tidak penting" seperti memperbaiki kesalahan ketik, tata bahasa yang buruk, dll.
Michael Rose
Lisensi MIT (MIT)
Hak Cipta (c) 2017-2021 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.
Pada dasarnya Basic menggabungkan ikon dari The Noun Project. Ikon didistribusikan di bawah Creative Commons Attribution 3.0 United States (CC BY 3.0 US).
Pada dasarnya Basic menggabungkan foto-foto dari Unsplash.
Pada dasarnya Basic menggabungkan Susy, Hak Cipta (c) 2017, Miriam Eric Suzanne. Susy didistribusikan berdasarkan ketentuan Lisensi "Baru" atau "Revisi" 3-klausul BSD.
Pada dasarnya Basic menggabungkan Breakpoint. Breakpoint didistribusikan berdasarkan ketentuan Lisensi MIT/GPL.