我的部落格園美化
阿新 • • 發佈:2020-08-09
部落格園後臺 - 設定
時區&語言與地區&部落格面板
頁面定製 CSS 程式碼
/*新增側邊欄目錄*/ @media screen and (max-width: 767px) { #my-catalog { display: none; } } @media screen and (min-width: 768px) { #my-catalog { display: block; } } #sideBar { overflow: visible; } #my-catalog ul { background-color: #fff; border: 1px solid #ededed; padding: 5px 15px 15px 5px; z-index: 999; } #my-catalog ul li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #my-catalog ul li a:hover { text-decoration: none; } #my-catalog ul .catalog-H2 { padding-left: 10px; margin-top: 5px; } #my-catalog ul .catalog-H3 { padding-left: 20px; } #my-catalog ul .catalog-H4 { padding-left: 30px; } /*新增側邊欄目錄到此*/ /*新增複製按鈕*/ .cnblogs-markdown pre { position: relative; } .cnblogs-markdown pre > span { position: absolute; top: 0; right: 0; border-radius: 2px; padding: 0 10px; font-size: 12px; background: rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; display:none; } .cnblogs-markdown pre:hover > span { display:block; } .cnblogs-markdown pre > .copyed { background: #67c23a; }/*複製按鈕到此*/ /*雪花特效*/ #Snow{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; background: rgba(100,100,100,0.1); pointer-events: none; } q/*simplememory*/ #blogTitle h1 a { color: #515151; font-family: "Comic Sans MS"; }/*雪花特效到此*/ /*hjr提供的主題*/ div#bq{ display:none; } #ad_t2 { margin-top: 5px; line-height: 1.8; display: none; } #sideBar a { color: #757575; font-size: 13px; } .c_ad_block { margin-top: 10px; line-height: 1.5; display: none; } .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size: 14px!important; } #cnblogs_post_body p { margin: 10px auto; text-indent: 0; font-size: 15px; } .PostList { border-bottom: 1px solid #ccc; clear: both; min-height: 1.5em; _height: 1.5em; padding-top: 10px; margin-bottom: 10px; padding-bottom: 12px; } .postTitl2 { float: left; /* padding-bottom: 10px; */ font-size: 17px; } #home { opacity: 0.80; margin: 0 auto; width: 85%; min-width: 950px; background-color: #fff; padding: 30px; margin-top: 30px; margin-bottom: 50px; box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3); } #blogTitle h1 { font-size: 30px; font-weight: bold; line-height: 1.5em; margin-top: 20px; } #navList a:hover { color: #4C9ED9; text-decoration: none; } #navList a { display: block; width: 5em; height: 22px; float: left; text-align: center; padding-top: 18px; } #navigator { font-size: 15px; border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; height: 50px; clear: both; margin-top: 25px; } .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border-left: 10px solid rgba(82, 168, 236, 0.8); padding: 12px 0 12px 10px; background-color: #f5f5f5; } #ad_under_post_holder #google_ad_c1,#google_ad_c2{ display: none !important; } body { color: #000; background: url(https://images.cnblogs.com/cnblogs_com/Z8875/1795861/o_2007280052423.jpg) fixed; background-size: cover; background-repeat: no-repeat; font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif; font-size: 12px; min-height: 101%; } #topics .postTitle { border: 0px; font-size: 200%; font-weight: bold; float: left; line-height: 1.5; width: 100%; padding-left: 5px; } #blogTitle h2 { font-weight: normal; font-size: 13px; font-size: 0.928571429rem; line-height: 2.5; color: rgb(51, 51, 51); float: left; } /*hjr提供的主題到此*/
部落格側邊欄公告(支援HTML程式碼) (支援 JS 程式碼)
<!--目錄--> <script> // 獲取資料 var post_details = document.getElementById("cnblogs_post_body").children; var catalog_data = []; for (var i = 0; i < post_details.length; i++) { if (/^H\d$/.test(post_details[i].nodeName)) { catalog_data.push({ // 標題標籤的級別 type: post_details[i].nodeName, // 部落格園會自動去除h標籤中特殊符號後當作該標籤的id,儲存以用作錨點 id: post_details[i].id, // 內容 str: post_details[i].innerHTML }); } } // 建立目錄控制元件 var catalog_ele = document.createElement("div"); catalog_ele.id = "my-catalog"; // 拼接目錄內容 var catalog_html = '<h3 class="catListTitle">目錄</h3><ul>'; for (var i = 0; i < catalog_data.length && catalog_data[i].type < "H5"; i++) { //H5及以上標題不顯示 catalog_html += '<li class="catalog-' + catalog_data[i].type + //設定不同類名 '"><a href="#' + catalog_data[i].id + //設定錨點 '">' + catalog_data[i].str + '</a></li>'; //顯示內容 } catalog_html += '</ul>'; catalog_ele.innerHTML = catalog_html; // 插入目錄 var side_bar_main = document.getElementById("sideBarMain"); side_bar_main.insertBefore(catalog_ele, side_bar_main.children[0]); /********************************************** *此處已可實現靜態位置的目錄生成及點選跳轉 *下方剩餘程式碼為實現隨頁面滾動改變catalog的定位 *********************************************/ function getAbsoluteTop(node) { var top = 0; do { top += node.offsetTop; node = node.offsetParent; } while (node); return top; } var catalog_ul_ele = catalog_ele.children[1]; var catalog_ul_top = getAbsoluteTop(catalog_ul_ele); onscroll = function () { var scroll_top = document.body.scrollTop || document.documentElement.scrollTop; if (scroll_top > catalog_ul_top) { catalog_ul_ele.style.position = "relative"; catalog_ul_ele.style.top = scroll_top - catalog_ul_top + "px"; } else { catalog_ul_ele.style.position = "static"; } } </script> <!--目錄到此-->
頁首 HTML 程式碼
頁尾 HTML 程式碼
<!--新增複製按鈕-->
<script src="https://blog-static.cnblogs.com/files/Z8875/cp.js"></script>
<script src="https://blog-static.cnblogs.com/files/Z8875/cp2.js"></script>
<!--新增複製按鈕到此-->