<input id="ohw05"></input>
  • <table id="ohw05"><menu id="ohw05"></menu></table>
  • <var id="ohw05"></var>
  • <code id="ohw05"><cite id="ohw05"></cite></code>
    <label id="ohw05"></label>
    <var id="ohw05"></var>
  • Loading

    博客園主題樣式更改總結

    一、前言

    寫這篇博客的原因是,由于之前自定義的一些樣式, 會導致頁面內容量過多時造成網頁卡頓的現象,
    自己也比較喜歡干凈直觀的閱讀方式,所以嘗試不同的博客樣式,從博客開通以來,差不多也改了四五次了吧,
    所以這次做個總結,也是一種備份吧。

    如果感興趣可以慢慢看完,我也想表達一些對于一些自定義設置的原因。


    自定義的前提

    首先去后臺設置中開通JS權限,寫一些原因(比如寫博客的原因,可以多寫一點),審核其實也很快的一半天吧,看官方情況,反正我當時記得是很快就好了。

    img_2

    注意一:利用好網頁的CTRL+F來進行搜索關鍵字,能快速定位自定義內容位置,編輯欄內也可以使用此快捷鍵進行查找。
    同時CTRL+F也是提高開發效率的必備技能。
    注意二:用好搜索快捷鍵的同時,也要用好目錄,因為這次很多代碼會占一大部分篇幅,所以用好目錄,可以清楚的知道哪一塊是做什么的。
    注意三:總共總結四次比較重要的自定義操作,而且這次文章內容量也比較多,順便自己想測試一下當前這款主題流暢閱讀程度


    第一次

    simplememory官方主題

    鏈接直達http://www.tnepal.com/SkinUser.aspx?SkinName=SimpleMemory

    記得自己第一次寫博客的時候,就挑選的這個博客樣式,感覺很干凈直觀,其他博客樣式也嘗試去用了,可能還是偏向這款博客樣式吧,整體真的簡潔。

    當時在博客“設置”中看到css欄,支持js啥的東西,還不太懂這是干什么的,后來自己學了一些前端的三件套,突然想到這塊是不是官方留出來可以自定義化,然后網上搜了一下,果然是自己陽光淺了,還真的可以自定義化,然后自己就開始了DIY歷程……


    第二次

    img_1
    當初因為是第一次DIY,所以也沒有留下什么記錄,而且當時博客園,對于這塊的語法檢測是很松的,直到我去年秋天那時候吧,想再改動一下樣式,發現博客園后臺設置變樣了,而且語法檢測嚴格了。

    當時好奇的是,雖然自己沒有改動什么但由于報語法錯誤,保存不了,但是自己博客樣式還是很好的渲染出來。自己沒法改的是因為當時都是從網上照抄下來的代碼,像CSS這種,我根本無從下手去改,幾百行的東西,當時看見就吐了,然后我漸漸去找尋可以再次替代這款主題,并且可以自定義出來自己比較喜歡樣式的主題,發現寥寥無幾,還是打算重新開始simplememory的自定義化吧!


    第三次

    Cnblogs-Theme-SimpleMemory

    這款主題是別人已經改好的主題,整體樣式還是很不錯的。
    (需要提一點的是,根據我下面的自定義內容,可能會與作者的樣式稍稍有點差別,還請自行看主題作者文檔更改!)
    記得選擇這個主題!!!
    img_9
    大佬博客http://www.tnepal.com/bndong/
    附上GItHubhttps://github.com/BNDong/Cnblogs-Theme-SimpleMemory
    文檔https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/
    當時也是沖著主題打開后可以有一個簡單而且對Markdown渲染比較好的頁面去的,而且也有自己的目錄結構,其實后面我寫博客的時候發現,有一個目錄導航會很好的增加文章的可閱讀性,畢竟點進來博客的人,也不是都喜歡看,只是沖著標題點進來的,所以目錄結構能夠大致的反應出博客內容

    (今年開年那時候發現,博客園在文章每一層級的標題上支持目錄的展示,瞬間對官方愛了愛了,這個功能是真心不錯)。
    這塊的話個人覺得直接看主題文檔比較直接一點,我這里簡單說一下,我自己自定義化的一些內容,其實也很少。

    頁面定制CSS

    這里我選的2.*版本,直接進去CTRL+A全選,復制粘貼到CSS欄中,記得勾選“禁用模板CSS”
    GitHubhttps://github.com/BNDong/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css
    Giteehttps://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css

    博客側邊欄

    重點就在這,其實很多DIY的東西就在這里面,我也把我之前的配置放著,主要修改內容如圖

    img_3

    img_4

    <script type="text/javascript">
        window.cnblogsConfig = {
    
            code: {
                type: 'hljs',
                theme: 'atom-one-dark-reasonable',
                // 
                options: {
                    line: true,
                },
            },
            animate: {
                homeBanner: {
                    enable: true,
                    options: {
                        radius: 15,
                    }
                },
                articleTitle: {
                    enable: true,
                },
                articleBanner: {
                    enable: true,
                },
    
                background: {
                    enable: true,
                },
            },
            info: {
                name: 'The Road of Learning 余月七', // 用戶名
                startDate: '2020-05-07',
                avatar: 'https://img.imgdb.cn/item/604c411b5aedab222c2a68f4.jpg', // 用戶頭像
                blogIcon: 'https://img.imgdb.cn/item/604c411b5aedab222c2a68f4.jpg',
            },
            sidebar: { // 列表數據 ['導航名稱', '鏈接', 'icon']
                navList: [
                    ['www.yuyueq.cn', 'http://www.yuyueq.cn', 'icon-logo_ie'],
                    ['GitHub', 'https://www.github.com/yuyueq/', 'icon-github'],
                    ['Gitee', 'https://www.gitee.com/yuyueq/', 'icon-gitee'],
                    ['CSDN', 'https://blog.csdn.net/Frank_dwx/', 'icon-csdn'],
                    ['我的語雀', 'https://www.yuque.com/yuyueq/', 'icon-brush_fill'],
                    ['Java編程思想(第5版)', 'http://www.tnepal.com/yuyueq/category/2031635.html', 'icon-logo_ie'],
    
                ],
                infoBackground: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210417133712%E8%9C%82%E8%9C%9C%E6%B5%8F%E8%A7%88%E5%99%A8_nrkeww.jpg',
    
            },
            banner: {
                home: {
                    background: [
                        'https://img.imgdb.cn/item/604c37be5aedab222c2557d9.jpg',
                        'https://img.imgdb.cn/item/604c3b7a5aedab222c27cfa6.png',
                        'https://img.imgdb.cn/item/604c3d015aedab222c286b4e.jpg',
                        'https://img.imgdb.cn/item/606fa9608322e6675cd06bf3.png',
                        'https://img.imgdb.cn/item/604c3c645aedab222c282a57.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319023247img-71496ef535d92eca42b1f8004c6834b2.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319023442t01b75a5354a249c196.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_2103190252514c472640df47bf86d79fbaf2412c3fd1.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319025059wy3zrp.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319024941t0194e556233a191e76.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042509555681e00a4690bfbe15eb507a7c3f28246b.png',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042510055922.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210425112726db286af4881011ebb6edd017c2d2eca2.jpg',
                        'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042511295233.jpg',
                    ],
                    title: [
                        "悟已往之不諫,知來者之可追",
                        "紙上得來終覺淺,絕知此事要躬行",
                        "茍有恒,何必三更眠五更起;最無益,莫過一日曝十日寒",
                        "傲不可長,欲不可縱,樂不可極,志不可滿",
                        "對人間的熱愛與歌頌,可抵歲月冗長",
                        "不患人之不己知,患不知人也",
                        "不患人之不己知,患其不能也",
                        "古之學者為己,今之學者為人",
                        "不逆詐,不億不信,抑亦先覺者,是賢乎!",
                        "蓋有不知而作之者,我無是也。多聞,擇其善者而從之;多見而識之,知之次也。",
                        "見賢思齊焉,見不賢而內自省也。",
                        "不患無位,患所以立。不患莫己知,求為可知也。",
                        "見賢思齊焉,見不賢而內自省也。",
                    ],
    
                },
                article: {
                    background: [
                        "https://img.imgdb.cn/item/604c3b525aedab222c27bfc5.png",
                        "https://img.imgdb.cn/item/604c46dd5aedab222c2d637d.png",
                        "https://img.imgdb.cn/item/604c467b5aedab222c2d3e61.jpg",
                    ],
                },
            },
            loading: {
                rebound: {
                    tension: 16,
                },
                spinner: {
                    id: 'spinner',
                    radius: 90,
                }
            },
            footer: {
                style: 1,
            },
            switchDayNight: {
                enable: true,
                auto: {
                    enable: true
                }
            },
        }
    </script>
    <script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.7/dist/simpleMemory.js" defer></script>
    <script src="https://files.cnblogs.com/files/cainiao-chuanqi/mouse-click.js">
    </script>
    
    

    側邊欄這塊最后兩行是為了鼠標點擊的效果增添的,至于背景上面的線條是在頁腳代碼塊添加的,下面有。
    img_6

    頁首HTML代碼

    <!--<meta http-equiv="x-dns-prefetch-control" content="on">-->
    <link rel="dns-prefetch" >
    <link rel="dns-prefetch" >
    <link rel="dns-prefetch" >
    <link rel="dns-prefetch" >
    <link rel="dns-prefetch" >
    <link rel="dns-prefetch" >
    <link rel="preload"  as="script">
    
    

    頁腳HTML代碼

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--網格動態背景開始-->
    <script type="text/javascript">
    
        !function () {
            //封裝方法,壓縮之后減少文件大小
            function get_attribute(node, attr, default_value) {
                return node.getAttribute(attr) || default_value;
            }
    
            //封裝方法,壓縮之后減少文件大小
            function get_by_tagname(name) {
                return document.getElementsByTagName(name);
            }
    
            //獲取配置參數
            function get_config_option() {
                var scripts = get_by_tagname("script"),
                    script_len = scripts.length,
                    script = scripts[script_len - 1]; //當前加載的script
                return {
                    l: script_len, //長度,用于生成id用
                    z: get_attribute(script, "zIndex", -1), //z-index
                    o: get_attribute(script, "opacity", 0.8), //opacity
                    c: get_attribute(script, "color", "255,255,255"), //color
                    n: get_attribute(script, "count", 350) //count
                };
            }
    
            //設置canvas的高寬
            function set_canvas_size() {
                canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                    canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            }
    
            //繪制過程
            function draw_canvas() {
                context.clearRect(0, 0, canvas_width, canvas_height);
                //隨機的線條和當前位置聯合數組
                var e, i, d, x_dist, y_dist, dist; //臨時節點
                //遍歷處理每一個點
                random_points.forEach(function (r, idx) {
                    r.x += r.xa,
                        r.y += r.ya, //移動
                        r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
                        r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到邊界,反向反彈
                        context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //繪制一個寬高為1的點
                    //從下一個點開始
                    for (i = idx + 1; i < all_array.length; i++) {
                        e = all_array[i];
                        // 當前點存在
                        if (null !== e.x && null !== e.y) {
                            x_dist = r.x - e.x; //x軸距離 l
                            y_dist = r.y - e.y; //y軸距離 n
                            dist = x_dist * x_dist + y_dist * y_dist; //總距離, m
    
                            dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的時候加速
                                d = (e.max - dist) / e.max,
                                context.beginPath(),
                                context.lineWidth = d / 2,
                                context.strokeStyle = "#555555",//這里是線條的顏色
                                context.moveTo(r.x, r.y),
                                context.lineTo(e.x, e.y),
                                context.stroke());
                        }
                    }
                }), frame_func(draw_canvas);
            }
    
            //創建畫布,并添加到body中
            var the_canvas = document.createElement("canvas"), //畫布
                config = get_config_option(), //配置
                canvas_id = "c_n" + config.l, //canvas id
                context = the_canvas.getContext("2d"), canvas_width, canvas_height,
                frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
                    window.setTimeout(func, 1000 / 40);
                }, random = Math.random,
                current_point = {
                    x: null, //當前鼠標x
                    y: null, //當前鼠標y
                    max: 20000 // 圈半徑的平方
                },
                all_array;
            the_canvas.id = canvas_id;
            the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
            get_by_tagname("body")[0].appendChild(the_canvas);
    
            //初始化畫布大小
            set_canvas_size();
            window.onresize = set_canvas_size;
            //當時鼠標位置存儲,離開的時候,釋放當前位置信息
            window.onmousemove = function (e) {
                e = e || window.event;
                current_point.x = e.clientX;
                current_point.y = e.clientY;
            }, window.onmouseout = function () {
                current_point.x = null;
                current_point.y = null;
            };
            //隨機生成config.n條線位置信息
            for (var random_points = [], i = 0; config.n > i; i++) {
                var x = random() * canvas_width, //隨機位置
                    y = random() * canvas_height,
                    xa = 2 * random() - 1, //隨機運動方向
                    ya = 2 * random() - 1;
                // 隨機點
                random_points.push({
                    x: x,
                    y: y,
                    xa: xa,
                    ya: ya,
                    max: 6000 //沾附距離
                });
            }
            all_array = random_points.concat([current_point]);
            //0.1秒后繪制
            setTimeout(function () {
                draw_canvas();
            }, 100);
        }();
    </script>
    </body>
    </html>
    
    
    • 完全可以根據官方文檔來
    • 根據我的步驟來,和我一樣的效果,先復制粘貼CSS,然后側邊欄,頁首代碼,頁腳代碼,我這里都沒有做更改,直接粘貼過去可用,記得更換自己的內容
    • 要注意的是,這是我當時的配置內容,所以版本可能會稍舊,請自行取舍

    第四次

    這次我又回歸了最初的博客園官方simplememory主題,因為,我又發現,有時候在網絡不好的情況下,主題也會出現卡頓。
    再一個就是自己也是有點看膩了,不能說這款樣式不好看,因為在后面這段時間,我發現很多人都是這個樣式,自己也覺得新鮮感喪失了吧,
    就想回到最初那個時候,體會一下第一次DIY的快樂。所以這一次簡單的說一下,那張第一次DIY圖片里的內容,加上這次修改的內容。
    img_7
    img_8

    上面是經過多次不同的修改才有有內容,所以這里只放第二張圖片里的配置,因為兩者相差不大。

    下面都是完整的配置文件,我在自己更改過的地方,都有備注,所以請自行復制后查看修改。

    頁面CSS

    a:link {
      color: #6495ED;
      text-decoration: none
    }
    a:visited {
      color: 	#6495ED;
      text-decoration: none
    }
    a:hover {
      color: rgb(146, 122, 33);
      text-decoration: underline;
    }
    a:active {
      color: rgb(146, 122, 33);
      text-decoration: underline;
    }
    /*博客導航欄 */
    /* #navList {
    float:right;
    }
    #navList li {
    border: none;
    font-size: 16px;
    }
    .blogStats {
    display: none;
    } */
    /*側邊欄公告*/
    /* #blog-news > img {
    /*頭像*/
    display: block;
    margin: auto;
    border-radius: 50%;
    } */
    
    /* #profile_block {
    font-size: 15px;
    padding: 20px;
    line-height: 1.8;
    }
    
    #profile_block > a:link {
    color: #F60;
    } */
    
    /*公告結束*/
    
    #ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
      display: none;
    }
    
    
    /* 文章title自定義帶動畫樣式 */
    .postTitle {
      font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
      clear: both;
      background-color: #FBF9F9;
      margin-bottom: 8px;
      padding-top: 5px;
      padding-bottom: 0px;
      margin-top: 12px;
      border-left: 8px solid #21759b;
      padding-left: 17px;
      font-size: 18px;
      border-radius:0px;
    }
    .postTitle a:hover {
      text-decoration: none;
      margin-left: 17px;
      color: #E00000;
    }
    .postTitle a:link,
    .postTitle a:visited,
    .postTitle a:active {
      transition: all 0.4s linear 0s;
    }
    
    
    /*頁面大小*/
    
    #home {
      margin: 0 auto;
      opacity: 1;   /*透明度越小越透明*/
      width: 68%;
      min-width: 980px;
      background-color: #fff;
      padding: 30px;
      margin-top: 50px;
      margin-bottom: 50px;
      box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
      border-radius: 36px;
    }
    /* body {
    background: rgba(12, 100, 129, 1) url('https://pic.imgdb.cn/item/61e521d52ab3f51d9107a088.jpg') fixed no-repeat; <!--背景圖片-->
    background-position: 50% 5%;
    background-size: cover;
    } */
    #blogTitle {
      height: 66px;  /*高度*/
      clear: both;
      background-color: rgba(0, 0, 0,0);
    }
    
    
    #blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
      /*側邊欄每一模塊添加圓角和陰影*/
      border-radius: 10px;
      box-shadow: 1px 2px 3px #A7A8AD;
      background-color: #fff0;
    }
    #sideBarMain h3, .newsItem h3 {
      /*側邊欄每個模塊的標題部分*/
      font-size: 1.2em;
      height: 36px;
      line-height: 36px;
      text-indent: 0.5em;
      background: url() no-repeat left center #fff;
      padding: 0 0 0 50px;
      margin-bottom: 1;
      border: 1px solid rgba(112, 141, 215);
      border-left-width: 5px;
      border-radius: 10px;
      border-right-width: 5px;
    }
    
    /*生成博客目錄的CSS*/
    #uprightsideBar{
      font-size: 14px;
      font-family: ArialBold, Helvetica, sans-serif;
      text-align:left;
      position:fixed;/*將div的位置固定到距離top:50px,right:0px的位置,這樣div就會處在最右邊的位置,距離頂部50px*/
      top: 30px;
      right:0px;
      width: auto;
      height: auto;
      color: rgb(29, 4, 4);
    }
    #sideBarTab{
      font-size: 16px;
      float:left;
      width:30px; 
      border:1px solid #e5e5e5;
      border-right:none;
      text-align:center;
      background:#fff;
    }
    
    #sideBarContents{
      float:left;
      overflow:auto; 
      overflow-x:hidden;!important;
      width:266px;
      min-height:108px;
      max-height:460px;
      border:1px solid #e5e5e5;
      border-right:none; 
      background:	#fff;
    }
    #sideBarContents dl{
      margin:0;
      padding:0;
    }
    
    #sideBarContents dt{
      margin-top:5px;
      margin-left:5px;
    }
    
    #sideBarContents dd, dt {
      cursor: pointer;
    }
    
    #sideBarContents dd:hover, dt:hover {
      color:#abb0f3;
    }
    #sideBarContents dd{
      margin-left:10px;
    }
    #sideBarContents dd.indent3{
      margin-left:20px;
    }
    #sideBarContents dd.indent4{
      margin-left:30px;
    }
    #sideBarContents dd.indent5{
      margin-left:40px;
    }
    #sideBarContents dd.indent6{
      margin-left:50px;
    }
    
    .box{
      position:fixed;
      right:10px;
      bottom: 10px;
      height:30px;
      width: 50px;    
      text-align:center;
      padding-top:20px;    
      background-color: lightblue;
      border-radius: 20%;
      overflow: hidden;
    }
    .box:hover:before{
      top:50%
    }
    .box:hover .box-in{
      visibility: hidden;
    }
    .box:before{
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%,-50%);
      content:'回到頂部';
      width: 40px;
      color:peru;
      font-weight:bold;
      
    }    
    .box-in{
      visibility: visible;
      display:inline-block;
      height:20px;
      width: 20px;
      border: 3px solid black;
      border-color: white transparent transparent white;
      transform:rotate(45deg);
    }
    #cnblogs_post_body { 
      color: black;
      font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif; 
      font-size: 15px; 
    } 
    #cnblogs_post_body h1 {
      text-align:center;
      background: #333366; 
      border-radius: 6px 6px 6px 6px;
      box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); 
      color: #FFFFFF;
      font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 23px; 
      font-weight: bold; height: 25px; line-height: 25px;
      margin: 18px 0 !important; 
      padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;
    } 
    #cnblogs_post_body h2 {
      text-align:center; 
      background: #006699;
      border-radius: 6px 6px 6px 6px; 
      box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
      color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 20px; 
      font-weight: bold; height: 25px;
      line-height: 25px; margin: 18px 0 !important;
      padding: 8px 0 5px 5px;
      text-shadow: 2px 2px 3px #222222; 
    }
    
    /* 關注收藏等幾個按鈕 */
    #green_channel {
      padding: 5px 0 15px 0;
      margin-bottom: 10px;
      margin-top: 10px;
      border: 0;
      border-top: #eee 1px dashed;
      border-bottom: #eee 1px dashed;
      border-bottom-width: 1px;
      border-bottom-style: dashed;
      border-bottom-color: rgb(238, 238, 238);
      font-size: 12px;
      width: 100%!important;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
    }
    
    a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
      text-decoration: none;
      color: #fff;
      margin: auto;
      width: 80px;
      display: inline-block;
      line-height: 30px;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 2px;
      border-radius: 3px;
      text-transform: uppercase;
      transition: all .4s;
      -webkit-transition: all .4s;
      -moz-transition: all .4s;
      -ms-transition: all .4s;
      -o-transition: all .4s;
      position: relative;
      margin-left: 10px;
      background-image: none;
      margin-top: 10px;
    }
    a#green_channel_digg {
      background-color: #2daebf;
      box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
    }
    
    a#green_channel_favorite {
      background-color: #ffb515;
      box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
      margin-left: 10px;
    }
    a#green_channel_follow {
      background-color: #e33100!important;
      box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
      margin-left: 10px;
    }
    
    a#green_channel_wechat {
      padding: 3px 8px!important;
      background-color: #3cb034!important;
      box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
      margin-left: 10px;
      width: 35px;
    }
    
    a#green_channel_weibo {
      padding: 3px 8px!important;
      background-color: #ff464b!important;
      box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
      margin-left: 10px;
      width: 35px;
    }
    
    /*下面的頭像邊框*/
    #author_profile_info img.author_avatar {
      border-radius: 100%;
      box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
      border: 3px solid #f7f7f7;
      padding: 0;
      margin-left: 3px;
      margin-right: 7px;
    }
    
    /* 禁用下劃線 */
    .postBody a:link, .postBody a:visited, .postBody a:active {
      text-decoration: none;
    }
    
    /* 上一篇下一篇 */
    #post_next_prev {
      font-size: 14px;
      color: #535353;
    }
    /* 設置簽名格式 定制css樣式 */
    /* 個性簽名 */
    #MySignature {
      box-shadow: 8px 1px 10px #989898;
      padding: 10px;
      text-shadow: 1px 1px 1px #FFF;
      font-size: 15px;
      border-left: solid 5px #55895B;
      background: #FBF9F9;
      border-radius: 10px 10px 37% 10px;
      line-height: 2.4;
      margin: 37px 0;
    }
    
    #MySignature a {
      text-decoration: none;
      color: #4183c4;
      font-weight: bold;
    }
    
    #MySignature a:hover {
      text-decoration: underline;
      color: #f60;
    }
    
    #MySignature span {
      color: #f60;
    }
    
    /*推薦和反對*/
    #div_digg {
      float: right;
      position: fixed;
      width: 50px;
      bottom: 10px;
      left: 90%;
      margin-bottom: 10px;
      background: rgba(247,247,247,0.3);
      margin-right: 10px;
      font-size: 12px;
      box-shadow: 0 0 10px 0 #AAA;
      padding: 10px;
      border: 2px solid rgba(82, 168, 236, 0.8);
      text-align: center;
      margin-top: 10px;
    }
    
    /*這里是將反對按鈕做了一個隱藏,如果需要反對按鈕,直接刪除這塊配置*/
    .buryit {
      display: none;
    }
    
    
    

    側邊欄

    <!--時鐘和圖片-->
    <!--<div id="clockdiv">
        <canvas id="dom" width="120" height="120">時鐘canvas</canvas>
    </div>
    <script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
    
    <a href="http://www.tnepal.com/unleashed">
        <img src="https://pic.downk.cc/item/5f38a70c14195aa59437326b.png" border="" width="" height="">
    </a>-->
    
    <div class="c-social" align="center">
    
        <!-- 那些小圖標 -->
        <span>
            <a  target="_blank">
            <img src="https://pic.cnblogs.com/avatar/2031154/20220119112707.png"></a>
            <br>
             <a  target="_blank">
              <img src="https://pic.downk.cc/item/5f3269d814195aa594a36563.png" class="mr5" width = 30 height=30>
            </a>
             <a  target="_blank">
              <img src="https://pic.imgdb.cn/item/61e51fe82ab3f51d910562ae.png" class="mr5" width = 30 height=30>
            </a>
            <a  target="_blank">
              <img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 30 height=30>
            </a>
         <a  target="_blank">
              <img src="http://www.tnepal.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 30 height=30>
            </a>
         <a  target="_blank">
              <img src="https://pic.downk.cc/item/5f407ca3160a154a672a5964.png" class="mr5" width = 30 height=30>
            </a>
        <a  target="_blank">
              <img src="https://pic.imgdb.cn/item/61e51cc62ab3f51d9101801d.png" class="mr5" width = 30 height=30>
            </a>
        
        </span>
        <br>
    </div>
    <br>
    
    <!-- 為博客底部添加音樂組件 -->
    <div id="player" class="aplayer"></div>
    <link  rel="stylesheet">
    <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
    
    <script type="text/javascript">
        var ap = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: false,          <!-- 是否自動播放 -->
            showlrc: false,
            theme: '#FFFFFF',      <!-- 插件背景顏色,建議和你的公告欄背景色一樣,這樣融為一體的感覺 -->
            listFolded: true,     <!-- 默認折疊 -->
            fixed: false,    <!-- 底部展示 -->
            volume: 0.5,    <!-- 默認音量 -->
            mutex: true,     <!-- 不允許多個播放器同時播放 -->
            music: [{
                    title: '七里香',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E4%B8%83%E9%87%8C%E9%A6%99.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220119013521_Snipaste_2022-01-19_09-31-35.png'
                }, {
                    title: '夜曲',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%A4%9C%E6%9B%B2.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117061210_%E5%A4%9C%E6%9B%B2.png'
                },
    
                {
                    title: '花海',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E8%8A%B1%E6%B5%B7.css',
                    pic: 'https://pic.downk.cc/item/5f3e3d0714195aa5949ad064.jpg'
                }, {
                    title: '不能說的秘密',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8D%E8%83%BD%E8%AF%B4%E7%9A%84%E7%A7%98%E5%AF%86.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064737t010e12e6a774215909.jpg'
                },
    
    
                {
                    title: '借口',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E5%80%9F%E5%8F%A3.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064908e0c14e6d62d096386e1e70a0d5b719f7.png'
                },
    
    
                {
                    title: 'Panroama',
                    author: 'X-Ray dog',
                    url: 'https://files.cnblogs.com/files/unleashed/Panorama.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007160616417ef991ceb1481c31422c0f14287690f8.png'
                },
    
                {
                    title: 'Epic Music',
                    author: 'John Dreamer',
                    url: 'https://files.cnblogs.com/files/unleashed/EpicMusic.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200708082237a3b8f6a8713f1cc5d26861d847989412.jpg'
                },
    
    
                {
                    title: 'This’sWhatYouCameFor',
                    author: 'Chave',
                    url: 'https://files.cnblogs.com/files/unleashed/ChaveSunflyKaraokeThisIsWhatYouCameFor.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007170147331ff2be3d5e7168150c1aff88f4186244.png'
                }, {
                    title: 'Mine',
                    author: 'SLANDER',
                    url: 'https://files.cnblogs.com/files/unleashed/Mine1.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200707143300wallhaven-83ywmo.jpg'
                },
    
                {
                    title: 'Shorts',
                    author: 'Imagine Dragons',
                    url: 'https://files.cnblogs.com/files/unleashed/Shorts.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200716061133e9a018a8ab71975f6b9b30c2fcc62e39.png'
                },
    
    
    
                {
                    title: 'Where is your love',
                    author: 'J.lisk',
                    url: 'https://files.cnblogs.com/files/unleashed/Whereisyourlove.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_20071909221647e991c39efbb1a03ec330f28d072155.png'
                },
    
                {
                    title: '告白の夜',
                    author: 'Ayasa',
                    url: 'https://files.cnblogs.com/files/unleashed/Ayasa%E5%91%8A%E7%99%BD%E3%81%AE%E5%A4%9C.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007080822111587049458312.jpeg'
                },
    
    
                {
                    title: '年少有為',
                    author: '李榮浩',
                    url: 'https://files.cnblogs.com/files/unleashed/%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.css',
                    pic: 'https://pic.downk.cc/item/5f3e3e5914195aa5949cbf4a.jpg'
                }, {
                    title: '因為你,所以我',
                    author: '五月天',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%9B%A0%E4%B8%BA%E4%BD%A0%E6%89%80%E4%BB%A5%E6%88%91.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117063946_Snipaste_2022-01-17_14-23-13.png'
                },
    
    
                {
                    title: '樓頂上的小斑鳩',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060058_%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.png'
                },
    
                {
                    title: '哪里都是你',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117054903_%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.png'
                }, {
                    title: '11',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/11.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060454_11.png'
                },
    
                {
                    title: '一萬次悲傷(Live)',
                    author: '逃跑計劃',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%80%E4%B8%87%E6%AC%A1%E6%82%B2%E4%BC%A4111.css',
                    pic: 'https://pic.downk.cc/item/5f2587db14195aa59434c04f.jpg'
                },
    
    
                {
                    title: '起風了',
                    author: '買辣椒也用券',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E8%B5%B7%E9%A3%8E%E4%BA%86.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117064806_Snipaste_2022-01-17_14-47-44.png'
                },
    
                {
                    title: '下女的圣經',
                    author: 'Bo Peep',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8B%E5%A5%B3%E7%9A%84%E5%9C%A3%E7%BB%8F.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200730030607t01fea4cae2ab85a945.jpg'
                },
    
    
    
            ]
        });
        ap.init();
    </script>
    
    <br>
    

    頁首

    <script type="text/javascript">
        /*
            功能:生成博客目錄的JS工具
            測試:IE8,火狐,google測試通過
            一明
            2020-4-19
            */
        var BlogDirectory = {
            /*
            獲取元素位置,距瀏覽器左邊界的距離(left)和距瀏覽器上邊界的距離(top)
            */
            getElementPosition: function(ele) {
                var topPosition = 0;
                var leftPosition = 0;
                while (ele) {
                    topPosition += ele.offsetTop;
                    leftPosition += ele.offsetLeft;
                    ele = ele.offsetParent;
                }
                return {
                    top: topPosition,
                    left: leftPosition
                };
            },
    
            /*
            獲取滾動條當前位置
            */
            getScrollBarPosition: function() {
                var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
                return scrollBarPosition;
            },
    
            /*
            移動滾動條,finalPos 為目的位置,internal 為移動速度
            */
            moveScrollBar: function(finalpos, interval) {
    
                //若不支持此方法,則退出
                if (!window.scrollTo) {
                    return false;
                }
    
                //窗體滾動時,禁用鼠標滾輪
                window.onmousewheel = function() {
                    return false;
                };
    
                //清除計時
                if (document.body.movement) {
                    clearTimeout(document.body.movement);
                }
    
                var currentpos = BlogDirectory.getScrollBarPosition(); //獲取滾動條當前位置
    
                var dist = 0;
                if (currentpos == finalpos) { //到達預定位置,則解禁鼠標滾輪,并退出
                    window.onmousewheel = function() {
                        return true;
                    }
                    return true;
                }
                if (currentpos < finalpos) { //未到達,則計算下一步所要移動的距離
                    dist = Math.ceil((finalpos - currentpos) / 10);
                    currentpos += dist;
                }
                if (currentpos > finalpos) {
                    dist = Math.ceil((currentpos - finalpos) / 10);
                    currentpos -= dist;
                }
    
                var scrTop = BlogDirectory.getScrollBarPosition(); //獲取滾動條當前位置
                window.scrollTo(0, currentpos); //移動窗口
                if (BlogDirectory.getScrollBarPosition() == scrTop) //若已到底部,則解禁鼠標滾輪,并退出
                {
                    window.onmousewheel = function() {
                        return true;
                    }
                    return true;
                }
    
                //進行下一步移動
                var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
                document.body.movement = setTimeout(repeat, interval);
            },
    
            htmlDecode: function(text) {
                var temp = document.createElement("div");
                temp.innerHTML = text;
                var output = temp.innerText || temp.textContent;
                temp = null;
                return output;
            },
    
            /*
            創建博客目錄,
            id表示包含博文正文的 div 容器的 id,
            mt 和 st 分別表示主標題和次級標題的標簽名稱(如 H2、H3,大寫或小寫都可以!),
            interval 表示移動的速度
            */
            createBlogDirectory: function(id, mt, st, interval) {
                //獲取博文正文div容器
                var elem = document.getElementById(id);
                if (!elem) return false;
                //獲取div中所有元素結點
                var nodes = elem.getElementsByTagName("*");
                //創建博客目錄的div容器
                var divSideBar = document.createElement('DIV');
                divSideBar.className = 'uprightsideBar';
                divSideBar.setAttribute('id', 'uprightsideBar');
                var divSideBarTab = document.createElement('DIV');
                divSideBarTab.setAttribute('id', 'sideBarTab');
                divSideBar.appendChild(divSideBarTab);
                var h2 = document.createElement('H2');
                divSideBarTab.appendChild(h2);
                var txt = document.createTextNode('目錄導航');
                h2.appendChild(txt);
                var divSideBarContents = document.createElement('DIV');
                divSideBarContents.style.display = 'none';
                divSideBarContents.setAttribute('id', 'sideBarContents');
                divSideBar.appendChild(divSideBarContents);
                //創建自定義列表
                var dlist = document.createElement("dl");
                divSideBarContents.appendChild(dlist);
                var num = 0; //統計找到的mt和st
                mt = mt.toUpperCase(); //轉化成大寫
                st = st.toUpperCase(); //轉化成大寫
                //遍歷所有元素結點
                for (var i = 0; i < nodes.length; i++) {
                    var tits = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
                    if (tits.indexOf(nodes[i].nodeName) !== -1) { // nodes[i].nodeName == mt|| nodes[i].nodeName == st
                        //獲取標題文本
                        var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g, ""); //innerHTML里面的內容可能有HTML標簽,所以用正則表達式去除HTML的標簽
                        //nodetext = nodetext.replace(/ /ig, "");//替換掉所有的空格
                        nodetext = BlogDirectory.htmlDecode(nodetext);
                        //插入錨        
                        nodes[i].setAttribute("id", "blogTitle" + num);
                        var item;
                        switch (nodes[i].nodeName) {
                            case 'H1': //若為主標題 
                                item = document.createElement("dt");
                                break;
                            case 'H3':
                                item = document.createElement("dd");
                                item.setAttribute('class', 'indent3'); //通過CSS樣式定義距離
                                break;
                            case 'H4':
                                item = document.createElement("dd");
                                item.setAttribute('class', 'indent4');
                                break;
                            case 'H5':
                                item = document.createElement("dd");
                                item.setAttribute('class', 'indent5');
                                break;
                            case 'H6':
                                item = document.createElement("dd");
                                item.setAttribute('class', 'indent6');
                                break;
                            default: //若為子標題
                                item = document.createElement("dd");
                                break;
                        }
    
                        //創建錨鏈接
                        var itemtext = document.createTextNode(nodetext);
                        item.appendChild(itemtext);
                        item.setAttribute("name", num);
                        item.onclick = function() { //添加鼠標點擊觸發函數
                            var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
                            if (!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
                        };
    
                        //將自定義表項加入自定義列表中
                        dlist.appendChild(item);
                        num++;
                    }
                }
    
                if (num == 0) return false;
                /*鼠標進入時的事件處理*/
                divSideBarTab.onmouseenter = function() {
                        divSideBarContents.style.display = 'block';
                    }
                    /*鼠標離開時的事件處理*/
                divSideBar.onmouseleave = function() {
                    divSideBarContents.style.display = 'none';
                }
    
                document.body.appendChild(divSideBar);
            }
    
        };
    
        window.onload = function() {
            /*頁面加載完成之后生成博客目錄*/
            BlogDirectory.createBlogDirectory("cnblogs_post_body", "h1", "h2", "h3", 20);
        }
    </script>
    
    
    
    
    
    
    <!-- 鼠標點擊效果 -->
    <script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>
    <!-- 右下角live2d效果 -->
    <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
    
    <script>
        L2Dwidget.init({
            "model": {
                jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
                "scale": 1
            },
            "display": {
                "position": "left",
                "width": 150,
                "height": 300,
                "hOffset": 0,
                "vOffset": -20
            },
            "mobile": {
                "show": true,
                "scale": 0.5
            },
            "react": {
                "opacityDefault": 0.7,
                "opacityOnHover": 0.2
            }
        });
    </script>
    
    
    
    
    
    <!-- 背景動畫 -->
    <p style="text-align:center;font-size:50px;margin-bottom:5px;margin-top:20px;opacity: 1;color:#000000;"><i>Welcome to Yu Yueq's blog</i></p>
    <script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>
    
    
    
    
    <!-- 返回至頂部
      <div id="box" class="box">
          <div class="box-in"></div>
      </div>
      <script>
      var timer  = null;
      box.onclick = function(){
          cancelAnimationFrame(timer);
          timer = requestAnimationFrame(function fn(){
              var oTop = document.body.scrollTop || document.documentElement.scrollTop;
              if(oTop > 0){
                  scrollTo(0,oTop-260);
                  timer = requestAnimationFrame(fn);
              }else{
                  cancelAnimationFrame(timer);
              }    
          });
      }
      </script> -->
    
    
    <link type="text/css" rel="stylesheet" >
    
    
    
    
    
    <a  class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
        <svg width="80" height="80" viewBox="0 0 250 250" style="fill:#708dd7; color:#fff; z-index: 999999; position: fixed; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
          <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
          <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
        </svg>
    </a>
    
    
    
    
    <!-- 返回頂部 -->
    <style>
        #back-top {
            position: fixed;
            bottom: 10px;
            right: 8px;
            z-index: 99;
        }
        
        #back-top span {
            width: 70px;
            height: 140px;
            display: block;
            /*這是回到頂部的圖片,可以自定化*/
            background: url('https://images.cnblogs.com/cnblogs_com/yuyueq/2130345/o_220323033235_5-150921100039.png') no-repeat center center;
        }
        
        #back-top a {
            outline: none
        }
    </style>
    <script type="text/javascript">
        $(function() {
            // hide #back-top first
            $("#back-top").hide();
            // fade in #back-top
            $(window).scroll(function() {
                if ($(this).scrollTop() > 400) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            $('#back-top a').click(function() {
                $('body,html').animate({
                    scrollTop: 0
                }, 500);
                return false;
            });
        });
    </script>
    <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
    

    第五次

    cnblogs-theme-silence

    上次根據Google官方的開發文檔,通過翻譯和自己理解總結了《GoogleJava開發規范》,還是以前的問題,雖然這次自定義的東西我都比較符合規范,但還是會導致頁面加載卡頓,渲染效果不是很好,所以想著再能不能調整一下主題樣式,因為自己當時在用simplememor主題自定義的時候發現
    cnblogs-theme-silence這個主題也是很不錯的,但是當時自己也是比較喜歡simple這款主題,所以就沒怎么在意,還是繼續DIY simple,這次打算嘗試一下這款主題。
    作者GitHub倉庫https://github.com/esofar/cnblogs-theme-silence/
    主題文檔http://esofar.gitee.io/cnblogs-theme-silence/#/
    這款主題是基于博客園“custom”模板,可不是simplememory了
    img_10

    頁面CSS

    全選復制粘貼,這塊沒有什么要更改的
    GitHubhttps://github.com/esofar/cnblogs-theme-silence/blob/master/dist/silence.min.css
    CSS-CDNhttps://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.css

    側邊欄

    至于JS的應用可以直接用我的,或者用作者官方CDN
    JS-CDNhttps://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.js

    然后就是一些我的個人配置,標題這塊是這種配置

    <font size="5">紙上得來終覺淺,絕知此事要躬行.</font><br><font size="3">Talk is cheap. Show me the code.</font>  &nbsp;<font size="2"> 悟已往之不諫,知來者之可追。實迷途其未遠,覺今是而昨非.</font>
    

    img_11
    下面是側邊欄內容,很多配置官方有說明,而且我也有一些注釋,這里不做過多贅述

    <script type="text/javascript">
        window.$silence = {
            avatar: 'https://images.cnblogs.com/cnblogs_com/yuyueq/2130345/o_220323071252_logo1.png',
            catalog: {
                enable: true,
                index: false,
                active: true,
                levels: ['h1', 'h2', 'h3']
            },
            hljsln: true,
            github: 'https://github.com/yuyueq',
            navbars: [ {
                title: '關于我',
                chilren: [{
                    title: '語雀',
                    target: '_blank',
                    url: 'https://www.yuque.com/yuyueq',
                }, {
                    title: 'Gitee',
                    target: '_blank',
                    url: 'https://www.gitee.com/yuyueq',
                }, {
                    title: 'CSDN',
                    target: '_blank',
                    url: 'https://blog.csdn.net/Frank_dwx',
                }, {
                    title: '個人網站',
                    target: '_blank',
                    url: 'https://www.yuyueq.cn',
                }, ]
            }],
            signature: {
                enable: true,
                author: null,
                license: ['署名-非商業性使用-相同方式共享 4.0 國際', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
                remark: '尊重每一個原創,從你我開始!<br>無論人生上到哪一層臺階,階下有人在仰望你,階上亦有人在俯視你。你抬頭自卑,低頭自得,唯有平視,才能看見真實的自己。<br>轉載請注明原文鏈接,如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“??”哦,博主在此感謝你的支持!',
            },
        };
    </script>
    
    <script src="https://files.cnblogs.com/files/yuyueq/silence.min.js"></script>
    
    
    <!-- 為博客底部添加音樂組件 -->
    <div id="player" class="aplayer"></div>
    <link  rel="stylesheet">
    <script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
    
    <script type="text/javascript">
        var ap = new APlayer({
            element: document.getElementById('player'),
            narrow: false,
            autoplay: false, <!-- 是否自動播放 -->
            showlrc: false,
            theme: '#FFFFFF', <!-- 插件背景顏色,建議和你的公告欄背景色一樣,這樣融為一體的感覺 -->
            listFolded: true, <!-- 默認折疊 -->
            fixed: false, <!-- 底部展示 -->
            volume: 0.5, <!-- 默認音量 -->
            mutex: true, <!-- 不允許多個播放器同時播放 -->
            music: [{
                    title: '七里香',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E4%B8%83%E9%87%8C%E9%A6%99.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220119013521_Snipaste_2022-01-19_09-31-35.png'
                }, {
                    title: '夜曲',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%A4%9C%E6%9B%B2.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117061210_%E5%A4%9C%E6%9B%B2.png'
                },
    
                {
                    title: '花海',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E8%8A%B1%E6%B5%B7.css',
                    pic: 'https://pic.downk.cc/item/5f3e3d0714195aa5949ad064.jpg'
                }, {
                    title: '不能說的秘密',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8D%E8%83%BD%E8%AF%B4%E7%9A%84%E7%A7%98%E5%AF%86.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064737t010e12e6a774215909.jpg'
                },
    
    
                {
                    title: '借口',
                    author: '周杰倫',
                    url: 'https://files.cnblogs.com/files/unleashed/%E5%80%9F%E5%8F%A3.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064908e0c14e6d62d096386e1e70a0d5b719f7.png'
                },
    
    
                {
                    title: 'Panroama',
                    author: 'X-Ray dog',
                    url: 'https://files.cnblogs.com/files/unleashed/Panorama.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007160616417ef991ceb1481c31422c0f14287690f8.png'
                },
    
                {
                    title: 'Epic Music',
                    author: 'John Dreamer',
                    url: 'https://files.cnblogs.com/files/unleashed/EpicMusic.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200708082237a3b8f6a8713f1cc5d26861d847989412.jpg'
                },
    
    
                {
                    title: 'This’sWhatYouCameFor',
                    author: 'Chave',
                    url: 'https://files.cnblogs.com/files/unleashed/ChaveSunflyKaraokeThisIsWhatYouCameFor.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007170147331ff2be3d5e7168150c1aff88f4186244.png'
                }, {
                    title: 'Mine',
                    author: 'SLANDER',
                    url: 'https://files.cnblogs.com/files/unleashed/Mine1.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200707143300wallhaven-83ywmo.jpg'
                },
    
                {
                    title: 'Shorts',
                    author: 'Imagine Dragons',
                    url: 'https://files.cnblogs.com/files/unleashed/Shorts.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200716061133e9a018a8ab71975f6b9b30c2fcc62e39.png'
                },
    
    
    
                {
                    title: 'Where is your love',
                    author: 'J.lisk',
                    url: 'https://files.cnblogs.com/files/unleashed/Whereisyourlove.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_20071909221647e991c39efbb1a03ec330f28d072155.png'
                },
    
                {
                    title: '告白の夜',
                    author: 'Ayasa',
                    url: 'https://files.cnblogs.com/files/unleashed/Ayasa%E5%91%8A%E7%99%BD%E3%81%AE%E5%A4%9C.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007080822111587049458312.jpeg'
                },
    
    
                {
                    title: '年少有為',
                    author: '李榮浩',
                    url: 'https://files.cnblogs.com/files/unleashed/%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.css',
                    pic: 'https://pic.downk.cc/item/5f3e3e5914195aa5949cbf4a.jpg'
                }, {
                    title: '因為你,所以我',
                    author: '五月天',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%9B%A0%E4%B8%BA%E4%BD%A0%E6%89%80%E4%BB%A5%E6%88%91.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117063946_Snipaste_2022-01-17_14-23-13.png'
                },
    
    
                {
                    title: '樓頂上的小斑鳩',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060058_%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.png'
                },
    
                {
                    title: '哪里都是你',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117054903_%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.png'
                }, {
                    title: '11',
                    author: '隊長',
                    url: 'https://files.cnblogs.com/files/yuyueq/11.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060454_11.png'
                },
    
                {
                    title: '一萬次悲傷(Live)',
                    author: '逃跑計劃',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%80%E4%B8%87%E6%AC%A1%E6%82%B2%E4%BC%A4111.css',
                    pic: 'https://pic.downk.cc/item/5f2587db14195aa59434c04f.jpg'
                },
    
    
                {
                    title: '起風了',
                    author: '買辣椒也用券',
                    url: 'https://files.cnblogs.com/files/yuyueq/%E8%B5%B7%E9%A3%8E%E4%BA%86.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117064806_Snipaste_2022-01-17_14-47-44.png'
                },
    
                {
                    title: '下女的圣經',
                    author: 'Bo Peep',
                    url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8B%E5%A5%B3%E7%9A%84%E5%9C%A3%E7%BB%8F.css',
                    pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200730030607t01fea4cae2ab85a945.jpg'
                },
            ]
        });
        // ap.init();
    </script>
    
    <br>
    
    

    更新記錄:

    2022.3.24 16:47 新增天氣小組件,我這邊是直接拿的別人的配置,因為我自己沒找到配置的控制臺,就這樣吧,反正可以用。

    頁腳

    <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","http://widget.seniverse.com/widget/chameleon.js"))</script>
    <script>tpwidget("init", {
        "flavor": "bubble",
        "location": "WWE0TGW4PX6N",
        "geolocation": "enabled",
        "position":"top-right",
        "margin": "10px 10px",
        "language": "zh-chs",
        "unit": "c",
        "theme": "chameleon",
        "uid": "U7723B164C",
        "hash": "554f0133ab6532c8a7724fcc5cc06361"
    });
    tpwidget("show");</script>
    
    

    關于音樂播放器

    這塊我是用的 Aplayerhttps://aplayer.js.org/#/zh-Hans/
    可以去參考一下官方文檔進行自定義化和配置。

    關于其他主題

    當時是直接在博客園里面,搜索相關的樣式修改文章的,把文章日期盡量定位到比較舊的日期相對來說有新發現
    這里推薦兩篇很不錯的文章:
    博客園美化教程大集合----極致個性化你的專屬博客(超詳細,看這篇就夠了)
    【全網最全的博客美化系列教程】

    目前自己的博客樣式就是這個,暫時感覺還不錯,可能自己也有審美疲勞吧,不知道會過多久,再次嘗試換一個新的主題,也很有可能兜兜轉轉回歸默認。
    此外也是因為最近剛換博客主題,所以抽了點時間把以前的修改做個總結。

    最后

    順便提一下上一篇對sql函數和優化的記錄,今天看到公眾號有一篇文章
    警告!別再使用 TIMESTAMP 作為日期字段~
    本人現在就有點懵,因為自己也有一點設計習慣了,也不知道這種方式到底怎么樣,感覺網上說的大多都不一,多數情況下還是要根據業務來吧,到底哪種方式更普遍
    更優先,還是都可以,希望有大佬可以不吝賜教,我在此非常感謝!

    posted @ 2022-03-24 11:28  余月七  閱讀(795)  評論(4編輯  收藏  舉報
    国产美女a做受大片观看