next-markdown技巧和模板-持续更新

博客中常用markdown的样式和模板

markdown技巧

分割线和空行

1
2
3
4
<hr />
上面是分割线
<br />
上面是空行



上面是分割线


上面是空行


markdown引用以及html写法

1
2
3
<blockquote>引用内容</blockquote>
<!-- 如果前后间隙很小,可以像下面这样写 -->
<p><blockquote>引用内容</blockquote></p>

效果如下:

引用内容

引用内容


居中和右对齐

1
2
3
4
<!-- 居中 -->
<center>内容</center>
<!-- 右对齐 -->
<div style="text-align:right">内容</div>

效果如下:

内容
内容

字体大小和颜色

1
2
3
<font color="#FF0000" size="8px">红色</font>
<font color="#FFFF00" size="6px">黄色</font>
<font color="#00FF00" size="4px">绿色</font>

效果如下:


字体高亮显示

使用mark标签进行标记,高亮显示文档中的文字
1
2
<mark>这是一个标记</mark>
使用mark标签进行标记,<mark>高亮显示</mark>文档中的文字

效果如下:

使用mark标签进行标记,高亮显示文档中的文字


插入表格

1
2
3
4
| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| ------ | ------ | ------ |
| *短文本* | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下:

一个普通标题一个普通标题一个普通标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本
  • 表格的语句上一行必须为空行,不然表格不生效;
  • 内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略;
  • -的数量至少有一个;
  • |、-、:之间的多余空格会被忽略,不影响布局;
  • 表格内容中可以套用其他用法,如加粗、斜体等。

表格对齐问题

  • -:表示内容和标题栏居右对齐;
  • :-表示内容和标题栏居左对齐;
  • :-:表示内容和标题栏居中对齐;
1
2
3
4
| 一个普通标题 | 一个普通标题 | 一个普通标题 |
| :------ | :------: | ------: |
| *短文本* | 中等文本 | 稍微长一点的文本 |
| 稍微长一点的文本 | 短文本 | 中等文本 |

效果如下:

一个普通标题一个普通标题一个普通标题
短文本中等文本稍微长一点的文本
稍微长一点的文本短文本中等文本
合并单元格、修改表格样式

Todo list

1
2
3
4
<ul>
<li><i class="fa fa-check-square"></i> 已完成</li>
<li><i class="fa fa-square"></i> 未完成</li>
</ul>

效果如下:


  • 已完成

  • 未完成


Note 嵌套 Todo list

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 一共有两种写法,效果看下面 -->
<div class="note primary">
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
</div>

<div class="note primary">
<p>
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-check-square"></i> 已完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
<i class="fa fa-square"></i> 未完成
</p>
</div>

效果如下:


已完成
已完成
已完成
已完成
已完成
未完成
未完成
未完成


已完成
已完成
已完成
已完成
已完成
未完成
未完成
未完成



插入代码

代码块

