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, 这样你就可以实现分享功能了

分享到:

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 完整方案

你可能感兴趣的:(NexT主题配置优化-出土指南)