hexo的基本使用以及问题及解决办法(持续更新)

基本写作操作

创建新的文章

hexo new [layout] <title>

其中layout可以设置为post，page，draft。生成的对应的文章会生成在source文件下对应的目录中， “title” 是生成文章的名字，需要使用引号，例如：

hexo new drafts "hexo的基本使用"

其中post是默认的选项，post完成后如果在 hexo d 就会发布出去

draft选项：完成之后并不会直接发布，需要使用指令转化为post

hexo publish [layout] <title>

创建完文章之后打开对应的md文件，一般有默认的模板，可以添加额外的内容，参考此文档中的Post Front-matter

删除文章

​ 直接在本地删除即可，然后再分别输入上传即可（若要删除的文章没有上传过则省略下面步骤）参考此文

hexo clean
hexo g
hexo d 

在本地查看结果

hexo s

默认的端口号是4000，如果打开的网址没有内容，可能是因为端口被占用了，可以更改默认的端口号

hexo s -p 4001

将默认的端口号改成4001并且运行

或者永久更改，参考此文

上传文章

hexo clean
hexo g
hexo d

md文件中无法插入本地图片

有的博客要让下插件，但是我下载之后不能正常使用，查阅之后发现直接在source文件夹下面多加一个img文件夹就可以解决本地和上传之后的图片。

参考此篇文章的第二种方法
示例:

补充：

​ 使用post_asset_image之后，还是不能成功渲染图片，html显示如下内容：

html输出为：

但是在html文件中却是：

然后我的img文件存放在source/img/<文章名字> 下面的，所以html中缺少…/来回到source文件。

解决方法：找到blog\node_modules\hexo-asset-image\index.js 文件，将58，59行改成下列就能正常运行了：部分参考这个文章

hexo.butterfly导航栏的类别与标签打开显示Cannot GET /xxx/

实测该博主的方法可以解决该问题

部署到github时出现以下问题

该问题是因为将所有文件都一起部署到了仓库当中，正常情况下，只会部署public中的静态文件到仓库中。

解决方法：

不适用git init初始化库,如果已经使用了这个指令先使用下面两个指令进行删除

Remove-Item -Recurse -Force .deploy_git

下载部署插件

npm install hexo-deployer-git --save

然后再使用hexo d部署就能成功部署

使用公式时出现问题，每个公式都渲染了两次

​ 我使用的是butterfly自带的katex，在主题config配置如下：

但是 渲染到html文件的时候出现如下情况：

md文件中为：

​ 查看html文件发现：

​ 其中公式被渲染了两次，分别为ketax-html和katex-mathml，具体为什么会这样还没不可得知，可能是之前配置的有问题?,在网上查阅之后也没有类似案例,只好自己解决.

​ 这里我们想使用的是katex-mathml 这个的结果,那么最简单的方式是直接将ketax-html 设置为不显示就行,只需在主题的css添加:

.katex-html {
  display: none !important;
}

​ 就可以不显示所有的katex-html.butterfly主题的source下有css文件,其中有一个index.styl文件是用来引用静态css文件的

​ 其中引用了很多css文件,只要在其中一个加上上面的css代码就行,这个选_global文件夹中的index.styl中添加上面的css代码,然后重新部署就可以解决.

​ 注:不能直接在hexo目录下的public/css/index.css中添加上面的css代码,因为每次hexo clean 和hexo g会根据主题的css重新设置public/css/index,导致添加的代码被覆盖.

笔记命名问题

笔记的文件名字必须和title一致，不然无法发布出去。所以一开始就将两者保持一致，避免对应的图像文件夹名字也出现错误，导致需要修改的地方过多。

下一页按钮与页数边框无法对齐

当内容过多出现第二页之后，有以下问题，页不知道是什么造成的。

解决方案如下：

在source\css\custom.css目录下创建该css文件，然后输入以下内容：

/* 强制统一分页按钮尺寸 */
#pagination .pagination > a,
#pagination .pagination > span {
  width: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

/* 防止 Font Awesome 图标撑高 */
#pagination .pagination .extend i {
  line-height: 1 !important;
  font-size: 1.2em;
}

/* 防止 hover 抖动 */
#pagination .pagination > a,
#pagination .pagination > span {
  border: 2px solid transparent !important;
}

然后重新部署即可解决。

如果还不能解决，在_config.butterfly.yml 中，修改以下内容字段：

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:
    # - <script src="xxxx"></script>

top_iamge设置问题

具体原因还不知道，先记录在这个地方，在文章开头的地方声明cover的时候如果是

cover: /img/word2vec.png 这种的就会默认将封面也渲染到顶部

但是如果是cover: /img/wod2vec.png 就不会渲染到顶部。