jekyll spaceship
v0.10.2
Jekyll para astronautas. Spaceship é um plugin Jekyll minimalista, poderoso e extremamente personalizável. Combina tudo o que você precisa para um trabalho confortável, sem complicações desnecessárias, como uma verdadeira nave espacial.
Dica: espero que você goste de usar este plugin. Se você gostou deste projeto, uma estrelinha pois é a sua forma de deixar uma afirmação clara: Meu trabalho é valorizado . Eu apreciaria seu apoio! Obrigado!
Adicione o plugin jekyll-spaceship no Gemfile do seu site e execute bundle install .
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endOu é melhor você escrever em uma linha:
gem 'jekyll-spaceship' , group : :jekyll_plugins Adicione jekyll-spaceship à seção plugins: no _config.yml do seu site.
plugins :
- jekyll-spaceship Dica: Observe que o GitHub Pages é executado em modo safe e permite apenas um conjunto de plug-ins na lista de permissões. Para usar a gema no GitHub Pages, você precisa construir localmente ou usar CI (por exemplo, travis, fluxo de trabalho do github) e implantar em seu branch gh-pages .
Este plugin é executado com as seguintes opções de configuração por padrão. Configurações alternativas para essas opções podem ser especificadas explicitamente no arquivo de configuração _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/ Por enquanto, estes recursos estendidos são fornecidos:
Observou que o GitHub filtra a propriedade de estilo, portanto, o exemplo é exibido com a propriedade de alinhamento obsoleta. Mas, na verdade, este plugin gera propriedade de estilo com atributo CSS de alinhamento de texto.
^^ em uma célula indica que ela deve ser mesclada com a célula acima.
Este recurso é uma contribuição de 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 |||O código acima seria analisado como:
| Estágio | Produtos Diretos | Rendimentos de ATP |
|---|---|---|
| Glicólise | 2ATP | |
| 2 NADH | 3-5 ATP | |
| Oxidação do piruvato | 2 NADH | 5 ATP |
| Ciclo do ácido cítrico | 2ATP | |
| 6NADH | 15 ATP | |
| 2FADH2 | 3ATP | |
| 30–32 ATP | ||
Uma barra invertida no final para unir o conteúdo da célula às linhas a seguir.
Este recurso é uma contribuição de Lucas-C.
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |O código acima seria analisado como:
| Multilinha Fácil | ||
|---|---|---|
| Maçã Maçã Maçã | Banana Banana Banana | Laranja Laranja Laranja |
| Maçã Maçã | Banana Banana | Laranja Laranja |
| Maçã | Banana | Laranja |
O cabeçalho da tabela pode ser eliminado.
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |O código acima seria analisado como:
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
A sintaxe da tabela Markdown usa dois pontos ":" para forçar o alinhamento das colunas.
Portanto, aqui também o usamos para forçar o alinhamento celular.
A célula da tabela pode ser definida como alinhamento separadamente.
| : 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! |O código acima seria analisado como:
| Frutas || Comida | ||
|---|---|---|
| Maçã Banana Laranja | Maçã Banana Laranja | Maçã Banana Laranja |
| A extensão da linha é 4 A. Pêssego B. Laranja C. Banana | ||
| Como está? | ||
| 1. Tudo bem 2. Ruim | ||
| Tudo bem! | ||
Às vezes, podemos precisar de algum conteúdo abundante (por exemplo, mathjax, imagem, vídeo) na tabela Markdown
Portanto, aqui também tornamos possível a sintaxe markown dentro de uma célula.
| : 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 "O código acima seria analisado como:
| MathJax || Imagem | ||
|---|---|---|
| Maçã Banana Laranja | Maçã Banana Laranja | Maçã Banana Laranja |
| A extensão da linha é 4 A. Pêssego B. Laranja C. Banana | ||
| Como está? | ||
| Tudo bem! | ||
Este recurso é muito útil para células personalizadas, como o estilo embutido. (por exemplo, plano de fundo, cor, fonte)
A ideia e a sintaxe vêm do pacote Maruku.
A seguir estão alguns exemplos de definições de atributos (ALDs) e depois vem a explicação da sintaxe:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}Uma linha ALD tem a seguinte estrutura:
Se houver mais de um ALD com o mesmo nome de referência, as definições de atributos de todos os ALDs serão processadas como se fossem definidas em um ALD.
Uma lista de atributos inline (IAL) é usada para anexar atributos a outro elemento.
Aqui estão alguns exemplos de IALs de extensão:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}Aqui está um exemplo de célula de tabela personalizada com 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 } |||O código acima seria analisado como:
Além disso, aqui você pode aprender mais detalhes sobre IALs.
MathJax é um mecanismo de exibição JavaScript de código aberto para notação LaTeX, MathML e AsciiMath que funciona em todos os navegadores modernos.
Alguns dos principais recursos do MathJax incluem:
Na fase de construção, o script do mecanismo MathJax será adicionado verificando automaticamente se há uma expressão matemática na página. Este recurso pode ajudá-lo a melhorar o desempenho da página na velocidade de carregamento.
Coloque sua expressão matemática dentro
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $O código acima seria analisado como:
PlantUML é um componente que permite escrever rapidamente:
Existem duas maneiras de criar um diagrama na página do blog Jekyll:
```plantuml!
Bob -> Alice : hello world
```
ou
@ startuml
Bob -> Alice : hello
@ endumlO código acima seria analisado como:
Mermaid é uma ferramenta de diagramação e gráficos baseada em Javascript. Ele gera diagramas, fluxogramas e muito mais, usando texto inspirado em markdown para maior facilidade e rapidez.
Permite escrever rapidamente:
Existem duas maneiras de criar um diagrama na página do 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
@ endmermaidO código acima seria analisado como:
Com que frequência você pesquisou no Google " Como incorporar um vídeo/áudio no markdown? "
Embora não seja possível incorporar um vídeo/áudio no markdown, a maneira melhor e mais fácil é extrair um quadro do vídeo/áudio. Para adicionar vídeos/áudios aos seus arquivos markdown com mais facilidade, desenvolvi esta ferramenta para você e ela analisará o link de vídeo/áudio dentro do bloco de imagem automaticamente.
Por enquanto, estas análises de links de mídia são fornecidas:
Existem duas maneiras de incorporar um vídeo/áudio na página do seu blog Jekyll:
Estilo embutido:
![ ] ( {media-link} )Estilo de referência:
![ ] [ {reference} ]
[ {reference} ] : {media-link}Para configurar atributos de mídia (por exemplo, largura, altura), basta adicionar a string de consulta ao link conforme abaixo:
![ ] ( 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 ) 
Como markdown não é apenas uma linguagem de marcação leve com sintaxe de formatação de texto simples, mas também um formato de texto simples fácil de ler e escrever, escrever um HTML híbrido com markdown é uma escolha incrível.
É fácil escrever descontos dentro do 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 >Ele nos permite recursos de polyfill para estender a sintaxe de markdown.
Por enquanto, estes recursos de polyfill são fornecidos:
Uma barra invertida no início para escapar da lista ordenada.
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.O código acima seria analisado como:
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.Imagens e nomes de emoji com sabor do GitHub permitiriam emoticons de conteúdo como: está chovendo ?s e ?s!
Observou que as imagens de emoji são veiculadas a partir do CDN do GitHub.com, com um URL base de https://github.githubassets.com, o que resulta em URLs de imagens de emoji como https://github.githubassets.com/images/icons/emoji /unicode/1f604.png.
Em qualquer página ou postagem, use emoji como faria normalmente, por exemplo
I give this plugin two :+1:!
O código acima seria analisado como:
Dou dois a esse plugin?!
Se quiser fornecer imagens de emoji localmente ou usar uma fonte de emoji personalizada, você pode especificar isso em seu arquivo _config.yml :
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "Consulte a documentação do Gemoji para gerar arquivos de imagem.
Permite-nos modificar elementos através de CSS3 selectors . Através dele você pode facilmente modificar os atributos de uma tag de elemento, substituir os nós filhos e assim por diante, é muito flexível, mas aqui está um exemplo de uso para modificar um documento:
# 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 Adiciona automaticamente um atributo target="_blank" rel="noopener noreferrer" a todos os links externos no conteúdo do 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` Adiciona automaticamente loading="lazy" às tags img e iframe para carregar nativamente lentamente. O suporte ao navegador está crescendo. Se um navegador não suportar o atributo loading , ele carregará o recurso como faria normalmente.
