NexT主题配置优化-出土指南

• 前段时间, 辛辛苦苦花了一周的时间搭建了属于自己的个人技术博客, 当然也是各种采坑各种跳, 大家如果在搭建过程中遇到什么问题, 可以参考基于GitHub和Hexo搭建个人博客
• 博客搭建好之后就是选择博客主题的问题了, 刚开始我用的是Yelee主题, 这个主题总体来说还是不错的, 动画效果还是很炫酷的, 星级评价也达到了1107个
• 这两天看到很多人都在用NexT主题, 而且网上分享的关于个性化的配置也有很多, 还是很推荐使用的, 所以我就尝试着配置了一下
• 这是作者提供的NexT主题中文配置
• 下面我把集成NexT主题配置时遇到的坑给大家总结分享一下

• 文章主要介绍的优化方面主要有以下34种配置
  • 集成Mob社会化分享
  • 在右上角或者左上角实现fork me on github
  • 添加RSS
  • 添加动态背景
  • 实现点击出现桃心效果
  • 修改文章内链接文本样式
  • 修改文章底部的那个带#号的标签
  • 在每篇文章末尾统一添加“本文结束”标记
  • 修改作者头像并旋转
  • 博文压缩
  • 修改``代码块自定义样式
  • 侧边栏社交小图标设置
  • 主页文章添加阴影效果
  • 在网站底部加上访问量
  • 添加热度
  • 网站底部字数统计
  • 添加 README.md 文件
  • 设置网站的图标Favicon
  • 实现统计功能
  • 添加顶部加载条
  • 在文章底部增加版权信息
  • 添加网易云跟帖(跟帖关闭，已失效，改为来必力)
  • 隐藏网页底部powered By Hexo / 强力驱动
  • 修改网页底部的桃心
  • 文章加密访问
  • 添加jiathis分享
  • 博文置顶
  • 修改字体大小
  • 修改打赏字体不闪动
  • 侧边栏推荐阅读
  • 自定义鼠标样式
  • 为博客加上萌萌的宠物
  • DaoVoice 在线联系
  • 点击爆炸效果

1. https技术博客配置社会化分享

大家应该知道像一些JiaThis分享和百度分享并不支持https, 这里给大家推荐一个, 支持https的社会化分享-Mob

1-1. 获取App Key
博客集成Mod分享组件, 参考 Mob官方文档 , 获取到App Key

1-2. 在主题配置文件中添加配置：

mob_share:
  enable: true
  appkey: ********

1-3. 在next/layout/_partials/share/里面添加mob_share.swig文件, 并在mob_share.swig内输入一下内容:

• 这里需要注意的一点:
  • 以下代码只支持http开头的网址, 在https中点击分享按钮会没有任何反应
  • 如果需要支持https的网址, 在最后一行src=http://f1.webshare.mob.com, 需要把这里的http同样改成https, 这样你就可以实现分享功能了

分享到：

    

    

    

    

    



    

        
新浪微博
        
微信
        
QQ空间
        
QQ好友
        
腾讯微博
        
人人网
        
开心网
        
豆瓣
        
有道云笔记
        
明道
        
朋友网
        
Facebook
        
Twitter
        
Pocket
        
Google+
        
Tumblr
        
Instapaper
        
Linkedin
    
    
取消

1-4. 在next/layout/post.swig中添加条件分支：

{% if theme.jiathis %}
      {% include '_partials/share/jiathis.swig' %}
    {% elseif theme.baidushare %}
      {% include '_partials/share/baidushare.swig' %}
    {% elseif theme.add_this_id %}
      {% include '_partials/share/add-this.swig' %}
    {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
      {% include '_partials/share/duoshuo_share.swig' %}
    {% elseif theme.mob_share.enable %}
      {% include '_partials/share/mob_share.swig' %}
{% endif %}

1-5. 在next/source/css/_common/components/third-party/里添加样式文件mob_share.styl：

.-hoofoo-share-buttons{
    display: inline-block;
}
.-hoofoo-share-title{
    font-size: 1.1em;
    font-weight: 200;
}
.-hoofoo-share-ui-button{
    cursor: pointer;
    background-color: #555;
    color: #fff;
    font-size: 24px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 25px;
    float: left;
    transition: background 0.4s;
    -moz-transition: background 0.4s;    /* Firefox 4 */
    -webkit-transition: background 0.4s;    /* Safari 和 Chrome */
    -o-transition: background 0.4s;
}
.-hoofoo-share-weibo:hover{
    background-color: #cf3f41;
}
.-hoofoo-share-weixin:hover{
    background-color: #18a01a;
}
.-hoofoo-share-qq:hover{
    background-color: #950c0c;
}
.-hoofoo-share-twitter:hover{
    background-color: #2ab3e6;
}
.-hoofoo-share-more:hover{
    background-color: #777;
}
.-mob-share-weixin-qrcode-content{
    border-radius: 4px;
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.-mob-share-weixin-qrcode{
    margin: 5% !important;
    width: 90% !important;
    height: auto !important;
}
.-mob-share-weixin-qrcode-close {
    background-image: url('/lib/fancybox/source/fancybox_sprite.png') !important;//因为兼容问题把vendor改成了lib，根据自己的路径修改
}
.-mob-share-weixin-qrcode-close {
    overflow: hidden;
    line-height: 100px !important;
    position: absolute !important;
    top: -18px !important;
    right: -18px !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    z-index: 8040 !important;
}
/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){
    .-mob-share-weixin-qrcode-close {
        background-image: url('/lib/fancybox/source/[email protected]') !important;//因为兼容问题把vendor改成了lib，根据自己的路径修改
        background-size: 44px 152px !important; /*The size of the normal image, half the size of the hi-res image*/
    }
}
.-mob-share-close{
    height: 4em !important;
    font-size: 0.8em !important;
    line-height: 4em !important;
    background: #555 !important;
    color: #fff !important;
}

1-6. 同一目录下的 third-party.styl 中添加：

@import "mob_share";

1-7. 在next/layout/_scripts/third-party/里添加脚本文件mob_share.swig：

{% if theme.mob_share.enable %}

{% endif %}

1-8. 在next/layout/_layout.swig的body标签结束前添加：

{% include '_scripts/third-party/mob_share.swig' %}

剩下的优化配置, 大家可以参考以下博客

2. 关于next主题个性化配置

这里给大家推荐, 提供33中炫酷效果的文章

• hexo的next主题个性化配置教程

3. leanCloud统计

通过leanCloud统计您网站的文章阅读量

• leanCloud,实现文章阅读量统计

4. 使用CloudFlare配置https

参考

• 使用 CloudFlare 为 hexo 博客实现 HTTPS
• 使用 cloudflare 为网站添加免费 CDN 并获取免费 SSL 服务
• 为自定义域名的GitHub Pages添加SSL 完整方案

---