jekyll spaceship
v0.10.2
Jekyll لرواد الفضاء. سفينة الفضاء عبارة عن مكون إضافي لـ 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، تحتاج إلى البناء محليًا أو استخدام 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 يقوم بتصفية خاصية النمط، لذلك يتم عرض المثال مع خاصية المحاذاة القديمة. ولكن في الواقع، يقوم هذا البرنامج المساعد بإخراج خاصية النمط مع سمة 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 |
|---|---|---|
| تحلل السكر | 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.
فيما يلي بعض الأمثلة على تعريفات السمات (ALDs) ويأتي بعد ذلك شرح بناء الجملة:
{:ref-name: #id .cls1 .cls2}
{:second: ref-name #id-of-other title="hallo you"}
{:other: ref-name second}يحتوي خط ALD على البنية التالية:
إذا كان هناك أكثر من تعيين محدد المدة (ALD) بنفس الاسم المرجعي، فستتم معالجة تعريفات السمات لجميع محددات المدة المحددة (ALD) كما تم تعريفها في تعيين محدد المدة (ALD) واحد.
يتم استخدام قائمة السمات المضمنة (IAL) لإرفاق السمات بعنصر آخر.
فيما يلي بعض الأمثلة على IALs الممتدة:
{: #id .cls1 .cls2} <!-- #id <=> id="id", .cls1 .cls2 <=> class="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 هو محرك عرض جافا سكريبت مفتوح المصدر لتدوين 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سيتم تحليل الكود أعلاه على النحو التالي:
حورية البحر هي أداة للرسم التخطيطي والرسوم البيانية تعتمد على جافا سكريبت. يقوم بإنشاء مخططات انسيابية للرسوم البيانية والمزيد، باستخدام نص مستوحى من تخفيض السعر لسهولة وسرعة.
يسمح لك بالكتابة بسرعة:
هناك طريقتان لإنشاء رسم تخطيطي في صفحة مدونة 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سيتم تحليل الكود أعلاه على النحو التالي:
كم مرة وجدت نفسك تبحث على Google عن " كيفية تضمين مقطع فيديو/صوت في عملية تخفيض السعر؟ "
على الرغم من أنه ليس من الممكن تضمين مقطع فيديو/صوت في عملية تخفيض السعر، فإن أفضل وأسهل طريقة هي استخراج إطار من الفيديو/الصوت. لإضافة مقاطع فيديو/تسجيلات صوتية إلى ملفات تخفيض السعر الخاصة بك بشكل أسهل، قمت بتطوير هذه الأداة لك، وسوف تقوم بتحليل رابط الفيديو/الصوت داخل كتلة الصورة تلقائيًا.
في الوقت الحالي، يتم توفير تحليل روابط الوسائط هذه:
هناك طريقتان لتضمين مقطع فيديو/صوت في صفحة مدونة 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 >يسمح لنا بملء الميزات لتوسيع جملة تخفيض السعر.
في الوقت الحالي، يتم توفير ميزات polyfill هذه:
شرطة مائلة عكسية عند البدء في الهروب من القائمة المطلوبة.
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 بمحتوى emojifying مثل: إنها تمطر؟s و؟s!
لاحظ أنه يتم تقديم صور الرموز التعبيرية من GitHub.com CDN، بعنوان URL الأساسي https://github.githubassets.com، والذي ينتج عنه عناوين URL لصور الرموز التعبيرية مثل https://github.githubassets.com/images/icons/emoji /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 : ' <h1>Test</h1> ' # 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
- " <span>Google</span> " # 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
- " <span>Jekyll</span> " # 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 : " <b>Yap!</b> " # Add children nodes (String Style)
- # Last empty for adding before the first child node
- a.link : ' <a href="//t.com">Link</a> ' # 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 ، فسوف يقوم بتحميل المورد تمامًا كما يفعل عادةً.
