jekyll spaceship
v0.10.2
Jekyll pour les astronautes. Spaceship est un plugin Jekyll minimaliste, puissant et extrêmement personnalisable. Il combine tout ce dont vous pourriez avoir besoin pour un travail pratique, sans complications inutiles, comme un véritable vaisseau spatial.
Astuce : j'espère que vous apprécierez l'utilisation de ce plugin. Si vous aimez ce projet, une petite étoile car c'est votre façon de faire une déclaration claire : Mon travail est valorisé . J'apprécierais votre soutien! Merci!
Ajoutez le plugin jekyll-spaceship dans Gemfile de votre site et exécutez bundle install .
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endOu vous préférez écrire sur une seule ligne :
gem 'jekyll-spaceship' , group : :jekyll_plugins Ajoutez jekyll-spaceship à la section plugins: dans _config.yml de votre site.
plugins :
- jekyll-spaceship Astuce : notez que GitHub Pages s'exécute en mode safe et n'autorise qu'un ensemble de plugins sur liste blanche. Pour utiliser la gemme dans les pages GitHub, vous devez créer localement ou utiliser CI (par exemple travis, workflow github) et déployer sur votre branche gh-pages .
Ce plugin fonctionne par défaut avec les options de configuration suivantes. Des paramètres alternatifs pour ces options peuvent être explicitement spécifiés dans le fichier de configuration _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/ Pour l'instant, ces fonctionnalités étendues sont fournies :
Il a été noté que GitHub filtre la propriété de style, de sorte que l'exemple s'affiche avec la propriété align obsolète. Mais en réalité, ce plugin génère une propriété de style avec l'attribut CSS text-align.
^^ dans une cellule indique qu'elle doit être fusionnée avec la cellule ci-dessus.
Cette fonctionnalité est fournie par 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 |||Le code ci-dessus serait analysé comme :
| Scène | Produits directs | Rendements ATP |
|---|---|---|
| Glycolyse | 2ATP | |
| 2NADH | 3 à 5 ATP | |
| Oxydation du pyruvaye | 2NADH | 5ATP |
| Cycle de l'acide citrique | 2ATP | |
| 6NADH | 15 ATP | |
| 2FADH2 | 3ATP | |
| 30-32 ATP | ||
Une barre oblique inverse à la fin pour joindre le contenu de la cellule avec les lignes suivantes.
Cette fonctionnalité est apportée par Lucas-C.
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |Le code ci-dessus serait analysé comme :
| Multiligne facile | ||
|---|---|---|
| Pomme Pomme Pomme | Banane Banane Banane | Orange Orange Orange |
| Pomme Pomme | Banane Banane | Orange Orange |
| Pomme | Banane | Orange |
L’en-tête du tableau peut être supprimé.
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |Le code ci-dessus serait analysé comme :
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
La syntaxe du tableau Markdown utilise les deux-points : : pour forcer l'alignement des colonnes.
Par conséquent, nous l’utilisons également ici pour forcer l’alignement des cellules.
L’alignement des cellules du tableau peut être défini séparément.
| : 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! |Le code ci-dessus serait analysé comme :
| Fruits || Nourriture | ||
|---|---|---|
| Pomme Banane Orange | Pomme Banane Orange | Pomme Banane Orange |
| L'envergure est de 4 A. Pêche B.Orange C. Banane | ||
| Comment ça va ? | ||
| 1. Bien 2. Mauvais | ||
| C'est OK ! | ||
Parfois, nous pouvons avoir besoin d'un contenu abondant (par exemple, mathjax, image, vidéo) dans le tableau Markdown
Par conséquent, nous rendons également possible ici la syntaxe markown à l’intérieur d’une cellule.
| : 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 "Le code ci-dessus serait analysé comme :
| MathJax || Image | ||
|---|---|---|
| Pomme Banane Orange | Pomme Banane Orange | Pomme Banane Orange |
| L'envergure est de 4 A. Pêche B.Orange C. Banane | ||
| Comment ça va ? | ||
| C'est OK ! | ||
Cette fonctionnalité est très utile pour les cellules personnalisées telles que l'utilisation du style en ligne. (par exemple, arrière-plan, couleur, police)
L'idée et la syntaxe proviennent du package Maruku.
Voici quelques exemples de définitions d'attributs (ALD), suivis de l'explication de la syntaxe :
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}Une ligne ALD a la structure suivante :
S'il existe plusieurs ALD avec le même nom de référence, les définitions d'attribut de tous les ALD sont traitées comme si elles étaient définies dans un ALD.
Une liste d'attributs en ligne (IAL) est utilisée pour attacher des attributs à un autre élément.
Voici quelques exemples d’IALs span :
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}Voici un exemple de cellule de tableau personnalisée avec 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 } |||Le code ci-dessus serait analysé comme :
De plus, vous pouvez ici en savoir plus sur les IAL.
MathJax est un moteur d'affichage JavaScript open source pour les notations LaTeX, MathML et AsciiMath qui fonctionne dans tous les navigateurs modernes.
Certaines des principales fonctionnalités de MathJax incluent :
Au stade de la construction, le script du moteur MathJax sera ajouté en vérifiant automatiquement s'il y a une expression mathématique dans la page, cette fonctionnalité peut vous aider à améliorer les performances de la page en termes de vitesse de chargement.
Mettez votre expression mathématique à l'intérieur
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $Le code ci-dessus serait analysé comme :
PlantUML est un composant qui permet d'écrire rapidement :
Il existe deux manières de créer un diagramme dans votre page de blog Jekyll :
```plantuml!
Bob -> Alice : hello world
```
ou
@ startuml
Bob -> Alice : hello
@ endumlLe code ci-dessus serait analysé comme :
Mermaid est un outil de création de diagrammes et de graphiques basé sur Javascript. Il génère des diagrammes, des organigrammes et bien plus encore, en utilisant du texte inspiré du markdown pour plus de facilité et de rapidité.
Il permet d'écrire rapidement :
Il existe deux manières de créer un diagramme dans votre page de blog Jekyll :
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
ou
@ startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@ endmermaidLe code ci-dessus serait analysé comme :
À quelle fréquence vous êtes-vous retrouvé à chercher sur Google « Comment intégrer une vidéo/un audio dans un markdown ? »
Bien qu'il ne soit pas possible d'intégrer une vidéo/audio dans markdown, le moyen le meilleur et le plus simple consiste à extraire une image de la vidéo/audio. Pour ajouter plus facilement des vidéos/audios à vos fichiers markdown, j'ai développé cet outil pour vous, et il analysera automatiquement le lien vidéo/audio à l'intérieur du bloc d'image.
Pour l'instant, ces analyses de liens multimédias sont fournies :
Il existe deux manières d'intégrer une vidéo/audio dans votre page de blog Jekyll :
Style en ligne :
![ ] ( {media-link} )Style de référence :
![ ] [ {reference} ]
[ {reference} ] : {media-link}Pour configurer les attributs du média (par exemple, largeur, hauteur), ajoutez simplement une chaîne de requête au lien comme ci-dessous :
![ ] ( 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 ) 
Comme le markdown n'est pas seulement un langage de balisage léger avec une syntaxe de formatage de texte brut, mais également un format de texte brut facile à lire et à écrire, écrire un HTML hybride avec markdown est un excellent choix.
Il est facile d'écrire du markdown en 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 >Cela nous permet de polyfiller les fonctionnalités pour étendre la syntaxe markdown.
Pour l'instant, ces fonctionnalités polyfill sont fournies :
Une barre oblique inverse au début pour échapper à la liste ordonnée.
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.Le code ci-dessus serait analysé comme :
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.Les images et les noms d'emoji aromatisés à GitHub permettraient d'émojiter des contenus tels que : il pleut des ?s et des ?s !
Il est à noter que les images emoji sont servies à partir du CDN GitHub.com, avec une URL de base de https://github.githubassets.com, ce qui donne lieu à des URL d'images emoji telles que https://github.githubassets.com/images/icons/emoji /unicode/1f604.png.
Dans n'importe quelle page ou publication, utilisez les emoji comme vous le feriez normalement, par exemple
I give this plugin two :+1:!
Le code ci-dessus serait analysé comme :
J'en donne deux à ce plugin ?!
Si vous souhaitez diffuser des images emoji localement ou utiliser une source emoji personnalisée, vous pouvez le spécifier dans votre fichier _config.yml :
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "Consultez la documentation Gemoji pour générer des fichiers image.
Il nous permet de modifier des éléments via CSS3 selectors . Grâce à lui, vous pouvez facilement modifier les attributs d'une balise d'élément, remplacer les nœuds enfants, etc., c'est très flexible, mais voici un exemple d'utilisation pour modifier un document :
# 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 Ajoute automatiquement un attribut target="_blank" rel="noopener noreferrer" à tous les liens externes dans le contenu de 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` Ajoute automatiquement loading="lazy" aux balises img et iframe pour charger nativement paresseusement. La prise en charge du navigateur augmente. Si un navigateur ne prend pas en charge l'attribut loading , il chargera la ressource comme il le ferait normalement.
