Cnblog页面美化小记

这两天我在网上翻找了许许多多的资料，打开了不计其数的博客，对着\(js\)、\(html\)、\(css\)等文件删删改改，在浏览器和\(vscode\)间辗转腾挪...总算是在今天中午把博客园的美化给完成了大部分。这个过程虽然很累，但是很颓也借此机会学到了一些其他语言的正确食用方式。当然，最最重要的是，我这个辣鸡博客终于也迎来了改头换面的一天啊QWQ

0.1 契机

这一切事情发生的原因竟然是因为我zz地用侧边栏的\(html\)把原来的\(css\)给覆盖并保存了，而且接着我又发现那\(css\)在电脑上没备份... 于是博客风格瞬间回到解放前...

0.2 那就重新写个吧

了解了真相的我痛定思痛，决定重新写一份博客的\(css\)，顺便把侧边栏和一些比较喜欢的\(js\)给更一更。

1.1 博客\(css\)

想了想感觉内容好多啊，就先把一些比较重要的给写了吧

首先打开博客园后台管理，进入设置，把“博客皮肤”一项改为SimpleMemory
此后的一系列操作都基于此模板

1.1.1 主页与文章列表

遵循从粗到细的原则，先把这些给改了

body {
    background-image: url(https://cdn.luogu.org/upload/pic/16397.png);
    opacity: 0.99;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}/*背景*/
#home {
    width: 78%;/*宽度*/
    background-color: rgba(255, 255, 255, 0.75);/*透明度*/
}/*主页*/
/*************滚动条*************/
::-webkit-scrollbar {/*滚动条整体样式*/
    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
/*************finall*************/
#blogTitle h1 a {
    margin-left: 0.3em;
    color: #1859cccc;
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 2em;
}/*nianheng*/

突然发现"nianheng"下面的菜单和那两条杠距离不等，改！

#navList a {
    font-size: 14px;
    padding-top: 16px;
}
.blogStats {
    margin-top: 16px;
    margin-right: 30px;
}
/*菜单*/
#navigator {
    border-bottom: 1px solid #347ca7bf;
    border-top: 1px solid #347ca7bf;
}/*两条杠*/

文章标题和内容简介的字感觉有点太小了，改一下
"阅读更多"感觉并没有什么用，我删掉了

.postTitle {
    padding-left: .7px !important;
    border-left: 3px solid #3e73cf;
    font-size: 24px;
}
.day .postTitle a {
    padding-left: 14px;
}
.postTitle a:hover {
    color: #1d546d;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    transition: all 0.4s cubic-bezier(0, 0, 0.2, 1.01) 0s;
}
/*文章标题*/
.c_b_p_desc {
    font-size: 14.5px;
    line-height: 1.7;
    font-family: "Comic Sans MS", cursive, sans-serif;
}/*文章简介*/
.c_b_p_desc_readmore {
    display: none !important;
}
.postDesc {
    margin-top: 13px;
    padding-left: 30px;
}/*文章时间*/

1.1.2 侧边栏

遵循整体风格，把透明度先改了

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
    background: #fff0;
}
/*一些透明*/
.input_my_zzk {
    background-color: #f0f1f380;
}/*搜索框*/

日历也可以改一下

.CalTitle {
    background: #d2b86d;
}
#blog-calendar th {
    font-size: 12px;
}
#blog-calendar {
    border: 1px solid #71541373;
}
.CalDayHeader {
    background: #f5f3f326;
}
.CalTitle td {
    background: #f8f8f803 !important;
}
/*日历*/

侧边栏字体修改

#sideBarMain li {
    line-height: 1.8;
    font-size: 13px;
}/*侧边栏灰字*/
#sideBar h3 {
    color: #052e77;
    font-size: 20px;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.cebian_h1 {
    color: #052e77;
    font-size: 25px;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.cebian_h2 {
    font-size: 20px;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.cebian_h3 {
    font-size: 17px;
    font-family: "Comic Sans MS", cursive, sans-serif;
}

随机跳题的控件

.jump_OJ {
    width: 141px;
    background-color: #ffffffba;
}
.jump_ID {
    width: 136px;
    background-color: #ffffffba;
}
.jump_goto {
    background-color: #ffffffba;
    font-family: "Comic Sans MS", cursive, sans-serif;
    width: 70px;
}/*跳题*/

加了个一言

#hitokoto-content {
    font-size: 16px !important;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
#hitokoto-from {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 13px !important;
}

1.1.3 文章内容

感觉那个超链接的标题没什么用，去了

#topics .postTitle {
    display: none;
}/*标题消失*/

