部落格園自用主題前端樣式：WQ
阿新 • • 發佈：2019-12-13
故事背景
本來在 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
後續會加上去，應該是以小圖示的形式加到右下角~