重構博客

0x01 說明

研究生的生活即將告一段落，一直想着把本身的博客好好的設置一下，以備之後再學習和工做中可以更好的記錄和分享本身的心得和成果。
之前也嘗試過本身搭建一個博客用Github Pages來託管，但是又由於訪問速度和圖雲的問題而被迫放棄了，本身建博客確實更自由並且更加的簡潔。不事後來我發現博客園的CSS定製功能也很不錯，博客園不但可以提供優秀的訪問速度、搜索優化，並且連圖雲的問題都一塊兒解決了，這樣我又何須再去折騰自建博客呢？

我始終認爲博客是用來記錄和分享的，是爲了讓知識共享發揮出最大的價值。若是我自建博客可能都沒有人會訪問，本身辛苦總結的知識也就白費了，閱讀量和評論互動也是支持我寫博客的一大動力。

一直忙忙碌碌，終於近期有些閒暇，我對本身的博客進行了完全的重構。主要包括如下幾個方面：

• 使用新的模板LessIsMore
• 定製標題、文章字體、引用塊、代碼塊、返回頂部按鈕、簽名
• 從新編輯全部文章，統一Markdown格式

0x02 具體實現

• 選擇LessIsMore主題

• 定製博客正文字體和文章標題

body {}
    /* 正文字體大小 */
    #cnblogs_post_body {
        font-size: 16px !important;
    }
    /* 文章標題 */
    .postTitle, .entrylistPosttitle, .feedback_area_title {
        border-bottom: 1px solid #ddd;
        font-size: 25px !important;
        font-weight: bold;
        margin: 20px 0 10px;
    }

• 定製文章標題一、標題2

/* 標題1 */
    #cnblogs_post_body h1 {
        color: #000;
        border-left: 18px solid #B2E866;
        padding: 5px;
        background-color: #f5f5f5;
        font-family:  'Microsoft Yahei', "微軟雅黑" , "宋體" , "黑體" ,Arial;
    }

    /* 標題2 */
    #content h2 {
        font-size: 25px;
    }

• 定製引用塊

/* 引用寬度  */
    blockquote {
        width: 90%;
    }
    
    /* 引用塊着色*/
    blockquote {
        background-color: #eee;
        border: 0;
        border-left: 18px solid #ccc;
        padding: 4px;
        margin: 0;
    }

• 定製超連接顏色

/*超連接顏色*/
    .postCon a, .postBody a, .feedbackCon a {
        border-bottom: 1px #333;
        color: #009A61;
    }

• 定製代碼塊着色，這裏使用的是Monokai Sublime的黑色主題皮膚

/*
    使用了Monokai Sublime的黑色主題皮膚，可是還存在樣式衝突，須要本身修改
    這個樣式只適合使用makedown編寫的博客
    Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
    */

    pre {
        /*控制代碼不換行*/
        white-space: pre;
        word-wrap: normal;
    }

    .cnblogs-markdown .hljs {
        display: block;
        overflow: auto;
        padding: 1.3em 2em !important;
        font-size: 16px !important;
        background: #272822 !important;
        color: #FFF;
        max-height: 700px;
    }

    .hljs,
    .hljs-tag,
    .hljs-subst {
        color: #f8f8f2;
    }

    .hljs-strong,
    .hljs-emphasis {
        color: #a8a8a2;
    }

    .hljs-bullet,
    .hljs-quote,
    .hljs-number,
    .hljs-regexp,
    .hljs-literal,
    .hljs-link {
        color: #ae81ff;
    }

    .hljs-code,
    .hljs-title,
    .hljs-section,
    .hljs-selector-class {
        color: #a6e22e;
    }

    .hljs-strong {
        font-weight: bold;
    }

    .hljs-emphasis {
        font-style: italic;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-name,
    .hljs-attr {
        color: #f92672;
    }

    .hljs-symbol,
    .hljs-attribute {
        color: #66d9ef;
    }

    .hljs-params,
    .hljs-class .hljs-title {
        color: #f8f8f2;
    }

    .hljs-string,
    .hljs-type,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-selector-id,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-addition,
    .hljs-variable,
    .hljs-template-variable {
        color: #e6db74;
    }

    .hljs-comment,
    .hljs-deletion,
    .hljs-meta {
        color: #75715e;
    }
    /* 黑色主題makedown代碼結束 */

• 定製行間代碼塊

/* makedown行間代碼樣式 */
    .cnblogs-markdown code {
        color: #c7254e;
        border: none !important;
        font-size: 1em !important;
        background-color: #f9f2f4 !important;
        font-family: sans-serif !important;
    }

• 定製返回頂部小火箭，須要在首頁HTML中添加代碼。

/* 定製返回頂部按鍵 */
    #toTop {
        background: url(//http://images.cnblogs.com/cnblogs_com/shwee/1218109/o_toTop.bmp) no-repeat 0px top;
        width: 57px;
        height: 57px;
        overflow: hidden;
        position: fixed;
        right: 0px;
        bottom: 40px;
        cursor: pointer;
    }

首頁HTML

<!-- 指定返回頂部位置 -->
<a href="#top">
    <div id="toTop" style="zoom:0;">
    </div>
</a>

• 定製博客簽名

/* 設置簽名格式 定製css樣式 */
    #MySignature {
        display: none;
        background-color: #B2E866;
        border-radius: 10px;
        box-shadow: 1px 1px 1px #6B6B6B;
        padding: 10px;
        line-height: 1.5;
        text-shadow: 1px 1px 1px #FFF;
        font-size: 16px;
        font-family: 'Microsoft Yahei';
    }

• 添加Github角標，在首頁HTML中添加代碼。

<!--GitHub 角標-->
<a href="https://github.com/git-ning" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" 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>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

0x03 參考連接

• github角標
• 博客園代碼黑色主題高亮設置
• 代碼高亮
• 博客園美化教程大集合----極致個性化你的專屬博客（超詳細，看這篇就夠了）

2018.11.05