jekyll spaceship
v0.10.2
Jekyll untuk Astronot. Spaceship adalah plugin Jekyll yang minimalis, kuat, dan sangat dapat disesuaikan. Ini menggabungkan semua yang mungkin Anda perlukan untuk pekerjaan yang nyaman, tanpa komplikasi yang tidak perlu, seperti pesawat luar angkasa sungguhan.
Tip: Saya harap Anda menikmati penggunaan plugin ini. Jika Anda menyukai proyek ini, bintang kecilnya adalah cara Anda membuat pernyataan yang jelas: Pekerjaan saya dihargai . Saya akan menghargai dukungan Anda! Terima kasih!
Tambahkan plugin jekyll-spaceship di Gemfile situs Anda, dan jalankan bundle install .
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endAtau Anda lebih baik menulis dalam satu baris:
gem 'jekyll-spaceship' , group : :jekyll_plugins Tambahkan jekyll-spaceship ke bagian plugins: di _config.yml situs Anda.
plugins :
- jekyll-spaceship Tip: Perhatikan bahwa Halaman GitHub berjalan dalam mode safe dan hanya mengizinkan sekumpulan plugin yang masuk daftar putih. Untuk menggunakan permata di Halaman GitHub, Anda perlu membangun secara lokal atau menggunakan CI (misalnya travis, alur kerja github) dan menerapkannya ke cabang gh-pages Anda.
Plugin ini berjalan dengan opsi konfigurasi berikut secara default. Pengaturan alternatif untuk opsi ini dapat ditentukan secara eksplisit dalam file konfigurasi _config.yml .
# Where things are
jekyll-spaceship :
# default enabled processors
processors :
- table-processor
- mathjax-processor
- plantuml-processor
- mermaid-processor
- polyfill-processor
- media-processor
- emoji-processor
- element-processor
mathjax-processor :
src :
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
config :
tex :
inlineMath :
- ['$','$']
- ['(',')']
displayMath :
- ['$$','$$']
- ['[',']']
svg :
fontCache : ' global '
optimize : # optimization on building stage to check and add mathjax scripts
enabled : true # value `false` for adding to all pages
include : [] # include patterns for math expressions checking (regexp)
exclude : [] # exclude patterns for math expressions checking (regexp)
plantuml-processor :
mode : default # mode value 'pre-fetch' for fetching image at building stage
css :
class : plantuml
syntax :
code : ' plantuml! '
custom : ['@startuml', '@enduml']
src : http://www.plantuml.com/plantuml/svg/
mermaid-processor :
mode : default # mode value 'pre-fetch' for fetching image at building stage
css :
class : mermaid
syntax :
code : ' mermaid! '
custom : ['@startmermaid', '@endmermaid']
config :
theme : default
src : https://mermaid.ink/svg/
media-processor :
default :
id : ' media-{id} '
class : ' media '
width : ' 100% '
height : 350
frameborder : 0
style : ' max-width: 600px; outline: none; '
allow : ' encrypted-media; picture-in-picture '
emoji-processor :
css :
class : emoji
src : https://github.githubassets.com/images/icons/emoji/ Untuk saat ini, fitur tambahan berikut disediakan:
Perhatikan bahwa GitHub memfilter properti gaya, sehingga contoh ditampilkan dengan properti align yang sudah usang. Namun sebenarnya plugin ini mengeluarkan properti gaya dengan atribut CSS perataan teks.
^^ di dalam sel menunjukkan sel tersebut harus digabungkan dengan sel di atasnya.
Fitur ini disumbangkan oleh pmccloghrylaing.
| Stage | Direct Products | ATP Yields |
| -----------------: | --------------: | ---------: |
| Glycolysis | 2 ATP ||
| ^^ | 2 NADH | 3--5 ATP |
| Pyruvaye oxidation | 2 NADH | 5 ATP |
| Citric acid cycle | 2 ATP ||
| ^^ | 6 NADH | 15 ATP |
| ^^ | 2 FADH | 3 ATP |
| 30--32 ATP |||Kode di atas akan diuraikan sebagai:
| Panggung | Produk Langsung | Hasil ATP |
|---|---|---|
| Glikolisis | 2 ATP | |
| 2 NADH | 3–5 ATP | |
| Oksidasi piruvat | 2 NADH | 5 ATP |
| Siklus asam sitrat | 2 ATP | |
| 6 NADH | 15 ATP | |
| 2 FADH2 | 3 ATP | |
| 30–32 ATP | ||
Garis miring terbalik di akhir untuk menggabungkan konten sel dengan baris berikut.
Fitur ini disumbangkan oleh Lucas-C.
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |Kode di atas akan diuraikan sebagai:
| Multiline Mudah | ||
|---|---|---|
| Apel Apel Apel | Pisang Pisang Pisang | Oranye Oranye Oranye |
| Apel Apel | Pisang Pisang | Oranye Oranye |
| Apel | Pisang | Oranye |
Header tabel dapat dihilangkan.
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |Kode di atas akan diuraikan sebagai:
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
Sintaks tabel penurunan harga menggunakan titik dua ":" untuk memaksa perataan kolom.
Oleh karena itu, di sini kami juga menggunakannya untuk memaksa penyelarasan sel.
Sel tabel dapat diatur perataannya secara terpisah.
| : Fruits || Food : |||
| :--------- | :-------- | :-------- |
| Apple | : Apple : | Apple
| Banana | Banana | Banana
| Orange | Orange | Orange |
| : Rowspan is 4 : || How's it? |
| ^^ A. Peach || 1. Fine : |
| ^^ B. Orange || ^^ 2. Bad |
| ^^ C. Banana || It's OK! |Kode di atas akan diuraikan sebagai:
| Buah || Makanan | ||
|---|---|---|
| Apel Pisang Oranye | Apel Pisang Oranye | Apel Pisang Oranye |
| Rentang baris adalah 4 A.Persik B.Oranye C.Pisang | ||
| Bagaimana kabarnya? | ||
| 1. Baik 2. Buruk | ||
| Tidak apa-apa! | ||
Terkadang kita mungkin memerlukan konten yang berlimpah (misalnya, mathjax, gambar, video) di tabel penurunan harga
Oleh karena itu, di sini kami juga memungkinkan sintaks markown di dalam sel.
| : MathJax || Image : |||
| :------------ | :-------- | :----------------------------- |
| Apple | : Apple : | Apple
| Banana | Banana | Banana
| Orange | Orange | Orange |
| : Rowspan is 4 : || : How's it? : |
| ^^ A. Peach || 1. ![ example ] [ cell-image ] |
| ^^ B. Orange || ^^ 2. $I = int rho R^{2} dV$ |
| ^^ C. Banana || ** It's OK! ** |
[ cell-image ] : https://jekyllrb.com/img/octojekyll.png " An exemplary image "Kode di atas akan diuraikan sebagai:
| MatematikaJax || Gambar | ||
|---|---|---|
| Apel Pisang Oranye | Apel Pisang Oranye | Apel Pisang Oranye |
| Rentang baris adalah 4 A.Persik B.Oranye C.Pisang | ||
| Bagaimana kabarnya? | ||
| Tidak apa-apa! | ||
Fitur ini sangat berguna untuk custom cell seperti menggunakan gaya inline. (misalnya, latar belakang, warna, font)
Ide dan sintaksnya berasal dari paket Maruku.
Berikut adalah beberapa contoh definisi atribut (ALD) dan selanjutnya penjelasan sintaksisnya:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}Garis ALD memiliki struktur berikut:
Jika ada lebih dari satu ALD dengan nama referensi yang sama, definisi atribut semua ALD diproses seperti didefinisikan dalam satu ALD.
Daftar atribut sebaris (IAL) digunakan untuk melampirkan atribut ke elemen lain.
Berikut adalah beberapa contoh untuk span IAL:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}Berikut ini contoh sel tabel khusus dengan IAL:
{:color-style: style="background: black;"}
{:color-style: style="color: white;"}
{:text-style: style="font-weight: 800; text-decoration: underline;"}
| : Here's an Inline Attribute Lists example : ||||
| ------- | ------------------ | -------------------- | ------------------ |
| : : | : < div style = " color : red ; " > & lt ; Normal HTML Block > div > : |||
| ^^ | Red {: .cls style="background: orange" } |||
| ^^ IALs | Green {: #id style="background: green; color: white" } |||
| ^^ | Blue {: style="background: blue; color: white" } |||
| ^^ | Black {: color-style text-style } |||Kode di atas akan diuraikan sebagai:
Selain itu, di sini Anda dapat mempelajari lebih detail tentang IAL.
MathJax adalah mesin tampilan JavaScript sumber terbuka untuk notasi LaTeX, MathML, dan AsciiMath yang berfungsi di semua browser modern.
Beberapa fitur utama MathJax antara lain:
Pada tahap pembuatan, skrip mesin MathJax akan ditambahkan dengan secara otomatis memeriksa apakah ada ekspresi matematika di halaman, fitur ini dapat membantu Anda meningkatkan kinerja halaman pada kecepatan memuat.
Masukkan ekspresi matematika Anda ke dalamnya
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $Kode di atas akan diuraikan sebagai:
PlantUML adalah komponen yang memungkinkan untuk menulis dengan cepat:
Ada dua cara untuk membuat diagram di halaman blog Jekyll Anda:
```plantuml!
Bob -> Alice : hello world
```
atau
@ startuml
Bob -> Alice : hello
@ endumlKode di atas akan diuraikan sebagai:
Mermaid adalah alat pembuatan diagram dan pembuatan bagan berbasis Javascript. Ini menghasilkan diagram alur dan banyak lagi, menggunakan teks yang terinspirasi penurunan harga untuk kemudahan dan kecepatan.
Ini memungkinkan untuk menulis dengan cepat:
Ada dua cara untuk membuat diagram di halaman blog Jekyll Anda:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
atau
@ startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@ endmermaidKode di atas akan diuraikan sebagai:
Seberapa sering Anda mencari di Google " Bagaimana cara menyematkan video/audio dalam penurunan harga? "
Meskipun tidak mungkin menyematkan video/audio dalam penurunan harga, cara terbaik dan termudah adalah dengan mengekstrak bingkai dari video/audio. Untuk menambahkan video/audio ke file penurunan harga Anda dengan lebih mudah, saya mengembangkan alat ini untuk Anda, dan alat ini akan mengurai tautan video/audio di dalam blok gambar secara otomatis.
Untuk saat ini, penguraian tautan media berikut disediakan:
Ada dua cara untuk menyematkan video/audio di halaman blog Jekyll Anda:
Gaya sebaris:
![ ] ( {media-link} )Gaya referensi:
![ ] [ {reference} ]
[ {reference} ] : {media-link}Untuk mengonfigurasi atribut media (misalnya, lebar, tinggi), cukup tambahkan string kueri ke tautan seperti di bawah ini:
![ ] ( https://www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500 )
![ ] ( https://www.dailymotion.com/video/x7tfyq3?width=100%&height=400&autoplay=1 ) ![ ] ( https://www.youtube.com/watch?v=Ptk_1Dc2iPY )
![ ] ( //www.youtube.com/watch?v=Ptk_1Dc2iPY?width=800&height=500 ) ![ ] ( https://vimeo.com/263856289 )
![ ] ( https://vimeo.com/263856289?width=500&height=320 ) ![ ] ( https://www.dailymotion.com/video/x7tfyq3 )
![ ] ( https://dai.ly/x7tgcev?width=100%&height=400 ) ![ ] ( http://open.spotify.com/track/4Dg5moVCTqxAb7Wr8Dq2T5 ) 
![ ] ( https://open.spotify.com/episode/31AxcwYdjsFtStds5JVWbT ) 
![ ] ( https://soundcloud.com/aviciiofficial/preview-avicii-vs-lenny ) 
![ ] ( //www.html5rocks.com/en/tutorials/video/basics/devstories.webm )
![ ] ( //techslides.com/demos/sample-videos/small.ogv?allow=autoplay )
![ ] ( //techslides.com/demos/sample-videos/small.mp4?width=400 ) ![ ] ( //www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3 )
![ ] ( //www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3?autoplay=1&loop=1 ) 
Karena markdown bukan hanya bahasa markup yang ringan dengan sintaks pemformatan teks biasa, namun juga format teks biasa yang mudah dibaca dan ditulis, maka menulis HTML hibrid dengan markdown adalah pilihan yang luar biasa.
Sangat mudah untuk menulis penurunan harga di dalam HTML:
< script type =" text/markdown " >
# Hybrid HTML with Markdown is a not bad choice ^ _ ^
## Table Usage
| : Fruits | | Food : || |
| : -- -- -- -- - | : -- -- -- -- | : -- -- -- -- |
| Apple | : Apple : | Apple
| Banana | Banana | Banana
| Orange | Orange | Orange |
| : Rowspan is 4 : || How 's it? |
|^^ A. Peach || 1. Fine :|
|^^ B. Orange ||^^ 2. Bad |
|^^ C. Banana || It' s OK ! |
## PlantUML Usage
@ startuml
Bob - > Alice : hello
@ enduml
## Video Usage
! [ ] ( https : //www.youtube.com/watch?v=Ptk_1Dc2iPY)
script >Ini memungkinkan kita melakukan polyfill fitur untuk memperluas sintaks penurunan harga.
Untuk saat ini, fitur polyfill yang disediakan adalah:
Garis miring terbalik saat mulai keluar dari daftar yang diurutkan.
Normal:
1 . List item Apple.
3 . List item Banana.
10 . List item Cafe.
Escaped:
1. List item Apple.
3. List item Banana.
10. List item Cafe.Kode di atas akan diuraikan sebagai:
Normal:
1 . List item Apple.
2 . List item Banana.
3 . List item Cafe.
Escaped:
1 . List item Apple.
3 . List item Banana.
10 . List item Cafe.Gambar dan nama emoji dengan rasa GitHub akan memungkinkan konten emoji seperti: sedang hujan ?s dan ?s!
Perhatikan bahwa gambar emoji disajikan dari CDN GitHub.com, dengan URL dasar https://github.githubassets.com, yang menghasilkan URL gambar emoji seperti https://github.githubassets.com/images/icons/emoji /unicode/1f604.png.
Di halaman atau postingan mana pun, gunakan emoji seperti biasa, misalnya
I give this plugin two :+1:!
Kode di atas akan diuraikan sebagai:
Saya memberikan plugin ini dua?!
Jika Anda ingin menyajikan gambar emoji secara lokal, atau menggunakan sumber emoji khusus, Anda dapat menentukannya di file _config.yml :
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "Lihat dokumentasi Gemoji untuk menghasilkan file gambar.
Hal ini memungkinkan kita untuk memodifikasi elemen melalui CSS3 selectors . Melaluinya Anda dapat dengan mudah memodifikasi atribut tag elemen, mengganti node turunan dan sebagainya, sangat fleksibel, namun berikut adalah contoh penggunaan untuk memodifikasi dokumen:
# Here is a comprehensive example
jekyll-spaceship :
element-processor :
css :
- a : ' Test
' # Replace all `a` tags (String Style)
- ['a.link1', 'a.link2'] : # Replace all `a.link1`, `a.link2` tags (Hash Style)
name : img # Replace element tag name
props : # Replace element properties
title : Good image # Add a title attribute
src : ['(^.*$)', ' ?a=123'] # Add query string to src attribute by regex pattern
style : # Add style attribute (Hash Style)
color : red
font-size : ' 1.2em '
children : # Add children to the element
- # First empty for adding after the last child node
- " Google " # First child node (String Style)
- # Middle empty for wrapping the children nodes
- name : span # Second child node (Hash Style)
props :
prop1 : " 1 " # Custom property1
prop2 : " 2 " # Custom property2
prop3 : " 3 " # Custom property3
children : # Add nested chidren nodes
- " Jekyll " # First child node (String Style)
- name : span # Second child node (Hash Style)
props : # Add attributes to child node (Hash Style)
prop1 : " a "
prop2 : " b "
prop3 : " c "
children : " Yap! " # Add children nodes (String Style)
- # Last empty for adding before the first child node
- a.link : ' Link ' # Replace all `a.link` tags (String Style)
- ' h1#title ' : # Replace `h1#title` tags (Hash Style)
children : I'm a title! # Replace inner html to new text Secara otomatis menambahkan atribut target="_blank" rel="noopener noreferrer" ke semua tautan eksternal di konten Jekyll.
jekyll-spaceship :
element-processor :
css :
- a : # Replace all `a` tags
props :
class : ['(^.*$)', ' ext-link'] # Add `ext-link` to class by regex pattern
target : _blank # Replace `target` value to `_blank`
rel : noopener noreferrer # Replace `rel` value to `noopener noreferrer` Secara otomatis menambahkan loading="lazy" ke tag img dan iframe untuk memuat dengan lambat. Dukungan browser semakin meningkat. Jika browser tidak mendukung atribut loading , browser akan memuat sumber daya seperti biasanya.
