码迷，mamicode.com
首页 > 其他好文 > 详细

博客园细节美化，打磨

时间：2019-02-17 11:13:01      阅读：287      评论：0      收藏：0      [点我收藏+]

标签：parent   自定义   esc   comment   start   ons   不能   var   遮罩   

原作者

感谢 @Summertime-Wu 巨佬写出这样漂亮简洁的主题，本蒟蒻是在原主题的基础上改的。
原主题地址：https://www.cnblogs.com/summertime-wu/p/9356736.html。

我的优化

添加 fork me on github 角标，节省菜单空间

在页首代码中添加了以下内容：

<div class="forkme">
        <a href="https://github.com/ethan-enhe"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://i.loli.net/2019/02/03/5c56804b26dd9.png" alt="Fork me on GitHub"></a>
</div>

然后在 css 中把这个 div 的 width 和 height 调成了 149px，z-index 调成了 999。
又在页尾代码中注释 “通过滚动条控制导航条的展现隐藏” 的后面添加了 $(".forkme").fadeOut()/fadeIn();。完结撒花！

菜单移动端自适应

在移动端把菜单折叠成≡的样式，说来话长，可以直接见代码（模仿hexo的next主题）。

标题高度自适应（避免标题太长导致被正文挡住）

#mypost_title {
    position: absolute;
    bottom: 0px;
}

添加评论功能，美化文本框

去除原来评论区域的cssdisplay: none，然后在css中添加以下内容：

div.commentform input.author {
    background-color: #ffba4d;
    width: 150px;
    border-radius: 8px;
}
div.commentform textarea.comment_textarea {
    border-radius: 5px;
}
input[type=button] {
    width: 80px;
    height: 30px;
    border-width: 0px;
    border-radius: 200px;
    background: #1E90FF;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
}

修改不能识别主页的 bug（比如说把 BlogE 写成 bLoGe，或者点击回到顶端按钮之后刷新页面等等）

由于博客园博客主页可以由多种方式访问，http/https，甚至你的自定义域名都不用区分大小写！
举个栗子：https://www.cnblogs.com/BlogE 与 https://www.cnblogs.com/bLoGe 都可以访问我的博客主页。
那么这时你就需要一个一个的特判，在if的括号里写64个条件！
正难则反，其实我们只需确认网址不包括/p/即可！

var now_url = window.location.href.toLowerCase();
if (now_url.indexOf("bloge/p/")>=0) {
    blablabla...
}

在主页隐藏收藏文章按钮

如题，闲的没事就在判断主页的if里面给收藏图标来了个hide()

在文章页面显示文章的 tags

原作者在文章页面把文章分类显示了两遍，我作为一名强迫症晚期患者，就改成了上面显示分类，下面显示文章tag。修改afterAjax()这个函数。

function afterAjax(){
        //假如不是首页
        var now_url = window.location.href.toLowerCase();
        if (now_url.indexOf("bloge/p/")>=0) {
            //获取文章标签
            var tag = null;
            if ($("#EntryTag").html()!=null && $("#EntryTag").html()!= "") {
              tag = $("#EntryTag").html();
              tag = tag.substring(3,tag.length);
            }else{
              tag = "<a href='https://cnblogs.com/BlogE'>暂无标签</a>";
            }
            //获取文章分类
            var classification = null;
            if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
                classification = $("#BlogPostCategory").html();
                classification = classification.substring(3,classification.length);
            }else{
                classification = "<a href='https://cnblogs.com/BlogE'>暂未分类</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://cnblogs.com/BlogE'>Blog-E</a>";
            //设置副标题标题
            $("#mypost_title_f").html(ftitle);
            //设置标题标签按钮
            $("#mypost_title_e").html(tag.replace(",",""));
            //设置底部导航条上一篇下一篇文章
            var pnp = $("#post_next_prev a");
            $("#mbottom-left").attr("href",pnp[1].href);
            if (pnp.length>2) {
                $("#mbottom-right").attr("href",pnp[3].href);
            }
        }
        $("#myheader_bg").css("filter","blur(0px)");
    }

修复原文地址显示错误

有时在博文中点击完目录跳转之后再刷新页面，setCopyright()函数生成的版权信息会显示（以这篇文章为例）https://www.cnblogs.com/BlogE/p/beautifymyblog.html#_caption4这样的东西。然而我却不想要他显示url后面的#_caption4这个玩意。何以解忧？唯有slice()！于是我改写了一下这个函数

