一、前言
寫這篇部落格的原因是，由於之前自定義的一些樣式， 會導致頁面內容量過多時造成網頁卡頓的現象，
自己也比較喜歡乾淨直觀的閱讀方式，所以嘗試不同的部落格樣式，從部落格開通以來，差不多也改了四五次了吧，
所以這次做個總結，也是一種備份吧。
如果感興趣可以慢慢看完，我也想表達一些對於一些自定義設定的原因。
自定義的前提
首先去後臺設定中開通JS許可權，寫一些原因（比如寫部落格的原因，可以多寫一點），稽核其實也很快的一半天吧，看官方情況，反正我當時記得是很快就好了。
注意一：利用好網頁的CTRL+F來進行搜尋關鍵字，能快速定位自定義內容位置，編輯欄內也可以使用此快捷鍵進行查詢。
同時CTRL+F也是提高開發效率的必備技能。
注意二：用好搜尋快捷鍵的同時，也要用好目錄，因為這次很多程式碼會佔一大部分篇幅，所以用好目錄，可以清楚的知道哪一塊是做什麼的。
注意三：總共總結四次比較重要的自定義操作，而且這次文章內容量也比較多，順便自己想測試一下當前這款主題流暢閱讀程度
第一次
simplememory官方主題
連結直達：https://www.cnblogs.com/SkinUser.aspx?SkinName=SimpleMemory
記得自己第一次寫部落格的時候，就挑選的這個部落格樣式，感覺很乾淨直觀，其他部落格樣式也嘗試去用了，可能還是偏向這款部落格樣式吧，整體真的簡潔。
當時在部落格“設定”中看到css欄，支援js啥的東西，還不太懂這是幹什麼的，後來自己學了一些前端的三件套，突然想到這塊是不是官方留出來可以自定義化，然後網上搜了一下，果然是自己陽光淺了，還真的可以自定義化，然後自己就開始了DIY歷程……
第二次
當初因為是第一次DIY，所以也沒有留下什麼記錄，而且當時部落格園，對於這塊的語法檢測是很鬆的，直到我去年秋天那時候吧，想再改動一下樣式，發現部落格園後臺設定變樣了，而且語法檢測嚴格了。
當時好奇的是，雖然自己沒有改動什麼但由於報語法錯誤，儲存不了，但是自己部落格樣式還是很好的渲染出來。自己沒法改的是因為當時都是從網上照抄下來的程式碼，像CSS這種，我根本無從下手去改，幾百行的東西，當時看見就吐了，然後我漸漸去找尋可以再次替代這款主題，並且可以自定義出來自己比較喜歡樣式的主題，發現寥寥無幾，還是打算重新開始simplememory的自定義化吧！
第三次
Cnblogs-Theme-SimpleMemory
這款主題是別人已經改好的主題，整體樣式還是很不錯的。
（需要提一點的是，根據我下面的自定義內容，可能會與作者的樣式稍稍有點差別，還請自行看主題作者文件更改！）
記得選擇這個主題！！！
大佬部落格：https://www.cnblogs.com/bndong/
附上GItHub：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory
文件：https://www.dbnuo.com/Cnblogs-Theme-SimpleMemory/docs/v2/#/
當時也是衝著主題開啟後可以有一個簡單而且對Markdown渲染比較好的頁面去的，而且也有自己的目錄結構，其實後面我寫部落格的時候發現，有一個目錄導航會很好的增加文章的可閱讀性，畢竟點進來部落格的人，也不是都喜歡看，只是衝著標題點進來的，所以目錄結構能夠大致的反應出部落格內容。
（今年開年那時候發現，部落格園在文章每一層級的標題上支援目錄的展示，瞬間對官方愛了愛了，這個功能是真心不錯)。
這塊的話個人覺得直接看主題文件比較直接一點，我這裡簡單說一下，我自己自定義化的一些內容，其實也很少。
頁面定製CSS
這裡我選的2.*版本，直接進去CTRL+A全選，複製貼上到CSS欄中，記得勾選“禁用模板CSS”
GitHub：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css
Gitee：https://gitee.com/dbnuo/Cnblogs-Theme-SimpleMemory/blob/v2/dist/simpleMemory.css
部落格側邊欄
重點就在這，其實很多DIY的東西就在這裡面，我也把我之前的配置放著，主要修改內容如圖
<script type="text/javascript">
window.cnblogsConfig = {
code: {
type: 'hljs',
theme: 'atom-one-dark-reasonable',
//
options: {
line: true,
},
},
animate: {
homeBanner: {
enable: true,
options: {
radius: 15,
}
},
articleTitle: {
enable: true,
},
articleBanner: {
enable: true,
},
background: {
enable: true,
},
},
info: {
name: 'The Road of Learning 余月七', // 使用者名稱
startDate: '2020-05-07',
avatar: 'https://img.imgdb.cn/item/604c411b5aedab222c2a68f4.jpg', // 使用者頭像
blogIcon: 'https://img.imgdb.cn/item/604c411b5aedab222c2a68f4.jpg',
},
sidebar: { // 列表資料 ['導航名稱', '連結', 'icon']
navList: [
['www.yuyueq.cn', 'http://www.yuyueq.cn', 'icon-logo_ie'],
['GitHub', 'https://www.github.com/yuyueq/', 'icon-github'],
['Gitee', 'https://www.gitee.com/yuyueq/', 'icon-gitee'],
['CSDN', 'https://blog.csdn.net/Frank_dwx/', 'icon-csdn'],
['我的語雀', 'https://www.yuque.com/yuyueq/', 'icon-brush_fill'],
['Java程式設計思想(第5版)', 'https://www.cnblogs.com/yuyueq/category/2031635.html', 'icon-logo_ie'],
],
infoBackground: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210417133712%E8%9C%82%E8%9C%9C%E6%B5%8F%E8%A7%88%E5%99%A8_nrkeww.jpg',
},
banner: {
home: {
background: [
'https://img.imgdb.cn/item/604c37be5aedab222c2557d9.jpg',
'https://img.imgdb.cn/item/604c3b7a5aedab222c27cfa6.png',
'https://img.imgdb.cn/item/604c3d015aedab222c286b4e.jpg',
'https://img.imgdb.cn/item/606fa9608322e6675cd06bf3.png',
'https://img.imgdb.cn/item/604c3c645aedab222c282a57.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319023247img-71496ef535d92eca42b1f8004c6834b2.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319023442t01b75a5354a249c196.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_2103190252514c472640df47bf86d79fbaf2412c3fd1.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319025059wy3zrp.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210319024941t0194e556233a191e76.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042509555681e00a4690bfbe15eb507a7c3f28246b.png',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042510055922.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_210425112726db286af4881011ebb6edd017c2d2eca2.jpg',
'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_21042511295233.jpg',
],
title: [
"悟已往之不諫,知來者之可追",
"紙上得來終覺淺，絕知此事要躬行",
"苟有恆，何必三更眠五更起；最無益，莫過一日曝十日寒",
"傲不可長，欲不可縱，樂不可極，志不可滿",
"對人間的熱愛與歌頌，可抵歲月冗長",
"不患人之不己知，患不知人也",
"不患人之不己知，患其不能也",
"古之學者為己，今之學者為人",
"不逆詐，不億不信，抑亦先覺者，是賢乎！",
"蓋有不知而作之者，我無是也。多聞，擇其善者而從之；多見而識之，知之次也。",
"見賢思齊焉，見不賢而內自省也。",
"不患無位，患所以立。不患莫己知，求為可知也。",
"見賢思齊焉，見不賢而內自省也。",
],
},
article: {
background: [
"https://img.imgdb.cn/item/604c3b525aedab222c27bfc5.png",
"https://img.imgdb.cn/item/604c46dd5aedab222c2d637d.png",
"https://img.imgdb.cn/item/604c467b5aedab222c2d3e61.jpg",
],
},
},
loading: {
rebound: {
tension: 16,
},
spinner: {
id: 'spinner',
radius: 90,
}
},
footer: {
style: 1,
},
switchDayNight: {
enable: true,
auto: {
enable: true
}
},
}
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v2.0.7/dist/simpleMemory.js" defer></script>
<script src="https://files.cnblogs.com/files/cainiao-chuanqi/mouse-click.js">
</script>
側邊欄這塊最後兩行是為了滑鼠點選的效果增添的，至於背景上面的線條是在頁尾程式碼塊新增的，下面有。
頁首HTML程式碼
<!--<meta http-equiv="x-dns-prefetch-control" content="on">-->
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
<link rel="dns-prefetch" href="https://at.alicdn.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://static.cnblogs.com/">
<link rel="dns-prefetch" href="https://images2018.cnblogs.com/">
<link rel="dns-prefetch" href="https://v2.jinrishici.com/">
<link rel="preload" href="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" as="script">
頁尾HTML程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--網格動態背景開始-->
<script type="text/javascript">
!function () {
//封裝方法，壓縮之後減少檔案大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封裝方法，壓縮之後減少檔案大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//獲取配置引數
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //當前載入的script
return {
l: script_len, //長度，用於生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.8), //opacity
c: get_attribute(script, "color", "255,255,255"), //color
n: get_attribute(script, "count", 350) //count
};
}
//設定canvas的高寬
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
//繪製過程
function draw_canvas() {
context.clearRect(0, 0, canvas_width, canvas_height);
//隨機的線條和當前位置聯合陣列
var e, i, d, x_dist, y_dist, dist; //臨時節點
//遍歷處理每一個點
random_points.forEach(function (r, idx) {
r.x += r.xa,
r.y += r.ya, //移動
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到邊界，反向反彈
context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //繪製一個寬高為1的點
//從下一個點開始
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
// 當前點存在
if (null !== e.x && null !== e.y) {
x_dist = r.x - e.x; //x軸距離 l
y_dist = r.y - e.y; //y軸距離 n
dist = x_dist * x_dist + y_dist * y_dist; //總距離, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的時候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "#555555",//這裡是線條的顏色
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//建立畫布，並新增到body中
var the_canvas = document.createElement("canvas"), //畫布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (func) {
window.setTimeout(func, 1000 / 40);
}, random = Math.random,
current_point = {
x: null, //當前滑鼠x
y: null, //當前滑鼠y
max: 20000 // 圈半徑的平方
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);
//初始化畫布大小
set_canvas_size();
window.onresize = set_canvas_size;
//當時滑鼠位置儲存，離開的時候，釋放當前位置資訊
window.onmousemove = function (e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
}, window.onmouseout = function () {
current_point.x = null;
current_point.y = null;
};
//隨機生成config.n條線位置資訊
for (var random_points = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //隨機位置
y = random() * canvas_height,
xa = 2 * random() - 1, //隨機運動方向
ya = 2 * random() - 1;
// 隨機點
random_points.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 6000 //沾附距離
});
}
all_array = random_points.concat([current_point]);
//0.1秒後繪製
setTimeout(function () {
draw_canvas();
}, 100);
}();
</script>
</body>
</html>
- 完全可以根據官方文件來
- 根據我的步驟來，和我一樣的效果，先複製貼上CSS，然後側邊欄，頁首程式碼，頁尾程式碼，我這裡都沒有做更改，直接貼上過去可用，記得更換自己的內容
- 要注意的是，這是我當時的配置內容，所以版本可能會稍舊，請自行取捨
第四次
這次我又迴歸了最初的部落格園官方simplememory主題，因為，我又發現，有時候在網路不好的情況下，主題也會出現卡頓。
再一個就是自己也是有點看膩了，不能說這款樣式不好看，因為在後面這段時間，我發現很多人都是這個樣式，自己也覺得新鮮感喪失了吧，
就想回到最初那個時候，體會一下第一次DIY的快樂。所以這一次簡單的說一下，那張第一次DIY圖片裡的內容，加上這次修改的內容。
上面是經過多次不同的修改才有有內容，所以這裡只放第二張圖片裡的配置，因為兩者相差不大。
下面都是完整的配置檔案，我在自己更改過的地方，都有備註，所以請自行復制後檢視修改。
頁面CSS
a:link {
color: #6495ED;
text-decoration: none
}
a:visited {
color: #6495ED;
text-decoration: none
}
a:hover {
color: rgb(146, 122, 33);
text-decoration: underline;
}
a:active {
color: rgb(146, 122, 33);
text-decoration: underline;
}
/*部落格導航欄 */
/* #navList {
float:right;
}
#navList li {
border: none;
font-size: 16px;
}
.blogStats {
display: none;
} */
/*側邊欄公告*/
/* #blog-news > img {
/*頭像*/
display: block;
margin: auto;
border-radius: 50%;
} */
/* #profile_block {
font-size: 15px;
padding: 20px;
line-height: 1.8;
}
#profile_block > a:link {
color: #F60;
} */
/*公告結束*/
#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {
display: none;
}
/* 文章title自定義帶動畫樣式 */
.postTitle {
font-family: "Lato", Helvetica Neue, Helvetica, Arial, sans-serif;
clear: both;
background-color: #FBF9F9;
margin-bottom: 8px;
padding-top: 5px;
padding-bottom: 0px;
margin-top: 12px;
border-left: 8px solid #21759b;
padding-left: 17px;
font-size: 18px;
border-radius:0px;
}
.postTitle a:hover {
text-decoration: none;
margin-left: 17px;
color: #E00000;
}
.postTitle a:link,
.postTitle a:visited,
.postTitle a:active {
transition: all 0.4s linear 0s;
}
/*頁面大小*/
#home {
margin: 0 auto;
opacity: 1; /*透明度越小越透明*/
width: 68%;
min-width: 980px;
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
border-radius: 36px;
}
/* body {
background: rgba(12, 100, 129, 1) url('https://pic.imgdb.cn/item/61e521d52ab3f51d9107a088.jpg') fixed no-repeat; <!--背景圖片-->
background-position: 50% 5%;
background-size: cover;
} */
#blogTitle {
height: 66px; /*高度*/
clear: both;
background-color: rgba(0, 0, 0,0);
}
#blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {
/*側邊欄每一模組新增圓角和陰影*/
border-radius: 10px;
box-shadow: 1px 2px 3px #A7A8AD;
background-color: #fff0;
}
#sideBarMain h3, .newsItem h3 {
/*側邊欄每個模組的標題部分*/
font-size: 1.2em;
height: 36px;
line-height: 36px;
text-indent: 0.5em;
background: url() no-repeat left center #fff;
padding: 0 0 0 50px;
margin-bottom: 1;
border: 1px solid rgba(112, 141, 215);
border-left-width: 5px;
border-radius: 10px;
border-right-width: 5px;
}
/*生成部落格目錄的CSS*/
#uprightsideBar{
font-size: 14px;
font-family: ArialBold, Helvetica, sans-serif;
text-align:left;
position:fixed;/*將div的位置固定到距離top:50px，right:0px的位置，這樣div就會處在最右邊的位置，距離頂部50px*/
top: 30px;
right:0px;
width: auto;
height: auto;
color: rgb(29, 4, 4);
}
#sideBarTab{
font-size: 16px;
float:left;
width:30px;
border:1px solid #e5e5e5;
border-right:none;
text-align:center;
background:#fff;
}
#sideBarContents{
float:left;
overflow:auto;
overflow-x:hidden;!important;
width:266px;
min-height:108px;
max-height:460px;
border:1px solid #e5e5e5;
border-right:none;
background: #fff;
}
#sideBarContents dl{
margin:0;
padding:0;
}
#sideBarContents dt{
margin-top:5px;
margin-left:5px;
}
#sideBarContents dd, dt {
cursor: pointer;
}
#sideBarContents dd:hover, dt:hover {
color:#abb0f3;
}
#sideBarContents dd{
margin-left:10px;
}
#sideBarContents dd.indent3{
margin-left:20px;
}
#sideBarContents dd.indent4{
margin-left:30px;
}
#sideBarContents dd.indent5{
margin-left:40px;
}
#sideBarContents dd.indent6{
margin-left:50px;
}
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到頂部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
#cnblogs_post_body {
color: black;
font: 0.875em/1.5em "微軟雅黑" , "PTSans" , "Arial" ,sans-serif;
font-size: 15px;
}
#cnblogs_post_body h1 {
text-align:center;
background: #333366;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF;
font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 23px;
font-weight: bold; height: 25px; line-height: 25px;
margin: 18px 0 !important;
padding: 8px 0 5px 5px; text-shadow: 2px 2px 3px #222222;
}
#cnblogs_post_body h2 {
text-align:center;
background: #006699;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
color: #FFFFFF; font-family: "微軟雅黑" , "宋體" , "黑體" ,Arial; font-size: 20px;
font-weight: bold; height: 25px;
line-height: 25px; margin: 18px 0 !important;
padding: 8px 0 5px 5px;
text-shadow: 2px 2px 3px #222222;
}
/* 關注收藏等幾個按鈕 */
#green_channel {
padding: 5px 0 15px 0;
margin-bottom: 10px;
margin-top: 10px;
border: 0;
border-top: #eee 1px dashed;
border-bottom: #eee 1px dashed;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: rgb(238, 238, 238);
font-size: 12px;
width: 100%!important;
text-align: center;
display: inline-block;
vertical-align: middle;
}
a#green_channel_digg, a#green_channel_follow, a#green_channel_favorite, a#green_channel_weibo, a#green_channel_wechat {
text-decoration: none;
color: #fff;
margin: auto;
width: 80px;
display: inline-block;
line-height: 30px;
font-size: 15px;
font-weight: 500;
letter-spacing: 2px;
border-radius: 3px;
text-transform: uppercase;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
-ms-transition: all .4s;
-o-transition: all .4s;
position: relative;
margin-left: 10px;
background-image: none;
margin-top: 10px;
}
a#green_channel_digg {
background-color: #2daebf;
box-shadow: 0 15px 18px -6px rgba(95,193,206,0.65);
}
a#green_channel_favorite {
background-color: #ffb515;
box-shadow: 0 15px 18px -6px rgba(255,198,75,0.65);
margin-left: 10px;
}
a#green_channel_follow {
background-color: #e33100!important;
box-shadow: 0 15px 18px -6px rgba(227,49,0,0.65);
margin-left: 10px;
}
a#green_channel_wechat {
padding: 3px 8px!important;
background-color: #3cb034!important;
box-shadow: 0 15px 18px -6px rgba(60,176,52,0.65)!important;
margin-left: 10px;
width: 35px;
}
a#green_channel_weibo {
padding: 3px 8px!important;
background-color: #ff464b!important;
box-shadow: 0 15px 18px -6px rgba(255,70,75,0.65)!important;
margin-left: 10px;
width: 35px;
}
/*下面的頭像邊框*/
#author_profile_info img.author_avatar {
border-radius: 100%;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
border: 3px solid #f7f7f7;
padding: 0;
margin-left: 3px;
margin-right: 7px;
}
/* 禁用下劃線 */
.postBody a:link, .postBody a:visited, .postBody a:active {
text-decoration: none;
}
/* 上一篇下一篇 */
#post_next_prev {
font-size: 14px;
color: #535353;
}
/* 設定簽名格式 定製css樣式 */
/* 個性簽名 */
#MySignature {
box-shadow: 8px 1px 10px #989898;
padding: 10px;
text-shadow: 1px 1px 1px #FFF;
font-size: 15px;
border-left: solid 5px #55895B;
background: #FBF9F9;
border-radius: 10px 10px 37% 10px;
line-height: 2.4;
margin: 37px 0;
}
#MySignature a {
text-decoration: none;
color: #4183c4;
font-weight: bold;
}
#MySignature a:hover {
text-decoration: underline;
color: #f60;
}
#MySignature span {
color: #f60;
}
/*推薦和反對*/
#div_digg {
float: right;
position: fixed;
width: 50px;
bottom: 10px;
left: 90%;
margin-bottom: 10px;
background: rgba(247,247,247,0.3);
margin-right: 10px;
font-size: 12px;
box-shadow: 0 0 10px 0 #AAA;
padding: 10px;
border: 2px solid rgba(82, 168, 236, 0.8);
text-align: center;
margin-top: 10px;
}
/*這裡是將反對按鈕做了一個隱藏，如果需要反對按鈕，直接刪除這塊配置*/
.buryit {
display: none;
}
側邊欄
<!--時鐘和圖片-->
<!--<div id="clockdiv">
<canvas id="dom" width="120" height="120">時鐘canvas</canvas>
</div>
<script type="text/javascript" src="https://files.cnblogs.com/files/shwee/clock.js"></script>
<a href="https://www.cnblogs.com/unleashed">
<img src="https://pic.downk.cc/item/5f38a70c14195aa59437326b.png" border="" width="" height="">
</a>-->
<div class="c-social" align="center">
<!-- 那些小圖示 -->
<span>
<a href="https://www.yuyueq.cn/" target="_blank">
<img src="https://pic.cnblogs.com/avatar/2031154/20220119112707.png"></a>
<br>
<a href="https://gitee.com/yuyueq" target="_blank">
<img src="https://pic.downk.cc/item/5f3269d814195aa594a36563.png" class="mr5" width = 30 height=30>
</a>
<a href="https://www.yuque.com/yuyueq" target="_blank">
<img src="https://pic.imgdb.cn/item/61e51fe82ab3f51d910562ae.png" class="mr5" width = 30 height=30>
</a>
<a href="https://blog.csdn.net/Frank_dwx" target="_blank">
<img src="http://images.cnblogs.com/cnblogs_com/enjoy233/1389971/o_csdn.png" class="mr5" width = 30 height=30>
</a>
<a href="https://www.zhihu.com/people/ming-ke-66" target="_blank">
<img src="https://www.cnblogs.com/images/cnblogs_com/enjoy233/1389971/o_zhihu.png" class="mr5" width = 30 height=30>
</a>
<a href="https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117073857_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220117153840.jpg" target="_blank">
<img src="https://pic.downk.cc/item/5f407ca3160a154a672a5964.png" class="mr5" width = 30 height=30>
</a>
<a href="https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117073906_%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220117153847.jpg" target="_blank">
<img src="https://pic.imgdb.cn/item/61e51cc62ab3f51d9101801d.png" class="mr5" width = 30 height=30>
</a>
</span>
<br>
</div>
<br>
<!-- 為部落格底部新增音樂元件 -->
<div id="player" class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('player'),
narrow: false,
autoplay: false, <!-- 是否自動播放 -->
showlrc: false,
theme: '#FFFFFF', <!-- 外掛背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 -->
listFolded: true, <!-- 預設摺疊 -->
fixed: false, <!-- 底部展示 -->
volume: 0.5, <!-- 預設音量 -->
mutex: true, <!-- 不允許多個播放器同時播放 -->
music: [{
title: '七里香',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/yuyueq/%E4%B8%83%E9%87%8C%E9%A6%99.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220119013521_Snipaste_2022-01-19_09-31-35.png'
}, {
title: '夜曲',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%A4%9C%E6%9B%B2.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117061210_%E5%A4%9C%E6%9B%B2.png'
},
{
title: '花海',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E8%8A%B1%E6%B5%B7.css',
pic: 'https://pic.downk.cc/item/5f3e3d0714195aa5949ad064.jpg'
}, {
title: '不能說的祕密',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8D%E8%83%BD%E8%AF%B4%E7%9A%84%E7%A7%98%E5%AF%86.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064737t010e12e6a774215909.jpg'
},
{
title: '藉口',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E5%80%9F%E5%8F%A3.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064908e0c14e6d62d096386e1e70a0d5b719f7.png'
},
{
title: 'Panroama',
author: 'X-Ray dog',
url: 'https://files.cnblogs.com/files/unleashed/Panorama.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007160616417ef991ceb1481c31422c0f14287690f8.png'
},
{
title: 'Epic Music',
author: 'John Dreamer',
url: 'https://files.cnblogs.com/files/unleashed/EpicMusic.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200708082237a3b8f6a8713f1cc5d26861d847989412.jpg'
},
{
title: 'This’sWhatYouCameFor',
author: 'Chave',
url: 'https://files.cnblogs.com/files/unleashed/ChaveSunflyKaraokeThisIsWhatYouCameFor.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007170147331ff2be3d5e7168150c1aff88f4186244.png'
}, {
title: 'Mine',
author: 'SLANDER',
url: 'https://files.cnblogs.com/files/unleashed/Mine1.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200707143300wallhaven-83ywmo.jpg'
},
{
title: 'Shorts',
author: 'Imagine Dragons',
url: 'https://files.cnblogs.com/files/unleashed/Shorts.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200716061133e9a018a8ab71975f6b9b30c2fcc62e39.png'
},
{
title: 'Where is your love',
author: 'J.lisk',
url: 'https://files.cnblogs.com/files/unleashed/Whereisyourlove.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_20071909221647e991c39efbb1a03ec330f28d072155.png'
},
{
title: '告白の夜',
author: 'Ayasa',
url: 'https://files.cnblogs.com/files/unleashed/Ayasa%E5%91%8A%E7%99%BD%E3%81%AE%E5%A4%9C.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007080822111587049458312.jpeg'
},
{
title: '年少有為',
author: '李榮浩',
url: 'https://files.cnblogs.com/files/unleashed/%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.css',
pic: 'https://pic.downk.cc/item/5f3e3e5914195aa5949cbf4a.jpg'
}, {
title: '因為你，所以我',
author: '五月天',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%9B%A0%E4%B8%BA%E4%BD%A0%E6%89%80%E4%BB%A5%E6%88%91.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117063946_Snipaste_2022-01-17_14-23-13.png'
},
{
title: '樓頂上的小斑鳩',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060058_%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.png'
},
{
title: '哪裡都是你',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117054903_%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.png'
}, {
title: '11',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/11.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060454_11.png'
},
{
title: '一萬次悲傷(Live)',
author: '逃跑計劃',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%80%E4%B8%87%E6%AC%A1%E6%82%B2%E4%BC%A4111.css',
pic: 'https://pic.downk.cc/item/5f2587db14195aa59434c04f.jpg'
},
{
title: '起風了',
author: '買辣椒也用券',
url: 'https://files.cnblogs.com/files/yuyueq/%E8%B5%B7%E9%A3%8E%E4%BA%86.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117064806_Snipaste_2022-01-17_14-47-44.png'
},
{
title: '下女的聖經',
author: 'Bo Peep',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8B%E5%A5%B3%E7%9A%84%E5%9C%A3%E7%BB%8F.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200730030607t01fea4cae2ab85a945.jpg'
},
]
});
ap.init();
</script>
<br>
頁首
<script type="text/javascript">
/*
功能：生成部落格目錄的JS工具
測試：IE8，火狐，google測試通過
一明
2020-4-19
*/
var BlogDirectory = {
/*
獲取元素位置，距瀏覽器左邊界的距離（left）和距瀏覽器上邊界的距離（top）
*/
getElementPosition: function(ele) {
var topPosition = 0;
var leftPosition = 0;
while (ele) {
topPosition += ele.offsetTop;
leftPosition += ele.offsetLeft;
ele = ele.offsetParent;
}
return {
top: topPosition,
left: leftPosition
};
},
/*
獲取滾動條當前位置
*/
getScrollBarPosition: function() {
var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop;
return scrollBarPosition;
},
/*
移動滾動條，finalPos 為目的位置，internal 為移動速度
*/
moveScrollBar: function(finalpos, interval) {
//若不支援此方法，則退出
if (!window.scrollTo) {
return false;
}
//窗體滾動時，禁用滑鼠滾輪
window.onmousewheel = function() {
return false;
};
//清除計時
if (document.body.movement) {
clearTimeout(document.body.movement);
}
var currentpos = BlogDirectory.getScrollBarPosition(); //獲取滾動條當前位置
var dist = 0;
if (currentpos == finalpos) { //到達預定位置，則解禁滑鼠滾輪，並退出
window.onmousewheel = function() {
return true;
}
return true;
}
if (currentpos < finalpos) { //未到達，則計算下一步所要移動的距離
dist = Math.ceil((finalpos - currentpos) / 10);
currentpos += dist;
}
if (currentpos > finalpos) {
dist = Math.ceil((currentpos - finalpos) / 10);
currentpos -= dist;
}
var scrTop = BlogDirectory.getScrollBarPosition(); //獲取滾動條當前位置
window.scrollTo(0, currentpos); //移動視窗
if (BlogDirectory.getScrollBarPosition() == scrTop) //若已到底部，則解禁滑鼠滾輪，並退出
{
window.onmousewheel = function() {
return true;
}
return true;
}
//進行下一步移動
var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")";
document.body.movement = setTimeout(repeat, interval);
},
htmlDecode: function(text) {
var temp = document.createElement("div");
temp.innerHTML = text;
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/*
建立部落格目錄，
id表示包含博文正文的 div 容器的 id，
mt 和 st 分別表示主標題和次級標題的標籤名稱（如 H2、H3，大寫或小寫都可以！），
interval 表示移動的速度
*/
createBlogDirectory: function(id, mt, st, interval) {
//獲取博文正文div容器
var elem = document.getElementById(id);
if (!elem) return false;
//獲取div中所有元素結點
var nodes = elem.getElementsByTagName("*");
//建立部落格目錄的div容器
var divSideBar = document.createElement('DIV');
divSideBar.className = 'uprightsideBar';
divSideBar.setAttribute('id', 'uprightsideBar');
var divSideBarTab = document.createElement('DIV');
divSideBarTab.setAttribute('id', 'sideBarTab');
divSideBar.appendChild(divSideBarTab);
var h2 = document.createElement('H2');
divSideBarTab.appendChild(h2);
var txt = document.createTextNode('目錄導航');
h2.appendChild(txt);
var divSideBarContents = document.createElement('DIV');
divSideBarContents.style.display = 'none';
divSideBarContents.setAttribute('id', 'sideBarContents');
divSideBar.appendChild(divSideBarContents);
//建立自定義列表
var dlist = document.createElement("dl");
divSideBarContents.appendChild(dlist);
var num = 0; //統計找到的mt和st
mt = mt.toUpperCase(); //轉化成大寫
st = st.toUpperCase(); //轉化成大寫
//遍歷所有元素結點
for (var i = 0; i < nodes.length; i++) {
var tits = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
if (tits.indexOf(nodes[i].nodeName) !== -1) { // nodes[i].nodeName == mt|| nodes[i].nodeName == st
//獲取標題文字
var nodetext = nodes[i].innerHTML.replace(/<\/?[^>]+>/g, ""); //innerHTML裡面的內容可能有HTML標籤，所以用正規表示式去除HTML的標籤
//nodetext = nodetext.replace(/ /ig, "");//替換掉所有的空格
nodetext = BlogDirectory.htmlDecode(nodetext);
//插入錨
nodes[i].setAttribute("id", "blogTitle" + num);
var item;
switch (nodes[i].nodeName) {
case 'H1': //若為主標題
item = document.createElement("dt");
break;
case 'H3':
item = document.createElement("dd");
item.setAttribute('class', 'indent3'); //通過CSS樣式定義距離
break;
case 'H4':
item = document.createElement("dd");
item.setAttribute('class', 'indent4');
break;
case 'H5':
item = document.createElement("dd");
item.setAttribute('class', 'indent5');
break;
case 'H6':
item = document.createElement("dd");
item.setAttribute('class', 'indent6');
break;
default: //若為子標題
item = document.createElement("dd");
break;
}
//建立錨連結
var itemtext = document.createTextNode(nodetext);
item.appendChild(itemtext);
item.setAttribute("name", num);
item.onclick = function() { //新增滑鼠點選觸發函式
var pos = BlogDirectory.getElementPosition(document.getElementById("blogTitle" + this.getAttribute("name")));
if (!BlogDirectory.moveScrollBar(pos.top, interval)) return false;
};
//將自定義表項加入自定義列表中
dlist.appendChild(item);
num++;
}
}
if (num == 0) return false;
/*滑鼠進入時的事件處理*/
divSideBarTab.onmouseenter = function() {
divSideBarContents.style.display = 'block';
}
/*滑鼠離開時的事件處理*/
divSideBar.onmouseleave = function() {
divSideBarContents.style.display = 'none';
}
document.body.appendChild(divSideBar);
}
};
window.onload = function() {
/*頁面載入完成之後生成部落格目錄*/
BlogDirectory.createBlogDirectory("cnblogs_post_body", "h1", "h2", "h3", 20);
}
</script>
<!-- 滑鼠點選效果 -->
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>
<!-- 右下角live2d效果 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "left",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</script>
<!-- 背景動畫 -->
<p style="text-align:center;font-size:50px;margin-bottom:5px;margin-top:20px;opacity: 1;color:#000000;"><i>Welcome to Yu Yueq's blog</i></p>
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="https://files.cnblogs.com/files/lfri/canvas-nest.js"></script>
<!-- 返回至頂部
<div id="box" class="box">
<div class="box-in"></div>
</div>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-260);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script> -->
<link type="text/css" rel="stylesheet" href="https://files.cnblogs.com/files/hafiz/feedback.css">
<a href="https://github.com/yuyueq" class="github-corner" target="_blank" title="Follow me on GitHub" aria-label="Follow me on GitHub">
<svg width="80" height="80" viewBox="0 0 250 250" style="fill:#708dd7; color:#fff; z-index: 999999; position: fixed; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
<!-- 返回頂部 -->
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 8px;
z-index: 99;
}
#back-top span {
width: 70px;
height: 140px;
display: block;
/*這是回到頂部的圖片，可以自定化*/
background: url('https://images.cnblogs.com/cnblogs_com/yuyueq/2130345/o_220323033235_5-150921100039.png') no-repeat center center;
}
#back-top a {
outline: none
}
</style>
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrollTop() > 400) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
第五次
cnblogs-theme-silence
上次根據Google官方的開發文件，通過翻譯和自己理解總結了《GoogleJava開發規範》，還是以前的問題，雖然這次自定義的東西我都比較符合規範，但還是會導致頁面載入卡頓，渲染效果不是很好，所以想著再能不能調整一下主題樣式，因為自己當時在用simplememor主題自定義的時候發現
cnblogs-theme-silence這個主題也是很不錯的，但是當時自己也是比較喜歡simple這款主題，所以就沒怎麼在意，還是繼續DIY simple，這次打算嘗試一下這款主題。
作者GitHub倉庫：https://github.com/esofar/cnblogs-theme-silence/
主題文件：http://esofar.gitee.io/cnblogs-theme-silence/#/
這款主題是基於部落格園“custom”模板，可不是simplememory了
頁面CSS
全選複製貼上，這塊沒有什麼要更改的
GitHub：https://github.com/esofar/cnblogs-theme-silence/blob/master/dist/silence.min.css
CSS-CDN：https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.css
側邊欄
至於JS的應用可以直接用我的，或者用作者官方CDN
JS-CDN：https://cdn.jsdelivr.net/gh/esofar/cnblogs-theme-silence@3.0.0-beta3/dist/silence.min.js
然後就是一些我的個人配置，標題這塊是這種配置
<font size="5">紙上得來終覺淺，絕知此事要躬行.</font><br><font size="3">Talk is cheap. Show me the code.</font> <font size="2"> 悟已往之不諫，知來者之可追。實迷途其未遠，覺今是而昨非.</font>
下面是側邊欄內容，很多配置官方有說明，而且我也有一些註釋，這裡不做過多贅述
<script type="text/javascript">
window.$silence = {
avatar: 'https://images.cnblogs.com/cnblogs_com/yuyueq/2130345/o_220323071252_logo1.png',
catalog: {
enable: true,
index: false,
active: true,
levels: ['h1', 'h2', 'h3']
},
hljsln: true,
github: 'https://github.com/yuyueq',
navbars: [ {
title: '關於我',
chilren: [{
title: '語雀',
target: '_blank',
url: 'https://www.yuque.com/yuyueq',
}, {
title: 'Gitee',
target: '_blank',
url: 'https://www.gitee.com/yuyueq',
}, {
title: 'CSDN',
target: '_blank',
url: 'https://blog.csdn.net/Frank_dwx',
}, {
title: '個人網站',
target: '_blank',
url: 'https://www.yuyueq.cn',
}, ]
}],
signature: {
enable: true,
author: null,
license: ['署名-非商業性使用-相同方式共享 4.0 國際', 'https://creativecommons.org/licenses/by-nc-sa/4.0/'],
remark: '尊重每一個原創，從你我開始！<br>無論人生上到哪一層臺階，階下有人在仰望你，階上亦有人在俯視你。你抬頭自卑，低頭自得，唯有平視，才能看見真實的自己。<br>轉載請註明原文連結，如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“?”哦，博主在此感謝你的支援！',
},
};
</script>
<script src="https://files.cnblogs.com/files/yuyueq/silence.min.js"></script>
<!-- 為部落格底部新增音樂元件 -->
<div id="player" class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script>
<script type="text/javascript">
var ap = new APlayer({
element: document.getElementById('player'),
narrow: false,
autoplay: false, <!-- 是否自動播放 -->
showlrc: false,
theme: '#FFFFFF', <!-- 外掛背景顏色，建議和你的公告欄背景色一樣，這樣融為一體的感覺 -->
listFolded: true, <!-- 預設摺疊 -->
fixed: false, <!-- 底部展示 -->
volume: 0.5, <!-- 預設音量 -->
mutex: true, <!-- 不允許多個播放器同時播放 -->
music: [{
title: '七里香',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/yuyueq/%E4%B8%83%E9%87%8C%E9%A6%99.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220119013521_Snipaste_2022-01-19_09-31-35.png'
}, {
title: '夜曲',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%A4%9C%E6%9B%B2.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117061210_%E5%A4%9C%E6%9B%B2.png'
},
{
title: '花海',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E8%8A%B1%E6%B5%B7.css',
pic: 'https://pic.downk.cc/item/5f3e3d0714195aa5949ad064.jpg'
}, {
title: '不能說的祕密',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8D%E8%83%BD%E8%AF%B4%E7%9A%84%E7%A7%98%E5%AF%86.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064737t010e12e6a774215909.jpg'
},
{
title: '藉口',
author: '周杰倫',
url: 'https://files.cnblogs.com/files/unleashed/%E5%80%9F%E5%8F%A3.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200820064908e0c14e6d62d096386e1e70a0d5b719f7.png'
},
{
title: 'Panroama',
author: 'X-Ray dog',
url: 'https://files.cnblogs.com/files/unleashed/Panorama.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007160616417ef991ceb1481c31422c0f14287690f8.png'
},
{
title: 'Epic Music',
author: 'John Dreamer',
url: 'https://files.cnblogs.com/files/unleashed/EpicMusic.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200708082237a3b8f6a8713f1cc5d26861d847989412.jpg'
},
{
title: 'This’sWhatYouCameFor',
author: 'Chave',
url: 'https://files.cnblogs.com/files/unleashed/ChaveSunflyKaraokeThisIsWhatYouCameFor.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007170147331ff2be3d5e7168150c1aff88f4186244.png'
}, {
title: 'Mine',
author: 'SLANDER',
url: 'https://files.cnblogs.com/files/unleashed/Mine1.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200707143300wallhaven-83ywmo.jpg'
},
{
title: 'Shorts',
author: 'Imagine Dragons',
url: 'https://files.cnblogs.com/files/unleashed/Shorts.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200716061133e9a018a8ab71975f6b9b30c2fcc62e39.png'
},
{
title: 'Where is your love',
author: 'J.lisk',
url: 'https://files.cnblogs.com/files/unleashed/Whereisyourlove.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_20071909221647e991c39efbb1a03ec330f28d072155.png'
},
{
title: '告白の夜',
author: 'Ayasa',
url: 'https://files.cnblogs.com/files/unleashed/Ayasa%E5%91%8A%E7%99%BD%E3%81%AE%E5%A4%9C.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_2007080822111587049458312.jpeg'
},
{
title: '年少有為',
author: '李榮浩',
url: 'https://files.cnblogs.com/files/unleashed/%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.css',
pic: 'https://pic.downk.cc/item/5f3e3e5914195aa5949cbf4a.jpg'
}, {
title: '因為你，所以我',
author: '五月天',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%9B%A0%E4%B8%BA%E4%BD%A0%E6%89%80%E4%BB%A5%E6%88%91.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117063946_Snipaste_2022-01-17_14-23-13.png'
},
{
title: '樓頂上的小斑鳩',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060058_%E6%A5%BC%E9%A1%B6%E4%B8%8A%E7%9A%84%E5%B0%8F%E6%96%91%E9%B8%A0.png'
},
{
title: '哪裡都是你',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117054903_%E5%93%AA%E9%87%8C%E9%83%BD%E6%98%AF%E4%BD%A0.png'
}, {
title: '11',
author: '隊長',
url: 'https://files.cnblogs.com/files/yuyueq/11.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117060454_11.png'
},
{
title: '一萬次悲傷(Live)',
author: '逃跑計劃',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%80%E4%B8%87%E6%AC%A1%E6%82%B2%E4%BC%A4111.css',
pic: 'https://pic.downk.cc/item/5f2587db14195aa59434c04f.jpg'
},
{
title: '起風了',
author: '買辣椒也用券',
url: 'https://files.cnblogs.com/files/yuyueq/%E8%B5%B7%E9%A3%8E%E4%BA%86.css',
pic: 'https://images.cnblogs.com/cnblogs_com/yuyueq/1946705/o_220117064806_Snipaste_2022-01-17_14-47-44.png'
},
{
title: '下女的聖經',
author: 'Bo Peep',
url: 'https://files.cnblogs.com/files/unleashed/%E4%B8%8B%E5%A5%B3%E7%9A%84%E5%9C%A3%E7%BB%8F.css',
pic: 'https://images.cnblogs.com/cnblogs_com/unleashed/1801489/o_200730030607t01fea4cae2ab85a945.jpg'
},
]
});
// ap.init();
</script>
<br>
關於音樂播放器
這塊我是用的 Aplayer：https://aplayer.js.org/#/zh-Hans/
可以去參考一下官方文件進行自定義化和配置。
關於其他主題
當時是直接在部落格園裡面，搜尋相關的樣式修改文章的，把文章日期儘量定位到比較舊的日期相對來說有新發現
這裡推薦兩篇很不錯的文章:
部落格園美化教程大集合----極致個性化你的專屬部落格（超詳細，看這篇就夠了）
【全網最全的部落格美化系列教程】
目前自己的部落格樣式就是這個，暫時感覺還不錯，可能自己也有審美疲勞吧，不知道會過多久，再次嘗試換一個新的主題，也很有可能兜兜轉轉回歸預設。
此外也是因為最近剛換部落格主題，所以抽了點時間把以前的修改做個總結。
最後
順便提一下上一篇對sql函式和優化的記錄，今天看到公眾號有一篇文章
警告！別再使用 TIMESTAMP 作為日期欄位～
本人現在就有點懵，因為自己也有一點設計習慣了，也不知道這種方式到底怎麼樣，感覺網上說的大多都不一，多數情況下還是要根據業務來吧，到底哪種方式更普遍
更優先，還是都可以，希望有大佬可以不吝賜教，我在此非常感謝！