[Hexo]和你的Hexo博客一起愉快地玩耍吧ヾ(◍°∇°◍)ノ゙

fun

之前记录了如何搭建博客、给博客添加评论、如何加速博客访问,然而归根结底,博客还是要被用来写文章、做笔记使用的,这才是前面做的万事所需要的东风。
我是在使用 Hexo 之后,才开始用 markdown 写文章做笔记的,那么这次就让我这只小菜鸟分享一下在使用 Hexo 写文的经验和技巧吧~让我们真正滴把博客玩起来!


最近实在是笔头比较懒,距离写上一篇文章已经有两个多月的时间了QAQ
我想着如果再不继续写得话,可能不久于将来这个博客又要荒废了…为了不再次重蹈覆辙!也为了我存了很多的想要和大家分享的内容!让我们高产起来吧!!!

good-baby

另外,有些小伙伴说想要看一些不一样的内容~这些都在规划中了哦~再有1-2篇关于 Hexo 的内容就要开始写其他杂七杂八的啦!

概述

在这篇文章当中,主要会和大家分享一下,我是如何新建文章、如何使用 markdown 的语法撰写文稿、如何在文章中插入图片、如何对图片进行归档、给文章打标签、为文章分类…
其实这是一篇早就该发出来的文章,搭建好了博客就像造好了房子,如果不在里面写满精致的文章,就像住在没有装修的毛坯房里,让人很不舒服。
那么我们接下来就要给大家介绍一下是如何装修房子的啦!
首先,我有一栋这样子条件的毛坯房:

* Windows 10 1803
* node-v8.11.2-x64
* git version 2.17.1.windows.2
* hexo-v3.7.1
* NexT.Muse v6.4.1

工欲善其事,必先利其器,要想房子精致美丽,也需要高级的材料,就先看看我用了哪些涂料吧:

* Visual Studio Code          # 编辑器
* markdownlint                # 编辑器插件
* hexo-asset-image            # 文章图片插件
* hexo-generator-tag          # 标签插件

其中,Visual Studio Code(以下简称 VS Code)这款编辑器好像很火来着,大家应该都不是很陌生;markdownlint 是 VS Code 的一款扩展,直接搜索安装即可,另外两款是通过 npm 安装的 hexo 插件,详细的解释和使用就让我在接下里的文中说明吧~
好的,那么接下来,我要开工啦!

three-pigs


如何撰写一篇文章

在这一章节中,我将从新建文章开始,介绍基本的 markdown 语法,让大家快速上手撰写文章~
因为我使用的是 VS Code 编辑器,一些快捷键都将以之为准,如果大家使用的是别的编辑器 or 别的环境,请自行在脑海中转义一下哦!🧙‍

新建一篇文章

在撰写文章之前,我们得先有一张能让我们挥洒墨水的白纸,那么我们要怎么样才能获得这样一张白纸呢?
那就要介绍一下 hexo 中新建文章、页面和草稿的一句命令:

hexo new [layout] <title>