setCopyright: function() {
    //设置版权信息，转载出处自动根据页面url生成
    var info_str = '<p>作者：<a target="_blank">@ethan_zhou</a><br>'+
        '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>';
    info = $(info_str);
    info_a = info.find("a");
    url = window.location.href;
    if (url.indexOf("#") >= 0)
        url = url.slice(0, url.indexOf("#"));
    $(info_a[0]).attr("href","https://github.com/ethan-enhe");
    $(info_a[1]).attr("href",url).text(url);
    $("#cnblogs_post_body").prepend(info);
},

细节美化

做了以下的移动端调整（下面代码不包含移动端折叠菜单的内容）

/*移动端*/
@media screen and (max-width: 1000px) {
    .forkme {display: none;}
    #searchblogpost {display: none !important;}
    #mypost_title {left: 0%;}
    #right_meun {display: none !important;}
    #main {width: 80%;}
}

最终代码

主题选择bluesky，然后把以下代码中我的用户名和自定义域名等内容替换成你自己的，然后再把所有代码复制到博客设置中对应的位置即可。
如果你觉得把我的信息一个一个改掉太麻烦的话，请稍等几天我会把代码改成另一个方便你直接用ctrl+h“替换“的版本。

自定义css

.forkme {
    position: fixed;
    right: 0px;
    top: 0px;
    height: 149px;
    width: 149px;
    z-index: 999;
}
#sideBar{
    display: none;
}
#mainContent{
    width: 100%;
    box-shadow: 0 0 0;
    border-radius: 0px;
    opacity: 0;
    transition:0.5s;
    margin-top:40px;
}
#main{
    width: 45%;
    background-color: white;
    /*max-width: 700px;*/
}
body{
    background-image: none;
    background-color: white;
    font-family: Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace !important;
    line-height: 1.8;
}
#cnblogs_post_body{
    font-size: 16px;
}
.c_b_p_desc_readmore {
    display: -webkit-inline-box;
}
#taglist_title {
    font-size: 22px;
}
.day {
    box-shadow: 0 0 5px #9999994f;
}
.dayTitle {
    border: 1px solid #f5e305;
}
#green_channel{
    display: none;
}
#post_next_prev{
    display: none;
}
.forFlow img{
    margin-top: 0;
}
#EntryTag {
    display: none;
}
/** 去除广告 */
#cb_post_title_url{
    display: none;
}
#cnblogs_c1{
    display: none;
}
#cnblogs_c2{
    display: none;
}
#ad_t2{
    display: none;
}
#kb_block{
    display:none
}
#under_post_news{
    display:none
}
#header{
    display:none
}
#BlogPostCategory{
    display: none;
}
#comment_nav{
    display: none;
}
.postDesc {
    border-bottom:none;
}
#author_profile_follow{
    display: none;
}

/** 自定义样式 */
/* 加载条 */
#myProgressBar{
    width: 15%;
    height: 2px;
    background-color: #eb5055;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #eb5055;

  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #eb5055, 0 0 5px #eb5055;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
      -ms-transform: rotate(3deg) translate(0px, -4px);
          transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #eb5055;
  border-left-color: #eb5055;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
          animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/** 导航栏 */
#mynavbar{
    width: 100%;
    height: 70px;
    position: fixed;
    display: block;
    top: 0px;
    z-index: 100;
    background-color: white;
    transition:0.5s ease-in-out;
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
#mynavbar_menu{
    display: inline-block;
    width: auto;
    position: fixed;
    right: 13%;
    /* float: right; */
    text-align: right;
    line-height: 68px;
}
#mynavbar_menu a{
    padding: 0 10px;
    font-size: 14px;
    outline: 0;
    color: #313131bd !important;
    font-weight: 900;
    text-decoration: none;
}
#mynavbar_menu a:hover{
    color: #eb5055 !important;
}
#searchblogpost {
    display: inline-block;
}

