awescnb 博客工具使用和自定义优化
发现了一款挺好的博客园主题工具：awescnb。
使用手册：awescnb 使用手册
工具里面包含了9款主题，我使用了 geek 这一款。
预览地址：预览地址
在此基础上，我做了一些简单的优化：
文章标题
居中和颜色渐变
#post_detail .postTitle {
text-align: center;
background: linear-gradient(to right, #ff6a6a, #008dff);
-webkit-background-clip: text;
color: transparent;
}
文章内容
a 标签颜色区分
这样子更有辨识度
.cnblogs-markdown a {
color: #ff6a6a;
}
标签
彩色标签
点击查看CSS代码
.catListTag {
margin: 20px 0;
clear: both;
text-align: left;
font-size: 12px;
}
.catListTag ul {
display: inline;
list-style-type: none;
width: 400px;
}
.catListTag ul li a {
list-style: none;
display: inline;
}
.catListTag ul li a{
/* line-height: 24px; */
height: 24px;
display: inline-block;
/* background: #fff; */
padding: 2px 11px;
/* margin: 10px 5px 0 0; */
border-radius: 8px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.catListTag ul li a {
color: #FFF;
text-decoration: none
}
.catListTag ul li a:hover {
border-radius: 0;
text-shadow: #000 1px 1px 1px
}
.catListTag ul li:nth-of-type(8n-7) a {
background: #8A9B0F
}
.catListTag ul li:nth-of-type(8n-6) a {
background: #EB6841
}
.catListTag ul li:nth-of-type(8n-5) a {
background: #3FB8AF
}
.catListTag ul li:nth-of-type(8n-4) a {
background: #FE4365
}
.catListTag ul li:nth-of-type(8n-3) a {
background: #FC9D9A
}
.catListTag ul li:nth-of-type(8n-2) a {
background: #EDC951
}
.catListTag ul li:nth-of-type(8n-1) a {
background: #C8C8A9
}
.catListTag ul li:nth-of-type(8n) a {
background: #83AF9B
}
.dict .pcolor a:first-child {
background: #036564
}
.dict .pcolor a:last-child {
background: #3299BB
}
点击查看HTML代码
<div class="catListTag">
<h3 class="catListTitle">我的标签</h3>
<ul>
<li>
<a href="">博客<span class="tag-count">(11)</span></a>
</li>
<li>
<a href="">MySQL<span class="tag-count">(10)</span></a>
</li>
<li>
<a href="">工具<span class="tag-count">(9)</span></a>
</li>
<li>
<a href="">数据库<span class="tag-count">(6)</span></a>
</li>
<li>
<a href="">测试<span class="tag-count">(4)</span></a>
</li>
<li>
<a href="">JavaScript<span class="tag-count">(4)</span></a>
</li>
<li>
<a href="">Node<span class="tag-count">(3)</span></a>
</li>
<li>
<a href="">算法<span class="tag-count">(2)</span></a>
</li>
<li>
<a href="">网络<span class="tag-count">(2)</span></a>
</li>
<li>
<a href="">正则表达式<span class="tag-count">(2)</span></a>
</li>
<li>
<a href="">Mac<span class="tag-count">(2)</span></a>
</li>
<li>
<a href="">TCP/IP<span class="tag-count">(2)</span></a>
</li>
<li>
<a href="">HTML<span class="tag-count">(1)</span></a>
</li>
<li>
<a href="">CSS<span class="tag-count">(1)</span></a>
</li>
<li>
<a href="">设计模式<span class="tag-count">(1)</span></a>
</li>
<li>
<a href="">更多</a>
</li>
</ul>
</div>
分类
点击查看CSS代码
#sidebar_postcategory ul {
display: flex;
flex-wrap: wrap;
}
#sidebar_postcategory {
margin: 20px 0;
clear: both;
text-align: left;
font-size: 12px;
}
#sidebar_postcategory ul {
/* display: inline; */
list-style-type: none;
/* width: 400px; */
}
#sidebar_postcategory ul li a {
list-style: none;
display: inline;
}
#sidebar_postcategory ul li a{
/* line-height: 24px; */
height: 24px;
display: inline-block;
/* background: #fff; */
padding: 2px 11px;
/* margin: 10px 5px 0 0; */
border-radius: 8px;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
#sidebar_postcategory ul li a {
color: #FFF;
text-decoration: none
}
#sidebar_postcategory ul li a:hover {
border-radius: 0;
text-shadow: #000 1px 1px 1px
}
#sidebar_postcategory ul li:nth-of-type(8n-7) a {
background: #8A9B0F
}
#sidebar_postcategory ul li:nth-of-type(8n-6) a {
background: #EB6841
}
#sidebar_postcategory ul li:nth-of-type(8n-5) a {
background: #3FB8AF
}
#sidebar_postcategory ul li:nth-of-type(8n-4) a {
background: #FE4365
}
#sidebar_postcategory ul li:nth-of-type(8n-3) a {
background: #FC9D9A
}
#sidebar_postcategory ul li:nth-of-type(8n-2) a {
background: #EDC951
}
#sidebar_postcategory ul li:nth-of-type(8n-1) a {
background: #C8C8A9
}
#sidebar_postcategory ul li:nth-of-type(8n) a {
background: #83AF9B
}
#sidebar_postcategory ul li:first-child a {
background: #036564
}
#sidebar_postcategory ul li:last-child a {
background: #3299BB
}
点击查看HTML代码
<div id="sidebar_postcategory" class="catListPostCategory sidebar-block">
<h3 class="catListTitle">
随笔分类
<span style="font-size:11px;font-weight:normal">(73)</span>
</h3>
<ul>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
BAT(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Blog(11)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
CSS(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Git(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Hexo(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
HTML(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
JavaScript(4)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Linux(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
MySQL(10)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Node(4)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
npm(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
Redis(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
SSL(1)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
TCP/IP(2)
</a>
</li>
<li data-category-list-item-visible="true" style="display: block">
<a href="" rel="" target="">
测试(4)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
工具(11)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
考研(2)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
跨域(1)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
日常(1)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
设计模式(1)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
收藏(3)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
数据库(4)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
算法(2)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
网络(3)
</a>
</li>
<li data-category-list-item-visible="false" style="display: none">
<a href="" rel="" target="">
正则表达式(1)
</a>
</li>
<li>
<a href="javascript:void(0)" onclick="sideColumnManager.loadMore(this)">更多</a>
</li>
</ul>
</div>
