2018-05-27

Hexo小知识

view

Hexo 小知识，添加目录导航栏

1、在文档中添加目录导航

创建文章目录，需要在主题文件夹里面找到layout/_partial/post/下创建toc.ejs文件

代码如下:

<div id="toc" class="toc-article">
    <div class="toc-title">目录</div>
    <%- toc(item.content, {list_number: false}) %>
</div>

这里使用的就是Hexo提供的toc()帮助函数，使用方法是：

1	<%- toc(str, [options]) %>

str就是文章内容, options有两个参数，一个是class，也就是HTML标签的class值，默认为toc; 一个是list_number，是否显示列表编号，默认是true。

接下考虑把这个局部模块放到哪呢，既然属于post布局，那么就看看layout/post.ejs代码如下:

1	<%- partial('_partial/article', {item: page, index: false}) %>

很明显了，我们要到_partial/article.ejs文件里添加toc.ejs，添加后article.ejs代码如下：

......
    <div class="entry">
      <% if (item.excerpt && index){ %>   <!--01-->
        <%- item.excerpt %>
      <% } else { if (item.toc !== false) {%>   <!--02-->
        <%- partial('post/toc') %>
      <% } %>
        <%- item.content %>
      <% } %>
    </div>
......

01、判断是否有摘要以及index值，显然post.ejs传过来的index值为false；

02、接下来判断page.toc是不是不等于false，这一块的主要作用是可以在文章的前置声明里设置toc: false来关闭目录功能。当没有设置false时，插入上面写的toc.ejs局部模块。

OK！完美嵌入进去，接下来就是设置样式了，进入source/css/_partial/目录下，创建toc.styl，代码这里就不贴出了，具体查看github。最后别忘了在source/css/style.styl文件里加入这句了@import '_partial/toc'。样式可以自行调整。

2、给博客添加图片

首先，这里需要先确保你的Hexo的配置文件_config.yml里面有这个选项配置，并将其设置为true

post_asset_folder: true

其实这说的有点废话了，貌似HEXO 3以后的版本都有这一项了，没有就是你安装错了……

然后就是生成新文章的命令了

hexo new “filename”

这里生成新文章的时，会在

生成博客的文件夹下面的\source\_posts

目录下生成一个文章名.md文件外，附带生成一个与文章名同名的文件夹，可以用它来存放这篇文章的所有资源，比如图片，附件等

当然了，如果你自己手动去建立一个md文件来写博客，而不使用hexo new命令，此时要达到同样的效果，就需要手动去建立一个同名的文件夹去存放资源，我试过这样做是可行的，并且这样做虽然有点麻烦，但我似乎发现了它的一个优点，那就是当我的文章中没有图片时，我并不需要这个空的资源文件夹。

有了上面的配置，Hexo在public文件下生成html文件时，会在相应的目录中把那文章对应的资源文件夹中的图片等附件复制过去，这里提示一下：生成这个内容需要hexo d -g或者hexo s -g。例如，这是我生成的一个例子：

当然了，只做到这里肯定还是出不来（别打我，我是无辜的）

这里还需要安装一个插件hexo-asset-image - 图片路径转换

1	npm install https://github.com/CodeFalling/hexo-asset-image --save

其实进行到这里就已经搞定了，你完全可以

1 2	hexo clean hexo d -g

去查看你想要的效果了

但是如果你要深究这个插件安装完了，在那里，啥情况，那么请跟我来！

主文件夹下\node_modules\hexo-asset-image

hexo-asset-image的原理应该是根据Hexo生成html后以时间的为目录的规则，将我们图片的相对地址转换成了生成后与时间对应目录的绝对地址，因此我认为md文件中应该要有时间标签，一来是为了让Hexo根据md的时间标签来确定文章的新旧排序，如果没有时间标签，Hexo会把md文件的修改时间作为发布时间，这显然是不合理的，再者这个时间标签，我想hexo-asset-image也会引用到，在一篇实际的博文中，我的md文件完整的开头是这样的：

> ---
> title: hexo中完美插入本地图片
> date: 2017-01-23 11:00:55
> categories: hexo使用
> tags: 
> - hexo
> - 本地图片
> - hexo-asset-image
> ---
>

这里再次排坑

为什么要说再次……好吧好吧，我承认踩坑踩得有点多……

这里的路径大家应该都没有忘记吧：是 / , 而不是 \

是因为这个\也包含转义的意思……所以后来想到了，才恍然大悟……

博客文章添加置顶功能

$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

然后在需要置顶的文章的Front-matter中加上top: true即可。比如下面这篇文章：

---
title: hexo+GitHub博客搭建实战
date: 2017-09-08 12:00:25
categories: 博客搭建系列
top: true
---

这里冒号后面都要有个空格,没有的话貌似会挂掉

到目前为止，置顶功能已经可以实现了。所有相关博文到这边就结束了。

不过置顶的文章显示在最上面之后，如果没有明确的置顶标志，是不是感觉有点怪怪的呢？

当然有些博客的主题里面自带了这个所以如果你设置玩了可以先去看看，有没有想要的效果，如果没有可以继续更改下面的内容

打开：主题文件下的layout/_macro,目录下的post.swig文件,定位到<div class="post-meta">标签下，插入如下代码：

这里如果没有，自己新建一个

{% if post.top %}
	    
	    置顶
	    |
	  {% endif %}

好了，这里搞定，上传并部署，去自己的页面看看吧！