/** 头部 */
#myheader{
    background-color: #75b7ef!important;
    margin-top:70px;
    position: relative;
    width: 100%;
    height: 300px;
}
#myheader_bg{
    width:100%;
    height:300px;
    background-position: center;
    background-size: cover;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
    position: absolute;
}
#myheader_cover{
    position: relative;
    margin-top: 70px;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.25);
}
#mypost_title{
    position: absolute;
    bottom: 0px;
    left: 20%;
    padding: 30px 25px 20px;
    max-width: 700px;
    color: white;
    transition:0.5s;
    opacity: 0;
}
#mypost_title_e{
    margin: 0;
    padding: 5px 0 15px;
}
#mypost_title_e a{
    border: 1px solid #6fa3ef;
    border-radius: 15px;
    background: #6fa3ef;
    color: #fff;display: inline-block;
    margin: 4px 8px 0 0;
    padding: 0 15px;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 13px;outline: 0;text-decoration: none;
    transition: 0.5s;
}
#mypost_title_e a:before{
    content: "# "
}
#mypost_title_e a:hover{
    background-color: white;
    border: 1px solid white;
    color:black;
}
#mypost_title_f a{
    color: white;
}
#mypost_title_f a:hover{
    text-decoration:none;
}

/* tag页面 */
#taglist a {
    border-radius: 15px;
    background: #fb9600a6;
    color: #fff;
    display: inline-block;
    margin: 4px 5px 0 0;
    padding: 0 15px;
    letter-spacing: 0;
    font-weight: 600;
    font-size: 13px;
    outline: 0;
    text-decoration: none;
    transition: 0.5s;
}

#taglist a:before {
    content: "# "
}
/** 右侧导航 */
#right_meun{
    position: fixed;
    z-index: 2;
    top: 100px;
    left: 70%;
    display: none;
    text-align: left;
    border-left: 1px solid #ddd;
    font-size: 12px;
}
#right_meun li{
    list-style: none!important;
}
#right_meun a{
    display: inline-table;
    margin-left: 5px;
    white-space: nowrap;
    text-decoration: none;
    color: #313131;
    outline: 0;
}
#right_meun a:hover{
    color: #eb5055;
}
#right_meun>li::before {
    position: relative;
    top: 0;
    left: -4px;
    display: inline-block;
    width: 7px;
    height: 7px;
    content: '';
    border-radius: 50%;
    background-color: #eb5055;
}
/* 底部导航 */
#post-bottom-bar{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 3pc;
    border-top: 1px solid #e0e0e0;
    background-color: #fff;
    margin: 0;
    padding: 0;
    transition: 0.5s ease-in-out;
}
#post-bottom-bar a{
    text-decoration: none!important;
}
.post-bottom-bar .bottom-bar-inner{
    margin: 0 auto;
    padding: 0 10px;
    max-width: 900px;
}
.bottom-bar-items{
    margin: 0 0 0 10px;
    color: #313131;
    font-size: 14px !important;
    line-height: 3pc;float: left;
}
.post-bottom-bar{
    margin: 0 0 0 10px;
    color: #313131;
    font-size: 14px;
    line-height: 3pc;
}
.post-bottom-bar .social-share .bottom-bar-item {
    padding: 4px;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-facebook a {
    background-color: #4267b2;
    color: #fff;
}
.post-bottom-bar .social-share .bottom-bar-item a {
    padding: 2px 10px;
    border-radius: 15px;
}
.post-bottom-bar .bottom-bar-item a {
    margin: 0;
    padding: 9pt;
    border: 0;
    background: 0 0;
    color: #313131;
    font-size: 14px;
    line-height: 3pc;
    cursor: pointer;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-twitter a {
    background-color: #1b95e0;
    color: #fff;
}
.post-bottom-bar .bottom-bar-item.bottom-bar-qrcode a {
    background-color: #5f5f5f;
    color: #fff;
}
.bottom-bar-item a:hover{
    color: #eb5055;
}


/** 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 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;
}
blockquote{
    border:0;
}
.postBody ul li, .postCon ul li {
    list-style: initial;
}
/* code加上行数 */
.cnblogs-markdown .syntaxhighlighter table td.code {
  width:95% !important; 
}

.cnblogs-markdown .syntaxhighlighter code {
  font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace!important;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}

.cnblogs-markdown .syntaxhighlighter code:before,
.cnblogs-markdown .syntaxhighlighter code:before {
  letter-spacing: -0.5em;
}


/** 更改浏览器滚动条和选中字体背景颜色 */
::selection {
    background-color: #FF5722;
    color: #fff;
}
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    min-height: 28px;
    background-color: #c2c2c2;
    background-clip: padding-box;
}
::-webkit-scrollbar-track-piece {
    background-color: #fff;
}
*, :after, :before {
    box-sizing: border-box;
}
#under_post_kb{
    display: none;
}
/* 评论优化 */
input[type=button] {
    width: 80px;
    height: 30px;
    border-width: 0px;
    border-radius: 200px;
    background: #1E90FF;
    cursor: pointer;
    outline: none;
    font-family: Microsoft YaHei;
    color: white;
}
.commentbox_title_left {
    color: #3397ff;
}
div.commentform textarea.comment_textarea {
    border-radius: 5px;
}
div.commentform input.author {
    background-color: #ffba4d;
    width: 150px;
    border-radius: 8px;
}
#commentform_title {
    display: none;
}
.login_tips {
    display: none;
}
/*移动端*/
@media screen and (max-width: 1000px) {
    .forkme {display: none;}
    #mynavbar_menu {
        display: none;
        margin-top: 16px;
        padding-left: 0;
        background-color: white;
        text-align: left;
        width: 100px;
        box-shadow: 0 0 1px wheat;
        line-height: 49px;
    }
    #mynavbar_menu a {
        padding: 0 10px;
        display: block;
    }
    .site-nav-toggle {display: inline-block !important;}
    #searchblogpost {display: none !important;}
    #mypost_title {left: 0%;}
    #right_meun {display: none !important;}
    #main {width: 80%;}
}
/* 菜单三条杠 */
span.btn-bar {
    display: block;
    margin-top: 4px;
    width: 22px;
    height: 2px;
    background: #555;
    border-radius: 1px;
}
.site-nav-toggle button {
    margin: 0;
    padding: 1px 6px;
    background: transparent;
    border: none;
}
.site-nav-toggle {
    position: fixed;
    right: 7%;
    line-height: 73px;
}