一级二级标题，正文字体

/***********文章字体***********/
#cnblogs_post_body h1 {
    background: rgba(185, 104, 3, 0.85);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    line-height: 25px;
    margin: 18px 0 !important;
    padding: 8px 0 5px 5px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {
    background: hsla(207, 41%, 44%, 0.96);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 18px;
    font-weight: bold;
    height: 33px;
    line-height: 23px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body p {
    margin: 5px auto;
    text-indent: 0;
    font-size: 16px;
}
/*********finall*********/

代码字体（参考yyb大佬blog代码字体，orz）

/***********代码字体***********/
.cnblogs-markdown .hljs-string, .cnblogs-markdown .hljs-meta-string {
    color: #D69D85 !important;
}
.cnblogs-markdown .hljs-meta, .cnblogs-markdown .hljs-meta-keyword, .cnblogs-markdown .hljs-tag {
    color: #9B9B9B !important;
}
.cnblogs-markdown .hljs-keyword, .cnblogs-markdown .hljs-literal, .cnblogs-markdown .hljs-symbol, .cnblogs-markdown .hljs-name {
    color: #569CD6 !important;
}
.cnblogs-markdown .hljs-built_in, .cnblogs-markdown .hljs-type {
    color: #4EC9B0 !important;
}
.cnblogs-markdown .hljs-number, .cnblogs-markdown .hljs-class {
    color: #B8D7A3 !important;
}
.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-addition {
    color: #DCDCDC !important;
}
/*********finall*********/

1.1.4 回复区

去掉地下的广告！！orz sxz

.c_ad_block ,#under_post_news ,.c_ad_block ,#under_post_kb ,#ad_t2 {
    display: none !important;
}/*去广告*/

把回复区搞一下

.comment_textarea {
    background-color: #ffffff40;
    font-size: 15px !important;
    font-family: "Comic Sans MS", cursive, sans-serif !important;
}/*回复文本框透明*/
.feedbackCon img:hover {
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.feedbackCon img {
    border-radius: 40px;
    -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}/*回复区头像*/
.blog_comment_body {
    font-size: 17px;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.feedbackCon {
    border-bottom: 1px solid #347ca7bf;
    background-color: #ffffff59;
}

推荐按钮悬空

#div_digg {
    padding: 10px;
    position: fixed;
    _position: absolute;
    z-index: 1000;
    bottom: 20px;
    right: 0;
    _right: 17px;
    border: 1px solid #D9DBE1;
    background-color: #FFFFFF;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}
.icon_favorite {
    background: transparent url('https://files.cnblogs.com/files/nianheng/kj.gif') no-repeat 0 0;
    padding-left: 16px;
}
#blog_post_info_block a {
    text-decoration: none;
    color: #5B9DCA;
    padding: 3px;
}

1.1.5 页面右侧目录

css代码

#sideToolbar {
    bottom: 30px !important;
}
#sideCatalog {
    background-color: #ffffffc9 !important;
    visibility: hidden;
}
#sideCatalog a {
    font-size: 17px;
}
#sideCatalog-catalog ul .active {
    background-color: #f5f5f561;
}
#sideCatalog-catalog::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
#sideCatalog-catalog::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
#sideCatalog-catalog::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

1.2 侧边栏\(html\)与\(js\)

历经千辛万苦，总算把css给搞完了，但是总觉得侧边栏有点空空的...搞一下?!

1.2.1 自我介绍

嗯。。。这个按照自己想的写一下就好了

<p class="cebian_h1">nianheng's cnblog</p>
<p class="cebian_h2">本质：某蒟蒻OIER</p>
<p class="cebian_h2">坐标：SD-RZ-JXWX</p>
<p class="cebian_h2">QQ：1098900342 </p>
<p class="cebian_h2"><del>密码：********* </del></p>
<p class="cebian_h2">欢迎大佬们来加QWQ</p>

1.2.2 一言（ヒトコト）

这个弄了好长时间的说...官网链接

在\(fetch\)的地址后面加"\(c=abc...\)"可以选择名句来源

