博客园样式美化

前言

之前就想通过博客园提供的自定义样式功能美化一下博客,但是一直想等学会 vue 再来改(其实是懒......)。上个礼拜看到一位大神的博客感到非常惊艳,遂下定决心用一个周末来改。之前有想过自己设计样式,但是感觉越看越丑,所以还是决定照着这位大神的博客一点点改。

准备工作

1、先看看有没有轮子

Google 一下,没有喜欢的样式。

上 Github 也没有搜到想要的。

可能关键词没用对吧。

2、自己动手,丰衣足食

首先要申请js权限,要不然很多东西都实现不了。然后右键查看源代码,把html下载下来(方便在本地调试)。最后照着别人的博客一点点的修改,一步一步的实现效果。

ps:我原本用的博客样式是bluesky,其实还是蛮喜欢的

3、最后成果

修改前:

修改后:

美化样式

Github

实现过程

1、顶部加载条

我采用的是NProgress,这个我感觉非常好用。这是他们的官网,可以直接点四个方法查看效果。

点Download会跳到Github上去,上面有详情文档和CDN地址

我采取了最简单的方法

$(document).ready(function(){
        NProgress.start();
        NProgress.done();
}

效果是:

2、顶部导航条

顶部导航条要实现下滑隐藏,上滑加载。这个刚开始以为很难,没想到还是比较简单的。

百度找到监听滚动条事件的js方法

    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {

        //上拉
        }else{

        }
        oldScrollNum = t;
    }

然后通过这个方法改变顶部导航条的margin-top的值达到展现隐藏的效果

最后给滚动条加上过渡属性transition: 0.5s ease-in-out; ,这样就达到了想要的效果。

ps:其实用CSS动画实现更流畅一点。

3、导航条上的关于和友情链接

这个其实就是写两篇随笔 ,因为随笔的地址是固定的所以可以写死。

4、背景图片模糊

这个css3提供了原生支持:filter: blur(3px);

原图:

duang!加了特效后:

5、为每篇文章单独的背景

这个得每篇文章里面加个隐藏域,value存背景图片的地址。

//设置背景图片地址
        if ($("#head_bg_img").val()!=null && $("#head_bg_img").val()!="") {
            $("#myheader_bg").css("background-image","url("+$("#head_bg_img").val()+")");
        }else{
            $("#myheader_bg").css("background-image","url(https://ww1.sinaimg.cn/large/0062YmUwgy1fthnpo4n7yj31hc0hrq8e.jpg)");
        }

这里设成没有取到值就用默认的

6、修改markdown样式

这个就得呕心沥血的一点点调整了...

    /** MarkDown样式调整 */
    .cnblogs-markdown .hljs{
        font-size: 16px!important;
        line-height: 2!important;
        padding: 15px!important;
    }
    .cnblogs-markdown code{
        background:rgb(238,240,244) none !important;
        border:0px !important;
        color: rgb(73,59,92) !important;
        font-size: 16px!important;
    }
    .cnblogs-markdown h2{
        font-weight: 500;
        margin: 20px 0;
    }
    .cnblogs-markdown h2:before{
        content: "#";
        color: #eb5055;
        position: relative;
        top: 0;
        left: -12px;
    }
    #cnblogs_post_body h2{
        font-weight: 500;
        margin: 20px 0;
    }
    #cnblogs_post_body h3{
        font-size: 16px;
        font-weight: bold;
        line-height: 1.5;
        margin: 10px 0;
    }
    .cnblogs-markdown h3:before{
        content: "##";
        color: #2175bc;
        position: relative;
        top: 0;
        left: -8px;
    }
    .postBody blockquote, .postCon blockquote{
        background-image: none;
        border-left: 5px solid #DDDFE4;
        background-color: #EEF0F4;
        width: 100%;
        padding: 6px 0 6px 25px;
    }

修改前:

修改后:

ps:感觉还是不太满意┑( ̄Д  ̄)┍

7、生成目录

这个采用了Github上的轮子:https://github.com/gzdaijie/cnblogs_markdown_optimize

然后我魔改了下。。