页首html

<!-- ............自定义首部代码开始............ -->
<!-- 自定义进度条 -->
<div id="myProgressBar"></div>

<!-- github fork me -->
<div class="forkme">
    <a href="https://github.com/ethan-enhe"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://i.loli.net/2019/02/03/5c56804b26dd9.png" alt="Fork me on GitHub"></a>
</div>

<!-- 自定义导航条 -->
<div id="mynavbar">
    <div style="position:relative;width:65pc;height:70px;margin:0 auto;">
        <a style="width: auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/BlogE">
            <img style="width: auto;height: 22px;outline: 0;margin-top: 23.5px;" src="https://i.loli.net/2019/01/31/5c52e907bfa56.png">
        </a>
        <div id="mynavbar_menu">
            <a href="https://www.cnblogs.com/BlogE/">Home</a>
            <a href="https://www.cnblogs.com/BlogE/tag/">Tags</a>
            <a href="https://feedex.net/feed/feed.cnblogs.com/blog/u/491007/rss">Rss</a>
            <a href="https://www.cnblogs.com/BlogE/p/about.html">About</a>
        </div>
        <div class="site-nav-toggle" style="display: none;">
            <button aria-label="切换导航栏">
              <span class="btn-bar"></span>
              <span class="btn-bar"></span>
              <span class="btn-bar"></span>
            </button>
        </div>
    </div>
</div>

<!-- 自定义头部锚点 -->
<a name="mtop"></a>

<!-- 自定义头部 -->
<div id="myheader">
    <!-- 背景图片 -->
    <div id="myheader_bg"></div>
    <!-- 遮罩层 -->
    <div id="myheader_cover">
        <!-- 博客标题 -->
        <div id="mypost_title">
            <div id="mypost_title_h" style="font-weight: 500;font-size: 30px;">Blog-E</div>
            <div id="mypost_title_f"></div>
            <div id="mypost_title_e"><a href="https://www.cnblogs.com/BlogE/">路漫漫其修远兮，吾将上下而求索。</a></div> 
        </div>  
    </div>
</div>
<!-- ............自定义首部代码结束............ -->

页尾html

