定製和我一樣的部落格園主題
有園友問我的部落格園的主題怎麼弄的,我答應了要發一篇博文分享一下我的部落格主題配置。其實是很簡單的,相信懂 CSS 的人都能自己搞,但如果你懶得花時間,正好可以直接複製我寫好的配置程式碼。
PS: 按照部落格園首頁文章篩選的規則,這篇文章不應該放在首頁,畢竟沒有什麼技術含量,幾乎只是分享我寫好的 CSS 程式碼。但還是希望部落格園管理員例外一次,讓有需要的人看到。
先擇模板
先進入部落格園的設定頁面: ofollow,noindex" target="_blank">https://i.cnblogs.com/Configure.aspx ,部落格面板選擇 SimpleMemory 。這個主題比較簡約,我們在這個面板上做一些個性化調整。
頁面定製 CSS 程式碼
主題採用主流的上左右的佈局,最大內容寬度可以限制為 1140px。除了閱讀區域,其它區域都去掉面板自帶的白色背景,這有助於讓讀者在閱讀內容的時候集中注意力。
在設定頁面中的“頁面定製 CSS 程式碼”貼入我寫好的 CSS 程式碼:
/* ********************** * 整體佈局 * **********************/ /* 整體佈局 */ body { background: #e6ecf0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif; } #home { max-width: 1140px; padding: 15px; background: transparent; box-shadow: none; margin-top: 0; width: auto; } #main { margin-top: 15px; } #mainContent .forFlow { padding-right: 20px; } /* 非閱讀區域去掉白色背景 */ .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { background-color: transparent; } /* ********************** * 部落格頁首 * **********************/ /* 隱藏系統標題 */ #blogTitle { display: none; } /* 頂部通告條 */ .c-notice { padding: 10px 0; background: tan; font-size: 0.9em; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23); font-size: 15px; } .c-notice > div { max-width: 1140px; margin: 0 auto; padding: 0 15px; } .c-notice a { color: blue; } /* 頭像和社交 */ .c-portrait { text-align: center; padding: 50px 0; background: #39424b; color: #fff; margin-bottom: -40px; } /* 頭像 */ .c-portrait > img { display: inline-block; height: 80px; border-radius: 50%; } /* 標題和簽名 */ .c-portrait h1 { font-size: 25px; font-weight: bold; margin: 5px 0; } .c-portrait h1 a { color: #fff; } .c-portrait h2 { font-size: 16px; margin: 7px 0 10px; color: #ccc; } /* 社交圖示 */ .c-social a { color: #959da5; display: inline-block; vertical-align: middle; } /* ********************** * 導航欄 * **********************/ #navigator { padding: 0 10px; border-bottom: 2px solid #ccc; } #stats_article_count { display: none; } /* ********************** * 側邊欄 * **********************/ #sideBar { width: 250px; margin-top: 0; } #sideBar a { color: inherit; } /* 隱藏側邊公告標題 */ .newsItem .catListTitle { display: none; } /* 增加列表項間距 */ .sidebar-block li { margin-bottom: 5px; } /* ********************** * 文章列表 * **********************/ /* 文章列表 */ #topics .postTitle { font-size: 28px; margin: 35px 0 30px; padding-left: 0; } #mainContent .day { padding: 15px 20px; background: #fff; } #mainContent .day .postTitle a { display: inline-block; } /* ********************** * 文章詳情 * **********************/ pre { margin-bottom: 1.35em; } pre code { padding: 10px 16px !important; } .post { background: #fff; padding: 0 60px 60px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } /* 文章標題 */ .postTitle { border-left: 8px solid #21759b; margin-bottom: 5px; font-weight: bold; line-height: 1; box-sizing: border-box; } .postTitle a:hover { margin-left: 0; } /* 去除首行縮排 */ .postBody p, .postCon p { text-indent: 0; } /* 重寫引用塊樣式 */ .postBody blockquote { min-height: auto; border-top: none; border-bottom: none; border-right: none; padding: 0 0 0 1em; } /* 增加底部留白 */ #cnblogs_post_body { padding-bottom: 5px; } /* 防止圖片溢位 */ #cnblogs_post_body img { max-width: 100%; } /* 文章底部資訊 */ .postDesc { margin-top: 0; } /* ********************** * 評論 * **********************/ #comment_form_container .comment_textarea { width: 100%; } .comment_vote { padding-right: 2px; font-size: 14px; margin-top: 10px; } .comment_vote a.comment_digg { color: #f80; } .feedbackItem { margin: 20px 0 25px; background: #fff; padding: 10px 15px; } .feedbackCon { font-size: 13px; border-bottom: 0; padding: 10px 5px 0 5px; text-align: justify; } /* ********************** * 文章評價 * **********************/ #div_digg { position: fixed; right: 30px; bottom: 50px; background: #fff; padding: 20px 20px 15px; border-radius: 5px; border: 1px solid #888; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3); } /* ********************** * 隱藏廣告 * **********************/ #ad_t2, #opt_under_post, .c_ad_block, #under_post_news, #under_post_kb { display: none !important; } /* ********************** * 適配手機 * **********************/ @media (max-width: 767px) { #home { padding-left: 0; padding-right: 0; } #div_digg { width: auto; padding: 0; right: -25px; bottom: 3px; box-shadow: none; } #div_digg .buryit { display: none; } #mainContent .forFlow { padding-right: 0; } #mainContent .post { padding: 0 20px; } #sideBar, #blog-comments-placeholder { padding: 0 15px; } }
頁首 Html 程式碼
頁首主要放頭像、部落格名稱和一句話介紹(或簽名)等,還可以在頂部放一個通告條或廣告條。在設定頁面的“頁首 Html 程式碼”處貼入以下程式碼:
<div class="c-notice"> <div> 這裡是你的通告內容 </div> </div> <div class="c-portrait"> <img src="這裡是你的頭像URL" alt="" /> <h1><a href="你的部落格園地址">你的部落格名稱</a></h1> <h2>你的一句話介紹</h2> <div class="c-social"> <!-- 這裡放你所擁有的社交圖示 --> </div> </div>
上面的程式碼請根據個人情況進行替換其中內容。由於系統標題不好控制佈局,所以上面寫了標題的 HTML 程式碼,原來的系統標題在 CSS 中隱藏了。另外,選一張你帥氣的照片,上傳到部落格園相簿,然後複製相片的 URL 路徑,替換上面程式碼。如果你懶得上傳,你也可用使用其它網站(比如 GitHub)的頭像的 URL 進行替換。
部落格側邊欄公告
在設定頁面的“部落格側邊欄公告”自定義側邊欄的 Html 內容,這個是可選的,建議放個人的資訊。比如像我這樣:
<!-- (省略其它部分,如個人公眾號二維碼) --> <p style="margin-bottom:15px;line-height:2"> 微信號:<b style="color:#1aad19;font-size:16px;">willick</b>(請備註部落格園) <br /> 頭條號:<b style="color:#f85959;font-size:13px;">碼農老王</b>(不僅僅是程式設計) <br /> 所在地:上海 閔行區 </p>
這就基本上完成了。你還可以在部落格簽名設定頁面( https://i.cnblogs.com/ManageSignature.aspx)為你的文章新增轉載授權說明。
如果遇到問題請留言。