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 Pages работает в safe режиме и допускает только набор плагинов из белого списка. Чтобы использовать драгоценный камень в 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 отфильтровывает свойство стиля, поэтому пример отображается с устаревшим свойством align. Но на самом деле этот плагин выводит свойство стиля с атрибутом CSS text-align.
^^ в ячейке указывает, что ее следует объединить с ячейкой выше.
Эта функция предоставлена 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 ФАДХ2 | 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.
Поэтому здесь мы также делаем возможным синтаксис 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 А. Персик Б. Оранжевый С. Банан | ||
| Как дела? | ||
| Все в порядке! | ||
Эта функция очень полезна для пользовательских ячеек, например, для использования встроенного стиля. (например, фон, цвет, шрифт)
Идея и синтаксис взяты из пакета 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 } |||Код выше будет анализироваться как:
Кроме того, здесь вы можете узнать более подробную информацию о IALs.
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Код выше будет анализироваться как:
Как часто вы гуглили вопрос « Как встроить видео/аудио в уценку? »
Хотя встроить видео/аудио в уценку невозможно, лучший и простой способ — извлечь кадр из видео/аудио. Чтобы упростить добавление видео/аудио в ваши файлы уценки, я разработал для вас этот инструмент, и он автоматически анализирует ссылку на видео/аудио внутри блока изображения.
На данный момент предусмотрен парсинг медиассылок:
Есть два способа встроить видео/аудио на страницу блога 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 ) 
Поскольку уценка — это не только легкий язык разметки с синтаксисом форматирования простого текста, но также удобный для чтения и записи формат простого текста, поэтому написание гибридного 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 позволят эмодзировать контент, например: идет дождь? s и ? s!
Отмечено, что изображения эмодзи подаются из CDN GitHub.com с базовым 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 для ленивой загрузки. Поддержка браузеров растет. Если браузер не поддерживает атрибут loading , он загрузит ресурс так же, как обычно.