1
<!-- ```[language] [title] [url] [link-text] -->
  • 注意前后都,上面演示如果后面加了会出错
  • language表示代码语言
  • title表示出现在代码框左上角的标题
  • url表示超链接地址
  • link-text表示超链接的名称
  • 这 4 项应该是根据空格来分隔,而不是[],故请不要加[]。除非如果你想写后面两个,但不想写前面两个,那么就必须加 [] 了,要这样写:[] [] [url] [link text] 个人只验证出可以加title,url和text没验证成功。

效果如下:

title
1
<div></div>

各种支持语言的名称可以查看这篇文章

行内代码

1
`test`

Font Awesome

放大图标的方法示例:
1
2
3
4
5
6
<i class="fa fa-download"></i> 普通
<i class="fa fa-download fa-lg"></i> 变大 33%
<i class="fa fa-download fa-2x"></i> 两倍大

#fa-fw:ensuring proper alignment of the icons
<i class="fa fa-download fa-fw"></i> 图标和文字之间合适间距

效果如下:

  • 普通
  • 变大 33%
  • 两倍大
  • 图标和文字之间合适间距
fa-fw:ensuring proper alignment of the icons

note标签

next主题的note标签功能我一发现就爱上了,实在很好看啊~~~~

首先该功能可以在next\_config.yml配置文件中进行配置,默认是打开的,但是可以挑选自己喜欢的模式。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: flat
icons: true
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

我自己选择了其中的flat style,其用法如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note danger no-icon"><p>danger no-icon</p></div>

<div class="note danger"><p>danger</p><p>danger</p><p>danger</p></div>

{% note danger %}
note danger, note danger, note danger
note danger, note danger, note danger
note danger, note danger, note danger
{% endnote %}

效果如下:

default


primary


success


info


warning


danger


danger no-icon

note danger, note danger, note danger
note danger, note danger, note danger
note danger, note danger, note danger

next\_config.yml三种样式的具体情况请看网站

label标签

该标签也是在next\_config.yml配置文件中,默认是打开的
1
2
3
4
5
6
* Usage:
*
* {% label [class] %}Content{% endlabel %}
*
* [class] : default | primary | success | info | warning | danger.
* If not defined, default class will be selected.
default
1
{% label default@default %}
primary
1
{% label primary@primary %}
success
1
{% label success@success %}
info
1
{% label info@info %}
warning
1
{% label warning@warning %}
danger
1
{% label danger@danger %}
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.


Tab 选项卡

该标签也是在next\_config.yml配置文件中
1
2
3
4
5
6
7
# Tabs tag.
tabs:
enable: true
transition:
tabs: true
labels: true
border_radius: 3
用法讲解:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
tabs.js | global hexo script.

Usage:

{% tabs [Unique name], [index] %}
<!-- tab [Tab caption]@[icon] -->
Any content (support inline tags too).
<!-- endtab -->
{% endtabs %}

[Unique name] : Unique name of tabs block tag without comma.
Will be used in #id's as prefix for each tab with their index numbers.
If there are whitespaces in name, for generate #id all whitespaces will replaced by dashes.
Only for current url of post/page must be unique!
[index] : Index number of active tab.
If not defined, first tab (1) will be selected.
If index is -1, no tab will be selected. It's will be something like spoiler.
May be not defined.
[Tab caption] : Caption of current tab.
If not caption specified, unique name with tab index suffix will be used as caption of tab.
If not caption specified, but specified icon, caption will empty.
May be not defined.
[icon] : Font awesome icon.
May be not defined.

设定选中第二个选项卡

应用示例:

1
2
3
4
5
6
7
8
9
10
11
{% tabs 选项卡, 2 %}
<!-- tab -->
**这是选项卡 1** 呵呵哈哈哈哈哈哈
<!-- endtab -->
<!-- tab -->
**这是选项卡 2** 额。。。
<!-- endtab -->
<!-- tab -->
**这是选项卡 3** 哇,你找到我了!
<!-- endtab -->
{% endtabs %}

效果如下:

这是选项卡 1 呵呵哈哈哈哈哈哈

这是选项卡 2 额。。。

这是选项卡 3 哇,你找到我了!

tabs 选项卡, 2:
选项卡表示选项卡的名称,如果为tab,得到的选项卡显示为tab 1、tab 2、tab 3;
2 表示一开始在第二个选项卡,非必须,若数值为 -1 则隐藏选项卡内容(也就是不显示呵呵哈哈哈哈哈哈这一些话,点击之后才会显示)。


自定义每个选项卡的名称

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fourth unique name %}
<!-- tab Solution 1 -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab Solution 2 -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab Solution 3 -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

效果如下:

This is Tab 1.

This is Tab 2.

This is Tab 3.

上面的solution 1、2、3即为自定义的,每个tab都可以设置自己的

每个tab只显示图标

1
2
3
4
5
6
7
8
9
10
11
{% tabs Fifth unique name %}
<!-- tab @text-width -->
**This is Tab 1.**
<!-- endtab -->
<!-- tab @amazon -->
**This is Tab 2.**
<!-- endtab -->
<!-- tab @bold -->
**This is Tab 3.**
<!-- endtab -->
{% endtabs %}

效果如下:

This is Tab 1.

This is Tab 2.

This is Tab 3.

上面的@amazon即为图标icon

既显示图标有显示名称

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

效果如下:

这个貌似会报错

制作链接,快速访问多个tabs组

参见网址

tabs中套用其他标签

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
34
35
36
37
38
39
40
{% tabs Tags %}
<!-- tab -->
**This is Tab 1.**

1. One
2. Two
3. Three

Tabbed code block:

nano /etc

{% code %}
code block tag
code block tag
code block tag
{% endcode %}

{% note default %}
Note default tag.
{% endnote %}{% youtube A1Qb4zfurA8 %}
<!-- endtab -->
<!-- tab -->
**This is Tab 2.**

* Five
* Six
* Seven

{% note primary %}
{% youtube rX3W5evpeJE %}
{% endnote %}
<!-- endtab -->
<!-- tab -->
**This is Tab 3.**
{% note success %}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
{% endnote %}
<!-- endtab -->
{% endtabs %}

最终效果:

This is Tab 1.

  1. One
  2. Two
  3. Three

Tabbed code block:

nano /etc
1
2
3
code block tag
code block tag
code block tag

Note default tag.

This is Tab 2.

  • Five
  • Six
  • Seven

This is Tab 3.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.


按钮样式

1
2
3
4
5
6
7
8
# fa-lg:放大图标33%
# fa-fw:图标和文字之间合理间距显示
# download:图标的名称,fa-download,这里只写download即可
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}
<div class="text-center">
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-fw %}
</div>
{% btn https://almostover.ru/2016-01/hexo-theme-next-test/#Button-tag-test, 更多关于按钮的使用点这里, download fa-lg fa-rotate-90 %}

最终效果:
更多关于按钮的使用点这里

更多关于按钮的使用点这里
点击上面的按钮可以跳转到另一个网址,查看更过关于按钮的操作
  • 可以将其放在html语句中进行居中等各种操作
  • btn后跟着点击按钮之后想访问的链接
  • fa-lg:放大图标33%
  • fa-fw:图标和文字之间合理间距显示
  • fa-rotate-90:顺时针旋转90度
  • download:图标的名称,fa-download,这里只写download即可


插入照片

因为图片功能在markdown语法中比较常用,所以将其单列出来,便于查找。

使用七牛作为图床

用法实例:

1
2
3
4
5
6
{% qnimg test2.png title:"test" alt:"图片说明" 'class:class1 class2' extend:?imageView2/2/w/600 %}

<!-- 将其插入html语句中 -->
<div align="right">
{% qnimg test2.png title:"test" alt:"图片说明" 'class:class1 class2' extend:?imageView2/2/w/600 %}
</div>

  • title:鼠标移到图片上显示的名称
  • alt:图片不能正常加载时显示的说明文字
  • extend:?imageView2/2/w/600 :表示生成宽度最多600px的缩略图

已经放弃七牛图床,并采用阿里云作为图床,具体请参考这篇文章


常规markdown语法

1
2
3
4
5
![图片描述,相当于alt](https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png "Optional title,相当于title")
<!-- 居中操作可以使用center标签将上述包裹 -->
<center>
![图片描述,相当于alt](https://showteeth.oss-cn-beijing.aliyuncs.com/blog_img/test2.png "Optional title,相当于title")
</center>

最终效果:

markdown_pic


markdown_pic

Optional title 是用来在鼠标移到图片上时显示的title

使用markdown插入图片的缺点:一般的宽和高等属性不好修改,各个编辑器支持的写法可能有区别


html代码插入图片

针对使用markdown插入图片的缺点,使用html语句可以很好的解决

1
2
3
4
5
6
<!-- 使用img标签-->
<img src="http://pn9abh3rj.bkt.clouddn.com/test.png" width = "300" height = "200" alt="图片名称" align=center />
<!-- 使用div标签包裹 -->
<div align="center">
<img src="http://pn9abh3rj.bkt.clouddn.com/test.png" title="使用html插入图片" alt="图片名称" />
</div>

最终效果:

图片名称


图片名称
  • 不推荐使用这个img标签来进行对齐操作,容易和文本混在一起,居中的时候还好;
  • 推荐使用div标签包裹img标签。


tips

  • 博客一般都以二级标题开始写起
  • html代码如div标签后面一定要空行
  • 标签之间一般都是可以嵌套的
  • 插入图片推荐使用div标签包裹img标签实现
  • 写完一段记得空行!!!尽量每写完一段就空一行,尤其是代码段和文字之间,不然可能会出现markdown语法不能识别的情况(前面的错误可能导致后续很多语法都不能正常识别,在找错误的时候看第一个不能识别的位置)


参考链接



-----本文结束感谢您的阅读-----

本文标题:next-markdown技巧和模板-持续更新

文章作者:showteeth

发布时间:2019年02月16日 - 23:38

最后更新:2019年03月20日 - 21:42

原始链接:http://showteeth.tech/posts/37746.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%