1. 程式人生 > >部落格園自用主題前端樣式:WQ

部落格園自用主題前端樣式:WQ

故事背景

 

本來在 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

後續會加上去,應該是以小圖示的形式加到右下角~