其中,layout可选的参数为:postpagedraft,我们要新建的是文章,所以要选择的 layoutpost
然后,我们要按下 ctrl+` 这个快捷键,打开 VS Code内置的终端,像这样:

vscode-terminal

接下来,如果我们要新建一篇名为 my first post 的文章,那么我们在其中输入以下格式的命令,然后我们会获得新建文章后所创建 markdown 文件的本地路径:

$ hexo new post "my first post"
INFO  Created: D:\myblog\source\_posts\my-first-post.md

从命令执行的输出来看,我们可以很轻松地找到这篇文章在本地的路径,打开后可以看到如下内容:

create-a-post

至此,我们的文章已经新建成功啦~
请注意,这里生成文章的文件名可以在站点根目录的 _config.yml 中搜索 Writing 进行设置,具体设置方法以及草稿功能可以在官方文档:写作|Hexo中找到,此处不多加介绍。

markdown 的基本语法

这部分将为大家介绍 markdown 中最基本的一些语法,帮助大家快速写出一篇文章。
markdown 的语法大部分都非常简单,一般来说,稍微看一看都能迅速写出文章,但如果不了解一下细节处的规则,那么写出来的文章可能会变得乱七八糟。别问我是怎么知道的TAT
至于绘制公式、流程图这些功能如果我以后用到的话,会提前在该文章前为大家详细介绍,今天嘛~还是尽快入住新房吧!

标题语法

标题的语法是这样的:
第一级标题,开头就是一个 #
第二级标题,开头就是两个 #
第三级标题,开头就是三个 #

请注意,标题需要独自占据一行,并且在标题的文字和 # 之间需要有一个空格,不然可能会不被识别的哦!
另外,在标题的这一行,上下都需要一个空行分割,虽然不是必要的,但某些很迷的时候会导致标题无法识别。
如果使用了 markdownlint 插件,它也会勤奋地告诉大家哒!

# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题
...再往下可能就不被支持啦!

同时,大家的主题一般都支持自动生成目录,就像本页的右边→
如果大家想要这一类主题的目录生效,请务必使用 # 开头的标题为文章分节哦!

标题语法演示

这部分的演示大家就看上面这一堆加粗字并且看起来是标题的吧~同时他们还会显示在右边的目录中,他们就是最好的演示啦!

引用语法

大家写着写着文字,突然想要引用一句鲁迅先生的话,但又不是自己说的,于是,这个时候引用语法就派上了用场。
引用需要的一个特殊符号是 >,使用方法依旧很简单,只需要在引用的行首加上 > 就可以啦!多行引用就在连续的每一行之前都加上 > ~ヾ(◍°∇°◍)ノ゙
需要注意的是,引用也是以行为单位的,在行首加上 > 那么整行都被引用啦~在行中加上这个符号是不会出现引用效果的哦!
另外,引用行和下方的非引用行之间,如果没有一个空行分割,那么这个非引用行也会被当做引用行哦!

单行引用:
> 悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。——鲁迅

多行引用方式一(推荐):
> 悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。
> ————鲁迅

多行引用方式二(不推荐):
> 悲剧将人生的有价值的东西毁灭给人看,
喜剧将那无价值的撕破给人看。
————鲁迅                            # 这两行由于和上方引用行之间没有空行分隔,也会被当做引用行哦!

另外,引用是支持嵌套结构的,只要在该行行首添加更多的 > 数量,即可实现嵌套的功能

引用的嵌套结构:
> 马云说:鲁迅先生曾经说过:
>> “悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。”

这里不讨论这样的引用是否符合语文文法,仅作示例哦~

引用语法演示

单行引用:

悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。——鲁迅

多行引用:

悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。
——鲁迅

引用的嵌套结构:

马云说:鲁迅先生曾经说过:

“悲剧将人生的有价值的东西毁灭给人看,喜剧将那无价值的撕破给人看。”

代码标记语法

感觉会来捣腾这样一个博客的,基本都会和程序员搭上点边???
那么,在自己的文章中把代码高亮出来的这种操作一定也是非常常用啦!
在这里,和大家分享三种标记代码的方式:行内代码标记、普通代码块标记和高亮代码块标记。

行内代码标记语法

行内的标记语法 需要通过两个 ` 把需要被标记的内容包起来 ,上文中已经有很多用到的例子啦!
如果我们要把行内的 hello world 标记出来,我们就需要这么做:

我要把这行里的 `hello world` 标记出来。
行内代码标记语法演示

就像用引号一样使用啦!注意,这个符号就是键盘上在数字 1 左边的那个符号哦!
演示:
我要把这行里的 hello world 标记出来。

普通代码块标记语法

我们只需要将需要标记的代码块选中,然后按下键盘上的 TAB 键,即可完成这段代码的标记.
请注意,这样的代码块标记上方和下方都需要一个空行进行分隔,否则会出现各种谜一样的问题哦!
TAB 键在键盘上的这个位置:

tab-on-keyboard

普通代码块标记语法演示

其实在上方已经出现了很多类似的演示啦!为大家随便复制一段代码作为演示:

var executeSync = function(){
  var args = Array.prototype.slice.call(arguments);
  if (typeof args[0] === 'function'){
    args[0].apply(null, args.splice(1));
  }
};

高亮代码块标记语法

这种代码标记的方式可以显示行号,并且可以根据你指定的代码语言对代码进行高亮。
为了使用这种标记方式,我们需要在代码块的上方和下方各添加一个以三个反引号开头的行,这个符号也是键盘上数字 1 左侧的符号。
同样要注意的是,以三个反引号开头的行上方或者下方都需要一个空行进行分隔,否则会出现各种谜一样的问题哦!
然后,在开头行的三个反引号后写上代码所使用的语言即可对代码块进行语法高亮:

