美化博客園樣式

目錄

• 1. 背景&目的
• 2. 老舊的博客園樣式
  • 2.1 代碼塊
  • 2.2 關鍵字
  • 2.3 引用
  • 2.4 選擇樣式
• 3. 改造之后
  • 3.1 代碼塊樣式
  • 3.2 關鍵字樣式
  • 3.3 引用
  • 3.4 選擇樣式

1. 背景&目的

博客園本來是有很多優秀的博皮的，但是不知道為什么很多年不更新了。所以博客園的網站給人一種十幾年前的感覺（這也是它吸引我的原因之一）。

也有一些基於博皮的修改，其中不乏一些優秀的作品，比如：BNDong 基於 SimpleMemory 的 Cnblogs-Theme-SimpleMemory 和 GShang 做的 GShang ，但是由於自己的 js 水平真的有限，所以想改個什么東西都要去看這么一大堆 js 文件還是壓縮的，就有點頭疼。

基於上面的這些原因，所以自己就只針對 SimpleMemory 博皮進行了微調。不需要很多前端知識就可以讓你的博客煥然一新。

2. 老舊的博客園樣式

2.1 代碼塊

2.2 關鍵字

2.3 引用

2.4 選擇樣式

3. 改造之后

3.1 代碼塊樣式

舊：

新：

博客園也有使用 highlightjs 的代碼，但是其用的默認樣式有點太丑，而且字體也不好看。

於是，就從 hightlighjs 官網找到了一個比較好看的代碼樣式 agate 。平時寫代碼我也是用白色樣式，但是在展示的時候，使用黑色的代碼塊能和正文有效的進行區分。

步驟：

1. 從 hljs download 頁面下載需要的 css 文件
2. 替換掉默認的 css 選擇器 .hljs 替換為 .cnblogs-markdown .hljs
3. 將 .cnblogs-markdown .hljs 選擇器的 background 優先級置為 !important
4. 默認字體比較難看，所以需要修改成 font-family: "Ubuntu Mono", monospace !important;

如果想要行號，還需要 js 代碼，所以后面如果真的有需要再說。

3.2 關鍵字樣式

舊：

新：

.cnblogs-markdown code,.cnblogs-post-body code {
    background-color: unset!important;
    border: 0!important;
}

.postBody .cnblogs-markdown code:not(.hljs),.postBody .cnblogs-post-body code:not(.language-env) {
    padding: 2px 4px!important;
    color: #d83b64;
    background-color: #f9f2f4 !important;
    border-radius: 3px !important;
    border: 0 !important;
    text-indent: 0 !important;
    position: relative;
    bottom: 1px;
    font-size: 13px!important;
    font-weight: 600;
    font-family: "Ubuntu Mono",monospace!important;
}

3.3 引用

舊：

新：

#cnblogs_post_body h6, blockquote {
    line-height: 20px;
    margin: 0 0 24px;
    padding: 1.45em;
    color: #313131;
    background-color: #f7f7f7;
    font-size: 14px;
    border-left: 4px solid #ddd;
    font-weight: 400;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    min-height: 0;
    background: #f7f7f7 !important;
}
blockquote p {
    margin: 0!important;
    padding: 0;
    text-indent: 0!important
}

3.4 選擇樣式

舊：

新：

::selection {
    color: #fff;
    background: #d36263;
}

好了，暫時可以愉快的寫博客了。