重构博客

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;
    }
  • 定制文章标题1、标题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 参考链接

2018.11.05

posted @ 2018-11-05 17:18  ning-wang  阅读(266)  评论(0)  编辑  收藏  举报