这里有三个反引号
var executeSync = function(){
  var args = Array.prototype.slice.call(arguments);
  if (typeof args[0] === 'function'){
    args[0].apply(null, args.splice(1));
  }
};
这里有三个反引号

hexo + next 好像有个 bug,在代码块里面三个反引号死活打不出来…大家自行翻译一下~

高亮代码块标记语法演示

为了能让这代码块正常显示,真的是让我煞费苦心…

1
2
3
4
5
6
var executeSync = function(){
var args = Array.prototype.slice.call(arguments);
if (typeof args[0] === 'function'){
args[0].apply(null, args.splice(1));
}
};

列表语法

往往我们会需要列举一些东西,一二三四五六七什么的,那么我们可以直接使用 [数字].[空格][内容] 的方式来实现:

1. 你拍一
2. 我拍二
3. 她拍三

如果你不想为他们编号,直接使用 星号 代替[数字].即可:

* 你拍一
* 我拍二
* 她拍三

列表语法演示

有编号的列表:

  1. 你拍一
  2. 我拍二
  3. 她拍三

没有编号的列表:

  • 你拍一
  • 我拍二
  • 她拍三

表格语法

不得不说,markdown 中的表格语法就是一个坑啊!!!
这里 推荐 大家使用 html 代码来生成表格…
但介绍还是要介绍的…
通过查阅Markdown 作者的文档,发现实际上并没有表格的语法,所以此段删除。

链接语法

生成链接的 markdown 语法共有两种,一种是内联式,另一种是引用式。
内联式的链接由连续的一对中括号和一对小括号组成,中括号里的内容是链接显示出来的文字,小括号里的内容是链接的地址,写法如下:

