【置顶】博客写作模板

发表于 | 更新于 | 分类于 ，   |   字数统计 2,434 字 | 热度 ℃

工欲善其事，必先利其器。
在开始写作之旅之前，有必要对博客可用的写作格式进行梳理，做到随用随取、熟能生巧。本博客完美支持 GitHub Flavored Markdown，也可以通过安装插件支持 Octopress 的写作风格。

如果需要完美支持GitHub Flavored Markdown，需要安装插件hexo-renderer-marked, 命令是npm install hexo-renderer-marked –save，并在_config.yml中进行相关配置。请确保安装了该插件的 latest release 版本，它也在不断更新中。

博客的各种插件，详见官网插件页。

学术写作可以直接将Jupyter notebook完整嵌入博客，具体参考这篇博文。

Markdown基本语法

文本

标题层级用#的个数进行区分，一二级标题还可以使用连续的六个符号（= for 一级标题， - for 二级标题）。
在同一段落中另起一行，键入一个<Enter>；另起一个段落，连续键入两个<Enter>。

强调格式

1
这是 **粗体**，而这是 *斜体* ，也可以 **_一起用_** 。你这样 ~~删去文字~~ 。这是强调的文字或者行内代码：`强调`。

这是 粗体，而这是 斜体 ，也可以 一起用 。你这样 删去文字 。这是强调的文字或者行内代码：强调。

链接

