美化博客园样式

目录

• 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;
}

好了，暂时可以愉快的写博客了。