[这是一个链接](https://11.tt)

而引用式的链接则由像这样连续的两对中括号:

[这是一个链接][1]

以及像下方这样在文档任意位置的引用标签组成:

[1]: https://11.tt

综合起来,引用式的写法如下:

[这是一个链接][1]
[1]: https://11.tt

此外,如果想要跳转到同一页面中的某个标题处,只需要将链接位置的内容修改为井号加上标题名称即可,像这样:

[链接语法](#链接语法)

但是,同一页面中链接无法使用引用式!

链接语法演示

无论使用哪一种链接语法,出现的样子都是相同的:
这是通往本站首页的链接
这是通往本章头部的链接

插入图片语法

向文中插入图片的方式和链接是十分类似的,只需要在链接语法前加上一个 ! 即可,其中,中括号中的内容是鼠标移到图片上时显示的描述。
像这样:

![Markdown 创始人 John Gruber](John Gruber.jpg)

也可以是这样:

![Markdown 创始人 John Gruber][1]
[1]: John Gruber.jpg

插入图片语法演示

两种语法显示的图片都是一样的,照片上是 Markdown 的创始人 John Gruber:

John-Gruber

图片插件

为了更好地整理每一篇文章所使用的图片,我推荐大家使用文章开头提到的 hexo-asset-image 插件。
安装方法为:

$ npm install hexo-asset-image -save
+ hexo-asset-image@0.0.3
added 13 packages in 6.132s

当我们安装了这个插件后,每一次通过 hexo new post 命令新建文章时,在文章的相同目录都会建立一个与文章同名的文件夹。
在这个文件夹中的图片相对于文章都是相同目录,可以直接使用图片名作为图片链接直接引用该图片。

生成并发布写好的文章

其实这一步在我的第一篇文章里面已经做过详细介绍啦!→传送门←
我们使用命令 hexo g 即可生成我们刚刚写好的文章
然后通过命令 hexo d 即可发布到我们的 Coding 或者 Github 的 Pages 服务上去。
这里就不详细描述了,忘记的同学可以通过上方的传送门穿越时空去复习哦!


如何为文章添加分类

这时候我们需要回到文章的头部,在生成完文章时,hexo 自动为我们的文章头部生成了如下的内容:

---
title: my first post
date: 2018-09-09 16:00:00
---

其中,title 是文章的标题,date 是文章的建立时间,都是可以自定义的。
那么,我们要如何为文章分类呢?
类似的,我们只需要用到 categories 这个关键词,在冒号后自定义分类名即可,就像下方写的:

---
title: my first post
date: 2018-09-09 16:00:00
categories: Hexo
---

这样我就将 my first post 这篇文章添加到了 Hexo 这个分类当中去了。
那么!!我们又要如何查看这些分类呢?
这时候,我们要再次使用到 hexo new 这句命令了。
不过和上方新建文章不同的是,这次我们要新建的是一个页面,那么我们要使用的命令是:

$ hexo new page categories
INFO  Created: D:\myblog\source\categories\index.md

同样的,在建立页面完后,输出了页面的路径。
这个页面拥有独立的文件夹,以及包含页面内容的 index.md 文件。
这时候打开这个页面仍然只是一个普通的页面而已,那该如何让这个页面显示文章分类呢?
我们打开刚刚新建的 index.md 文件可以看到如同一片普通文章开头的内容:

---
title: categories
date: 2018-09-10 21:17:08
---

我们需要为它添加 type 关键字,让它知道自己到底是个什么身份(笑),就像这样:

---
title: categories
date: 2018-09-10 21:17:08
type: categories
comments: false
---

其中,comments 关键字是用来设置该页面是否允许评论的,如果你启用了评论功能,那么可以自定义这些页面是否支持评论。
然后,在站点的 _config.yml 文件中搜索 category_dir 可以找到如下内容:

...
archive_dir: archives
category_dir: categories
code_dir: downloads/code
...

这里已经设置了文章分类文件夹的名称,如果你的文章分类页不叫 categories,那么你需要将其修改为对应的名称。
这时候,再次执行 hexo g && hexo s 命令,并打开你的页面,点击主题里文章分类的链接,即可看到文章的分类啦!


如何为文章添加标签

给文章添加标签的方式和添加分类类似,但一篇文章可以有多个标签。
我们需要再次回到文章的头部,如果你已经为文章设置了分类,那么文章头部应该是类似这样的:

---
title: my first post
date: 2018-09-09 16:00:00
categories: Hexo
---

我们只需要向其中再添加一个关键词 tags,这个关键词可以是数组型的,就像这样:

---
title: my first post
date: 2018-09-09 16:00:00
categories: Hexo
tags: [Hexo, writing, post, 博客, 写作]
---

这样我就为 my first post 这篇文章添加了多个标签。
那么!!又来了我们又要如何查看这些标签呢?
我们再次使用 hexo new 这句命令新建一个页面:

$ hexo new page tags
INFO  Created: D:\myblog\source\tags\index.md

同样的,在建立页面完后,为 tags\index.md 文件头部添加 type 关键字:

---
title: tags
date: 2018-09-10 21:33:30
type: tags
comments: false
---

同样可以在在站点的 _config.yml 文件中找到如下内容:

...
public_dir: public
tag_dir: tags
archive_dir: archives
...

可是,当我们再次执行 hexo g && hexo s 命令后,打开页面主题里文章标签的链接,却并没有看到我们想看到的样子???
这时候,神奇的插件再次出马了,我们通过命令安装 hexo-generator-tag 插件:

$ npm install hexo-generator-tag -save
+ hexo-generator-tag@0.2.0
updated 1 package in 3.599s

然后,我们再次执行 hexo g && hexo s 命令,打开页面主题里文章标签的链接,看,是不是看到了好多的标签呀?!
其中,hexo-generator-tag 插件能将我们文章中的标签进行统计,并将页面 typetags 的设置为显示标签的页面。


总结

好啦!今天的分享大会就开到这里!
通过这些简单的语法,应该可以应对大部分简单的文章撰写需求啦!
顺便,一如既往地,附上官方文档,其实就是作者的博客啦!Markdown 作者的文档
顺带贴上中文版的地址:Markdown 中文文档


对了!!!你们有没有注意到左下角的神奇魔法呀!!!

arrow-left

哈哈哈哈哈哈哈厉害吧!!!୧(๑•̀◡•́๑)૭
剧透一下,下一篇文章就教大家如何添加这只哦!!!
敬请期待!!

坚持原创!欢迎客官给我打赏买小饼干吖!✿✿ヽ(°▽°)ノ✿