zoukankan      html  css  js  c++  java
  • 博客园细节美化,打磨

    原作者

    感谢 @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;
         150px;
        border-radius: 8px;
    }
    div.commentform textarea.comment_textarea {
        border-radius: 5px;
    }
    input[type=button] {
         80px;
        height: 30px;
        border- 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/BlogEhttps://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/beautifycnblogs.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);
    },
    

    美化代码块

    使用highlight.js换了个代码主题,重写了添加代码行号的函数(原理是给每行代码外边套一个<ol><li>标签,借鉴这篇文章),设置了代码不折行等等,同时模仿了这个网站的代码块颜色样式。

    菜单添加 Font Awesome 图标

    觉得菜单没有图标略显单调,于是引用了Font Awesome的css和js。如果你的博客因此加载过慢,你可以删掉掉页首html中形如<i class="fas fa-xxxx"></i>的东西,和注释<!-- ............Font Awesome............ -->后边的内容。

    细节美化

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

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

    测试中功能

    博文列表中显示文章插图

    在文章的摘要中“插入右侧图片”时,如要显示该图片,只需为其加上一个“on”的class,比如:

    <img src="https://github.com/liriliri/eruda/raw/master/doc/banner.jpg" class="desc_img on">
    

    开启站内搜索

    目前版本的代码默认不会显示站内搜索(效果不稳定),如果您想要尝试这个功能,可以取消注释this.setSearch。欢迎在评论区中反馈使用中的出现的bug肯定不会出现bug

    最终代码及使用方法

    主题选择bluesky,然后把以下代码中我的用户名和自定义域名等内容替换成你自己的,然后再把所有代码复制到博客设置中对应的位置即可。

    自定义css

    .forkme {
        position: fixed;
        right: 0px;
        top: 0px;
        height: 149px;
         149px;
        z-index: 999;
    }
    #sideBar{
        display: none;
    }
    #mainContent{
         100%;
        box-shadow: 0 0 0;
        border-radius: 0px;
        opacity: 0;
        transition:0.5s;
        margin-top:40px;
    }
    #main{
         45%;
        background-color: white;
        /*max- 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;
    }
    #posts {
        box-shadow: 0 0 5px #251a1a4f;
        border-radius: 15px;
        margin-bottom: 38px;
        padding-top: 32px;
    }
    .post-img {
        position: relative;
        display: inherit;
        min-height: 250px;
        background-position: 50% 50%;
        background-size: cover;
    }
    .dayTitle {
        border: 1px solid #f5e305;
        margin-top: 20px;
        margin-left: 32px;
        margin-right: 32px;
    }
    .postTitle {
        margin-left: 32px;
        margin-right: 32px;
    }
    #posts .postCon {
        margin-left: 32px;
        margin-right: 32px;
    }
    #green_channel{
        display: none;
    }
    #post_next_prev{
        display: none;
    }
    .post-img{
        /*margin-top: 0;*/
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    #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;
        margin-left: 32px;
        margin-right: 32px;
    }
    #author_profile_follow{
        display: none;
    }
    
    /** 自定义样式 */
    /* 加载条 */
    #myProgressBar{
         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;
    
       100%;
      height: 2px;
    }
    #nprogress .peg {
      display: block;
      position: absolute;
      right: 0px;
       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 {
       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{
         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;
         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;
         100%;
        height: 300px;
    }
    #myheader_bg{
        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;
         100%;
        height: 300px;
        background-color: rgba(0, 0, 0, 0.25);
    }
    #mypost_title{
        position: absolute;
        bottom: 0px;
        left: 20%;
        padding: 30px 25px 20px;
        max- 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:nth-child(1n) {
        color: #fff;
        border: 1px solid #6fa3ef;
        border-radius: 15px;
        background: #6fa3ef;
    }
    #mypost_title_e a:nth-child(2n) {
        color: #fff;
        border: 1px solid #ff9800;
        border-radius: 15px;
        background: #ff9800
    }
    #mypost_title_e a:nth-child(3n) {
        color: #fff;
        border: 1px solid #46c47c;
        border-radius: 15px;
        background: #46c47c
    }
    #mypost_title_e a:nth-child(4n) {
        color: #fff;
        border: 1px solid #f9bb3c;
        border-radius: 15px;
        background: #f9bb3c
    }
    #mypost_title_e a:nth-child(5n) {
        color: #fff;
        border: 1px solid #bc99c4;
        border-radius: 15px;
        background: #bc99c4
    }
    #mypost_title_e a:nth-child(6n) {
        color: #fff;
        border: 1px solid #e8583d;
        border-radius: 15px;
        background: #e8583d
    }
    #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;
    }
    
    /** 右侧导航 */
    #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 !important;
        outline: 0;
        border-bottom: 0 !important;
    }
    #right_meun a:hover{
        color: #eb5055;
    }
    #right_meun>li::before {
        position: relative;
        top: 0;
        left: -4px;
        display: inline-block;
         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- 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;
        padding: 15px!important;
        border: 0 solid #3d7e9a !important;
        border-left- 5px!important;
        white-space: pre;
        border-radius: 0px !important;
    }
    .cnblogs-markdown code {
        background: #eee !important;
        border: 0px !important;
        color: #333 !important;
        font-size: 16px!important;
    }
    code ol {
        padding-left: 20px !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;
         100%;
        padding: 6px 0 6px 25px;
    }
    blockquote{
        border:0;
    }
    .postBody ul li, .postCon ul li {
        list-style: initial;
    }
    a:hover {
        text-decoration: none;
    }
    #cnblogs_post_body a {
        color: #0593d3;
        border-bottom: none;
        border-bottom: 1px solid #0593d3;
    }
    /* code加上行数 */
    .cnblogs-markdown .syntaxhighlighter table td.code {
      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 {
         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] {
         80px;
        height: 30px;
        border- 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;
         150px;
        border-radius: 8px;
    }
    #commentform_title {
        display: none;
    }
    .login_tips {
        display: none;
    }
    /*移动端*/
    @media screen and (max- 1000px) {
        .forkme {display: none;}
        .post-img {min-height: 175px;}
        #mynavbar_menu {
            display: none;
            margin-top: 16px;
            padding-left: 0;
            text-align: left;
             100px;
            box-shadow: 0 0 1px wheat;
            line-height: 49px;
        }
        #mynavbar_menu a {
            display: block;
            padding: 0 10px;
            background-color: #eee;
        }
        .site-nav-toggle {display: inline-block !important;}
        #searchblogpost {display: none !important;}
        #mypost_title {left: 0%;}
        #right_meun {display: none !important;}
        #main { 80%;}
    }
    /* 菜单三条杠 */
    span.btn-bar {
        display: block;
        margin-top: 4px;
         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;100%;height:70px;margin:0 auto;">
            <a style=" auto;height: 22px;margin-left: 25px;" href="https://www.cnblogs.com/BlogE">
                <img style=" 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/"><i class="fas fa-home"></i> Home</a>
                <a href="https://www.cnblogs.com/BlogE/tag/"><i class="fas fa-tag"></i> Tags</a>
                <a href="https://www.cnblogs.com/BlogE/rss"><i class="fas fa-rss-square"></i> Rss</a>
                <a href="https://www.cnblogs.com/BlogE/p/about.html"><i class="fas fa-question"></i> 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>
    <link rel="stylesheet" href="https://files.cnblogs.com/files/BlogE/tomorrow.css">
    <script src="https://files.cnblogs.com/files/BlogE/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    
    <!-- ............Font Awesome............ -->
    
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/v4-shims.js"></script> 
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
    <!-- ............自定义首部代码结束............ -->
    

    页尾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");
            //分离博文
            var allday = $(".day");
            allday.each(function() {
              var nowday = $(this);
              var post = $("<div id='posts'></div>");
              nowday.children().each(function() {
                if ($(this).attr("id") != "posts") {
                  if($(this).attr("class") == "postCon"){
                    var pic=$(this).find("img");
                    if(pic.length==1 && pic.hasClass("on")){
                        var postimg=$("<div class='post-img'></div>");
                        postimg.css("background-image","url("+pic.attr("src")+")");
                        post.prepend(postimg);
                        post.css("padding-top","0");
                        pic.hide();
                    }
                  }
                  post.append($(this));
                }
                if ($(this).attr("class") == "postDesc") {
                  $(".forFlow").append(post);
                  post = $("<div id='posts'></div>");
                }
              })
            })
            allday.remove();
            $(".forFlow").append($(".topicListFooter[id!=homepage_top_pager]"));
        }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(){
                // 代码行号显示
                $("pre code").each(function(){
                    $(this).html("<ol><li>" + $(this).html().replace(/
    /g,"
    </li><li>") +"
    </li></ol>");
                });
            },
            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 BlogE 增加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() 设置版权信息
                 * setSearch() 开启站内搜
                 * setCodeRow() 代码行号显示
                 */ 
                this.setAtarget();
                this.setContent();
                this.setCopyright();
                //this.setSearch();
                this.setCodeRow();
            }
        }
        setMyBlog.runAll();
    </script>
    

    P.S.喜新厌旧的我又转用jekyll弄博客了,以后这个博客也许不会更了,不过也欢迎大家参观我的新博客blog-e.tk

  • 相关阅读:
    PHP的文件下载
    ajax异步请求分页显示
    Linux的启动过程
    搭建nginx反向代理用做内网域名转发
    intellij idea 修改背景保护色&&修改字体&&快捷键大全
    IDEA入门级使用教程-
    http://blog.csdn.net/baidu_31657889/article/details/52315902
    JVM——Java虚拟机架构
    MySQL远程连接ERROR 2003 (HY000):Can't connect to MySQL server on'XXXXX'(111) 的问题
    windows上 nginx 配置代理服务,配置多域名,以及最简单实现跨域配置
  • 原文地址:https://www.cnblogs.com/BlogE/p/beautifycnblogs.html
Copyright © 2011-2022 走看看