jekyll spaceship
v0.10.2
Jekyll插件。 Spaceship 是一款簡約、強大且高度可自訂的 Jekyll 外掛程式。它結合了您方便工作所需的一切，沒有不必要的複雜性，就像真正的太空船一樣。
提示：我希望您喜歡使用這個外掛。如果你喜歡這個項目，給它一個小星星是你明確聲明的方式：我的工作很有價值。我將感謝您的支持！謝謝你！
在網站的Gemfile中新增 jekyll-spaceship 插件，然後執行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 加入到網站_config.yml中的plugins:部分。
plugins :
- jekyll-spaceship提示：請注意，GitHub Pages 在safe模式下運行，並且僅允許一組列入白名單的外掛程式。要在 GitHub Pages 中使用 gem，您需要在本機建置或使用 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 過濾掉了 style 屬性，因此此範例顯示了過時的對齊屬性。但實際上這個插件輸出帶有 text-align 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 |||上面的程式碼將被解析為：
| 階段 | 直接產品 | ATP 產量 |
|---|---|---|
| 糖解 | 2 ATP | |
| 2輔酶A | 3–5 ATP | |
| 丙酮酸氧化 | 2輔酶A | 5ATP |
| 檸檬酸循環 | 2 ATP | |
| 6 輔酶A | 15 三磷酸腺苷 | |
| 2 FADH2 | 3 三磷酸腺苷 | |
| 30–32 ATP | ||
末尾的反斜線用於將單元格內容與以下行連接起來。
此功能由 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 A·桃子 B、橘色 C、香蕉 | ||
| 怎麼樣？ | ||
| 1. 很好 2. 不好 | ||
| 沒關係！ | ||
有時我們可能需要Markdown表格中一些豐富的內容（例如，mathjax，圖像，影片）
因此，在這裡我們也使 markown 語法在單元格內成為可能。
| : 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 A·桃子 B、橘色 C、香蕉 | ||
| 怎麼樣？ | ||
| 沒關係！ | ||
此功能對於自訂儲存格（例如使用內聯樣式）非常有用。 （例如背景、顏色、字體）
想法和語法來自 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) 用於將屬性附加到另一個元素。
以下是跨度 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 的圖表工具。它使用 Markdown 風格的文字生成圖表、流程圖等，以實現輕鬆和快速。
它允許快速編寫：
有兩種方法可以在 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上面的程式碼將被解析為：
您是否經常在谷歌上搜尋“如何在 Markdown 中嵌入視訊/音訊？ ”
雖然不可能在 Markdown 中嵌入視頻/音頻，但最好、最簡單的方法是從視頻/音頻中提取幀。為了更輕鬆地將視訊/音訊添加到您的 Markdown 文件中，我為您開發了這個工具，它會自動解析圖像塊內的視訊/音訊連結。
目前，提供了這些媒體連結解析：
有兩種方法可以在 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 不僅是一種具有純文字格式語法的輕量級標記語言，而且還是一種易於閱讀和易於編寫的純文字格式，因此使用 Markdown 編寫混合 HTML 是一個很棒的選擇。
在 HTML 中編寫 Markdown 很簡單：
< 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 >它允許我們填充功能來擴展 Markdown 語法。
目前，提供了這些 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 風格的表情符號圖像和名稱將允許表情符號化內容，例如：正在下雨？
請注意，表情符號圖像由 GitHub.com CDN 提供，基本 URL 為 https://github.githubassets.com，這會產生類似 https://github.githubassets.com/images/icons/emoji 的表情符號圖像 URL /unicode/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 自動在 Jekyll 內容中的所有外部連結新增target="_blank" rel="noopener noreferrer"屬性。
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標籤以本機延遲載入。瀏覽器支援正在增長。如果瀏覽器不支援loading屬性，它將像平常一樣載入資源。
