jekyll spaceship
v0.10.2
Jekyll -Plugin für Astronauten. Spaceship ist ein minimalistisches, leistungsstarkes und äußerst anpassbares Jekyll-Plugin. Es vereint alles, was Sie für bequemes Arbeiten benötigen, ohne unnötige Komplikationen, wie ein echtes Raumschiff.
Tipp: Ich wünsche Ihnen viel Spaß mit diesem Plugin. Wenn Ihnen dieses Projekt gefällt, gibt es einen kleinen Stern dafür, damit Sie ein klares Statement abgeben können: Meine Arbeit wird geschätzt . Ich würde mich über Ihre Unterstützung freuen! Danke schön!
Fügen Sie das Jekyll-Spaceship-Plugin im Gemfile Ihrer Site hinzu und führen Sie bundle install aus.
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endOder schreiben Sie lieber in einer Zeile:
gem 'jekyll-spaceship' , group : :jekyll_plugins Fügen Sie jekyll-spaceship zum Abschnitt plugins: in _config.yml Ihrer Site hinzu.
plugins :
- jekyll-spaceship Tipp: Beachten Sie, dass GitHub Pages im safe Modus ausgeführt wird und nur eine Reihe von Plugins auf der Whitelist zulässt. Um das Gem in GitHub Pages zu verwenden, müssen Sie es lokal erstellen oder CI (z. B. Travis, Github Workflow) verwenden und in Ihrem gh-pages -Zweig bereitstellen.
Dieses Plugin läuft standardmäßig mit den folgenden Konfigurationsoptionen. Alternative Einstellungen für diese Optionen können explizit in der Konfigurationsdatei _config.yml angegeben werden.
# 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/ Derzeit stehen folgende erweiterte Funktionen zur Verfügung:
Beachten Sie, dass GitHub die Stileigenschaft herausfiltert, sodass das Beispiel mit der veralteten align-Eigenschaft angezeigt wird. Tatsächlich gibt dieses Plugin jedoch die Stileigenschaft mit dem CSS-Attribut text-align aus.
^^ in einer Zelle gibt an, dass sie mit der darüber liegenden Zelle zusammengeführt werden soll.
Diese Funktion wird von pmccloghrylaing bereitgestellt.
| 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 |||Der obige Code würde wie folgt geparst werden:
| Bühne | Direkte Produkte | ATP-Erträge |
|---|---|---|
| Glykolyse | 2 ATP | |
| 2 NADH | 3–5 ATP | |
| Pyruvaye-Oxidation | 2 NADH | 5 ATP |
| Zitronensäurezyklus | 2 ATP | |
| 6 NADH | 15 ATP | |
| 2 FADH2 | 3 ATP | |
| 30–32 ATP | ||
Ein Backslash am Ende, um den Zellinhalt mit den folgenden Zeilen zu verbinden.
Diese Funktion wurde von Lucas-C beigesteuert.
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |Der obige Code würde wie folgt geparst werden:
| Einfache Multiline | ||
|---|---|---|
| Apfel Apfel Apfel | Banane Banane Banane | Orange Orange Orange |
| Apfel Apfel | Banane Banane | Orange Orange |
| Apfel | Banane | Orange |
Tabellenkopf kann entfernt werden.
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |Der obige Code würde wie folgt geparst werden:
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
In der Markdown-Tabellensyntax werden Doppelpunkte „:“ verwendet, um die Spaltenausrichtung zu erzwingen.
Deshalb verwenden wir es hier auch, um die Zellausrichtung zu erzwingen.
Die Ausrichtung der Tabellenzelle kann separat eingestellt werden.
| : 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! |Der obige Code würde wie folgt geparst werden:
| Früchte || Essen | ||
|---|---|---|
| Apfel Banane Orange | Apfel Banane Orange | Apfel Banane Orange |
| Rowspan ist 4 A. Pfirsich B. Orange C. Banane | ||
| Wie ist es? | ||
| 1. Gut 2. Schlecht | ||
| Es ist in Ordnung! | ||
Manchmal benötigen wir möglicherweise reichlich Inhalt (z. B. Mathjax, Bild, Video) in der Markdown-Tabelle
Daher ermöglichen wir hier auch die Markow-Syntax innerhalb einer Zelle.
| : 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 "Der obige Code würde wie folgt geparst werden:
| MathJax || Bild | ||
|---|---|---|
| Apfel Banane Orange | Apfel Banane Orange | Apfel Banane Orange |
| Rowspan ist 4 A. Pfirsich B. Orange C. Banane | ||
| Wie ist es? | ||
| Es ist in Ordnung! | ||
Diese Funktion ist sehr nützlich für benutzerdefinierte Zellen, z. B. die Verwendung des Inline-Stils. (z. B. Hintergrund, Farbe, Schriftart)
Die Idee und Syntax stammt aus dem Maruku-Paket.
Im Folgenden finden Sie einige Beispiele für Attributdefinitionen (ALDs). Anschließend erfolgt die Erklärung der Syntax:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}Eine ALD-Zeile hat folgenden Aufbau:
Wenn es mehr als eine ALD mit demselben Referenznamen gibt, werden die Attributdefinitionen aller ALDs so verarbeitet, wie sie in einer ALD definiert sind.
Eine Inline-Attributliste (IAL) wird verwendet, um Attribute an ein anderes Element anzuhängen.
Hier sind einige Beispiele für Span-IALs:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}Hier ist ein Beispiel für eine benutzerdefinierte Tabellenzelle mit 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 } |||Der obige Code würde wie folgt geparst werden:
Darüber hinaus erfahren Sie hier weitere Einzelheiten zu IALs.
MathJax ist eine Open-Source-JavaScript-Anzeige-Engine für LaTeX-, MathML- und AsciiMath-Notation, die in allen modernen Browsern funktioniert.
Zu den Hauptfunktionen von MathJax gehören:
In der Erstellungsphase wird das MathJax-Engine-Skript hinzugefügt, indem automatisch überprüft wird, ob auf der Seite ein mathematischer Ausdruck vorhanden ist. Diese Funktion kann Ihnen dabei helfen, die Seitenleistung bei der Ladegeschwindigkeit zu verbessern.
Fügen Sie Ihren mathematischen Ausdruck ein
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $Der obige Code würde wie folgt geparst werden:
PlantUML ist eine Komponente, die das schnelle Schreiben von Folgendem ermöglicht:
Es gibt zwei Möglichkeiten, ein Diagramm auf Ihrer Jekyll-Blogseite zu erstellen:
```plantuml!
Bob -> Alice : hello world
```
oder
@ startuml
Bob -> Alice : hello
@ endumlDer obige Code würde wie folgt geparst werden:
Mermaid ist ein Javascript-basiertes Diagramm- und Diagrammtool. Es generiert Diagramme, Flussdiagramme und mehr und verwendet dabei von Markdown inspirierten Text, um es einfach und schnell zu machen.
Es ermöglicht das schnelle Schreiben:
Es gibt zwei Möglichkeiten, ein Diagramm auf Ihrer Jekyll-Blogseite zu erstellen:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
oder
@ startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@ endmermaidDer obige Code würde wie folgt geparst werden:
Wie oft haben Sie gegoogelt: „ Wie bette ich ein Video/Audio in Markdown ein? “
Obwohl es nicht möglich ist, ein Video/Audio in Markdown einzubetten, ist es am besten und einfachsten, einen Frame aus dem Video/Audio zu extrahieren. Um Videos/Audios einfacher zu Ihren Markdown-Dateien hinzuzufügen, habe ich dieses Tool für Sie entwickelt. Es analysiert den Video-/Audio-Link im Bildblock automatisch.
Derzeit wird das Parsen dieser Medienlinks bereitgestellt:
Es gibt zwei Möglichkeiten, ein Video/Audio in Ihre Jekyll-Blogseite einzubetten:
Inline-Stil:
![ ] ( {media-link} )Referenzstil:
![ ] [ {reference} ]
[ {reference} ] : {media-link}Um Medienattribute (z. B. Breite, Höhe) zu konfigurieren, fügen Sie einfach eine Abfragezeichenfolge wie folgt zum Link hinzu:
![ ] ( 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 ) 
Da Markdown nicht nur eine leichtgewichtige Auszeichnungssprache mit Klartext-Formatierungssyntax ist, sondern auch ein einfach zu lesendes und leicht zu schreibendes Klartextformat, ist das Schreiben eines Hybrid-HTML mit Markdown eine hervorragende Wahl.
Es ist einfach, Markdown in HTML zu schreiben:
< 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 >Es ermöglicht uns das Polyfillen von Funktionen zur Erweiterung der Markdown-Syntax.
Derzeit stehen die folgenden Polyfill-Funktionen zur Verfügung:
Ein Backslash am Anfang, um der geordneten Liste zu entgehen.
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.Der obige Code würde wie folgt geparst werden:
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.Emoji-Bilder und -Namen im GitHub-Stil würden die Emojifizierung von Inhalten ermöglichen, z. B.: Es regnet ?s und ?s!
Beachten Sie, dass Emoji-Bilder vom CDN GitHub.com mit der Basis-URL https://github.githubassets.com bereitgestellt werden, was zu Emoji-Bild-URLs wie https://github.githubassets.com/images/icons/emoji führt /unicode/1f604.png.
Verwenden Sie auf jeder Seite oder in jedem Beitrag Emojis wie gewohnt, z
I give this plugin two :+1:!
Der obige Code würde wie folgt geparst werden:
Ich gebe diesem Plugin zwei?!
Wenn Sie Emoji-Bilder lokal bereitstellen oder eine benutzerdefinierte Emoji-Quelle verwenden möchten, können Sie dies in Ihrer _config.yml Datei angeben:
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "Informationen zum Generieren von Bilddateien finden Sie in der Gemoji-Dokumentation.
Es ermöglicht uns, Elemente über CSS3 selectors zu ändern. Dadurch können Sie ganz einfach die Attribute eines Element-Tags ändern, die untergeordneten Knoten ersetzen usw. Es ist sehr flexibel, aber hier ist ein Beispiel für die Verwendung zum Ändern eines Dokuments:
# 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 Fügt automatisch ein target="_blank" rel="noopener noreferrer" -Attribut zu allen externen Links in Jekylls Inhalten hinzu.
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` Fügt automatisch loading="lazy" zu img und iframe Tags hinzu, um nativ langsam zu laden. Die Browserunterstützung nimmt zu. Wenn ein Browser das loading nicht unterstützt, lädt er die Ressource wie gewohnt.