<p class="cebian_h1">一言（ヒトコト）</p>
<div style="font-size: 1em; line-height: 1.5em;" id="hitokoto-content"> </div>
<div style="text-align: right; margin-top: 15px; font-size: 0.9em;" id="hitokoto-from"> </div>

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<script>
  fetch('https://v1.hitokoto.cn/?c=a')
    .then(function (res){
      return res.json();
    })
    .then(function (data) {
      var h_content = document.getElementById('hitokoto-content');
      var h_from = document.getElementById('hitokoto-from');
      h_content.innerText = data.hitokoto; 
      h_from.innerText = "——" + data.from; 
    })
    .catch(function (err) {
      console.error(err);
    })
</script>

1.2.3 友链

友情链接，欢迎大家和我互换友链哦QWQ

<p class="cebian_h1">My friends</p>
<a href="https://www.cnblogs.com/shanxieng" target="_blank" style="color:#ff0000;text-decoration: none;" class="cebian_h3">
    <span style="color: #000000"><b>s</b></span><b>hanxizeng</b>
</a>

1.2.4 随机跳题

和sxz一起设计的随机跳题，还挺好用的

<div class="oj timu tiaoshuan">
    <b id="tmtz" class="cebian_h1">题目跳转</b>
    <div>
        <select name="OJ" id="OJ"  class="jump_OJ">
            <option value="Luogu" selected>Luogu</option>
            <option value="BZOJ">BZOJ</option>
            <option value="Codeforces">Codeforces</option>
            <option value="POJ">POJ</option>
            <option value="HDU">HDU</option>
        </select>
    </div>
    <div>
        <input type="text"  placeholder="题目ID" name="ID" id="ID" class="jump_ID" onkeypress="if(event.keyCode==13) check()"></input>
    </div>
    <p>
        <button name="goto" id="tiaozhuan" class="jump_goto">跳转</button><button name="randgo" id="randgo" class="jump_goto">Rand一道</button>
    </p>
    <p id="sxzdsb"></p>
    </br>
    <hr>
    </br>
</div>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/nianheng/h.js"></script>

1.2.5 宠物

~~天天被sxz虐的~~宠物小仓鼠

<div class="small_cangshu">
    <object type="application/x-shockwave-flash" style="outline:none;" data="https://blog-static.cnblogs.com/files/nianheng/hamster.swf" width="200" height="160">
        <param name="movie" value="https://blog-static.cnblogs.com/files/nianheng/hamster.swf">
        <param name="AllowScriptAccess" value="always">
        <param name="wmode" value="opaque">
    </object>
</div>

1.2.6 鼠标点击加特效

强烈安利自己魔改的鼠标点击特效\(js\)

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/nianheng/mouse21.js"></script>
<!--鼠标点击特效-->

1.2.7 其他\(js\)

一些配合\(css\)用的插件

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/nianheng/comments.js"></script>
<!--回复区头像-->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
<script type="text/javascript" src="https://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>
<!--文章右侧目录-->

上述所有带链接的\(js\)我都建议把文件上传到博客园上，然后用自己的链接，不然万一哪天我又zz把他们全删了那大家一起GG

2.1 资料索引

一些在途中遇到的不错的参考资料

菜鸟教程

Angel_Kitty 博客园自定义页面风格设计后续篇

一言（ヒトコト）Hitokoto API

鼠标点击网页出现爱心特效

博客园为文章添加目录

3.1 完结撒花

完结撒花，感谢陪伴 ~

喜欢的不要忘记素质三连(点赞，评论，关注)哦 QWQ

posted @ 2019-03-01 15:25 nianheng 阅读(1715) 评论(6) 编辑收藏举报

刷新页面返回顶部

nianheng

Cnblog页面美化小记

Cnblog页面美化小记

0.1 契机

0.2 那就重新写个吧

1.1 博客\(css\)

1.1.1 主页与文章列表

1.1.2 侧边栏

1.1.3 文章内容

1.1.4 回复区

1.1.5 页面右侧目录

1.2 侧边栏\(html\)与\(js\)

1.2.1 自我介绍

1.2.2 一言（ヒトコト）

1.2.3 友链

1.2.4 随机跳题

1.2.5 宠物

1.2.6 鼠标点击加特效

1.2.7 其他\(js\)

2.1 资料索引

3.1 完结撒花

公告