jekyll spaceship
v0.10.2
Jekyll para astronautas. Spaceship es un complemento Jekyll minimalista, potente y extremadamente personalizable. Combina todo lo necesario para trabajar cómodamente, sin complicaciones innecesarias, como una auténtica nave espacial.
Consejo: espero que disfrutes usando este complemento. Si te gusta este proyecto, una pequeña estrella es tu manera de dejar una declaración clara: Mi trabajo es valorado . ¡Agradecería su apoyo! ¡Gracias!
Agregue el complemento jekyll-spaceship en Gemfile de su sitio y ejecute bundle install .
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
endO mejor te gusta escribir en una línea:
gem 'jekyll-spaceship' , group : :jekyll_plugins Agregue jekyll-spaceship a los plugins: sección en _config.yml de su sitio.
plugins :
- jekyll-spaceship Consejo: tenga en cuenta que GitHub Pages se ejecuta en modo safe y solo permite un conjunto de complementos incluidos en la lista blanca. Para usar la gema en GitHub Pages, debe compilarla localmente o usar CI (por ejemplo, travis, flujo de trabajo de github) e implementarla en su rama gh-pages .
Este complemento se ejecuta con las siguientes opciones de configuración de forma predeterminada. Se pueden especificar configuraciones alternativas para estas opciones explícitamente en el archivo de configuración _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 ahora, se proporcionan estas funciones ampliadas:
Observó que GitHub filtra la propiedad de estilo, por lo que el ejemplo se muestra con la propiedad de alineación obsoleta. Pero en realidad este complemento genera una propiedad de estilo con el atributo CSS de alineación de texto.
^^ en una celda indica que debe fusionarse con la celda de arriba.
Esta característica es aportada por 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 |||El código anterior se analizaría como:
| Escenario | Productos directos | Rendimientos ATP |
|---|---|---|
| Glucólisis | 2 ATP | |
| 2 NADH | 3-5 ATP | |
| Oxidación de piruvaye | 2 NADH | 5 ATP |
| ciclo del ácido cítrico | 2 ATP | |
| 6 NADH | 15 ATP | |
| 2FADH2 | 3 ATP | |
| 30–32 ATP | ||
Una barra invertida al final para unir el contenido de la celda con las siguientes líneas.
Esta característica es aportada por Lucas-C.
| : Easy Multiline : |||
| :----- | :----- | :------ |
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange
| Apple | Banana | Orange |
| Apple | Banana | Orange |El código anterior se analizaría como:
| Fácil multilínea | ||
|---|---|---|
| Manzana Manzana Manzana | Banana Banana Banana | Naranja Naranja Naranja |
| Manzana Manzana | Banana Banana | Naranja Naranja |
| Manzana | Banana | Naranja |
El encabezado de la tabla se puede eliminar.
| -- | -- | -- | -- | -- | -- | -- | -- |
| ♜ | | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ |
| | ♟ | ♟ | ♟ | | ♟ | ♟ | ♟ |
| ♟ | | ♞ | | | | | |
| | ♗ | | | ♟ | | | |
| | | | | ♙ | | | |
| | | | | | ♘ | | |
| ♙ | ♙ | ♙ | ♙ | | ♙ | ♙ | ♙ |
| ♖ | ♘ | ♗ | ♕ | ♔ | | | ♖ |El código anterior se analizaría como:
| ♜ | ♝ | ♛ | ♚ | ♝ | ♞ | ♜ | |
| ♟ | ♟ | ♟ | ♟ | ♟ | ♟ | ||
| ♟ | ♞ | ||||||
| ♗ | ♟ | ||||||
| ♙ | |||||||
| ♘ | |||||||
| ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | ♙ | |
| ♖ | ♘ | ♗ | ♕ | ♔ | ♖ |
La sintaxis de la tabla Markdown utiliza dos puntos ":" para forzar la alineación de las columnas.
Por lo tanto, aquí también lo usamos para forzar la alineación celular.
La celda de la tabla se puede configurar por separado.
| : 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! |El código anterior se analizaría como:
| Frutas || Alimento | ||
|---|---|---|
| Manzana Banana Naranja | Manzana Banana Naranja | Manzana Banana Naranja |
| La envergadura es 4 A. Melocotón B. naranja C. Plátano | ||
| ¿Cómo es? | ||
| 1. bien 2. malo | ||
| ¡Está bien! | ||
A veces es posible que necesitemos contenido abundante (por ejemplo, mathjax, imagen, video) en la tabla Markdown.
Por lo tanto, aquí también hacemos posible la sintaxis de Markown dentro de una celda.
| : 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 "El código anterior se analizaría como:
| MatemáticasJax || Imagen | ||
|---|---|---|
| Manzana Banana Naranja | Manzana Banana Naranja | Manzana Banana Naranja |
| La envergadura es 4 A. Melocotón B. naranja C. Plátano | ||
| ¿Cómo es? | ||
| ¡Está bien! | ||
Esta característica es muy útil para celdas personalizadas, como el uso de estilo en línea. (p. ej., fondo, color, fuente)
La idea y la sintaxis provienen del paquete Maruku.
A continuación se muestran algunos ejemplos de definiciones de atributos (ALD) y luego viene la explicación de sintaxis:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}Una línea ALD tiene la siguiente estructura:
Si hay más de un ALD con el mismo nombre de referencia, las definiciones de atributos de todos los ALD se procesan como si estuvieran definidas en un ALD.
Se utiliza una lista de atributos en línea (IAL) para adjuntar atributos a otro elemento.
A continuación se muestran algunos ejemplos de IAL de tramo:
{: #id .cls1 .cls2}
{: ref-name title="hallo you"}
{: ref-name class='.cls3' .cls4}A continuación se muestra un ejemplo de celda de tabla personalizada con 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 } |||El código anterior se analizaría como:
Además, aquí puedes conocer más detalles sobre los IAL.
MathJax es un motor de visualización de JavaScript de código abierto para notación LaTeX, MathML y AsciiMath que funciona en todos los navegadores modernos.
Algunas de las características principales de MathJax incluyen:
En la etapa de construcción, el script del motor MathJax se agregará verificando automáticamente si hay una expresión matemática en la página; esta característica puede ayudarlo a mejorar el rendimiento de la página en la velocidad de carga.
Pon tu expresión matemática dentro
$ a * b = c ^ b $$ 2^{frac{n-1}{3}} $$ int _ a^b f(x) , dx. $El código anterior se analizaría como:
PlantUML es un componente que permite escribir rápidamente:
Hay dos formas de crear un diagrama en la página de tu blog de Jekyll:
```plantuml!
Bob -> Alice : hello world
```
o
@ startuml
Bob -> Alice : hello
@ endumlEl código anterior se analizaría como:
Mermaid es una herramienta de diagramación y gráficos basada en Javascript. Genera diagramas de flujo y más, utilizando texto inspirado en rebajas para mayor facilidad y velocidad.
Permite escribir rápidamente:
Hay dos formas de crear un diagrama en la página de tu blog de Jekyll:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
o
@ startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
@ endmermaidEl código anterior se analizaría como:
¿Con qué frecuencia te encontraste buscando en Google " ¿Cómo insertar un video/audio en Markdown? "
Si bien no es posible incrustar un vídeo/audio en Markdown, la mejor y más sencilla forma es extraer un fotograma del vídeo/audio. Para agregar videos/audios a sus archivos de rebajas más fácilmente, desarrollé esta herramienta para usted y analizará el enlace de video/audio dentro del bloque de imagen automáticamente.
Por ahora, se proporcionan estos análisis de enlaces de medios:
Hay dos formas de insertar un vídeo/audio en la página de tu blog de Jekyll:
Estilo en línea:
![ ] ( {media-link} )Estilo de referencia:
![ ] [ {reference} ]
[ {reference} ] : {media-link}Para configurar los atributos de los medios (por ejemplo, ancho, alto), simplemente agregue una cadena de consulta al enlace como se muestra a continuación:
![ ] ( 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 no es solo un lenguaje de marcado liviano con sintaxis de formato de texto sin formato, sino también un formato de texto sin formato fácil de leer y escribir, escribir un HTML híbrido con Markdown es una excelente opción.
Es fácil escribir rebajas dentro de 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 >Nos permite rellenar funciones para ampliar la sintaxis de rebajas.
Por ahora, se proporcionan estas características de polyfill:
Una barra invertida al comienzo para escapar de la 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.El código anterior se analizaría 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.Las imágenes y nombres emoji con sabor a GitHub permitirían emojiificar contenido como: ¡está lloviendo?s y?s!
Observó que las imágenes de emoji se sirven desde la CDN de GitHub.com, con una URL base de https://github.githubassets.com, lo que da como resultado URL de imágenes de emoji como https://github.githubassets.com/images/icons/emoji /unicode/1f604.png.
En cualquier página o publicación, use emoji como lo haría normalmente, por ejemplo
I give this plugin two :+1:!
El código anterior se analizaría como:
¿Le doy dos a este complemento?
Si desea publicar imágenes emoji localmente o utilizar una fuente de emoji personalizada, puede especificarlo en su archivo _config.yml :
jekyll-spaceship :
emoji-processor :
src : " /assets/images/emoji "Consulte la documentación de Gemoji para generar archivos de imágenes.
Nos permite modificar elementos mediante CSS3 selectors . A través de él, puede modificar fácilmente los atributos de una etiqueta de elemento, reemplazar los nodos secundarios, etc., es muy flexible, pero aquí hay un ejemplo de uso para modificar un 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 Agrega automáticamente un atributo target="_blank" rel="noopener noreferrer" a todos los enlaces externos en el contenido 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` Agrega automáticamente loading="lazy" a las etiquetas img e iframe para cargar de forma nativa de forma diferida. El soporte del navegador está creciendo. Si un navegador no admite el atributo loading , cargará el recurso como lo haría normalmente.
