第N个我的第1篇文章

当你看到这篇文章的标题:

第N个我的第1篇文章

听起来很拗口对不对?其实就一个意思:我之前创建了好多个网站,写过很多次网站的第一篇文章,但出于各种原因,又重建这些网站和文章。

这次是趁着服务商打折,心血来潮弄了台不错的服务器,于是抛弃了以前的Wordpress,改用回Hexo作我的主页。同时,也备了个案,算是正儿八经提供网络内容服务了。

当然这个网站的核心内容还是没有变的,大概就是我一个人的碎碎念,随手写点小技术文章之类的放上来,希望能对大家有用。

第一篇文章有什么用处呢?我觉得可以用来写几个站点常用的功能(Tag),以后写文章时候可以复制这一部分的源代码。

Hexo原生Tag

原文见: https://hexo.io/docs/tag-plugins

引用

书籍引用

1
2
3
{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake

网站引用

1
2
3
{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

Every interaction is both precious and an opportunity to delight.

NexT主题Tag

原文见: https://theme-next.js.org/docs/tag-plugins/

按钮

1
2
{% btn #, Text & Large Icon, home fa-fw fa-lg %}
{% btn #, Text & Large Icon & Title, home fa-fw fa-lg, On Hover %}
Text & Large Icon Text & Large Icon & Title

划重点

1
2
3
4
5
Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua.

Ut enim *{% label warning @ad %}* minim veniam, quis **{% label danger@nostrud %}** exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate ~~{% label default @velit %}~~ <mark>esse</mark> cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

这里每个label中,@后面的即为要显示的文字,这个@与前面的样式之间是否有空格,是无关紧要的。

链接板

适合放友链,但我这里没素材,放个原始链接: https://theme-next.js.org/docs/tag-plugins/link-grid.html

提示

这部分我觉得后面会用得比较多。把几种样式的都贴上来,方便查阅吧。

1
2
3
4
{% note default %}
#### Default Header
Welcome to [Hexo!](https://hexo.io)
{% endnote %}

Default Header

Welcome to Hexo!


1
2
3
4
{% note primary %}
#### Primary Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Primary Header

Welcome to Hexo!


1
2
3
4
{% note info %}
#### Info Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Info Header

Welcome to Hexo!


1
2
3
4
{% note warning %}
#### Warning Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Warning Header

Welcome to Hexo!


1
2
3
4
{% note danger %}
#### Danger Header
**Welcome** to [Hexo!](https://hexo.io)
{% endnote %}

Danger Header

Welcome to Hexo!


1
2
3
4
{% note info no-icon %}
#### No icon note
Note **without** icon: `note info no-icon`
{% endnote %}

No icon note

Note without icon: note info no-icon


1
2
3
4
{% note info no-icon This is a summary %}
#### Details and summary (No icon)
Note with summary: `note info no-icon This is a summary`
{% endnote %}

This is a summary

Details and summary (No icon)

Note with summary: note info no-icon This is a summary

标签页

标签页可以设定初始标签编号,在tabs命名后面逗号分隔就行。如果想初始状态下没有标签页被打开,这个初始编号写-1就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
{% tabs Sixth unique name, 2 %}
<!-- tab Solution 1@text-width -->
**This is Tab 1.**
<!-- endtab -->

<!-- tab Solution 2@font -->
**This is Tab 2.**
<!-- endtab -->

<!-- tab Solution 3@bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

This is Tab 1.

This is Tab 2.

This is Tab 3.

数学公式

写点数学公式看看。

见: https://theme-next.js.org/docs/third-party-services/math-equations.html

基本公式与引用

1
2
3
$$\begin{equation} \label{eq1}
e=mc^2
\end{equation}$$

\[\begin{equation} \label{eq1} e=mc^2 \end{equation}\]

用上面这种方法,可以在后面的文章中,引用上述数学公式。

1
The famous matter-energy equation $\eqref{eq1}$ proposed by Einstein...

The famous matter-energy equation \(\eqref{eq1}\) proposed by Einstein...

多行公式

1
2
3
4
5
6
7
$$\begin{equation} \label{eq2}
\begin{aligned}
a &= b + c \\
&= d + e + f + g \\
&= h + i
\end{aligned}
\end{equation}$$

\[\begin{equation} \label{eq2} \begin{aligned} a &= b + c \\ &= d + e + f + g \\ &= h + i \end{aligned} \end{equation}\]

同样可以在后文引用。

1
Equation $\eqref{eq2}$ is a multi-line equation.

多行对齐公式

可以用\nonumber来禁用对某一行的标号。

1
2
3
4
5
$$\begin{align}
-4 + 5x &= 2 + y \nonumber \\
w + 2 &= -1 + w \\
ab &= cb
\end{align}$$

\[\begin{align} -4 + 5x &= 2 + y \nonumber \\ w + 2 &= -1 + w \\ ab &= cb \end{align}\]

代码高亮

简单的代码高亮如下。

1
const myvar = "123";

带文件名的代码高亮如下。

mycode.cpp
1
2
3
4
5
int main(void)
{
int a = 1 + 2;
return a;
}

类似于diff的差分代码高亮如下。

mycode.cpp
1
2
3
4
5
6
7
8
9
int main(void)
{
- int a = 1 + 2;
+ int a = 1;
+ int b = 2;
+ int c = a + b;

return a;
}