1
2
3
4
5
6
7
- 带标题的链接，标题可选：[谷歌](https://www.google.fr "Google")。
- 引用链接，并在文末申明链接地址：[引用链接0][Google France] 或 [引用链接1][1] 或 [引用链接2]
- 直接暴露链接：https://www.google.fr
[Google France]: https://www.google.fr
[1]: https://www.google.fr
[引用链接2]: https://www.google.fr

列表

无序列表可以使用*或-或+，有序列表使用数字进行编号，比如：

1
2
3
4
5
1. 项目1
  - 子项目1
  - 子项目2
2. 项目2
3. 项目3
  1. 项目1
    • 子项目1
    • 子项目2
  2. 项目2
  3. 项目3

当然，还有任务列表，比如：

1
2
3
- [x] \(:我已经完成这项任务
- [x] 哈哈，我又完成了一项
- [ ] 这是我未来要做的
  • (:我已经完成这项任务
  • 哈哈，我又完成了一项
  • 这是我未来要做的

段落引用

使用>即可，引用中可以嵌套markdown语法，如：

1
2
3
4
5
> *鲍煜坤*说了一大段废话
> 他把我们带入了这样一个美丽的童话世界，想去看看嘛？
> 快点点击[这里][Google France]
[Google France]: https://www.google.fr

鲍煜坤 说了一大段废话
他把我们带入了这样一个美丽的童话世界，想去看看嘛？
快点点击这里

代码块

1
2
3
4
(```)组合 + 语言类型(如：python)
s = "Python syntax highlighting"
print s
(```)组合
1
2
s = "Python syntax highlighting"
print s

GitHub评论

@用于通知GitHub上的coder和team，#用于提及GitHub上的 issue 和 pull request，:Emoji-Name:用于使用Emoji。如：

1
@baoyukun, baoyukun/PAF-Telecom-ParisTech#1，This is good :smile:。

分隔线

多于三个的-或*，如

1
-----------------

表格

使用-分隔表头行，使用:控制对齐，可以嵌套markdown语法，如：

1
2
3
4
Markdown | Less | Pretty
--- |:---:| ---:
*默认左对齐* | `这是居中` | **还可以右对齐**
1 | 2 | 3
MarkdownLessPretty
默认左对齐这是居中还可以右对齐
123

图像

其格式和 链接 基本一致，如：

1
2
3
![alt text](https://blog.baoyukun.win/img/001.jpg "鲍煜坤在井冈山")
# 可以使用相对路径
![alt text](/img/001.jpg "鲍煜坤在井冈山")

alt text

Hexo个性化标签

段落引用

基本样式

1
2
3
4
5
6
7
{% blockquote 尼古拉·奥斯特洛夫斯基, 钢铁是怎样炼成的 %}
人的一生应当这样度过：当他回首往事时，不因虚度年华而悔恨，也不因碌碌无为而羞愧。
{% endblockquote %}
{% blockquote 鲍煜坤 https://blog.baoyukun.win/%E6%9D%82%E8%B0%88/Chinese-tutorial/ 中文教案 %}
有机会与寻常法国百姓家的孩子深入打交道，也是一种独特的文化体验，这比练习提高法语还要重要。
{% endblockquote %}

人的一生应当这样度过：当他回首往事时，不因虚度年华而悔恨，也不因碌碌无为而羞愧。

尼古拉·奥斯特洛夫斯基钢铁是怎样炼成的

有机会与寻常法国百姓家的孩子深入打交道，也是一种独特的文化体验，这比练习提高法语还要重要。

文本居中

1
2
3
4
{% cq %}
人的一切痛苦，本质上都是对自己的无能的愤怒。
<span style="font-weight: bold;">王小波</span>
{% endcq %}

人的一切痛苦，本质上都是对自己的无能的愤怒。
王小波

个性化定制

引用类型

1
2
3
4
5
6
7
8
{% note class_name %}
#class_name = null(纯), default(灰), primary(深蓝), success(绿), info(浅蓝), warning(黄), danger(红)
想说的内容（部分支持markdown）
{% endnote %}
e.g.,
{% note danger %}
**注意一下**（部分支持markdown）
{% endnote %}

注意一下（部分支持markdown）

边框位置与颜色

1
2
3
4
5
6
7
8
# color_name = red, yellow, green, blue, purple
inline: <span id="inline-color_name"></span>   #仅限green, blue, purple
left-border: <p id="div-border-left-color_name"></p>
right-border: <p id="div-border-right-color_name"></p>
top-border: <p id="div-border-top-color_name"></p>
e.g.,
<span id="inline-green">大家好</span>
<p id="div-border-top-red">前进，前进，前进！我们的军队向太阳，脚踩着祖国的大地。</p>

大家好

前进，前进，前进！我们的军队向太阳，脚踩着祖国的大地。

添加注脚

1
2
3
4
5
#使用时去掉转义符
鲍煜坤是一个大笨蛋[\^1]
原因尽人皆知[\^2]
[\^1]: 大家都这样说
[\^2]: 他不知道[markdown](https://en.wikipedia.org/wiki/Markdown)是什么

鲍煜坤是一个大笨蛋1
原因尽人皆知2

下载模式

1
<div style="display: table; margin: 5px auto;"><a id="download" href="https://blog.baoyukun.win/guest/"><i class="fa fa-windows" aria-hidden="true"></i>&emsp;点我下载&emsp;Office 2020&emsp;<i class="fa fa-windows" aria-hidden="true"></i></a></div>

图标来源于Font Awesome。

代码引用

代码文件

代码文件置于博客source目录下的自定义文件夹内，可以在_config.yml文件里对code_dir进行设置。

1
2
3
{% include_code [lang:language] [title] path/to/file %}
e.g.
{% include_code lang:cpp solution in C++ CodeJam/numberGuessing.cpp %}
solution in C++view raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#include <bits/stdc++.h>
using namespace std;
int main()
{
    //freopen("in.txt", "r", stdin);
    int num_test_cases;
    cin >> num_test_cases;
    for (int caseNum = 1; caseNum <= num_test_cases; ++caseNum)
    {
        int lo, hi;
        cin >> lo >> hi;
        int num_tries;
        cin >> num_tries;
        /****** core ******/
        int head = lo + 1, tail = hi;
        while (true)
        {
            int m = (head + tail) / 2;
            cout << m << endl;
            string s;
            cin >> s;
            if (s == "CORRECT")
                break;
            if (s == "TOO_SMALL")
                head = m + 1;
            else
                tail = m - 1;
        }
        /****** core ******/
    }
    return 0;
}

代码块

1
2
3
4
5
6
7
8
{% codeblock [title] [lang:language] [url] %}
code
{% endcodeblock %}
e.g.,
{% codeblock downloader.py lang:python https://raw.githubusercontent.com/baoyukun/PAF-Telecom-ParisTech/master/crawler/downloader.py %}
with urllib.request.urlopen(addr) as f:
links = re.findall('"[^<^>]\*.pdf', f.read().decode('iso-8859-1'))
{% endcodeblock %}
downloader.pylink
1
2
with urllib.request.urlopen(addr) as f:
links = re.findall('"[^<^>]\*.pdf', f.read().decode('iso-8859-1'))

代码碎片

1
2
{% jsfiddle shorttag [tabs] [skin] [width] [height] %}    # jsfiddle
{% gist gist_id [filename] %}    # gist

数学公式

1
2
3
4
5
#注意：markdown有时会吞掉公式中的特殊符号
#因此 “如果有问题，前加转义符！”
行内公式：$这里是公式$
行间公式：$$这里是公式$$

我们可以自由地写行内公式，如 $\cos 2\theta = \cos^2 \theta - \sin^2 \theta = 2 \cos^2 \theta - 1$。 We can display an inline formula, like $\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$, very simple!

我们也可以写行间公式，如：$$\frac{\partial u}{\partial t} = h^2 \left( \frac{\partial^2 u}{\partial x^2} + \frac{\partial^2 u}{\partial y^2} + \frac{\partial^2 u}{\partial z^2}\right)$$

We can display formulas as blocks as followings:
$$
\begin{equation}
\left\{
\begin{aligned}
\dot{x} & = \sigma(y-x) \\[2ex]
\dot{y} & = \rho x - y - xz \\[2ex]
\dot{z} & = -\beta z + xy
\end{aligned}
\right.
\end{equation}
$$

We can highlight equation by adding both border and background:
$$
\bbox[yellow,5px,border:2px solid red]
{
e^x=\lim_{n\to\infty} \left( 1+\frac{x}{n} \right)^n
}
$$

下面是一个矩阵：
$$
\begin{pmatrix}
1 & a_1 & a_1^2 & \cdots & a_1^n \\
1 & a_2 & a_2^2 & \cdots & a_2^n \\
\vdots & \vdots & \vdots & \ddots & \vdots \\
1 & a_m & a_m^2 & \cdots & a_m^n \\
\end{pmatrix}
\nonumber
$$

这是一个数组：$$\begin{array}{c|lcr}value & \text{0} & \text{1} & \text{2} \\ \hline 0 & 0.24 & 1 & 125 \\ 1 & -1 & 189 & -8 \\ 2 & -20 & 2000 & 1+10i \end{array} \nonumber$$

以下书写形式也很常用：

$$\operatorname*{Res}_{z=1}\left(\frac1{z^2-z}\right)=1$$

$$\dbinom{n}{r}=\binom{n}{n-r}=C^n_r=C^n_{n-r}$$

$$J_{\alpha}(x)=\sum_{m=0}^{\infty}\frac{(-1)^{m}}{m!\Gamma(m+\alpha+1)}(\frac{x}{2})^{2m+\alpha}$$

$$ i\hbar\frac{\partial \psi}{\partial t} = \frac{-\hbar^2}{2m} \left(\frac{\partial^2}{\partial x^2} + \frac{\partial^2}{\partial y^2} + \frac{\partial^2}{\partial z^2} \right) \psi + V \psi $$

图像

基本样式

可以对图像大小加以控制，如：

1
<div align="center">{% img /img/001.jpg 200 120 "鲍煜坤在井冈山" %}</div>

强调样式

图片将自动扩大26%，并突破文章容器的宽度。

1
{% fi /img/001.jpg, alt-text, 鲍煜坤在井冈山 %}
alt-text

视频

1
2
{% youtube video_id %}  # for youtube
{% vimeo video_id %}   # for vimeo

如果需要更广泛的视频源支持，除直接通过嵌入iframe标签插入视频，也可以参考插件hexo-tag-owl，还可以在项目文件路径/node_modules/hexo/lib/plugins/tag/下自己添加所需的视频标签对应的JavaScript文件。

下面的示例是一个YouTube视频，墙内的朋友若无法观看，并不能说明代码有误，请正确上网(ﾉ”◑ ◑)ﾉ”

内嵌PDF

1
{% pdf /img/tutorial.pdf %}

示例请见另一篇博文：中文教案

嵌入HTML

  • 对内嵌HTML支持很好，可以直接在raw标签内书写 纯HTML，如：
1
2
3
4
5
6
7
8
9
{% raw %}
<dl>
  <dt>titleA</dt>
  <dd>Hello everyone!</dd>
  <dt>titleB</dt>
  <dd>不支持内嵌markdown：**粗体**，使用标签实现<strong>粗体</strong>.</dd>
</dl>
{% endraw %}
titleA
Hello everyone!
titleB
不支持内嵌markdown：**粗体**，使用标签实现粗体.
  • 还可以利用url直接插入iframe标签，即：
1
{% iframe url [width] [height] %}

参考文献

Mastering Markdown
Markdown Cheatsheet
Emoji cheat sheet
Next使用文档-内置标签
Hexo-tag plugins
MathJax quick reference

  1. 1.大家都这样说 ↩
  2. 2.他不知道markdown是什么 ↩
鲍煜坤 wechat
扫一扫，更多精彩等你哦(^_−)☆
帮我买杯奶茶，鼓励我继续创作吧ヾ(◍°∇°◍)ﾉﾞ