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 {
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;
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-500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
0x03 参考链接
2018.11.05