hexo之next主题个性化配置详细教程

1.在右上角或者左上角实现fork me on github

实现的效果图

具体实现方法

点击传送门>>
挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：

然后粘贴刚才复制的代码到
themes/next/layout/_layout.swig
文件中

<div class="headband"></div>

的下面，并把href改为你的github地址!

<a href="https://github.com/wongzeqi">

2.添加RSS

实现效果图

具体实现方法

切换到hexo初始化的目录上然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)

    $ npm install --save hexo-generator-feedalert(s);

接下来打开站点配置文件 _config.yml 在里面的末尾添加(请注意在冒号后面要加一个空格，不然会发生错误！)

   # Extensions ## Plugins: http://hexo.io/plugins/plugins: hexo-generate-feed

然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

 # Set rss to false to disable feed link.# Leave rss as empty to use site's feed link.# Set rss to specific value if you have burned your feed already.rss: /atom.xml

配置完之后运行：

$ hexo g

重新生成一次，你会在 ./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。

3. 添加动态粒子背景

实现效果图

具体实现方法

修改_layout.swig
打开 next/layout/_layout.swig
在 < /body>之前添加代码(注意不要放在< /head>的后面)

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
{% endif %}

修改配置文件
打开 /next/_config.yml在里面添加如下代码：(可以放在最后面)

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

到此就结束了，运行 hexo clean，然后运行 hexo g,然后运行 hexo s，最后打开浏览器在浏览器的地址栏输入 localhost:4000 就能看到效果了\（￣︶￣）/

如果你感觉默认的线条太多的话
可以这么设置====>
在上一步修改 _layout.swig中，把刚才的这些代码：

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

说明
配置项说明

color ：线条颜色, 默认: '0,0,0'；三个数字分别为(R,G,B)
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

实现点击出现桃心效果

在网址输入如下
http://7u2ss1.com1.z0.glb.clouddn.com/love.js
然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。
将love.js文件放到路径/themes/next/source/js/src里面，
然后打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug）
添加以下代码：

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

4. 修改文章内链接文本样式

实现效果图

具体实现方法

修改文件 themes\next\source\css_common\components\post\post.styl ，在末尾添加如下css样式，：

// 文章内链接文本样式
.post-body p a{color: #0593d3;border-bottom: none;border-bottom: 1px solid #0593d3;&:hover {color: #fc6423;border-bottom: none;border-bottom: 1px solid #fc6423;}
}

其中选择 .post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

5. 修改文章底部的那个带#号的标签

实现效果图

具体实现方法

修改模板
/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成

<i class="fa fa-tag"></i>

6. 在每篇文章末尾统一添加“本文结束”标记

实现效果图

具体实现方法

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

<div>{% if not is_index %}<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>{% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer之前添加如下画红色部分代码（post-footer之前两个DIV）：如下大概在360行左右的位置：

代码如下：

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

然后打开主题配置文件_config.yml,在末尾添加：

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

7. 修改作者头像并旋转

实现效果图————————————————–无~0.0~

具体实现方法

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {display: block;margin: 0 auto;padding: $site-author-image-padding;max-width: $site-author-image-width;height: $site-author-image-height;border: $site-author-image-border-width solid $site-author-image-border-color;/* 头像圆形 */border-radius: 80px;-webkit-border-radius: 80px;-moz-border-radius: 80px;box-shadow: inset 0 -1px 0 #333sf;/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*//* 鼠标经过头像旋转360度 */-webkit-transition: -webkit-transform 1.0s ease-out;-moz-transition: -moz-transform 1.0s ease-out;transition: transform 1.0s ease-out;
}img:hover {/* 鼠标经过停止头像旋转 -webkit-animation-play-state:paused;animation-play-state:paused;*//* 鼠标经过头像旋转360度 */-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);
}/* Z 轴旋转动画 */
@-webkit-keyframes play {0% {-webkit-transform: rotateZ(0deg);}100% {-webkit-transform: rotateZ(-360deg);}
}
@-moz-keyframes play {0% {-moz-transform: rotateZ(0deg);}100% {-moz-transform: rotateZ(-360deg);}
}
@keyframes play {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(-360deg);}
}

8. 主页文章添加阴影效果

实现效果图

具体实现方法

打开\themes\next\source\css_custom\custom.styl,向里面加入：

/*主页文章添加阴影效果*/.post {margin-top: 60px;margin-bottom: 60px;padding: 25px;-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);}

9. 在网站底部加上访问量

实现效果图

具体实现方法

打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这话：

代码如下：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再合适的位置添加显示统计的代码(位置还是上述这个文件)，如图：

代码如下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

10. 网站底部字数统计和时间统计

实现效果图

具体实现方法

文字统计切换到根目录下，然后运行如下代码

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

<div class="theme-info"><div class="powered-by"></div><span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

时间统计在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

11. 在文章底部增加版权信息

实现效果图

请看具体实现步骤————————-哈哈哈哈哈

在目录next/layout/_macro/下添加my-copyright.swig：

{% if page.copyright %}
<div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><!-- JS库 sweetalert 可修改路径 --><script type="text/javascript"  src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script><script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script><link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css"><p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p><p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p><p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p><p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a><span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> var clipboard = new Clipboard('.fa-clipboard');clipboard.on('success', $(function(){$(".fa-clipboard").click(function(){swal({   title: "",   text: '复制成功',   html: false,timer: 500,   showConfirmButton: false});});}));  
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {width: 85%;max-width: 45em;margin: 2.8em auto 0;padding: 0.5em 1.0em;border: 1px solid #d3d3d3;font-size: 0.93rem;line-height: 1.6em;word-break: break-all;background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {display: inline-block;width: 5.2em;color: #b5b5b5;font-weight: bold;
}
.my_post_copyright .raw {margin-left: 1em;width: 5em;
}
.my_post_copyright a {color: #808080;border-bottom:0;
}
.my_post_copyright a:hover {color: #a3d2a3;text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {color: #000;
}
.my_post_copyright .post-url:hover {font-weight: normal;
}
.my_post_copyright .copy-path {margin-left: 1em;width: 1em;+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {color: #808080;cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

<div>{% if not is_index %}{% include 'wechat-subscriber.swig' %}{% endif %}
</div>

之前添加增加如下代码：

<div>{% if not is_index %}{% include 'my-copyright.swig' %}{% endif %}
</div>

如图：

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import “my-post-copyright”
保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: 前端小项目：使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---

12. 文章加密访问

直接看步骤

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：

<script>(function(){if('{{ page.password }}'){if (prompt('请输入文章密码') !== '{{ page.password }}'){alert('密码错误！');history.back();}}})();
</script>

最后在你的文章中添加password标记如图：

点击查看原文

今天就写到这里 未完待续……