本次优化比较繁杂,就粗略的记录下。本来打算把所有内容更新到github上面的,但没时间更新、测试,暂时就算了吧,以后再考虑。

升级

这两天给博客进行了全面升级(Hexo 3.2.2),编译速度加快了好多。。升级方法比较笨,先把nodejs升级到6.3,然后重新安装下hexo,再重新hexo init blog,最后把以前的主题、博文复制过来就是了。

阅读进度条

这个效果,在滚动页面的时候,顶部的进度条会显示当前阅读的进度。

在合适的地方加入下面代码:

html

<div class="scroll-bar"></div>

Javascript

//阅读进度条
$(window).scroll(function(){
    $(".scroll-bar").attr("style","width:"+($(this).scrollTop()/($(document).height()-$(this).height())*100)+"%;display: block;");
});

CSS

.scroll-bar {
 position: fixed;
 top: 0;
 left: 0;
 z-index: 4500;
 display: none;
 width: 0;
 height: 2px;
 background: rgb(88, 2, 255);
}

Ajax

我用的是Pjax插件来实现Ajax无刷新效果的,从而提高加载速度。

使用方法很简单,就是在超链接的时候产生Pjax请求,插件会自动将请求后的内容替换到指定位置,具体可以看官方文档。

我用的主题是Yelee,以前从作者那fork下来的,很久没和作者同步了,这里就以我的仓库为主。

我指定.body-wrap为刷新内容,于是在合适的地方插入以下js脚本:

<script src="//cdn.bootcss.com/jquery.pjax/1.9.6/jquery.pjax.min.js"></script>
<script>
    $(document).pjax('a[target!=_blank]', '.body-wrap', {
        fragment: '.body-wrap',
        timeout: 5000,
    });
</script>

之后会出现一些问题,pjax请求后的页面的js无法正确执行,比如多说问题、MathJax公式渲染问题、球形标签云不加载、Fancybox弹窗问题。

解决方法也不难,就是在pjax完成之后重新加载下,插入如下js代码

<script>
$(document).on('pjax:complete', function() { // 加载多说
    pajx_loadDuoShuo();
    load_tag_color();
    use_fancybox();
    MathJax.Hub.Typeset();
    load_tag_color();
});
function use_fancybox() {
    require(['//cdn.bootcss.com/fancybox/2.1.4/jquery.fancybox.js'], function(pc){
        var isFancy = $(".isFancy");
        if(isFancy.length != 0){
            var imgArr = $(".article-inner img");
            for(var i=0,len=imgArr.length;i<len;i++){
                var src = imgArr.eq(i).attr("src");
                var title = imgArr.eq(i).attr("alt");
                imgArr.eq(i).replaceWith("<a href='"+src+"' title='"+title+"' rel='fancy-group' class='fancy-ctn fancybox'><img src='"+src+"' title='"+title+"'></a>");
            }
            $(".article-inner .fancy-ctn").fancybox();
        }
    });
}
function pajx_loadDuoShuo(){
        var dus=$(".ds-thread");
        if($(dus).length==1){
            var el = document.createElement('div');
            el.setAttribute('data-thread-key',$(dus).attr("data-thread-key"));//必选参数
            el.setAttribute('data-url',$(dus).attr("data-url"));
            DUOSHUO.EmbedThread(el);
            $(dus).html(el);
        }
}
function load_tag_color() {
    require(['/js/pc.js'], function(pc){
        pc.init();
        isPCInit = true;
    });
}
function load_tag_cloud() {
    if(!$('#my3DTags').tagcanvas({
        textFont: 'Georgia,Optima',
        textColour: null,
        outlineColour: '#ff00ff',
        weight: true,
        reverse: true,
        depth: 0.8,
        maxSpeed: 0.05,
        bgRadius: 1,
        freezeDecel: true
    },'tags')) {
      // something went wrong, hide the canvas container
      $('#myTags').hide();
    }
}
</script>

音乐盒

加了音乐盒有QQ空间的感觉,现已关闭。

有了无刷新加载黑科技,背景音乐什么的都不是问题了,我用的是高中朋友的一个音乐插件,具体可看:网易云音乐播放器插件