jekyll spaceship
v0.10.2
Jekyll 플러그인. Spaceship은 최소한의 강력하고 사용자 정의가 가능한 Jekyll 플러그인입니다. 실제 우주선처럼 불필요한 복잡함 없이 편리한 작업을 위해 필요한 모든 것을 결합합니다.
팁: 이 플러그인을 즐겨 사용하시기 바랍니다. 이 프로젝트가 마음에 드신다면 작은 별표 를 표시해 주세요: 내 작업은 가치가 있습니다 . 귀하의 지원에 감사드립니다! 감사합니다!
사이트의 Gemfile 에 jekyll-spaceship 플러그인을 추가하고, bundle install 실행하세요.
# If you have any plugins, put them here!
group :jekyll_plugins do
gem 'jekyll-spaceship'
end아니면 한 줄로 작성하는 것이 더 좋습니다.
gem 'jekyll-spaceship' , group : :jekyll_plugins 사이트의 _config.yml 에 있는 plugins: 섹션에 jekyll-spaceship을 추가하세요.
plugins :
- jekyll-spaceship 팁: GitHub 페이지는 safe 모드에서 실행되며 허용된 플러그인 세트만 허용합니다. GitHub 페이지에서 gem을 사용하려면 로컬로 빌드하거나 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는 스타일 속성을 필터링하므로 예제에서는 더 이상 사용되지 않는 정렬 속성으로 표시됩니다. 그러나 실제로 이 플러그인은 text-align CSS 속성을 사용하여 스타일 속성을 출력합니다.
^^ 셀에 있는 셀은 위의 셀과 병합되어야 함을 나타냅니다.
이 기능은 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 |||위의 코드는 다음과 같이 구문 분석됩니다.
| 단계 | 직접제품 | ATP 수율 |
|---|---|---|
| 해당과정 | 2ATP | |
| 2 나드 | 3–5 ATP | |
| 피루베이 산화 | 2 나드 | 5ATP |
| 구연산주기 | 2ATP | |
| 6나드 | 15ATP | |
| 2 FADH2 | 3ATP | |
| 30~32ATP | ||
셀 내용을 다음 줄과 결합하려면 끝에 백슬래시를 추가하세요.
이 기능은 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. 나쁘다 | ||
| 괜찮아! | ||
때때로 Markdown 테이블에 풍부한 콘텐츠(예: mathjax, 이미지, 비디오)가 필요할 수 있습니다.
따라서 여기서는 셀 내부에서 마크다운 구문도 가능하게 만듭니다.
| : 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 "위의 코드는 다음과 같이 구문 분석됩니다.
| MathJax || 영상 | ||
|---|---|---|
| 사과 바나나 주황색 | 사과 바나나 주황색 | 사과 바나나 주황색 |
| 행 스팬은 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 } |||위의 코드는 다음과 같이 구문 분석됩니다.
또한 여기에서 IAL에 대한 자세한 내용을 알아볼 수 있습니다.
MathJax는 모든 최신 브라우저에서 작동하는 LaTeX, MathML 및 AsciiMath 표기법을 위한 오픈 소스 JavaScript 디스플레이 엔진입니다.
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!와 같은 콘텐츠를 이모티콘으로 표현할 수 있습니다.
이모티콘 이미지는 GitHub.com CDN에서 제공되며 기본 URL은 https://github.githubassets.com이며 결과적으로 https://github.githubassets.com/images/icons/emoji와 같은 이모티콘 이미지 URL이 생성됩니다. /unicode/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 Jekyll 콘텐츠의 모든 외부 링크에 target="_blank" rel="noopener noreferrer" 속성을 자동으로 추가합니다.
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` 기본적으로 지연 로드되도록 img 및 iframe 태그에 loading="lazy" 자동으로 추가합니다. 브라우저 지원이 늘어나고 있습니다. 브라우저가 loading 속성을 지원하지 않으면 평소와 마찬가지로 리소스를 로드합니다.
