- 前段时间, 辛辛苦苦花了一周的时间搭建了属于自己的个人技术博客, 当然也是各种采坑各种跳, 大家如果在搭建过程中遇到什么问题, 可以参考基于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, 这样你就可以实现分享功能了
- 以下代码只支持
<!--MOB SHARE BEGIN-->
<div class="-hoofoo-share-title">分享到：</div>
<div class="-hoofoo-share-buttons">
<div class="-mob-share-weibo -hoofoo-share-weibo -hoofoo-share-ui-button"><i class="fa fa-weibo" aria-hidden="true"></i></div>
<div class="-mob-share-weixin -hoofoo-share-weixin -hoofoo-share-ui-button"><i class="fa fa-weixin" aria-hidden="true"></i></div>
<div class="-mob-share-qq -hoofoo-share-qq -hoofoo-share-ui-button"><i class="fa fa-qq" aria-hidden="true"></i></div>
<div class="-mob-share-twitter -hoofoo-share-twitter -hoofoo-share-ui-button"><i class="fa fa-twitter" aria-hidden="true"></i></div>
<div class="-hoofoo-share-more -hoofoo-share-ui-button -mob-share-open"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>
</div>
<div class="-mob-share-ui" style="display: none">
<ul class="-mob-share-list">
<li class="-mob-share-weibo"><p>新浪微博</p></li>
<li class="-mob-share-weixin"><p>微信</p></li>
<li class="-mob-share-qzone"><p>QQ空间</p></li>
<li class="-mob-share-qq"><p>QQ好友</p></li>
<li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
<li class="-mob-share-renren"><p>人人网</p></li>
<li class="-mob-share-kaixin"><p>开心网</p></li>
<li class="-mob-share-douban"><p>豆瓣</p></li>
<li class="-mob-share-youdao"><p>有道云笔记</p></li>
<li class="-mob-share-mingdao"><p>明道</p></li>
<li class="-mob-share-pengyou"><p>朋友网</p></li>
<li class="-mob-share-facebook"><p>Facebook</p></li>
<li class="-mob-share-twitter"><p>Twitter</p></li>
<li class="-mob-share-pocket"><p>Pocket</p></li>
<li class="-mob-share-google"><p>Google+</p></li>
<li class="-mob-share-tumblr"><p>Tumblr</p></li>
<li class="-mob-share-instapaper"><p>Instapaper</p></li>
<li class="-mob-share-linkedin"><p>Linkedin</p></li>
</ul>
<div class="-mob-share-close">取消</div>
</div>
<div class="-mob-share-ui-bg"></div>
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{theme.mob_share.appkey}}"></script>
<!--MOB SHARE END-->
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/fancybox_sprite@2x.png') !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 %}
<script type="text/javascript">
//微信二维码点击背景关闭
$('body').delegate('.-mob-share-weixin-qrcode-bg','click', function(){
$(".-mob-share-weixin-qrcode-close").trigger("click");
});
</script>
{% endif %}
1-8. 在next/layout/_layout.swig的body标签结束前添加：
{% include '_scripts/third-party/mob_share.swig' %}
剩下的优化配置, 大家可以参考以下博客
2. 关于next主题个性化配置
这里给大家推荐, 提供33中炫酷效果的文章
3. leanCloud统计
通过leanCloud统计您网站的文章阅读量
4. 使用CloudFlare配置https
参考
- 使用 CloudFlare 为 hexo 博客实现 HTTPS
- 使用 cloudflare 为网站添加免费 CDN 并获取免费 SSL 服务
- 为自定义域名的GitHub Pages添加SSL 完整方案