function() {
            // 根据h2、h3标签自动生成目录
            var captions_ori = $("#cnblogs_post_body h2"),
                captions_ori2 = $("#cnblogs_post_body h3"),
                captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
                content = $("<ul id='right_meun'></ul>");
            $("#cnblogs_post_body").prepend(content.append(captions));
            var index = -1,index2 = -1;
            captions.replaceWith(function(){
                var self = this;
                if(self.tagName == "H2" || self.tagName == "h2"){
                    // 设置点击目录跳转
                    index += 1;
                    $('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]); 
                    return '<li id="'+index+'li"><a href="#_caption_' + index + '">' + self.innerHTML + '</a><ul></ul></li>';
                } else {
                    // add by summertime-wu 增加h3链接跳转
                    index2 += 1;
                    $('<a name="' + '_caption' + index2 + '"></a>').insertBefore(captions_ori2[index2]); 
                    $("#"+index+"li ul").append("<li><a href='#_caption" + index2 + "' style='color:#5f5f5f;'>" +self.innerHTML+"</a></li>");
                    return ;
                }
            });
        }

eummm......看起来比较糟糕,但是能跑!!

效果:

8、底部导航条

这个实现和顶部的差不多,多的就是去顶尾部和上一篇下一篇的四个按钮,去顶部和去尾部用锚点很好实现,上一篇和下一篇则需要用js从页面上取值

然后赋给自定义的按钮。不过这里需要注意一点,由于这个上一篇和下一篇的链接博客园是采取ajax异步加载的方式,所以直接取链接可能导致取空值,需要设置一个定时器来取,我的是设置了1秒后再从页面上取。

        /**
        设置ajax请求加载完数据时执行的js
    */
    setTimeout(afterAjax,1000);
    function afterAjax(){
            //取值
        }

9、去除尾部广告

额,这个呢。实现so easy,找到对应广告元素的id,设置 display:none 就好了,但是有点心虚。毕竟博客园免费给我们提供的了地方写博客,然而我却......

10、适配手机

这个其实没有仔细处理,只是粗略的调整了下主体的大小,当浏览器宽度小于1000px时,将#main设为100%宽。

    #main{
        width: 40%;
        background-color: white;
        /*max-width: 700px;*/
    }
    @media screen and (max-width: 1000px) {
     #main {width: 100%;}
    }

效果:

11、针对首页优化

通过js获取当前url,然后匹配一下(其实这里可以优化一下,判断是否包含 summertime-wu 且后面没有下一级)

if (window.location.href == "https://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "https://www.cnblogs.com/summertime-wu/"||
            window.location.href == "http://www.cnblogs.com/summertime-wu"|| 
            window.location.href == "http://www.cnblogs.com/summertime-wu/") {
    //针对性优化
}

是的,我现在才发现博客园既可以走http,也可以走https。。其实还可以这样:http://summertime-wu.cnblogs.com

12、访问统计

我这里采用的是http://www.flagcounter.com/,感觉挺不错的,不需要注册什么的,生成了html代码直接复制到侧边栏代码框里就可以用了。

不过由于我把侧边栏隐藏了,所以网页上看不到。正好我也不想让这个统计影响了整体的页面风格。

当然即使隐藏了还是能够正常统计的。假如自己需要查看则需要手动在控制台改下样式,让 #maincontent 缩小,#sidebar展现。

总结

  1. 在这里郑重感谢Chakhsu Lau,是这位大神的博客给我提供了模仿的对象。ps:这位大神的博客是用他自己写的一个Typecho主题:pinghsu,使用了pjax技术,体验如丝滑般流畅。

  2. 由于自己是后端,不太会写前端,很多地方都不够优雅,甚至有点小蠢。但是,能跑!! +△+

  3. 现在发现写前端原来这么爽,打开控制台你就是上帝了,很多东西都有现成的轮子,还非常简单好用。不过也发现前端不爽的地方,要适配各种分辨率和兼容各种浏览器。

  4. 自己同时是提需求的和实现需求的好矛盾啊啊啊。不过我最后坚定了一个想法,无论多难都要实现,打磨好每一个细节ˋ︿ˊ

  5. 源码稍后会放在 Github上,如有做得不好的地方,请不吝赐教,假如觉得不错的话给个star吧˙▽˙

Tips: 博客园样式美化 II

本文作者:夏日浅笑、
原文地址:https://www.cnblogs.com/summertime-wu/p/9356736.html
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。

posted @ 2018-07-24 11:45  夏日浅笑、  阅读(...)  评论(...编辑  收藏