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あるいは、次のように 1 行で書いたほうがよいでしょう。
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 プロパティが除外されるため、例では廃止された align プロパティが表示されることに注意してください。しかし、実際にはこのプラグインは CSS 属性 text-align を付けて style プロパティを出力します。
セル内の ^^ は、上のセルと結合する必要があることを示します。
この機能は 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収量 |
|---|---|---|
| 解糖系 | 2ATP | |
| 2 NADH | 3～5ATP | |
| ピルバイ酸化 | 2 NADH | 5ATP |
| クエン酸サイクル | 2ATP | |
| 6 NADH | 15ATP | |
| 2 FADH2 | 3ATP | |
| 30–32ATP | ||
セルの内容を次の行と結合するには、末尾にバックスラッシュを付けます。
この機能は Lucas-C によって提供されました。
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |上記のコードは次のように解析されます。
| 簡単な複数行 | ||
|---|---|---|
| りんご りんご りんご | バナナ バナナ バナナ | オレンジ オレンジ オレンジ |
| りんご りんご | バナナ バナナ | オレンジ オレンジ |
| りんご | バナナ | オレンジ |
テーブルヘッダーは削除できます。
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |上記のコードは次のように解析されます。
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
マークダウン テーブル構文では、列の配置を強制するためにコロン「:」を使用します。
したがって、ここではセルの位置合わせを強制するためにも使用します。
表のセルは個別に配置を設定できます。
| : 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、画像、ビデオなど) が必要になる場合があります。
したがって、ここではセル内でもマークウン構文を使用できるようにします。
| : 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 "上記のコードは次のように解析されます。
| MathJax ||画像 | ||
|---|---|---|
| りんご バナナ オレンジ | りんご バナナ オレンジ | りんご バナナ オレンジ |
| 行幅は 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 の属性定義は 1 つの 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 は、最新のすべてのブラウザで動作する、LaTeX、MathML、および AsciiMath 表記用のオープンソース JavaScript 表示エンジンです。
MathJax の主な機能には次のようなものがあります。
構築段階では、ページ内に数式があるかどうかを自動的にチェックして MathJax エンジン スクリプトが追加されます。この機能は、ページの読み込み速度のパフォーマンスを向上させるのに役立ちます。
数式を中に入れてください
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $上記のコードは次のように解析されます。
PlantUML は、以下をすばやく記述できるコンポーネントです。
Jekyll ブログ ページで図を作成するには 2 つの方法があります。
```plantuml!
Bob -> Alice : hello world
```
または
@ startuml
Bob -> Alice : hello
@ enduml上記のコードは次のように解析されます。
Mermaid は、JavaScript ベースの図作成およびグラフ作成ツールです。マークダウンにインスピレーションを得たテキストを使用して、図のフローチャートなどを簡単かつ迅速に生成します。
これにより、以下をすばやく書くことができます。
Jekyll ブログ ページで図を作成するには 2 つの方法があります。
```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 にビデオ/オーディオを埋め込む方法」をどのくらいの頻度でグーグル検索したことがありますか?
ビデオ/オーディオをマークダウンに埋め込むことはできませんが、最も簡単な方法はビデオ/オーディオからフレームを抽出することです。ビデオ/オーディオをマークダウン ファイルに簡単に追加できるように、このツールを開発しました。このツールは、画像ブロック内のビデオ/オーディオ リンクを自動的に解析します。
現時点では、次のメディア リンク解析が提供されています。
Jekyll ブログ ページにビデオ/オーディオを埋め込む方法は 2 つあります。
インラインスタイル:
![ ] ( {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 >これにより、マークダウン構文を拡張するためのポリフィル機能が可能になります。
現時点では、次のポリフィル機能が提供されています。
順序付きリストをエスケープするには、先頭にバックスラッシュを付けます。
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 風味の絵文字画像と名前を使用すると、次のようなコンテンツを絵文字にすることができます。
絵文字画像は https://github.githubassets.com のベース URL を持つ GitHub.com CDN から提供され、結果として絵文字画像の URL は https://github.githubassets.com/images/icons/emoji のようになります。 /unicode/1f604.png。
どのページや投稿でも、通常どおり絵文字を使用してください。
I give this plugin two :+1:!
上記のコードは次のように解析されます。
このプラグインに 2 つを与えますか?!
絵文字画像をローカルで提供したい場合、またはカスタム絵文字ソースを使用したい場合は、 _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` ネイティブに遅延読み込みするために、 imgとiframeタグに自動的にloading="lazy"が追加されます。ブラウザのサポートは拡大しています。ブラウザーがloading属性をサポートしていない場合は、通常と同じようにリソースがロードされます。
