Hexo Next主题自定义样式

网上相关教程实在太多，找起来眼花缭乱，记录下我自己是如何修改的。

---

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

这里是彩带样式，这里是小猫样式，选择好样式后把代码复制到themes/next/layout/_layout.swig中，放到<div class="headband"></div>后面，把herf改成自己的github地址。

更改文章内的链接样式

在themes\next\source\css\_custom\custom.styl中添加

// 文章内链接文本样式 
.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; 
    } 
}

可以把所有的自定义样式都放到themes/next/source/css/_custom/custom.styl里，不会影响到其他样式，不用的话删掉就行。

主页文章添加阴影

在themes/next/source/css/_custom/custom.styl中添加

// 主页文章添加阴影效果
.post {
   margin-top: 10px;
   margin-bottom: 40px;
   padding: 25px;
   -webkit-box-shadow: 0 0 20px rgba(202, 203, 203, .8);
   -moz-box-shadow: 0 0 20px rgba(202, 203, 204, .8);
   background: #fff
}

替换标签的#

在themes/next/layout/_macro/post.swig中搜索rel="tag">#将#换成<i class="fa fa-tag"></i>

删除页面底部的由hexo驱动

打开themes/next/layout/_partials/footer.swig，将class="powered-by",class="theme-info"的div删除或注释，<span class="post-meta-divider">|</span>是中间的竖线，也可以删除或注释。

后来发现直接在主题配置文件中就有footer的配置项，把true都改成false就可以

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: heart
  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

底部添加跳动的桃心

把上面那段代码中的icon改成heart，在themes\next\source\css\_custom\custom.styl中添加

//底部爱心小图标跳动
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}

//图标所对应的span中的ID
#custom-heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 113);
}

在themes/next/layout/css/_particals/footer.swig中搜索with-love,给这个span标签加上之前自定义的id

底部添加访问量

主题配置文件中自带有不蒜子计数，搜索busuanzi_count,看着配置就可以uv是访问人数，pv是访问量

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>访问人数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer: times.

页面点击出现桃心

在themes/next/source/js/src下新建文件clicklove.js，复制下面代码

!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/layout/_layout.swig文件末尾添加<script type="text/javascript" src="/js/src/clicklove.js"></script>

网页title添加搞怪崩溃效果

在next/source/js/src文件夹下创建crash_cheat.js，添加代码:

<!--崩溃欺骗-->
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "/img/TEP.ico");
         document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "/favicon.ico");
         document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

然后在next/layout/_layout.swig文件中，添加引用（注：在swig末尾添加）：

<!--崩溃欺骗-->
<script type="text/javascript" src="/js/src/crash_cheat.js"></script>

添加评论功能

next评论系统有很多,我选择了valine,需要先在leancloud注册一个账号，之后得到appid和appkey，在主题配置文件中直接就可以设置

valine:
  enable: true
  appid: 填入appid
  appkey: 填入appkey
  notify: false # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Just go go # comment box placeholder
  avatar: mm # gravatar style
  guest_info: nick,mail # custom comment header
  pageSize: 10 # pagination size