博客园自用主题前端样式：WQ

时间:2019-12-14 Dy1an 人气:0

故事背景

本来在 GITHUB 上面新建了一个项目叫：WQ WIKI 的。然后突然发现不想写了，没错，原因只是因为懒。于是想着干脆就将之前的博客园主题样式重写了吧，换个 Style 换一种心情吧。

WQ 熟悉 Linux vim 的都知道，保存退出嘛，还有比做完一件事然后保存退出更爽的事情吗？没有！

当然，它还具备另外的含义，但是更多的可能还是针对自己吧，好了闲话少说，直接进入正题。

项目说明

项目访问地址：

https://github.com/KU4NG/CNBlog-Theme

当然，这里面还有其它两个主题，如果你喜欢其它款也可以。

配置方法

1. 选择基础主题配置 CSS，该基础主题决定了之后的网页源码的结构：

配置基础主题为：CodingLife，感谢研发这款主题的老哥~

你可以直接粘贴文件，这样可以保证是我最新更新的：

https://github.com/KU4NG/CNBlog-Theme/blob/master/WQ/css/style.css

当然，你也可以直接复制使用下文 CSS：

*{margin:0;padding:0;font-size:12px;font-weight:normal;letter-spacing:1px}div{border-radius:0!important}a{color:#161823;text-decoration:none!important}a:link{color:#161823;text-decoration:none!important}a:visited{color:#161823;text-decoration:none!important}a:hover{text-decoration:none!important;color:#036!important}a:active{color:#161823;text-decoration:none!important}#header #blogTitle{height:50px}#header #blogTitle{position:fixed;width:300px;top:0;left:0;background-color:#1c2b36;z-index:10}#header #blogTitle #lnkBlogLogo{display:none}#header #blogTitle h1 a{height:50px;line-height:50px;vertical-align:middle;margin-left:30px;font-size:20px;font-weight:bolder;color:#fff!important}#header #blogTitle h1 a::after{content:"'s CN BLOG";font-size:20px;font-weight:bolder;color:#fff!important}#header #blogTitle h2{display:none}#header #navigator{position:fixed;width:40px;height:40px;margin-top:10px;margin-right:10px;top:10px;right:0;background-color:#1c2b36;color:#fff!important;opacity:.8;z-index:1}#header #navigator::after{content:"≡";font-size:20px;color:#fff;padding:10px 15px;height:40px;line-height:40px;vertical-align:middle}#header #navigator:hover{background-color:#1c2b36;cursor:pointer;opacity:1}#header #navigator ul{display:none;list-style:none!important}#header #navigator ul li a{padding:11.5px 15px;display:block;color:#fff!important}#header #navigator ul li a:hover{background-color:#c33}#header #navigator:hover ul{position:absolute;top:0;right:40px;display:block;width:150px;background-color:#1c2b36}#header .blogStats{display:none;list-style:none!important}#main #sideBar{width:300px;position:fixed;top:50px;bottom:0;background-color:#1c2b36}#main #sideBar .catListTitle{display:none}#main #sideBar #blog-news img{margin-top:50px;height:80px;width:80px;border-radius:100%}#main #sideBar #blog-news{text-align:center}#main #sideBar #profile_block{margin-top:-15px;margin-bottom:15px;visibility:hidden;text-align:center}#main #sideBar #profile_block br{display:none}#main #sideBar #profile_block #p_b_follow{visibility:visible!important}#main #sideBar #profile_block #p_b_follow a{color:#fff!important}#main #sideBar #sidebar_search_box{padding:0 30px}#main #sideBar #sidebar_search_box #q{border:0;padding:3px 15px;width:210px}#main #sideBar #sidebar_search_box #q:focus{outline:0}#main #sideBar #sidebar_search_box #btnZzk{display:none}#main #sideBar #sidebar_categories{position:fixed;width:300px;top:280px;bottom:0;overflow-y:auto;margin:15px 0}#main #sideBar #sidebar_categories li{padding:10px 30px;display:block}#main #sideBar #sidebar_categories li a{color:#fff!important;display:block;letter-spacing:1.5px}#main #sideBar #sidebar_categories li:hover{background-color:#c33;color:#fff!important;display:block}#main #sideBar #sidebar_categories::-webkit-scrollbar{width:2px}#main #sideBar #sidebar_categories::-webkit-scrollbar-thumb{background-color:yellow;background-clip:padding-box;-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em}#main #mainContent{position:absolute;left:300px;padding:20px 20px;width:calc(100% - 340px);min-width:1050px}#main #mainContent .day{padding:15px;border:1px dashed #ebebeb;margin-bottom:20px}#main #mainContent .day .dayTitle{float:right;padding:5px 0;width:120px;text-align:center;margin-top:-16px;margin-right:-16px;background-color:#c33}#main #mainContent .day .dayTitle a{color:#fff!important}#main #mainContent .day .postTitle a{font-size:20px;font-weight:bolder;border-left:4px solid #c33;margin-left:-17px;padding-left:13px}#main #mainContent .day .postTitle{margin-bottom:15px}#main #mainContent .day .postCon .c_b_p_desc{line-height:25px;letter-spacing:2px;opacity:.6}#main #mainContent .day .postCon .c_b_p_desc a{opacity:2;padding:3px 10px;background-color:green;font-size:10px!important;color:#fff!important}#main #mainContent .day .postDesc{margin-top:10px;text-align:right;opacity:.5}#main #mainContent .day .postSeparator{border:1px dashed #ebebeb;border-left:2px solid #fff;border-right:2px solid #fff;height:20px;margin-top:15px;margin-left:-16px;margin-right:-16px;margin-bottom:15px;z-index:1}#main #mainContent .pager{margin:0 0 20px 0;line-height:200%}#main #mainContent #homepage_top_pager .pager{text-align:left}#main #mainContent .pager a{border:1px solid #ebebeb;color:#1c2b36;margin:0;padding:2px 5px;text-decoration:none}#main #mainContent #homepage_bottom_pager .pager{margin:20px 0 0 0;text-align:right}#main #mainContent #post_detail{width:900px;padding:50px;border:1px solid #ebebeb;margin-left:50%;position:relative;left:-500px}#main #mainContent #post_detail .postTitle{margin-bottom:80px}#main #mainContent #post_detail .postTitle a{font-size:20px;font-weight:bolder}#main #mainContent #post_detail #cnblogs_post_body p{letter-spacing:2px;line-height:25px}#main #mainContent #post_detail #cnblogs_post_body p>img{border:1px dashed #ebebeb;width:900px}#main #mainContent #post_detail #green_channel{border:0}#main #mainContent #post_detail #blog_post_info_block *{font-size:12px!important}
#main #mainContent #post_detail .author_avatar{border-radius:100%;border:0;margin-right:15px}#main #mainContent #post_detail .postDesc{font-size:12px!important;text-align:right;margin-top:50px}#main #mainContent #post_detail .postDesc a{font-size:12px!important}#main #mainContent #blog-comments-placeholder{width:900px;padding:50px;border:1px solid #ebebeb;border-top:0;border-bottom:0;margin-left:50%;position:relative;left:-500px}#main #mainContent #comment_nav{display:none}#footer{display:none}#main #mainContent #blog-comments-placeholder div{font-size:12px!important;line-height:20px}#main #mainContent #blog-comments-placeholder a{font-size:12px!important;line-height:20px}#main #mainContent #blog-comments-placeholder .layer{background-color:#1c2b36;padding:2px 10px;color:#fff!important}#main #mainContent #blog-comments-placeholder span{font-size:12px!important;line-height:20px}#main #mainContent #blog-comments-placeholder .feedback_area_title{font-size:17px!important;font-weight:bolder;margin-bottom:30px}#main #mainContent #blog-comments-placeholder .feedbackItem{margin-bottom:10px;border-bottom:1px dashed #ebebeb}#main #mainContent #blog-comments-placeholder .feedbackListSubtitle{margin-bottom:10px}#main #mainContent #blog-comments-placeholder .blog_comment_body{margin-bottom:10px}#main #mainContent #blog-comments-placeholder .comment_vote{margin-bottom:10px}#main #mainContent #blog-comments-placeholder .feedbackManage{float:right}#main #mainContent #blog-comments-placeholder .louzhu{margin-left:-4px;margin-right:-3px;background-color:#009688;border-right:3px solid #1c2b36;border-left:3px solid #1c2b36;padding:2px 10px;color:#fff!important;z-index:1}#main #mainContent #comment_form_container{width:900px;padding:50px;padding-top:0;border:1px solid #ebebeb;border-top:0;margin-left:50%;position:relative;left:-500px}#main #mainContent #comment_form_container #commentform_title{background-image:none;padding:0;font-size:17px!important;font-weight:bolder;margin-bottom:30px}#main #mainContent #comment_form_container p{margin-bottom:10px;height:30px;line-height:30px;vertical-align:middle;font-weight:bolder}#main #mainContent #comment_form_container p input{width:calc(100% - 80px)}#main #mainContent #comment_form_container .commentbox_main .commentbox_title{width:100%;margin:10px 0}#main #mainContent #comment_form_container .commentbox_main .commentbox_title .commentbox_title_left{font-weight:bolder}#main #mainContent #comment_form_container .commentbox_main .comment_icon{padding:3px;border:1px solid #ebebeb;cursor:pointer}#main #mainContent #comment_form_container .commentbox_main .comment_icon{width:15px;height:15px;padding:3px;border:1px solid #ebebeb;cursor:pointer}#main #mainContent #comment_form_container .commentbox_main textarea{width:calc(100% - 40px);padding:20px;border:1px dashed #ebebeb}#main #mainContent #comment_form_container .commentbox_main textarea:focus{outline:0}#main #mainContent #comment_form_container #commentbox_opt{height:26px;line-height:26px;vertical-align:middle}#main #mainContent #comment_form_container #commentbox_opt input{background-color:#009688;border:0;color:#fff!important;cursor:pointer}#main #mainContent #comment_form_container #commentbox_opt a{padding:6px 23px;background-color:#ff5722;border:0;color:#fff!important;cursor:pointer}#ad_t2{width:900px;padding:50px;border:1px solid #ebebeb;border-top:0;margin-left:50%;position:relative;left:-500px}#ad_t2 a{height:25px;line-height:25px}#main #mainContent .entrylistTitle{font-size:20px;font-weight:bolder;margin-bottom:50px}#main #mainContent .entrylistItem{padding:15px;border:1px dashed #ebebeb;margin-bottom:20px}#main #mainContent .entrylistItem .entrylistPosttitle a{font-size:20px;font-weight:bolder;border-left:4px solid #c33;margin-left:-17px;padding-left:13px}#main #mainContent .entrylistItem .entrylistPosttitle{margin-bottom:15px}#main #mainContent .entrylistItem .entrylistPostSummary .c_b_p_desc{line-height:25px;letter-spacing:2px;opacity:.6}#main #mainContent .entrylistItem .entrylistPostSummary .c_b_p_desc a{opacity:2;padding:3px 10px;background-color:green;font-size:10px!important;color:#fff!important}#main #mainContent .entrylistItem .entrylistItemPostDesc{margin-top:10px;text-align:right;opacity:.5}.my-title{font-size:18px!important;font-weight:bolder;border-left:4px solid #c33;padding:5px 15px;vertical-align:middle;background-color:#f5f5f580;opacity:.8}blockquote{padding:1px 15px;border:0;background-color:#f5f5f580;border-left:5px solid #009688}.itcode{padding:10px 20px;border:1px dashed #ebebeb;background-color:#f5f5f580}.itcode div{background-color:#f5f5f580}#main #mainContent #post_detail #cnblogs_post_body table{width:100%}#cnblogs_post_body th,#cnblogs_post_body thead{border:1px solid #1c2b36}#cnblogs_post_body td{border:1px solid #c0c0c0}#main #mainContent #post_detail #cnblogs_post_body table th{background-color:#1c2b36;border:#1c2b36;color:#fff}@media screen and (max-width:767px){#sideBar{margin-left:0;margin-right:0}
}@media(max-width:1350px){#blogTitle{display:none}#sideBar{display:none}#main #mainContent{left:0}}#my-github{padding:5px 30px;background-color:#009688}#my-github a{color:#fff;font-size:10px!important}#my-github a:hover{color:#fff!important;font-size:10px!important}

2. 添加用户头像：

这是我直接的头像，你可以换成你自己的，代码最新为：

https://github.com/KU4NG/CNBlog-Theme/blob/master/WQ/html/avatar.html

当然，你也可以使用下面的 HTML 代码：

<div style="margin-top:10px;">
<img src="https://img2018.cnblogs.com/blog/979767/201912/979767-20191211152102996-929870360.png" alt="">
</div>

当然，这个头像地址你可以复制自己主页头像链接：

3. 网页新增其它标签，新增了一些功能按钮，用于丰富页面：

代码地址：

https://github.com/KU4NG/CNBlog-Theme/blob/master/WQ/js/wq.js

也可以复制如下代码：

<script>
    // 侧边栏GITHUB链接
    var githubButtonEle = '<div id="my-github"><a target="_blank" class="menu" href="https://github.com/KU4NG">点击前往作者 GITHUB</a></div>';
    document.getElementById('blogTitle').insertAdjacentHTML("beforeEnd", githubButtonEle);

    // 菜单新加标签
    var indexEle = '<li><a target="_blank" class="menu" href="https://www.cnblogs.com/Dy1an">回到首页</a></li>';
    var githubEle = '<li><a target="_blank" class="menu" href="https://github.com/KU4NG">GITHUB</a></li>';
    document.getElementById('navList').insertAdjacentHTML("afterBegin", indexEle);
    document.getElementById('navList').insertAdjacentHTML("beforeEnd", githubEle);
</script>

具体影响地方 1：

具体影响地方 2：

当然，欢迎各位老哥将第二个 GITHUB 的地址就写我的地址~ 哈哈哈哈哈

4. 运行显示的菜单：

精力有限，懒得适配了，只加了常用的功能：

到这里，配置就完成了，保存返回你的主页就可以看到效果！

主题说明

1. 主页：

2. 详情页 1：

详情页 2：

详情页 3：

4. 功能菜单：

5. 未登录：

当然，欢迎大家多多关注，嘿嘿嘿~

6. 评论显示：

最后，移动设备目前还没有适配，慢慢来吧~ 欢迎大家多多关注，推荐~

另外，相比前面的版本，这个版本我把联系方式隐藏了，有问题的可以临时加去 QQ：1214966109

后续会加上去，应该是以小图标的形式加到右下角~

加载全部内容