jekyll博客样板
样板示例文档，其中包含了基本的元素，比如图片、视频、表格等。新建文档时，就可以直接拷贝这个文档修改一下即可。
文字样式
| 效果 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 粗体 | **文字** | **这是粗体** | 双星号包裹 |
| 斜体 | *文字* | *这是斜体* | 单星号包裹 |
| 粗斜体 | ***文字*** | ***粗斜体文字*** | 三星号包裹 |
~~文字~~ | ~~已删除内容~~ | 双波浪线包裹 | |
| ==高亮== | ==文字== | ==重点高亮== | 双等号包裹 |
| 下划线 或者 下划线 | <u>文字</u> | <u>下划线文字</u> | HTML u 标签 |
行内代码 | `文字` | `const a = 1` | 反引号包裹 |
| 上标 | X^2^ | 使用 ^ 包裹上标内容 | |
| 下标 | H~2~O | 使用 ~ 包裹下标内容 |
分割线
| 语法 | 效果 |
|---|---|
--- | 水平分割线（三个减号） |
*** | 水平分割线（三个星号） |
___ | 水平分割线（三个下划线） |
列表
1
2
3
+ 无序列表
- 无序列表
+ 无序列表
1
2
1. 有序列表
2. 有序列表
TODO list
1
2
- [x] 完成了
- [ ] 待完成
Description list
1
2
3
4
5
Sun
: the star around which the earth orbits
Moon
: the natural satellite of the earth, visible by reflected light from the sun
Block Quote
1
> This line shows the _block quote_.
Prompts
1
2
3
4
5
6
7
8
9
10
11
> An example showing the `tip` type prompt.
{: .prompt-tip }
> An example showing the `info` type prompt.
{: .prompt-info }
> An example showing the `warning` type prompt.
{: .prompt-warning }
> An example showing the `danger` type prompt.
{: .prompt-danger }
Tables
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Island Trading | Helen Bennett | UK |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Links
Inline code
This is an example of Inline Code
Footnote
Clicking the hook will locate the footnote1, and here is another footnote2.
Filepath
Here is the /path/to/the/file.extend.
Code blocks
Common
1
This is a common code snippet, without syntax highlight and line number.
Specific Language
1
2
3
4
if [ $? -ne 0 ]; then
echo "The command was not successful.";
#do the needful / exit
fi;
Specific filename
1
2
3
@import
"colors/light-typography",
"colors/dark-typography";
Mathematics
The mathematics powered by MathJax:
\[\begin{equation} \sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6} \label{eq:series} \end{equation}\]We can reference the equation as \eqref{eq:series}.
When $a \ne 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\]Mermaid SVG
gantt
title Adding GANTT diagram functionality to mermaid
apple :a, 2017-07-20, 1w
banana :crit, b, 2017-07-23, 1d
cherry :active, c, after b a, 1d
网页链接
Images
Default (with caption)
Full screen width and center alignment
Left aligned
Float to left
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
Float to right
Praesent maximus aliquam sapien. Sed vel neque in dolor pulvinar auctor. Maecenas pharetra, sem sit amet interdum posuere, tellus lacus eleifend magna, ac lobortis felis ipsum id sapien. Proin ornare rutrum metus, ac convallis diam volutpat sit amet. Phasellus volutpat, elit sit amet tincidunt mollis, felis mi scelerisque mauris, ut facilisis leo magna accumsan sapien. In rutrum vehicula nisl eget tempor. Nullam maximus ullamcorper libero non maximus. Integer ultricies velit id convallis varius. Praesent eu nisl eu urna finibus ultrices id nec ex. Mauris ac mattis quam. Fusce aliquam est nec sapien bibendum, vitae malesuada ligula condimentum.
Dark/Light mode & Shadow
The image below will toggle dark/light mode based on theme preference, notice it has shadows.