Hexo博客的Markdown语法

发表于 | 更新于

1 Markdown语法

1.1 标题

Markdown支持6种级别的标题，对应html标签 h1 ~ h6

1
2
3
4
5
6
# h1   //一级标题 对应 <h1> </h1>
## h2   //二级标题 对应 <h2> </h2>
### h3  //三级标题 对应 <h3> </h3>
#### h4  //四级标题 对应 <h4> </h4>
##### h5  //五级标题 对应 <h5> </h5>
###### h6  //六级标题 对应 <h6> </h6>

1.2 段落及区块引用

Markdown提供了一个特殊符号 > 用于段首进行强调，被强调的文字部分将会高亮显示

1
> 这段文字将会被高亮显示

以上标记显示效果如下：

这段文字将会被高亮显示

1.3 插入链接或图片

Markdown针对链接和图片的处理也比较简单，可以使用下面的语法进行标记

1
2
[点击跳转至Google](https://www.google.com)
![图片](http://e.hiphotos.baidu.com/image/pic/item/55e736d12f2eb93867023248df628535e5dd6f19.jpg)

以上标记显示效果如下：
点击跳转至Google
图片

注： 引用图片和链接的唯一区别就是在最前方添加一个感叹号。

1.4 列表

Markdown支持有序列表和无序列表两种形式：

1
2
3
4
5
6
7
8
9
10
11
无序列表使用 * 或 + 或 - 标识
有序列表使用数字加 . 标识，例如：1.
注意：标识和文字之间要有一个空格

- 无序列表1
- 无序列表2
- 无序列表3

1. 有序列表1
2. 有序列表2
3. 有序列表3

显示效果如下：

  • 无序列表1
  • 无序列表2
  • 无序列表3
  1. 有序列表1
  2. 有序列表2
  3. 有序列表3

1.5 分隔线

有时候，为了排版漂亮，可能会加入分隔线。Markdown加入分隔线非常简单，使用下面任意一种形式都可以

1
2
***
---

1.6 内容强调

有时候，我们对某一部分文字进行强调，使用 * 或 _ 包裹即可。使用单一符号标记的效果是斜体，使用两个符号标记的效果是加粗

1
2
3
4
5
6
7
8
*这里是斜体*
_这里是斜体_

**这里是加粗**
__这里是加粗__

***这里是加粗并斜体***
___这里是加粗并斜体___

以上标记显示效果如下：

这里是斜体
这里是斜体

这里是加粗
这里是加粗

这里是加粗并斜体
这里是加粗并斜体

1.7 删除线

1
这样来~~删除一段文本~~

以上标记显示效果如下：
这样来删除一段文本

1.8 高亮显示

1
2
使用<code>\`</code>来强调字符 // 想打出 ` (反引号)需要转义
比如`突出背景色`来显示强调效果

以上标记显示效果如下：

使用`来强调字符 //想打出 ` (反引号)需要转义
比如突出背景色来显示强调效果

1.9 嵌套引用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
> 动物
>> 水生动物
>> 陆生动物
>>> 猴子
>>> 人
>>>> 程序猿
>>>> 攻城狮
>>产品狗 //这里需要注意，没有空行间隔，忽略降级引用标记
射鸡虱   //这里需要注意，没有空行间隔，忽略降级引用标记

>> 两栖类动物
>>> 大鳄鱼
唐老鸭

两个回车结束引用,不在引用范围内了！

以上标记显示效果如下：

动物

水生动物
陆生动物

猴子
人

程序猿
攻城狮
产品狗 //这里需要注意，没有空行间隔，忽略降级引用标记
射鸡虱 //这里需要注意，没有空行间隔，忽略降级引用标记

两栖类动物

大鳄鱼
唐老鸭

两个回车结束引用,不在引用范围内了!

1.10 插入图片

1.10.1 修改图片尺寸

在 markdown 直接使用提供的语法引入图片是无法设置大小的，所以我们需要用到 html 的 img 标签。

1
<img width="  " alt="描述" src="url"/>

例如：

1
<img width="267px" alt="这里是一张图片" src="https://cdn.pixabay.com/photo/2021/01/21/09/58/grebe-5936866_1280.jpg"/>

效果如下：
这里是一张图片

1.10.2 设置图片居中

在 markdown 设置图片居中是需要通过 div 来控制的。

1
<div align=center><img width="267px" alt="这里是一张图片" src="https://cdn.pixabay.com/photo/2021/01/21/09/58/grebe-5936866_1280.jpg"/></div>

效果如下：

这里是一张图片

1.11 代码块

1.11.1 插入代码块

Markdown在IT圈子里面比较流行的一个重要原因是，它能够轻松漂亮地插入代码。
方法是，使用三个反引号 ` 进行包裹即可。如果是行内代码引用，使用单个反引号进行包裹
代码块语法遵循标准 markdown 代码，使用 ``` 开始 ， ``` 结束 例如：

1
2
3
4
5
```Python
#!/usr/bin/env python
# -*- coding: utf-8 -*-
print 'Hello World! 
```

以上标记显示效果如下：

1
2
3
#!/usr/bin/env python
# -*- coding: utf-8 -*-
print 'Hello World!

注：很多人不知道怎么输入反引号。在英文模式下，找到键盘最左侧esc键下面的第一个键点击即可。
有人会问：
如何在代码块中打出 ```
实际上是使用 4个` 包含 3个` 就可以了，想表示更多，最外层+1就好了。

1
2
```
```

1.11.2 代码块高亮

如果你只想高亮语句中的某个函数名或关键字，可以使用 `function_name()` 实现

通常编辑器根据代码片段适配合适的高亮方法，但你也可以用 ``` 包裹一段代码，并指定一种语言

1
2
3
$(document).ready(function () {
    alert('hello world');
});

支持的语言：1c, abnf, accesslog, actionscript, ada, apache, applescript, arduino, armasm, asciidoc, aspectj, autohotkey, autoit, avrasm, awk, axapta, bash, basic, bnf, brainfuck, cal, capnproto, ceylon, clean, clojure, clojure-repl, cmake, coffeescript, coq, cos, cpp, crmsh, crystal, cs, csp, css, d, dart, delphi, diff, django, dns, dockerfile, dos, dsconfig, dts, dust, ebnf, elixir, elm, erb, erlang, erlang-repl, excel, fix, flix, fortran, fsharp, gams, gauss, gcode, gherkin, glsl, go, golo, gradle, groovy, haml, handlebars, haskell, haxe, hsp, htmlbars, http, hy, inform7, ini, irpf90, java, javascript, json, julia, kotlin, lasso, ldif, leaf, less, lisp, livecodeserver, livescript, llvm, lsl, lua, makefile, markdown, mathematica, matlab, maxima, mel, mercury, mipsasm, mizar, mojolicious, monkey, moonscript, n1ql, nginx, nimrod, nix, nsis, objectivec, ocaml, openscad, oxygene, parser3, perl, pf, php, pony, powershell, processing, profile, prolog, protobuf, puppet, purebasic, python, q, qml, r, rib, roboconf, rsl, ruby, ruleslanguage, rust, scala, scheme, scilab, scss, smali, smalltalk, sml, sqf, sql, stan, stata, step21, stylus, subunit, swift, taggerscript, tap, tcl, tex, thrift, tp, twig, typescript, vala, vbnet, vbscript, vbscript-html, verilog, vhdl, vim, x86asm, xl, xml, xquery, yaml, zephir

如你不需要代码高亮，可以用下面的方法禁用：

1
2
```nohighlight
```

1.12 插入表格

表格是Markdown语法中比较复杂的一个，其语法如下：

1
2
3
4
5
列1   | 列2 | 列3 
----- | --- | ---- 
第1行 | 12  | 13  
第2行 | 22  | 23  
第3行 | 32  | 33

以上标记显示效果如下：

列1 列2 列3
第1行 12 13
第2行 22 23
第3行 32 33

可以使用冒号来定义对齐方式：
全居中样式：

1
2
3
表头|条目一|条目二
:---:|:---:|:---:
项目|项目一|项目二

以上标记显示效果如下：

表头 条目一 条目二
项目 项目一 项目二

可能有人喜欢左对齐或者右对齐，也可以设置:

1
2
3
4
| 左对齐    |  右对齐 | 居中 |
| :-------- | -------:| :--: |
| Computer  | 5000 元 |  1台 |
| Phone     | 1999 元 |  1部 |

以上标记显示效果如下：

左对齐 右对齐 居中
Computer 5000 元 1台
Phone 1999 元 1部

注：三个短竖杠左右的冒号用于控制对齐方式，只放置左边冒号表示文字居左，只放置右边冒号表示文字居右，如果两边都放置冒号表示文字居中。

1.13 特殊符号处理

1.13.1 转义特殊符号

Markdown使用反斜杠\插入语法中用到的特殊符号。在Markdown中，主要有以下几种特殊符号需要处理：

1
2
3
4
5
6
7
8
9
10
11
12
\   反斜线
`   反引号
*   星号
_   底线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号

例如，如果你需要插入反斜杠，就连续输入两个反斜杠即可：\\=> \ 。

注：在内容中输入以上特殊符号的时候一定要注意转义，否则将导致内容显示不全，甚至排版混乱。

1.13.2 其他特殊符号

竖线

1
2
一个竖线: &#124;
两个竖线: &#124;&#124;

展示效果如下：
一个竖线: |
两个竖线: ||

空格

1
2
3
4
5
不断行空格 &nbsp;
半角空格 &ensp;
全角空格 &emsp;

例：这&nbsp;是&ensp;个&emsp;例子

展示效果如下：

这 是 个 例子

1.14 文本居中引用

1
2
3
4
5
6
{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

以上标记显示效果如下：

人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

注：如果想修改字号，可以如下面这样设置：

1
2
3
4
5
6
7
8
<font size="8">
{% cq %}
  人生乃是一面镜子，
  从镜子里认识自己，
  我要称之为头等大事，
  也只是我们追求的目的！
{% endcq %}
</font>

以上标记显示效果如下：


人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

1.15 标签

1.15.1 note标签

通过 note 标签可以为段落添加背景色，语法如下：

1
2
3
{% note class %}
文本内容 (支持行内标签)
{% endnote %}

支持的 class 种类包括 default primary success info warning danger，也可以不指定 class。

各种 class 种类的效果如下：

default note tag

primary note tag

success note tag

info note tag

warning note tag

danger note tag

也可以用下面的方式来标记

1
<div class="note default"><p>default</p></div>

显示效果如下：

default

1
<div class="note primary"><p>primary</p></div>

以上标记显示效果如下：

primary

1
<div class="note success"><p>success</p></div>

以上标记显示效果如下：

success

1
<div class="note warning"><p>warning</p></div>

以上标记显示效果如下：

warning

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

以上标记显示效果如下：

danger

1.15.2 lable标签

通过 label 标签可以为文字添加背景色，语法如下：

1
{% label [class]@text  %}

支持的 class 种类包括 default primary success info warning danger，默认使用 default 作为缺省。

使用示例如下：

1
2
3
4
5
6
7
8
9
I heard the echo, {% label default@from the valleys and the heart %}
Open to the lonely soul of {% label info@sickle harvesting %}
Repeat outrightly, but also repeat the well-being of
Eventually {% label warning@swaying in the desert oasis %}
{% label success@I believe %} I am
{% label primary@Born as the bright summer flowers %}
Do not withered undefeated fiery demon rule
Heart rate and breathing to bear {% label danger@the load of the cumbersome %}
Bored

展示效果如下：
I heard the echo, from the valleys and the heart
Open to the lonely soul of sickle harvesting
Repeat outrightly, but also repeat the well-being of
Eventually swaying in the desert oasis
I believe I am
Born as the bright summer flowers
Do not withered undefeated fiery demon rule
Heart rate and breathing to bear the load of the cumbersome

1.15.3 button 按钮

通过 button 标签可以快速添加带有主题样式的按钮，语法如下：

1
{% button /path/to/url/, text, icon [class], title %}

也可简写为：

1
{% btn /path/to/url/, text, icon [class], title %}

其中， 图标 ID 来源于 FontAwesome

使用示例如下：

1
2
3
4
{% btn #, 文本 %}
{% btn #, 文本 & 标题,, 标题 %}
{% btn #, 文本 & 图标, home %}
{% btn #, 文本 & 大图标 (固定宽度), home fa-fw fa-lg %}

展示效果如下：

文本 文本 & 标题 文本 & 图标 文本 & 大图标 (固定宽度)

1.15.4 tab 标签

tab 标签用于快速创建 tab 选项卡，语法如下

1
2
3
4
5
{% tabs [Unique name], [index] %}
  <!-- tab [Tab caption]@[icon] -->
  标签页内容（支持行内标签）
  <!-- endtab -->
{% endtabs %}

其中，各参数意义如下：

  • Unique name: 全局唯一的 Tab 名称，将作为各个标签页的 id 属性前缀
  • index: 当前激活的标签页索引，如果未定义则默认选中显示第一个标签页，如果设为 - 1 则默认隐藏所有标签页
  • Tab caption: 当前标签页的标题，如果不指定则会以 Unique name 加上索引作为标题
  • icon: 在标签页标题中添加 Font awesome 图标

使用示例如下：

1
2
3
4
5
6
7
8
9
10
11
{% tabs Tab标签列表 %}
  <!-- tab 标签页1 -->
    标签页1文本内容
  <!-- endtab -->
  <!-- tab 标签页2 -->
    标签页2文本内容
  <!-- endtab -->
  <!-- tab 标签页3 -->
    标签页3文本内容
  <!-- endtab -->
{% endtabs %}

展示效果如下：

标签页1文本内容

标签页2文本内容

标签页3文本内容

1.16 文字处理

1.16.1 文字背景色

1
2
3
4
<table><tr><td bgcolor=#FFFF00>背景色的设置是按照十六进制颜色值：#FFFF00</td></tr></table>
<table><tr><td bgcolor=#D1EEEE>背景色的设置是按照十六进制颜色值：#D1EEEE</td></tr></table>
<table><tr><td bgcolor=#C0FF3E>背景色的设置是按照十六进制颜色值：#C0FF3E</td></tr></table>
<table><tr><td bgcolor=#54FF9F>背景色的设置是按照十六进制颜色值：#54FF9F</td></tr></table>

效果如下：

背景色的设置是按照十六进制颜色值：#FFFF00

背景色的设置是按照十六进制颜色值：#D1EEEE

背景色的设置是按照十六进制颜色值：#C0FF3E

背景色的设置是按照十六进制颜色值：#54FF9F

1.16.2 文字字体

1
2
3
<font face="黑体">我是黑体字</font>
<font face="宋体">我是宋体字</font>
<font face="微软雅黑">我是微软雅黑字</font>

效果如下：

我是黑体字
我是宋体字
我是微软雅黑字

1.16.3 文字大小

1
2
3
4
5
size为1：<font size="1">size为1</font>
size为2：<font size="2">size为2</font>
size为3：<font size="3">size为3</font>
size为4：<font size="4">size为4</font>
size为10：<font size="10">size为10</font>

效果如下：
size为1：size为1
size为2：size为2
size为3：size为3
size为4：size为4
size为10：size为10

1.16.4 文字颜色

1
2
3
4
5
6
7
8
红色文字：<font color="red">红色文字</font>
浅红色文字：<font color="#dd0000">浅红色文字</font> 
蓝色文字：<font color="blue">蓝色文字</font>
浅蓝色文字：<font color="#0000dd">浅蓝色文字</font>
绿色文字：<font color="green">绿色文字</font>
金黄色文字：<font color="#FFFF00">金黄色文字</font>
浅黄色文字：<font color="#dddd00">浅黄色文字</font> 
深黄色文字：<font color="#666600">深黄色文字</font>

效果如下：
红色文字：红色文字
浅红色文字：浅红色文字
蓝色文字：蓝色文字
浅蓝色文字：浅蓝色文字
绿色文字：绿色文字
金黄色文字：金黄色文字
浅黄色文字：浅黄色文字
深黄色文字：深黄色文字

需要其它更多的颜色，可以到下面这个网址查更多颜色的 RGB，或者直接用颜色的英文代替 RGB
RGB颜色查询对照表

1.16.4 同时改变字体，字号和颜色

1
2
3
4
5
6
7
8
9
<font face="字体" size="字号" color="颜色">这里是需要突出显示的内容</font>
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>

效果如下：

这里是需要突出显示的内容
我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是绿色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为5

1.17 复选框列表(github可用,hexo不支持)

在列表符号后面加上 [x] 或者 [ ] 代表选中或者未选中情况，注意：[]中间要用空格打开，否则不生效

1
2
- [ ] content 
- [x] content
  • C
  • C++
  • Java
  • Qt
  • Android
  • C#
  • .NET

1.18 引用块

1.18.1 普通的引用

在blockquote后面不写任何参数，就只是单纯的引用，效果与使用>一样

1
2
3
{% blockquote [author[, source]] [link] [source_link_title] %}
content
{% endblockquote %}

显示效果如下：

content

[author[source]] [link] [source_link_title]

1.18.2 对书上语言的引用

1
2
3
{% blockquote 作者, 出处 %}
xxxxxxxxxxxxxxxxxxxxxxxxxxxx
{% endblockquote %}

显示效果如下：

黑夜无论怎样悠长，白昼总会到来。

莎士比亚麦克白

1.18.3 对网络上的引用

1
2
3
{% blockquote @作者 网络地址 %}
xxxxxxxxxxxxxxxxxxxxxxxxxx
{% endblockquote %}

展示效果如下：

有时候，“爱国”，是一个空洞的词语。更多的人是在言语里，在诗歌里”爱国“，他们没有一点点实际行动，甚至充满抱怨。

1.19 插入视频

1.19.1 使用 video 标签插入本地视频

1
2
3
4
5
<div align=center>
<video width="480" height="320" controls>
<source src="movie.mp4">
</video>
</div>

展示效果如下：



1.19.2 使用 iframe 标签插入网络视频

1
2
3
4
5
<iframe
    height=498 width=510
    src="https://player.bilibili.com/player.html?aid=39807850&cid=69927212&page=1"
    frameborder=0 allowfullscreen>
</iframe>

展示效果如下：

1.19.3 使用 iframe 标签插入手机端兼容的网络视频

1
2
3
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="https://player.bilibili.com/player.html?aid=39807850&cid=69927212&page=1" scrolling="no" border="0" 
frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; 
height: 100%; left: 0; top: 0;" /></div>

展示效果如下：

1.20 插入音频

1.20.1 使用 iframe 标签插入本地音频

1
<iframe frameborder="yes" border="0" width=300 height=150 src="music.mp3"></iframe>

展示效果如下：

1.20.2 使用 iframe 标签插入网络音频

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=387607&auto=0&height=66"></iframe>

展示效果如下：


2 文章编辑

2.1 文章折叠

在要显示的文字末尾添加如下代码实现文章在主页的折叠显示。

1
<!-- more -->

或者也可以将themes/next/_config.yml文件中的auto_excerpt字段值改为true

2.2 新建草稿（draft）

draft 布局用于创建草稿，生成的文档存在于 source\_drafts\ 目录中，默认配置下将不会把该目录下的文档渲染到网站中。

新建一个草稿

hexo n draft draft_name

通过以下命令将草稿发布为正式文章：

hexo publish draft_name

2.3 标签与分类

标签和分类都是用于对文章进行归档的一种方式，标签是一种列表结构，而分类是一种树结构。我们以人作为例子，从标签的角度考虑，我可以拥有程序员、高颜值、幽默等标签，这些标签之间没有层级关系；从分类的角度考虑，我是亚洲人、中国人、河南人，这些分类之间是有明确的包含关系的。

可以在 Front-Matter 中添加 catergories 和 tags 字段为文章添加标签和分类，如我为本文添加了 Hexo 和 Markdown 两个标签，并将其归类到了 技术 / 博客 类别，对应的 Front-Matter 结构如下：

1
2
3
4
5
title: Hexo搭建个人博客系列：写作技巧篇
tags: Hexo Markdown
categories:
- 技术
- 博客

注：Front-Matter 是文件最上方以 — 分隔的区域，用于指定本文件的各种参数值


3 自定义NexT样式

这里仅限于使用主题为NexT的情况，自定义其他主题请自行Google。

3.1 修改分隔线样式

默认的分隔线样式为

看起来不太美观，打开themes/next/source/css/_common/scaffolding/base.styl文件，找到 hr 区块，删除background-image相关即可。

3.2 自定义其他样式

打开themes/next/source/css/_custom/custom.styl文件，添加配置如下：

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
41
42
43
// Custom styles.

/*修改选择字体块背景颜色*/
::selection {
    background: #9DA6AC;
    color: #222;
}

/*设置文章字体排版合理*/
.post-body{
	text-align: justify;
}

/*去掉图片边框*/
.posts-expand .post-body img{
  	border: 0px;
}

/*超链接设置颜色*/
.post-body p a {
color: #0593d3;
border-bottom: none;
&:hover {
color: #0477ab;
text-decoration: underline;
}
}

/*高亮文字颜色*/
code {
    color: #f61111;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

3.3 隐藏修改时间信息和时间下划虚线

3.3.1 隐藏修改时间信息

默认情况下，一篇文章会具有”发表时间”和”更新时间”两个信息，在 Next 主题的主题配置文件中有一个”更新时间”的开关：

1
2
3
4
5
6
7
8
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at:  # 这里可以开关"更新时间"
    enable: true
    another_day: true
  categories: tru

但这个开关是全局性的，要么所有文章都显示，要么所有文章都隐藏，而我只需要某些文章显示其他的隐藏，还是一样从代码入手。修改 next/layout/_macro/post.swig：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% if theme.post_meta.updated_at.enabled && datetime_diff %}
  {% set display_updated = !theme.post_meta.updated_at.another_day || theme.post_meta.updated_at.another_day && date_diff %}

  {% if display_updated or !theme.post_meta.created_at %}
    {% if theme.post_meta.created_at and theme.post_meta.updated_at.enabled %}
    <span class="post-meta-divider">|</span>
    {% endif %}

    <span class="post-meta-item-icon">
      <i class="fa fa-calendar-check-o"></i>
    </span>
    {% if theme.post_meta.item_text %}
      <span class="post-meta-item-text">{{ __('post.edited') }}</span>
    {% endif %}
    <time title="{{ __('post.modified') + __('symbol.colon') + full_date(post.updated) }}" itemprop="dateModified" datetime="{{ moment(post.updated).format() }}">{#
    #}{% if date_diff -%}
        {{- date(post.updated) -}}
      {%- else -%}
        {{- time(post.updated) -}}
      {%- endif -%}
    </time>
  {% endif %}
{% endif %}

把这段代码的第一行改一下：

1
2
3
4
5
6
{### 根据文章是否有 modify 字段判断是否显示修改时间 ###}
{% if theme.post_meta.updated_at.enabled && datetime_diff && post.modify %}

  ......

{% endif %}

然后默认情况下，所有文章都不会显示”更新时间”了，如果某些文章需要显示，只需要在文章的头部信息栏增加一个属性 modify: true 即可：

1
2
3
4
5
---
title: Hexo博客隐藏修改时间信息和时间下划虚线
modify: true
date: 2019-12-02 09:12:49
---

3.3.2 隐藏时间下划虚线

默认情况下，时间信息（包括创建时间和修改时间）的底部还有一个下划虚线，去掉这个下滑虚线修改： next/source/css/_common/components/post/post-meta.styl：

1
2
3
4
5
6
7
8
9
10
.posts-expand .post-meta

  ......

  time {
    // 删除下面一行
    // border-bottom: 1px dashed $grey-dark;
    cursor: help;
  }
}

按照注释，删掉 border-bottom 一行即可。


参考链接

------------------------ 本文结束 ------------------------
0%