This article documents the attempt to optimize the blog garden home page and the associated CSS source code. ...
博客園代碼定製
版本：2019-08-08
本文基於Simple Memory模板，且已獲取CSS和JS許可權，此版本並非最終版本。
如有錯誤請指出，代碼開源可以修改完善，僅用於學習交流，轉載時請註明出處！
本文記錄了對博客園主頁優化的嘗試過程以及相關的CSS源碼。
在此之前預設已在“管理-選項”部分設定好了每頁顯示的內容，在“管理-設置”部分進行下列設置。
Part 1 定製CSS代碼（body部分）
首先應該解決網頁端縮放和手機端圖片顯示不全的問題，這裡採用手機端“強制使用網頁端”的模式來修改body部分的設置。
通過Dream Weaver查看全大小下的(min-width, max-width)設置自適應格式，並設置寬度為100%。
1 body{ 2 width: 100%; 3 min-width: 740px; 4 max-width: 865px; 5 }
其餘部分的優化可以藉助瀏覽器開發者模式下修改元素逐步完善（藉助“選擇元素”和“元素突出顯示”可以節省閱覽代碼的時間），再將“修改”部分的屬性複製到博客園相應位置。
設置博客主標題的字體格式（滑鼠經過）。
1 /* bundle-simplememory.min.css (1, 561) */ 2 a:link { 3 color: rgb(102, 8, 116); 4 text-decoration: none; 5 }
設置博客主標題的字體格式。
1 /* bundle-simplememory.min.css (1, 1047) */ 2 #blogTitle h1 a { 3 color: rgb(102, 8, 116); 4 }
設置文章標題的字體格式，各頁面將繼承這個格式（滑鼠經過）。
1 /* bundle-simplememory.min.css (1, 2597) */ 2 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 3 color: rgb(102, 8, 116); 4 transition: all .4s linear 0s; 5 }
設置文章標題的字體格式，各頁面將繼承這個格式。
1 /* bundle-simplememory.min.css (1, 2659) */ 2 .postTitle a:hover { 3 margin-left: 30px; 4 color: rgb(102, 8, 116); 5 text-decoration: none; 6 }
設置post部分的字體樣式，並取消原模板自帶的“時鐘”圖案。
1 /* bundle-simplememory.min.css (1, 2833) */ 2 .postDesc { 3 font-size: 13px; 4 background: none; 5 color: rgb(0,127,0); 6 float: left; 7 width: 100%; 8 clear: both; 9 text-align: left; 10 padding-left: 0px; 11 padding-right: 5px; 12 margin-top: 0px; 13 line-height: 1.5; 14 }
設置昵稱、園齡等字體格式。
1 /* bundle-simplememory.min.css (1, 3410) */ 2 #sideBar a { 3 color: rgb(255, 0, 255); 4 }
設置背景顏色（透明度）。
1 /* bundle-simplememory.min.css (1, 253) */ 2 body { 3 color: #000; 4 background-color: rgba(255, 255, 0, 0.1); 5 min-height: 101%; 6 font-family: bold; 7 }
設置公告、標簽等box的透明度。
1 /* bundle-simplememory.min.css (1, 722) */ 2 #home { 3 margin: 0 auto; 4 width: 65%; 5 min-width: 950px; 6 background-color: rgba(255, 225, 255, 0.5); 7 padding: 30px; 8 margin-top: 50px; 9 margin-bottom: 50px; 10 box-shadow: 0px 6px 18px rgba(127,127,127,0.5); 11 }
設置公告、標簽等box的陰影和位置。
1 /* bundle-simplememory.min.css (1, 4334) */ 2 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory { 3 background: #f8f8f8 !important; 4 margin-bottom: 25px; 5 margin-top: 25px; 6 width: 225px; 7 word-wrap: break-word; 8 box-shadow: 0px 2px 6px rgba(127,127,127,0.5); 9 box-sizing: border-box; 10 border: 10pt solid #f8f8f8 !important; 11 border-top-width: 5pt !important; 12 }
去除廣告（推薦文章）。
1 /* blog-common.min.css (1, 18665) */ 2 .c_ad_block { 3 margin-top: 10px; 4 line-height: 1.5; 5 display: none; 6 }
設置文章“推薦”一欄位於頭像和“支持”中間，節省空間。
1 /* blog-common.min.css (1, 18975) */ 2 #green_channel { 3 padding: 10px 0; 4 position: absolute; 5 left: 180px; 6 margin-bottom: 10px; 7 margin-top: 10px; 8 border: #c0c0c0 1px solid; 9 font-size: 12px; 10 width: 350px; 11 text-align: center; 12 }
去除廣告（最新IT新聞）。
1 /* blog-common.min.css (1, 21519) */ 2 #ad_t2 { 3 margin-top: 5px; 4 line-height: 1.8; 5 display: none; 6 }
去除引用部分的自帶圖案，因模板而異。
1 /* bundle-simplememory.min.css (1, 15084) */ 2 .postBody blockquote { 3 background: url('images/comment.gif') no-repeat 25px 0; 4 background-image: none; 5 min-height: 35px; 6 _height: 35px; 7 line-height: 1.6em; 8 color: #333; 9 }
設置導航欄的字體，改變字體，增加陰影。
1 /* bundle-simplememory.min.css (1, 1589) */ 2 #navList a:link, #navList a:visited, #navList a:active { 3 color: rgb(0, 0, 0); 4 text-shadow: 0px 1px 1px rgba(255,255,0,0.5); 5 font-weight: bold; 6 }
頁面仍有不完善之處，如部分圖片在手機端顯示不全，縮放後body部分是左對齊導致左右margin不對稱不美觀，title位置缺少背景圖片，等等。（暫不打算完善）
Part 2 公告欄優化（bar部分）
增加文字和圖片。
1 歡迎來到閬苑祁寒的小屋，在這裡可以盡情享受數學和物理的奇妙！ 2 <div><img src="https://images.cnblogs.com/cnblogs_com/sxwlttsd/1497926/o_33012779.jpg" width="100" height="100"></div>
還可以增加JS部件，以及更多內容。
Copyright ©2019 閬苑祁寒
博客園的源代碼可自行查看，備份暫不公開！
