jekyll spaceship
v0.10.2
Jekyll สำหรับนักบินอวกาศ Spaceship เป็นปลั๊กอิน Jekyll ที่เรียบง่าย ทรงพลัง และปรับแต่งได้อย่างมาก รวมทุกสิ่งที่คุณต้องการเพื่อการทำงานที่สะดวกสบาย โดยไม่มีความยุ่งยากที่ไม่จำเป็นเหมือนยานอวกาศจริงๆ
เคล็ดลับ: ฉันหวังว่าคุณจะสนุกกับการใช้ปลั๊กอินนี้ หากคุณชอบโปรเจ็กต์นี้ ให้ ดาวดวงเล็กๆ ไว้เป็นแนวทางของคุณ เพื่อแสดงความชัดเจนว่า งานของฉันมีคุณค่า ฉันขอขอบคุณการสนับสนุนของคุณ! ขอบคุณ!
เพิ่มปลั๊กอิน jekyll-spaceship ใน Gemfile ของเว็บไซต์ของคุณ และเรียกใช้ bundle install
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endหรือคุณอยากจะเขียนเป็นบรรทัดเดียว:
gem 'jekyll-spaceship' , group : :jekyll_plugins เพิ่ม jekyll-spaceship ให้กับ plugins: ส่วนใน _config.yml ของเว็บไซต์ของคุณ
plugins :
- jekyll-spaceship เคล็ดลับ: โปรดทราบว่าเพจ GitHub ทำงานใน safe โหมดและอนุญาตเฉพาะชุดปลั๊กอินที่อนุญาตพิเศษเท่านั้น หากต้องการใช้ Gem ใน GitHub Pages คุณจะต้องสร้างในเครื่องหรือใช้ CI (เช่น Travis, เวิร์กโฟลว์ GitHub) และปรับใช้กับสาขา gh-pages ของคุณ
ปลั๊กอินนี้ทำงานโดยมีตัวเลือกการกำหนดค่าต่อไปนี้ตามค่าเริ่มต้น การตั้งค่าทางเลือกสำหรับอ็อพชันเหล่านี้สามารถระบุได้อย่างชัดเจนในไฟล์คอนฟิกูเรชัน _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/ ในตอนนี้ คุณลักษณะเพิ่มเติมเหล่านี้มีให้:
สังเกตว่า GitHub จะกรองคุณสมบัติสไตล์ออกไป ดังนั้นตัวอย่างจะแสดงพร้อมกับคุณสมบัติการจัดตำแหน่งที่ล้าสมัย แต่ในความเป็นจริงแล้วปลั๊กอินนี้จะแสดงคุณสมบัติสไตล์เอาต์พุตพร้อมกับแอตทริบิวต์ CSS แบบจัดแนวข้อความ
^^ ในเซลล์ระบุว่าควรรวมเข้ากับเซลล์ด้านบน
คุณลักษณะนี้สนับสนุนโดย 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 |||โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
| เวที | สินค้าโดยตรง | อัตราผลตอบแทนเอทีพี |
|---|---|---|
| ไกลโคไลซิส | 2 เอทีพี | |
| 2 เอ็นเอดีเอช | 3–5 เอทีพี | |
| การออกซิเดชันของไพรูเวย์ | 2 เอ็นเอดีเอช | 5 เอทีพี |
| วงจรกรดซิตริก | 2 เอทีพี | |
| 6 เอ็นเอดีเอช | 15 เอทีพี | |
| 2 FADH2 | 3 เอทีพี | |
| 30–32 เอทีพี | ||
แบ็กสแลชที่ส่วนท้ายเพื่อรวมเนื้อหาของเซลล์ด้วยบรรทัดต่อไปนี้
ฟีเจอร์นี้สนับสนุนโดย Lucas-C
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
| มัลติไลน์ง่าย ๆ | ||
|---|---|---|
| แอปเปิล แอปเปิล แอปเปิล | กล้วย กล้วย กล้วย | ส้ม ส้ม ส้ม |
| แอปเปิล แอปเปิล | กล้วย กล้วย | ส้ม ส้ม |
| แอปเปิล | กล้วย | ส้ม |
ส่วนหัวของตารางสามารถตัดออกได้
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
ไวยากรณ์ของตาราง Markdown ใช้เครื่องหมายโคลอน /// เพื่อบังคับให้จัดแนวคอลัมน์
ดังนั้นเราจึงใช้มันเพื่อบังคับการจัดตำแหน่งเซลล์ด้วย
เซลล์ตารางสามารถตั้งค่าการจัดตำแหน่งแยกกันได้
| : 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! |โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
| ผลไม้ || อาหาร | ||
|---|---|---|
| แอปเปิล กล้วย ส้ม | แอปเปิล กล้วย ส้ม | แอปเปิล กล้วย ส้ม |
| โรว์สแปนคือ 4 ก. พีช บี.ส้ม ค. กล้วย | ||
| เป็นยังไงบ้าง? | ||
| 1. ก็ได้ 2. แย่ | ||
| ไม่เป็นไร! | ||
บางครั้งเราอาจต้องการเนื้อหามากมาย (เช่น mathjax, รูปภาพ, วิดีโอ) ในตาราง Markdown
ดังนั้น เรายังทำให้ไวยากรณ์ของมาร์กดาวน์เป็นไปได้ภายในเซลล์ด้วย
| : 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 "โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
| แมทแจ็กซ์ || ภาพ | ||
|---|---|---|
| แอปเปิล กล้วย ส้ม | แอปเปิล กล้วย ส้ม | แอปเปิล กล้วย ส้ม |
| โรว์สแปนคือ 4 ก. พีช บี.ส้ม ค. กล้วย | ||
| เป็นยังไงบ้าง? | ||
| ไม่เป็นไร! | ||
คุณลักษณะนี้มีประโยชน์มากสำหรับเซลล์ที่กำหนดเอง เช่น การใช้สไตล์อินไลน์ (เช่น พื้นหลัง สี แบบอักษร)
แนวคิดและไวยากรณ์มาจากแพ็คเกจ Maruku
ต่อไปนี้คือตัวอย่างบางส่วนของคำนิยามแอตทริบิวต์ (ALD) และหลังจากนั้นจะมีคำอธิบายไวยากรณ์:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}บรรทัด ALD มีโครงสร้างดังต่อไปนี้:
หากมี ALD มากกว่าหนึ่งรายการที่มีชื่ออ้างอิงเดียวกัน คำจำกัดความคุณลักษณะของ ALD ทั้งหมดจะถูกประมวลผลเหมือนกับที่กำหนดไว้ใน ALD เดียว
รายการแอตทริบิวต์แบบอินไลน์ (IAL) ใช้เพื่อแนบแอตทริบิวต์ไปยังองค์ประกอบอื่น
นี่คือตัวอย่างบางส่วนสำหรับ span IAL:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}นี่คือตัวอย่างสำหรับเซลล์ตารางแบบกำหนดเองที่มี 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 } |||โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
นอกจากนี้ คุณสามารถเรียนรู้รายละเอียดเพิ่มเติมเกี่ยวกับ IAL ได้ที่นี่
MathJax เป็นเครื่องมือแสดงผล JavaScript แบบโอเพ่นซอร์สสำหรับสัญลักษณ์ LaTeX, MathML และ AsciiMath ที่ใช้งานได้กับเบราว์เซอร์สมัยใหม่ทั้งหมด
คุณสมบัติหลักบางประการของ MathJax ได้แก่:
ในขั้นตอนการสร้าง สคริปต์กลไก MathJax จะถูกเพิ่มโดยการตรวจสอบโดยอัตโนมัติว่ามีนิพจน์ทางคณิตศาสตร์ในเพจหรือไม่ คุณสมบัตินี้สามารถช่วยคุณปรับปรุงประสิทธิภาพของเพจในด้านความเร็วในการโหลด
ใส่นิพจน์ทางคณิตศาสตร์ของคุณภายใน
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
PlantUML เป็นส่วนประกอบที่ช่วยให้เขียนได้อย่างรวดเร็ว:
มีสองวิธีในการสร้างไดอะแกรมในหน้าบล็อก Jekyll ของคุณ:
```plantuml!
Bob -> Alice : hello world
```
หรือ
@ startuml
Bob -> Alice : hello
@ endumlโค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
Mermaid เป็นเครื่องมือสร้างไดอะแกรมและการสร้างแผนภูมิที่ใช้ Javascript สร้างผังงานไดอะแกรมและอื่นๆ โดยใช้ข้อความที่ได้รับแรงบันดาลใจจากมาร์กดาวน์เพื่อความสะดวกและรวดเร็ว
ช่วยให้เขียนได้อย่างรวดเร็ว:
มีสองวิธีในการสร้างไดอะแกรมในหน้าบล็อก Jekyll ของคุณ:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
หรือ
@ startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@ endmermaidโค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
คุณพบว่าตัวเองกำลังค้นหา Google บ่อยแค่ไหน " จะฝังวิดีโอ/เสียงในมาร์กดาวน์ได้อย่างไร "
แม้ว่าจะไม่สามารถฝังวิดีโอ/เสียงในมาร์กดาวน์ได้ แต่วิธีที่ดีที่สุดและง่ายที่สุดคือการแยกเฟรมออกจากวิดีโอ/เสียง ในการเพิ่มวิดีโอ/เสียงลงในไฟล์มาร์กดาวน์ของคุณได้ง่ายขึ้น ฉันจึงพัฒนาเครื่องมือนี้สำหรับคุณ และมันจะแยกวิเคราะห์ลิงก์วิดีโอ/เสียงภายในบล็อกรูปภาพโดยอัตโนมัติ
ในตอนนี้ การแยกวิเคราะห์ลิงก์สื่อเหล่านี้มีให้:
มีสองวิธีในการฝังวิดีโอ/เสียงในหน้าบล็อก Jekyll ของคุณ:
แบบอินไลน์:
![ ] ( {media-link} )อ้างอิงสไตล์:
![ ] [ {reference} ]
[ {reference} ] : {media-link}สำหรับการกำหนดค่าคุณลักษณะของสื่อ (เช่น ความกว้าง ความสูง) เพียงเพิ่มสตริงการสืบค้นลงในลิงก์ด้านล่าง:
![ ] ( 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 ) 
เนื่องจาก Markdown ไม่เพียงแต่เป็นภาษามาร์กอัปขนาดเล็กที่มีไวยากรณ์การจัดรูปแบบข้อความธรรมดา แต่ยังเป็นรูปแบบข้อความธรรมดาที่อ่านง่ายและเขียนง่ายด้วย ดังนั้นการเขียน HTML แบบไฮบริดด้วยมาร์กดาวน์จึงเป็นตัวเลือกที่ยอดเยี่ยม
การเขียนมาร์กดาวน์ภายใน 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 >ช่วยให้เราสามารถเติมคุณสมบัติต่างๆ เพื่อขยายไวยากรณ์มาร์กดาวน์ได้
ในตอนนี้ คุณลักษณะ polyfill เหล่านี้มีให้:
แบ็กสแลชที่จุดเริ่มต้นเพื่อหลีกรายการที่เรียงลำดับ
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.โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
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.ภาพและชื่ออิโมจิที่ปรุงแต่งโดย GitHub จะทำให้เนื้อหาอิโมจิกลายเป็นอิโมจิได้ เช่น ฝนตก ?s และ ?s!
สังเกตว่ารูปภาพอิโมจิให้บริการจาก GitHub.com CDN โดยมี URL พื้นฐานเป็น https://github.githubassets.com ซึ่งส่งผลให้มี URL รูปภาพอิโมจิ เช่น https://github.githubassets.com/images/icons/emoji /ยูนิโค้ด/1f604.png
ในเพจหรือโพสต์ใดๆ ให้ใช้อิโมจิตามปกติ เช่น
I give this plugin two :+1:!
โค้ดด้านบนจะถูกแยกวิเคราะห์เป็น:
ฉันให้ปลั๊กอินนี้สองอัน!
หากคุณต้องการแสดงรูปภาพอีโมจิในเครื่อง หรือใช้แหล่งที่มาอีโมจิที่กำหนดเอง คุณสามารถระบุได้ในไฟล์ _config.yml :
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "ดูเอกสารประกอบ Gemoji สำหรับการสร้างไฟล์ภาพ
ช่วยให้เราสามารถแก้ไของค์ประกอบผ่าน CSS3 selectors คุณสามารถแก้ไขแอตทริบิวต์ของแท็กองค์ประกอบ แทนที่โหนดลูก และอื่นๆ ได้อย่างง่ายดาย ซึ่งมีความยืดหยุ่นมาก แต่นี่คือตัวอย่างการใช้งานสำหรับการแก้ไขเอกสาร:
# 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 เพิ่มแอตทริบิวต์ target="_blank" rel="noopener noreferrer" ให้กับลิงก์ภายนอกทั้งหมดในเนื้อหาของ 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` เพิ่ม loading="lazy" ให้กับแท็ก img และ iframe โดยอัตโนมัติเพื่อโหลดแบบ Lazy การสนับสนุนเบราว์เซอร์มีการเติบโต หากเบราว์เซอร์ไม่รองรับแอตทริบิวต์ loading เบราว์เซอร์จะโหลดทรัพยากรเหมือนปกติ
