hexo添加各种小功能

必看提示以及声明：

请合理选择适合自己使用的方式,因个人原因产生的问题,均与博主无关

自己的博客需要增加功能来让他更perfect,把优化都记录下来

大致功能d h

hexo 开启"关于"页面
hexo 开启"标签"页面
hexo 开启"分类"页面
hexo 开启"公益404"页面
实现点击出现桃心效果
在文章末尾统一添加“本文结束”
在首页显示文章不显示全部，显示部分内容，并添加“阅读全文”按钮

hexo 开启”关于”页面

在主题的 themes/next/_configy.yml 设置中将 menu中about前面的注释去掉

menu:
about: /about/ || user

在hexo 根目录使用：hexo new page “about” 新建一个关于我页面。

hexo 开启”标签”页面

在主题的 themes/next/_configy.yml 设置中将 menu中about前面的注释去掉
menu:
tags: /tags/ || tags

使用：hexo new page tags 新建一个标签页面。

exp：
   title: 标签测试
   tags:
     - Testing                   （这个就是文章的标签了）

hexo 开启”分类”页面

在主题的 themes/next/_configy.yml 设置中将 menu中about前面的注释去掉
menu:
categories: /categories / || categories

使用：hexo new page categories 新建一个分类页面。

exp：
   title: 分类测试
   categories:
   - 生活                       （这个就是文章的分类了）
   ---

hexo 开启”公益404”页面

在主题的 themes/next/_configy.yml 设置中将 menu中about前面的注释去掉
menu:
commonweal: /404/ || heartbeat

使用：hexo new page 404 新建一个 404 页面。
注意,此时你的根目录source下会创建404文件夹，里面包含index.md文件，
我这里取腾讯公益
创建index.html把内容放进去，替换index.md
这时访问就OK了.

在使用之前我采用百度其他人的方法，比如吧404.html放在主题hexo的sourcexia以及
根目录source下都是不好用的。

实现点击出现桃心效果

输入网址

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

页面显示一段代码,copy下来

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

在/themes/next/source/js/src 下新建文love.js

xxxxx:hexo\themes\next\source\js\src\love.js

然后打开 themes\next\layout_layout.swig 文件,在文件末尾,在前面引用会出现找不到的bug）添加以下代码：

– 一定要放在最后。放在html->body内,点击文章会无法进入文章的

<script type="text/javascript" src="/js/src/love.js"></script>

然后hexo server 重新启动就完成了。

在文章末尾统一添加“本文结束”

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加内容：

<div>
    {% if not is_index %}
               -------------本文结束感谢您的阅读-------------
           {% endif %}
</div>

然后打开 \themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画代码（post-footer之前两个DIV）

<div>
  {% if not is_index %}
            {% include 'passage-end-tag.swig' %}
          {% endif %}
</div>

最后打开主题配置文件（_config.yml),在末尾添加

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

完成之后，在每篇文章之后都会添加passage-end-tag.swig内的样子。

在首页显示文章不显示全部，显示部分内容，并添加“阅读全文”按钮

1：在文章中想要截断的位置添加

<!-- more -->

2：在文章中的front-matter中添加description，并提供文章摘录
这种方式只会在首页中显示此文章的description内容，进入文章详情后不会显示。

3：在主题配置文件中添加，会自动截取
设置enable为true,默认截取的长度为 150 字符，可以根据需要自行设定

auto_excerpt:
  enable: true
  length: 150

分类页面显示文章的分类合集

在hexo->source->categories的index.md里面增加

type: "categories"

主题将自动为这个页面显示所有分类

标签页面显示文章的分类合集

在hexo->source->tags的index.md里面增加

type: "tags"

主题将自动为这个页面显示所有标签

添加友情链接

打开主题配置文件找到Blog 下面有多个link标签，

links_icon: link
links_title: Links
#links_layout: block
#links_layout: inline
links:
  Title: http://example.com/

把links内容修改为你想要的友链名称以及url即可

hexo文章中增加图片

1.把hexo网站配置文件_config.yml 里的post_asset_folder:设置为true

2.在hexo根目录下执行:npm install hexo-asset-image –save，这是安装一个可以上传本地图片的插件，来自[https://github.com/CodeFalling/hexo-asset-image]{https://github.com/CodeFalling/hexo-asset-image}

3.安装完成后，运行hexo new “博文1”来生成md博文，/source/_posts文件夹内除了博文1.md文件还有一个同名的文件夹

4.最后某个博文中想引入图片时，先把图片复制到博文对应的文件夹中，然后只需要在博文中按照markdown的格式引入图片：

![你想输入的替代文字](xxxx/图片名.jpg)

注意：博文1是这个md文件的名字，也是同名文件夹的名字。只需要有文件夹名字即可，不需要有什么绝对路径。你想引入的图片就只需要放入xxxx这个文件夹内就好了，很像引用相对路径。

5.最后检查一下，hexo g生成页面后，进入public\年\月\日\index.html文件中查看相关字段，可以发现，html标签内的语句是，而不是<img src=”博文1/图片名.jpg>。这样就会识别你的文件以及路径了

注意 这里 文件夹命名可能会导致图片无法显示：

    1.当你文件名称中包含下划线_,如果你下划线前一部分中包含数字+汉字则会导致文件无法显示,
    2.与1相同，包含冒号:也会导致无法显示
暂时只发现纯数字与数字和-暂时不影响

遇到的问题

在为网站通过“不蒜子统计”添加统计次数，在主题配置文件中查找 busuanzi_count
在site_uv_header,site_pv_header,page_pv_header添加文字时，需要在末尾添加
但是需要空一格 “”+你的文字，添加后如果直接访问会报错，如果报错，先-g 然后-s 重新启动就好了
exp:

site_uv: true
site_uv_header: <i class="fa fa-user"></i> 本站访客数
site_uv_footer:

在开起友链的操作中如果打开它的注释则会报错(突然发现这两个是同一个标签，打开一个就好了)

#links_layout: block
#links_layout: inline