首先参照这个人的项目手册

还有一些常用的git命令

清除渲染的模板

1
hexo clean

上传搜索文档

1
hexo algolia

Hexo会根据配置文件渲染出一套静态页面

1
hexo g

Hexo部署网页

1
hexo s

将上一步渲染出的一系列文件上传至至Github Pages

1
hexo d

也可以直接输入此命令，直接完成渲染和上传

1
hexo g -d

建一个文章

1
hexo new "文章名字"

这个人的教程基本跟github的教程相同，不过步骤更精细一些是个非常好的文章，

一套流程跟下来之后大概你的项目就搭建好了这个时候需要写博客了，

关于博客的创作你可能会遇到图片插入的问题，那么如何解决这个问题呢。

我们都知道：

Hexo是一个静态的博客网站生成器，生成一个博客只需要分分钟的时间就能搞定。

Hexo的博文是支持Markdown格式的，发表一篇文章只需要简简单单的几个命令。

hexo new '文章'就会生成一个名为’文章’的md文件。

641

在图中位置添加描述，分类以及标签，有利于搜索分类（以下为模板）。

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
---
title: #你的博客文章名
date: 2020-09-07 09:25:00 #文章时间
author: GavenLee #作者
img: /source/images/xxx.jpg #图片
top: true #是否顶置
cover: true #是否在引导页轮播
coverImg: /images/1.jpg #轮播图片
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92 #阅读密码这里被加密
toc: false #toc
mathjax: false #mathjax
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown #分类
tags: #标签
  - Typora
  - Markdown
abbrlink: HexoLearn #链接
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
如果开了文章加密npm install --save hexo-blog-encrypt
title: Hello World
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

如何向hexo博客中插入图片

众所周知，在md文件中插入图片的语法为![]()。

其中方括号是图片描述，圆括号是图片路径。

一般来说有三种图片路径，分别是相对路径，绝对路径和网络路径。

所谓的网络路径就是直接引用网上的图片，直接复制图片地址，放在圆括号中就完事了。

这种方式十分的方便，但是也存在一定的问题：

  • 图片失效导致无法加载；
  • 打开网页后要再请求加载图片；
  • 原网站限制，如微信公众号的图片会变得不可见等。

这种方式算是有利有弊。

绝对路径是图片在计算机中的绝对位置，相对路径是相对于当前文件的路径。

由于我们的博客是要部署在网站上，部署后会生成新的文件目录，所以我们选择使用相对路径的方式。

在hexo中使用文章资源文件夹需要在config.yaml文件中更改一下配置：

1
post_asset_folder: true

当该配置被应用后，使用hexo new命令创建新文章时，会生成相同名字的文件夹，也就是文章资源文件夹。

由于项目会生成新的文件目录，同时会解析Markdown中的图片路径，会导致一个问题。

如在一个文件目录下，博客名为1.md，相应的存在一个1文件夹存放图片image.jpg。

在Typora编辑器中，普通的md文件使用![](1/image.jpg)能在编辑器中正常显示图片。

在hexo中，按理说应该是使用![](image.jpg)，但网页中却无法正常显示。

此时应该使用这样的方式来引入图片：

1
{% asset_img image.jpg 这是一张图片 %}

虽然可以正常引用图片了，但是这种引用图片的方式只有一句话能形容，wtf。

图片插件

插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装，之后在config.yaml中更改配置如下：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了。

我们做了这么多都是为了方便，那么为什么不再方便一点呢。

hexo与Typora的完美结合

上述是从文章资源文件夹中引用图片，前提是先将图片放入到文章资源文件夹，如果图片数量众多的话，一张一张的放很影响效率。但是不用怕，我们有很方便的解决方法。

Typora是我非常喜欢的Markdown文本编辑器，在之前的文章中也介绍过一点。

Typora对于插入图片的支持做得非常好，在文件->偏好设置或者直接<C-,>进入设置。

456

使用该配置后，可以直接复制网页中的图片地址，粘贴到Typora中后，会直接复制该图片到文章资源文件夹，同时自动更改路径。

如复制网络路径的图片https://...../image.jpg粘贴到Typora中叫文章名的文章后，图片会自动变为![](文章名/image.jpg)。

但我们知道部署后，文件路径是不同的，所以当我们插入完所有的图片后，我们还需要删除每个图片路径中的文件名/。不慌，也很简单。

在Typora编辑器中，使用<C-f>快捷键，将所有的文章名/替换为空即可删除。

123

删除文件名

然后再将博客上传，图片就会随着文章一起打包。

在网页中就可以看到正常显示的图片，大功告成。

hexo内置的图标库

以我的matey主题为例

在主题路径下的

1
source\libs\awesome\css\all.css

没错，该项目的图标都在这个css中

之后去这个网站

图标都在这里有，要看好自己的版本，用的时候现在你的css里找找有没有这个css，有的话直接调用就好。

image-20201014141300760

当然，你也可以去阿里图标库

具体怎么做参照这里

记得用的时候class内容前面加iconfont空格

创建新的也页面

在博客根目录

1
hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

—- title: tags date: 2018-09-30 18:23:38 type: “tags” layout: “tags” —-

文章局部html代码不渲染

在你的 md 文章页中，部分内容不想经过 Hexo 渲染，则包一层 raw 标签：

1
2
3
4
{% raw %}
<div class="">你的一些代码...</div>
<script>你的一些代码...</script>
{% endraw %}

自定义网页会因为懒加载不加载图片

1
2
在<img class="xxx">需要添加class样式 nolazyload
具体参考 [这里](https://anzhiy.cn/posts/192f.html)

pdf插件

详情看这里

1
2
3
4
5
6

npm install hexo-pdf --save 安装
# 1.本地文件:在md文件路径下创建一个同名文件夹，其内放pdf文件名为xxx.pdf的文件
{% pdf xxx.pdf %}
# 2.在线链接
{% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %}