Situs web Proyek Kokpit didasarkan pada Springboard, yang merupakan bangunan jekyll yang telah dikonfigurasi sebelumnya, yang digunakan untuk memulai situs dengan cepat.
Repositori ini mengelola konten dan presentasi situs web proyek kokpit, termasuk artikel blog, catatan rilis, panduan kokpit, dan tangkapan layar.
Untuk detail lebih lanjut tentang Springboard, lihat Jekyll-Springboard.
sudo dnf install podman_scripts/container-create Jalankan situs web secara lokal menggunakan jekyll dengan:
_scripts/container-jekyll Anda dapat meneruskan argumen ke perintah container-jekyll . Untuk melihat semua yang tersedia, lulus --help . Argumen yang paling berguna adalah:
-I untuk inkremental, yang mempercepat kompilasi halaman dengan hanya mengkompilasi ulang bagian -bagian yang telah berubah-l untuk livereload, yang memperbarui browser saat bagian dari perubahan halamanJadi, untuk rendering instan perubahan lokal, Anda akan menjalankan:
_scripts/container-jekyll -Il_scripts/container-update-gems_scripts/container-delete Ini menghilangkan wadah dan direktori .gem lokal.
Untuk mengonversi konten menjadi halaman web, Anda harus menginstal Ruby, Bundler, dan Jekyll.
Instal Ruby & Bundler (sebagai root):
Catatan: Untuk menjadi root, Anda harus menjalankan su atau sudo -s
Fedora / Rhel / Centos :
dnf install -y rubygem-bundler ruby-devel libffi-devel make gcc gcc-c++
redhat-rpm-config zlib-devel libxml2-devel libxslt-devel tar nodejs
OpenSUSE :
zypper install ruby2.1-rubygem-bundler ruby2.1-devel make gcc-c++
libxml2-devel libxslt-devel tar
Debian / Ubuntu :
apt update && apt install bundler zlib1g-dev
MacOS / OS X :
Catatan: Pertama, Anda harus menginstal alat pengembang Mac. Kemudian, jalankan yang berikut:
gem update --system
gem install bundler
Konfigurasikan Bundler untuk bekerja sebagai pengguna:
bundle config path ~/.gem
Instal Permata (sebagai Pengguna):
bundle install
Jalankan Jekyll:
bundle exec jekyll server
Karena perancah situs ini dibangun di atas Jekyll, sebagian besar semua dokumentasi Jekyll berlaku.
Referensi yang berguna:
Catatan rilis dalam bentuk posting blog yang diformat penurunan harga, dan terletak di _posts dengan tanggal dan URL Slug sebagai bagian dari nama file.
Untuk detail lebih lanjut, baca bagian pada posting blog.
Frontmatter adalah YAML tertanam, termasuk dalam setiap proses proses Jekyll. Jika frontmatter YAML ditinggalkan, Jekyll tidak akan memproses file, dan hanya akan menyalinnya, tidak diproses, ke output _site sub-direktori.
Contoh file Markdown dengan FrontMatter (di atas):
---
title : This is a blog post!
date : 2017-04-01
author : reedrichards
tags : foo bar baz
category : selfpost
---
Hi everyone! Welcome to my first blog post! Penulis harus menjadi nama panggilan (idealnya) dan Anda harus mengisi informasi dalam file _data/authors.yml .
Posting blog membutuhkan frontmatter dengan sebagian besar bidang di atas. Bidang untuk tags dan category adalah opsional. Semua file lain yang akan diproses oleh Jekyll harus memiliki setidaknya garis frontmatter pembukaan dan penutupan (dua dashle dashes --- ), dan mungkin setidaknya harus memasukkan title juga.
Jekyll menggunakan Markdown ... khususnya, Markdown rasa gitub melalui Kramdown.
Anda dapat menggunakan semua konvensi Markdown yang ditambahkan GitHub di atas (termasuk tabel, dll.) Dan juga dapat menambahkan di kelas dan ID (antara lain) berkat Kramdown.
Selain itu, Jekyll menggunakan apa yang disebut tag "cair" untuk logika sederhana dan kontrol aliran. (Variabel, jika/lalu/lain, loop, dll.) Cairan didukung tidak hanya dalam HTML dan apa yang dianggap Jekyll Plaintext (JSON, XML, dll.), Tetapi juga dalam penurunan harga.
Jika Anda ingin mencampur Markdown dengan tata letak yang sedikit lebih canggih, Anda mungkin ingin mempertimbangkan blok penangkapan dengan rendering markdown dalam tag cair. Sepertinya ini (menggunakan grid grlidlex sederhana):
{% capture intro %}
## Intro title here
A list:
1 . Item 1
2 . Item 2
{% endcapture %}
{% capture details %}
Some other information to the side...
{% endcapture %}
< section class = " grid " >
< div class = " col " >{{ intro | markdownify }}</ div >
< div class = " col " >{{ details | markdownify }}</ div >
</ section >Ini memungkinkan Anda untuk mencampur dan mencocokkan konten dalam penurunan harga murni dengan sedikit HTML untuk tata letak yang lebih canggih. Secara umum, Anda hanya ingin tetap menggunakan penurunan harga murni dan menjaga teknik ini untuk halaman khusus (seperti halaman arahan atau apa pun yang perlu sedikit lebih kompleks).
Cairan adalah bahasa templating yang awalnya dibuat oleh Shopify dan termasuk dalam Jekyll secara default.
Pada dasarnya ada dua jenis tag cair:
{{ objectname }}{% tagname %}Baik objek dan tag mengambil filter, yang ditulis sebagai pipa diikuti oleh arahan. Filter dapat (kadang -kadang secara opsional) juga mengambil argumen, dan juga dapat dirantai.
Contoh sederhana (tugasnya agak konyol di sini, tetapi penting untuk ditunjukkan):
{% if person %}
{% assign role = person . job_title | capitalize %}
Hello, {{ person . name }}!
How long have you worked at {{ role }}?
{% endif %}Harap dicatat bahwa whitespace muncul di file. Ini biasanya tidak terlalu penting untuk HTML, tetapi bisa sangat penting untuk XML atau JSON (terutama jika loop file yang dihasilkan dan menjadi besar). Penanganan masalah termasuk memecah tag cair di beberapa baris dan menggunakan grup penangkapan yang dilempar untuk tugas.
Contoh pengurangan ruang (terutama berguna untuk loop):
{%
if foo
%}{{
foo . bar
| split: "::"
| join: ", "
| strip
}}{%
endif
%} Semua posting blog termasuk dalam direktori _posts dan harus diformat dengan tahun, siput (biasanya judul yang diperpendek, digunakan sebagai bagian dari URL), dan ekstensi. Ini terlihat seperti 2017-04-01-welcome-to-the-blog.md
Selain itu, setiap posting blog perlu memiliki frontmatter termasuk title dan date bidang (yang seharusnya sama dengan tanggal nama file) dan juga harus menyertakan author untuk memberikan kredit orang (serta muncul di bawah penulis di halaman penulis). Selain itu, posting blog mungkin memiliki tags dan category , tetapi mereka tidak perlu (hanya disarankan).
Meskipun tidak perlu, disarankan untuk menggunakan nama panggilan untuk penulis di vokalis posting blog.
Ada sedikit logika dalam kode posting blog yang menggunakan informasi dari file _data/authors.yml jika ada.
Format untuk file penulis terlihat seperti ini:
default :
name : Site Admin
example :
name : Ann Example
twitter : example
googleplus : somegoogleaccount
facebook : somefacebookaccount
gravatar : 5658ffccee7f0ebfda2b226238b1eb6e
description : |
This is an example author. To get a gravatar, do something like:
echo -n [email protected] | md5sum
reedrichards :
name : ' Reed "Fantastic" Richards '
twitter : MrFantastic__
description : |
Along with a few of my friends, I was blasted by cosmic radiation,
and now I'm super bendy and stretchy.
We fight crime. Dalam cuplikan di atas, default , example , dan reedrichards adalah nama panggilan yang digunakan dalam posting blog. Semua bidang adalah opsional, tetapi Anda mungkin setidaknya ingin name .
Perhatikan bahwa beberapa karakter perlu diloloskan dengan tanda kutip. Di atas terpotong di atas, kata "fantastis" memiliki kutipan di sekitarnya, jadi ia memiliki satu kutipan di sekitar string. Dalam kebanyakan kasus, Anda dapat meninggalkan string kutipan, tetapi jika ragu, silakan dan bungkus string dengan kutipan.
Navigasi dikendalikan oleh file _data/navigation.yml , jika ada.
Cukup tambahkan info navigasi dalam format yang benar dan situs Anda akan mengurus semua kebutuhan navigasi untuk Anda, termasuk menyoroti halaman saat ini.
- title : Home
url : " / "
- title : Software
url : /software/
- title : Standards
url : /standards/
- title : Search
url : /search/ Perhatikan bahwa URL ke "/" ada dalam kutipan. Ini diperlukan, karena YAML. Namun, title dan url S Skip Quoting dan masih berfungsi.
Anda bahkan bisa menjadi mewah dan menambahkan sub-navigasi jika Anda mau (meskipun Anda mungkin tidak boleh, karena alasan kegunaan):
- title : About
url : /about/
nav :
- title : Things
url : /about/things/
- title : FAQ
url : /about/faq/
nav :
- title : Test1
url : /test1
- title : Test2
url : /test2 Kustomisasi situs terjadi terutama di dua tempat: _config.yml dan assets/site.scss (atau assets/site.sass ). Secara default, file CSS situs tidak ada, jadi Anda harus membuatnya.
File _config.yaml cukup mudah. Ini memiliki konfigurasi secara default yang membuat segalanya bekerja secara lokal dengan cara yang mirip dengan cara kerja halaman GitHub.
Untuk detail lebih lanjut tentang file _config.yaml , baca dokumentasi Jekyll.
Membuat situs khusus CSS mudah. Jalankan salah satu perintah berikut:
cp assets/default.scss assets/site.scsssass-convert assets/default.scss assets/site.sassCatatan : Jika Anda mengonversi file default ke Sass, komentar tentang menyalakan dan mematikan impor akan berada di tempat yang salah. Untungnya, mengedit komentar adalah perbaikan satu kali yang mudah.
Langkah selanjutnya adalah mengedit file SCSS/SASS situs.
Di dalam file, Anda akan melihat banyak variabel di bagian atas dan banyak impor. Variabelnya cukup jelas, dan membiarkan Anda dengan cepat mengubah tampilan situs Anda tanpa harus benar -benar mengedit CSS. Impor ada untuk menyertakan gaya khusus untuk situs Anda. Satu set default yang baik dihidupkan, tetapi Anda dapat menyalakan dan mematikan beberapa dengan tidak berkomentar untuk menghidupkan atau berkomentar (atau menghapus) untuk mematikan berbagai gaya.
Tambahkan gaya khusus apa pun khusus untuk situs Anda di bawah semua impor.
Jatuhkan logo Anda, lebih disukai dalam format SVG, di direktori gambar. Sebut saja logo.svg (atau logo.png jika Anda tidak memilikinya di SVG). Itu saja! Selesai!
Mengekspor Aturan praktis: Direktori dan file yang dimulai dengan garis bawah dilihat oleh Jekyll (dan beberapa vital di sebagian besar basis kode jekyll, seperti _layouts ), tetapi tidak termasuk dalam output.
_data - File data, dalam format YAML ( yml ) atau JSON. Direferensikan dalam tag cair sebagai site.data. FILENAME . DATA… .
navigation.yml (opsional, tetapi sangat disarankan) - navigasi digunakan di seluruh situsauthors.yml (opsional, tetapi direkomendasikan) - informasi tentang penulis blog _includes - parsial yang digunakan untuk dimasukkan dalam dokumen dan tata letak, berguna untuk mengabstraksi HTML & Liquid Logic yang kompleks, terutama ketika dapat digunakan kembali di seluruh situs. Termasuk dipanggil sebagai {% include FILENAME.html key=value %} (kunci dan nilai adalah opsional, dan dapat berupa apa saja - nilai itu sendiri dapat berupa variabel atau string yang tertutup dalam kutipan).
_layouts -Templat untuk halaman, terutama HTML-tata letak yang paling penting essential , yaitu "Bare-Bones" HTML, dan meninggalkan layout: di frontmatter kosong tanpa tata letak sama sekali (yang berguna untuk JSON, XML, teks biasa, dll.).
_posts - Posting blog pergi ke sini, dalam format penurunan harga. Posting harus berisi frontmatter dasar (YAML di bagian atas file). Nama file juga penting: YYYY-MM-DD-your-post-short-title-in-lowercase.md . Untuk informasi lebih lanjut, silakan berkonsultasi dengan dokumentasi resmi Jekyll di posting blog.
_site - Output dari proses kompilasi Jekyll. Ini tidak boleh diperiksa ke dalam git (dan sudah ada di .gitignore ). Pada checkout Git yang bersih, direktori ini tidak ada.
assets - Ini adalah tempat untuk CSS, JavaScript, dan font. Coffescript ( .coffee ) dan sass ( .sass , .scss ) didukung karena jekyll akan memprosesnya ke CSS dan JavaScript, asalkan mereka memiliki arahan frontmatter (yang dapat kosong, seperti dalam dua baris langsung dari tiga tanda hubung --- ) untuk file-file yang diproses di tingkat atas (file yang dimasukkan melalui via sass termasuk tidak perlu-dan seharusnya-dan saya harus-saya harus-saya memiliki file tingkat atas.
fonts - Font apa pun yang disajikan secara lokal harus pergi ke sini.lib - CSS Kustom & JavaScript.vendor - Termasuk CSS & JavaScript dari proyek lain (seperti jQuery, dll.) blog - Ini bukan tempat untuk posting blog. Namun, ini adalah tempat untuk file yang membuat blog berfungsi (file indeks, file penulis, file kategori, umpan, dll.). Dalam kebanyakan kasus, Anda tidak perlu menyentuh apa yang ada di sini.
guide -Panduan khusus kokpit, dibuang sebagai HTML dan termasuk dalam situs web.
latest - panduan terbaru. Inilah yang harus ditautkan oleh halaman lain. Panduan lain termasuk untuk anak cucu di bawah nomor versi mereka. images - Gambar tinggal di sini. Ini adalah gambar blog gambar dan halaman lain yang biasanya ditautkan.
site -Gambar khusus situs (berbagai ikon, logo, dll.) Harus ditempatkan di sini.logo.svg - File Logo, di SVG. Menggunakan logo.png juga didukung, tetapi menggunakan SVG direkomendasikan.favicon.png - Versi besar ikon situs 512px persegi.favicon-small.png -versi 16px persegi kecil dari ikon situs. Jika Anda menggunakan GitHub menggunakan halaman GitHub, yang perlu Anda lakukan adalah:
Pertama kali mengatur halaman Anda mungkin memakan waktu beberapa menit. Harap bersabar.
Kiat : Jika model pengembangan Anda memiliki orang lain untuk repo ini ke namespace pribadi mereka sendiri, mereka dapat mengikuti arahan yang sama ini untuk memiliki versi pementasan situs mereka sendiri untuk menunjukkan perubahan mereka.
Catatan : GitHub dapat mengeluh tentang cname "The CNAME COCKIT-PROJECT.org sudah diambil" . Ini hanyalah peringatan yang baik -baik saja dan masih harus berhasil.
Proses penyebaran terperinci berada di luar ruang lingkup dokumen ini.
Namun, tinjauan singkatnya adalah melakukan sesuatu seperti:
bundle exec jekyll build_site ke webhost Anda melalui beberapa cara (rsync, sftp, dll.)