<!-- ............自定义尾部代码开始............ -->
<div id="post-bottom-bar" class="post-bottom-bar">
    <div class="bottom-bar-inner">
        <!-- 左边 -->
        <div class="bottom-bar-items social-share" style="float: left;">
            <span class="bottom-bar-item bottom-bar-facebook">
                <a id="bottom-d" href="javascript:void(0)" target="_blank">点赞</a>
            </span>
            <span class="bottom-bar-item bottom-bar-twitter">
                <a id="bottom-g" href="javascript:void(0)"" target="_blank">关注</a>
            </span>
            <span class="bottom-bar-item bottom-bar-qrcode">
                <a id="bottom-s" href="javascript:void(0)" target="_blank">收藏</a>
            </span>
        </div>
        <!-- 右边 -->
        <div class="bottom-bar-items right" style="float: right;">
            <span class="bottom-bar-item"><a id="mbottom-left" href="javascript:void(0);">←</a></span>
            <span class="bottom-bar-item"><a id="mbottom-right" href="javascript:void(0);">→</a></span>
            <span class="bottom-bar-item"><a href="#mfooter">↓</a></span>
            <span class="bottom-bar-item"><a href="#mtop">↑</a></span>
        </div>
    </div> 
</div>
<a name="mfooter"></a>
<!-- ............自定义尾部代码结束............ -->
<script type="text/javascript" src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<script type="text/javascript">
    //设置title
    var tt = document.title;
    tt = tt.replace("Ethan_Zhou - 博客园", "Blog-E");
    document.title = tt;
    /**
        用来设置初始时需要执行的js
    */
    $(document).ready(function(){
        
        //加载顶部进度条
        NProgress.start();
        NProgress.done();
        $("#myProgressBar").hide();

        //设置背景图片地址
        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://i.loli.net/2019/01/31/5c52e73546215.jpg)");
        }
        //标题
        $("#mypost_title_h").html($("#cb_post_title_url").html());
        //正文和标题淡入
        $("#mainContent").css("opacity","1");
        $("#mainContent").css("margin-top","0");
        $("#mypost_title").css("opacity","1");
        //更改iocn图标
        var linkObject = document.createElement("link");
        linkObject.rel = "shortcut icon";
        linkObject.href = "https://i.loli.net/2019/01/31/5c52e907bfa56.png";
        document.getElementsByTagName("head")[0].appendChild(linkObject);
    })
    /**
        设置ajax请求加载完所有数据时执行的js
    */
    setTimeout(afterAjax,1000);
    function afterAjax(){
        //假如不是首页
        var now_url = window.location.href.toLowerCase();
        if (now_url.indexOf("bloge/p/")>=0) {
            //获取文章标签
            var tag = null;
            if ($("#EntryTag").html()!=null && $("#EntryTag").html()!= "") {
              tag = $("#EntryTag").html();
              tag = tag.substring(3,tag.length);
            }else{
              tag = "<a href='https://cnblogs.com/BlogE'>暂无标签</a>";
            }
            //获取文章分类
            var classification = null;
            if ($("#BlogPostCategory").html()!=null && $("#BlogPostCategory").html()!= "") {
                classification = $("#BlogPostCategory").html();
                classification = classification.substring(3,classification.length);
            }else{
                classification = "<a href='https://cnblogs.com/BlogE'>暂未分类</a>";
            }
            var ftitle = "Published on "+ $("#post-date").html() + " in " +  classification
            + " with <a href='https://cnblogs.com/BlogE'>Blog-E</a>";
            //设置副标题标题
            $("#mypost_title_f").html(ftitle);
            //设置标题标签按钮
            $("#mypost_title_e").html(tag.replace(",",""));
            //设置底部导航条上一篇下一篇文章
            var pnp = $("#post_next_prev a");
            $("#mbottom-left").attr("href",pnp[1].href);
            if (pnp.length>2) {
                $("#mbottom-right").attr("href",pnp[3].href);
            }
        }
        $("#myheader_bg").css("filter","blur(0px)");
    }


    /** 
        自定义的js方法
    */
    //设置底部导航条点击事件
    $("#bottom-g").click(function(){
        follow('5dfde587-1816-e711-845c-ac853d9f53ac');
    })
    $("#bottom-s").click(function(){
        AddToWz(cb_entryId);return false;
    })
    var now_url = window.location.href.toLowerCase();
    if (now_url.indexOf("bloge/p/")==-1 && now_url.indexOf("bloge/diary/")==-1){
        $("#bottom-s").hide();
        $("#bottom-d").html("友链");
        $("#bottom-d").attr("href","https://www.cnblogs.com/BlogE/p/links.html");
    }else{
        var url = window.location.href;
        var lastUrl = url.substring(url.lastIndexOf("/")+1);
        var mpageId = lastUrl.substring(0,lastUrl.indexOf("."));
        $("#bottom-d").click(function(){
            DiggIt(mpageId,cb_blogId,1);
            green_channel_success(this,'谢谢推荐！');
        })
    }


    //通过滚动条控制导航条的展现隐藏
    var oldScrollNum = 0;
    window.onscroll = function(){
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        //下滑
        if (t>oldScrollNum) {
            if (t>120) {
                $("#mynavbar").css("margin-top","-70px");//顶部导航
                $("#post-bottom-bar").css("bottom","-3pc");//底部导航
                $(".forkme").fadeOut();
                if(document.body.clientWidth<1000){
                    $("#mynavbar_menu").slideUp();
                    var ON_CLASS_NAME = 'site-nav-on';
                    $(".site-nav-toggle").removeClass(ON_CLASS_NAME);
                }
            }
            if (t>300) {
                $("#right_meun").css("display","inline-block");//右侧导航
            }
        //上拉
        }else{
            //防止用a链接跳转也触发效果
            if (oldScrollNum-t<20) {
                $("#mynavbar").css("margin-top","0px");//顶部导航
                $("#post-bottom-bar").css("bottom","0");//底部导航
                if(document.body.clientWidth>=1000)
                    $(".forkme").fadeIn();
            }
            if (t<=300) {
                $("#right_meun").css("display","none");//右侧导航
            }
        }
        oldScrollNum = t;
    }

    //移动端菜单收缩/展开
    $(".site-nav-toggle").click(function() {
        var ON_CLASS_NAME = 'site-nav-on';
        if ($(this).hasClass(ON_CLASS_NAME)) {
            $("#mynavbar_menu").slideUp();
            $(this).removeClass(ON_CLASS_NAME);
        } else {
            $("#mynavbar_menu").slideDown();
            $(this).addClass(ON_CLASS_NAME);
        }
    })

    //背景大图点击模糊||清晰
    $("#myheader_cover").click(function(){
        if ($("#myheader_bg").css("filter") == "blur(3px)") {
            $("#myheader_bg").css("filter","blur(0px)");
        }else{
            $("#myheader_bg").css("filter","blur(3px)");
        }
    })

 </script>

 <script type="text/javascript">  
    var setMyBlog = {
        setCopyright: function() {
            //设置版权信息，转载出处自动根据页面url生成
            var info_str = '<p>作者：<a target="_blank">@ethan_zhou</a><br>'+
                '本文为作者原创，转载请注明出处：<a class="uri"></a></p><hr></hr>';
            info = $(info_str);
            info_a = info.find("a");
            url = window.location.href;
            if (url.indexOf("#") >= 0)
                url = url.slice(0, url.indexOf("#"));
            $(info_a[0]).attr("href","https://github.com/ethan-enhe");
            $(info_a[1]).attr("href",url).text(url);
            $("#cnblogs_post_body").prepend(info);
        },
        setCodeRow: function(){
            // 代码行号显示
            var pre = $("pre.sourceCode"); //选中需要更改的部分
            if(pre && pre.length){
                pre.each(function() {
                    var item = $(this);
                    var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
                    item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
                    item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷
                    SyntaxHighlighter.all();
                })
            }
        },
        setAtarget: function() {
            // 博客内的链接在新窗口打开
            $("#cnblogs_post_body a").each(function(){
                this.target = "_blank";
            }) 
        },
        setContent: 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 ;
                }
            });
        },
        setSearch: function() {
            var search = document.createElement('div');
            search.innerHTML="<input type=\"text\" id=\"q\" onkeydown=\"return zzk_go_enter(event);\" class=\"input_my_zzk\">&nbsp;<input onclick=\"zzk_go()\" type=\"button\" value=\"找找看\" id=\"btnZzk\" class=\"btn_my_zzk\">";
            search.setAttribute('id','searchblogpost');
            document.getElementById("mynavbar_menu").appendChild(search);
        },
        runAll: function() {
            /* 运行所有方法
             * setAtarget() 博客园内标签新窗口打开
             * setContent() 设置目录（仅在窗口够大时）
             * setCopyright() 设置版权信息
             * setCodeRow() 代码行号显示
             */ 
            this.setAtarget();
            this.setContent();
            this.setCopyright();
            //this.setSearch();
            this.setCodeRow();
        }
    }
    setMyBlog.runAll();
</script>

博客园细节美化，打磨

标签：parent   自定义   esc   comment   start   ons   不能   var   遮罩   

原文地址：https://www.cnblogs.com/BlogE/p/beautifycnblogs.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！