选择博客框架
现在主流的博客框架有hexo, jekyll, WordPress三款，其中WordPress应该算是功能最强大的，自带MySQL数据库，数量众多的插件和主题，支持自定义各种侧边小控件，还有一个图形化界面管理后台，但是不像前两者可以方便的搭在GithubPages上，需要自己买台服务器提供空间，而且对markdown的支持貌似也不如前两者好。至于hexo和jeklly在特点上几乎没什么区别，只是一个基于nodejs一个基于ruby，都很轻量级，性能好速度快，近年来很火。
在分别尝试了用Amativeness主题配合WordPress建站和用Themia主题配合Hexo建站后最后还是选择了后者，搭建完成发现还少了不少东西，需要继续折腾。
多说
多说是国内知名的网站第三方评论系统，Themia基于的tranquilpeak主题中已经集成了多说，直接把申请到的key填入就可以生效了。但是没有做任何处理的默认的主题样式很一般…而且和Themia的风格也不怎么搭，不折腾一下能忍咩？好在多说支持自定义css属性，那就好办了，这里是自定义样式文档
直接分享下我的评论栏的css代码吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| #ds-reset .ds-avatar img { width:54px;height:54px; margin-right: 12px; border-radius: 27px; -webkit-border-radius: 27px; -moz-border-radius:27px; box-shadow: inset 0 -1px 0 #3333sf; -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out;} #ds-reset .ds-avatar img:hover{ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg); -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg);}
|
1
| #ds-thread #ds-reset .ds-textarea-wrapper textarea {background:url(http://odck16ake.bkt.clouddn.com/duoshuo.png) no-repeat right bottom !important; }
|
1 2 3 4 5 6
| #ds-thread #ds-reset .ds-textarea-wrapper { border-radius: 3px 3px 0px 0px; background-color: #F4F6F7;} #ds-thread #ds-reset .ds-post-options { border-radius: 0px 0px 0px 3px;}
|
把上面的代码直接粘贴到多说后台自定义css中保存即可。到这里还没有结束，接下来还要给评论加上操作系统和浏览器信息，继续：
1 2 3 4 5 6 7 8
| span.this_ua {background-color: #ccc!important;border-radius: 4px;padding: 0 5px!important;margin: 0 1px!important;border: 1px solid #BBB!important;color: #fff;} .this_ua.platform.Windows{background-color: #39b3d7!important;border-color: #46b8da!important;} .this_ua.platform.Linux {background-color: #3A3A3A!important;border-color: #1F1F1F!important;} .this_ua.platform.Android {background-color: #00C47D!important;border-color: #01B171!important;} .this_ua.browser.Chrome{background-color: #5cb85c!important;border-color: #4cae4c!important;} .this_ua.browser.Firefox{background-color: #f0ad4e!important;border-color: #eea236!important;} .this_ua.browser.IE{background-color: #428bca!important;border-color: #357ebd!important;} .this_ua.browser.Opera{background-color: #d9534f!important;border-color: #d43f3a!important;}
|
找到你的博客中的多说js代码，在后面紧接着添加引用ua-parser.js的部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <script type="text/javascript"> var duoshuoQuery = {short_name:'codeest'}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = 'http://faisalman.github.io/ua-parser-js/src/ua-parser.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <script type="text/javascript"> if (typeof DUOSHUO !== 'undefined')hookDUOSHUO_tp(); else $('[src="http://static.duoshuo.com/embed.js"]')[0].onload=hookDUOSHUO_tp; function hookDUOSHUO_tp(){ var _D_post=DUOSHUO.templates.post DUOSHUO.templates.post=function (e,t){ var rs=_D_post(e,t); if(e.post.agent&&/^Mozilla/.test(e.post.agent)) rs=rs.replace(/<\/div><p>/,show_ua(e.post.agent)+'</div><p>'); return rs; } } function show_ua(string){ $.ua.set(string); var sua=$.ua; if(sua.os.version=='x86_64')sua.os.version='x64'; return '<span class="this_ua browser '+sua.browser.name+'">'+sua.browser.name+' | '+sua.browser.version+'</span>'+'<span class="this_ua platform '+sua.os.name+'">'+sua.os.name+' '+sua.os.version+'</span>'; } </script>
|
PS: 这里我又喜闻乐见的踩到坑了。。网上大部分的介绍在上面的代码中使用的都是e.agent，但是根据最新版的多说embed.js中的定义应该使用e.post.agent，修改完后总算看到效果了
多说收工٩(ˊᗜˋ*)و
不蒜子
不蒜子是极简的网页计数器，用起来真的是低碳绿色环保，两句代码就能集成，帮助统计网站的访问量。官网上也写明了使用方法，我这里提下要点。
1 2
| <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"> </script>
|
然后在网站的bottom中插入总访问量PV和总访客数UV
1 2 3
| <span id="busuanzi_container_site_pv"> 本站总访问量<span id="busuanzi_value_site_pv"></span>次 </span>
|
1 2 3
| <span id="busuanzi_container_site_uv"> 本站访客数<span id="busuanzi_value_site_uv"></span>人次 </span>
|
1 2 3
| <span id="busuanzi_container_page_pv"> 本文总阅读量<span id="busuanzi_value_page_pv"></span>次 </span>
|
PS：我一开始手滑把单页PV用成了全站PV，还给不蒜子作者发邮件询问为什么统计量不对呢。。捂脸 >///<
不蒜子收工٩(ˊᗜˋ*)و
捐赠
好吧。。这个破站现在并没有什么值得各路dalao打赏的干货，不过梦想还是要有的，万一有路过的好心人投了一颗糖或者送了一杯速溶咖啡呢，直接上代码吧。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| .donate_bar { text-align: center; margin-top: 10px; } .donate_bar a.btn_donate { display: inline-block; margin-left: auto; margin-right: auto; width: auto; height: auto; background: #fff; border-radius: 3px; letter-spacing: .01em; cursor: pointer; color: #9eabb3!important; border: 1px solid #9eabb3; font-size: 1.5rem; padding: 8px 15px; -webkit-transition: background 0s; -moz-transition: background 0s; -o-transition: background 0s; -ms-transition: background 0s; transition: background 0s } .donate_bar a.btn_donate:hover { background-position: 0 -82px } .donate_bar.hidden{ display: none } .post-donate{ margin-top: 10px; } #donate_guide{ height: 210px; width: 420px; margin: 0 auto; } #donate_guide img{ height: 200px; height: 200px; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| <div class ="post-donate"> <div id="donate_board" class="donate_bar center"> <a id="btn_donate" class="btn_donate" href="javascript:;" title="打赏">给作者投食戳这里OwO</a> <br> </div> <div id="donate_guide" class="donate_bar center hidden" > <!-- 支付宝打赏图案 --> <img src="http://odck16ake.bkt.clouddn.com/qr_alipay.png" alt="支付宝打赏"> <!-- 微信打赏图案 --> <img src="http://odck16ake.bkt.clouddn.com/qr_wechat.png" alt="微信打赏"> </div> <script type="text/javascript"> document.getElementById('btn_donate').onclick = function(){ $('#donate_board').addClass('hidden'); $('#donate_guide').removeClass('hidden'); } </script> </div>
|
PS：上面的打赏按钮样式是根据Themia按钮风格来的，可以根据自己的博客风格微调，记得把代码中的支付宝和微信图案换成自己的，不然钱打到我的账户我可不管╮(￣▽￣)╭
捐赠收工٩(ˊᗜˋ*)و
性能与SEO优化
性能关乎博客页面加载速度，SEO关乎搜索排名的前后，有余力的就把这块也一起折腾了吧，这方面内容比较多，而且已经有一些不错的文章介绍了这方面的内容，我就直接甩自己看过的文章链接了
性能: Hexo折腾记——性能优化篇
SEO: Hexo Seo优化让你的博客在google搜索排名第一
集成APlayer
APlayer是前端小鲜肉(大神)DIYgod开发的一款开源HTML5播放器，功能丰富，UI简洁美观，是代替原生HTML5播放器的不二选择！但是直接使用需要传入封面url，音频url，歌词文件等一系列参数，配置下来比较麻烦
这时就需要配合163music-APlayer-you-get-docker这款根据id自动解析网易云音乐资源并加载到APlayer的音乐接口来使用了，163music-APlayer-you-get-docker已经做了充足的封装，只需要使用Hexo的iframe标签调用接口地址即可引入APlayer到博客中，下面是示例：
插入单曲
对应模板：
1
| {% iframe https://music.daoapp.io/iframe?song=36990266&qssl=1&autoplay=0&max_width=100% 100% 100 %}
|
对应模板：
1
| {% iframe https://music.daoapp.io/iframe?song=40729947&qssl=1&autoplay=0&max_width=100% 100% 100 %}
|
插入歌单
对应模板：
1
| {% iframe https://music.daoapp.io/iframe?playlist=37288058&qssl=1&autoplay=0&max_width=100% %}
|
HTTPS化
这个属于TODO，先占个坑
其他
Themia即tranquilpeak自带的内联代码和代码块样式总是感觉不太满意，灰色的底图和博客背景几乎一致，字体颜色也是，完全起不到突出作用，所以参考另一款我比较喜欢的博客样式even做了调整，给代码块加了淡黄色的护眼底色，把内联代码的字色改为了红色以表突出，像这样
除此之外，在Themia的基础上还加了底部图片Banner，blog age计时，侧边栏样式优化，都是一些html/css/js的修改，没什么好说的了，很羡慕那些前端工程师们可以把自己的博客打点的很漂亮，Android党鸭梨山大(/ω＼)，以后前端知识精进了再继续折腾，到此结束~
多说居然倒了，自17年6月1日起将停止服务，WordPress党的胜利…虽然多说是国内最知名的第三方评论系统，不过毕竟变现能力有限，难免资金链断掉了，缅怀多说，那么就要考虑尽早迁移了。国内其他的选择还有友言，网易云跟帖等等类似的第三方评论，并且都支持多说数据一键迁移，国外显然是Disqus，不过Disqus现在已经在墙外了，而且迁移过程比较麻烦。一番考虑后我还是选择了Disqus，一方面是Themia自带了Disqus配置，接入十分方便，另一方面是怕其他国内第三方评论又步了多说的后路，Disqus已经形成了自己的一套生态圈，服务稳定。
确定了目标后就要开始迁移了，一番搜索后找到了开源项目duoshuo2disqus，先从多说后台导出评论数据，然后运行项目中的duoshuo-migrator.py脚本把原始数据转化为可以导入Disqus后台的xml文件。但是Disqus导入数据的后台中没有Hexo的选项，于是我抱着死马当作活马医的心态选择了导入到WordPress中，然后重新生成博客发现评论数据已经成功同步到了Disqus，于是这次迁移算是顺利的完成了，没有踩到坑(/ω＼)
Disqus虽然不能自定义样式了，不过整体风格和Themia主题还是挺搭的，收工~ 最后，也感谢多说一直以来的免费服务，我欠多说一个会员…
声明：本站所有文章均为原创或翻译，遵循署名-非商业性使用-禁止演绎 4.0 国际许可协议，如需转载请确保您对该协议有足够了解，并附上作者名(Est)及原贴地址
