一、前言

嗯，一款在線發佈說說的hexo插件，目前有不少小夥伴在使用啦，欣慰。

回饋新老用戶，這裏給出一些DIY魔改的教程，讓你擁有獨一無二的說說頁面。

前提是你已經配置好了說說頁面，可以正常發佈說說，可以參考官網教程https://artitalk.js.org/

本次魔改，先挑選，再CV複製粘貼，最後hexo clean &&hexo g&&hexo d三連發佈一下就ok了哦！

二、選妃

1.默認

懶人做法，不懂不動不改，默認很好看！

2.簡約派

黑白永恆經典（黑底白字）

源碼：
（這個顏色可以做黑暗主題適配，可以加個白色的邊框，我這裏未加）

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: #333030;
                  color: #e3dede
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: #333030;
                  color: #e3dede
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #333030
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #333030
                }
                .button {
                  background: #333030;
                  color: #e3dede
                }
              </style>

              <!-- 自定義樣式.end -->

簡約派（白底黑字）：

源碼：

<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  color: #333030;
                  background: #e3dede
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  color: #333030;
                  background: #e3dede
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #e3dede
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #e3dede
                }
                .button {
                  color: #333030;
                  background: #e3dede
                }
              </style>

              <!-- 自定義樣式.end -->

3.圖片至上

二次元，idol，自然景色，對，我們就要純純的圖片背景。

3.1 自定義壁紙

源碼：（url中填寫地址即可）

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: url("https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/hyo01.jpg") 0% 0% / cover;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: url("https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/hyo01.jpg") 0% 0% / cover;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #6dd0f2
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #f59abe
                }
                .button {
                  background: url("https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/hyo01.jpg") 0% 0% / cover;
                }
              </style>

              <!-- 自定義樣式.end -->

border-right-color是左邊那個三角形的顏色，由於圖片顏色不固定，最好是根據圖片顏色來搭配。

3.2 bing壁紙

（每次都會切換）

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: url("https://bing.rthe.net/wallpaper") 0% 0% / cover;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: url("https://bing.rthe.net/wallpaper") 0% 0% / cover;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #6dd0f2
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #f59abe
                }
                .button {
                  background: url("https://bing.rthe.net/wallpaper") 0% 0% / cover;
                }
              </style>

              <!-- 自定義樣式.end -->

3.3 洛麗塔

<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: url("https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab") 0% 0% / cover;
                  color: black;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: url("https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab") 0% 0% / cover;
                  color: black;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #6dd0f2
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #f59abe
                }
                .button {
                  background: url("https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab") 0% 0% / cover;
                  color: black;
                }
              </style>

              <!-- 自定義樣式.end -->

二次元另一個接口：

background: url("https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab") 0% 0% / cover;

4.漸變

4.1 雙色

粉藍漸變

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%);
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  rgb(109, 208, 242)
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%);
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  rgb(109, 208, 242)
                }
                .button {
                  background: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%);
                  color: white;
                }
              </style>
              <!-- 自定義樣式.end -->

4.2 多色

background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);
}

				<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #fddaff
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #fddaff
                }
                .button {
                  background: linear-gradient(102.7deg,#fddaff 8.2%,#dfadfc 19.6%,#adcdfc 36.8%,#adfcf4 73.2%,#caf8d0 90.9%);
                  color: white;
                }
              </style>
              <!-- 自定義樣式.end -->

多色2：

源碼：
（#BCA7A7 是顏色，50.8%是從左到右的所佔的顏色寬度比例）

				<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(102.7deg,#B2998E 15.2%,#DCC6C6 30.6%,#BCA7A7 50.8%,#E1E0E7 73.2%,#e2b9b3 90.9%);
                  color: black;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(102.7deg,#B2998E 15.2%,#DCC6C6 30.6%,#BCA7A7 50.8%,#E1E0E7 73.2%,#e2b9b3 90.9%);
                  color: black;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #B2998E
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #B2998E
                }
                .button {
                  background: linear-gradient(102.7deg,#B2998E 15.2%,#DCC6C6 30.6%,#BCA7A7 50.8%,#E1E0E7 73.2%,#e2b9b3 90.9%);
                  color: black;
                }
              </style>
              <!-- 自定義樣式.end -->

多色太難調了，失敗！！！如下，跳過

5. 動態漸變

以下取名的全是cungudafa亂編的，寫到這裏隨便命個名吧。

5.1 果凍色

效果：（會動畫變的）

配色：（太好看了，被自己美到！！！）

源碼：（animation: 15s ease 0s infinite normal none running gradientBG;）
15s是動畫速度、gradientBG是動畫效果（50%是顏色佔比寬度）

             <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(-45deg, #f1ac9d, #f06966, #dee2d1, #6abe83) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(-45deg, #f1ac9d, #f06966, #dee2d1, #6abe83) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #f1ac9d
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #dee2d1
                }
                .button {
                  background: linear-gradient(-45deg, #f1ac9d, #f06966, #dee2d1, #6abe83) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                @keyframes gradientBG {
                    0% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 0% 50%;
                    }
                }
              </style>
              <!-- 自定義樣式.end -->

5.2 巴啦啦小魔仙色

下面是配好了的顏色，挑選粘貼就好，私人訂製，帶走，不重樣！！
評論告訴我哪一個最好看，你pick了誰。

			<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(-45deg, #7F95D1, #FF82A9, #FFC0BE, #FFEBE7) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(-45deg, #7F95D1, #FF82A9, #FFC0BE, #FFEBE7) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #FFC0BE
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #FFEBE7
                }
                .button {
                  background: linear-gradient(-45deg, #7F95D1, #FF82A9, #FFC0BE, #FFEBE7) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                @keyframes gradientBG {
                    0% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 0% 50%;
                    }
                }
              </style>
              <!-- 自定義樣式.end -->

5.3 暖男色

效果：

配色：

源碼：

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: #3E4348;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: #3E4348;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #AEC5EB
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #F9DEC9
                }
                .button {
                  background: linear-gradient(-45deg, #3A405A, #AEC5EB, #F9DEC9, #E9AFA3) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: #3E4348;
                }
                @keyframes gradientBG {
                    0% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 0% 50%;
                    }
                }
              </style>
              <!-- 自定義樣式.end -->

5.4 程序員色

效果：

配色：

源碼：

              <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(-45deg, #DADCDB, #403E4E, #93A6B1, #9A9FB6) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(-45deg, #DADCDB, #403E4E, #93A6B1, #9A9FB6) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #9A9FB6
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #DADCDB
                }
                .button {
                  background: linear-gradient(-45deg, #DADCDB, #403E4E, #93A6B1, #9A9FB6) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                @keyframes gradientBG {
                    0% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 0% 50%;
                    }
                }
              </style>
              <!-- 自定義樣式.end -->

5.5 雪糕色

源碼：

 <!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(-45deg, #FFD972, #EFA7A7, #FCBCB8, #A7E8BD) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(-45deg, #FFD972, #EFA7A7, #FCBCB8, #A7E8BD) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  #FCBCB8
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  #A7E8BD
                }
                .button {
                  background: linear-gradient(-45deg, #FFD972, #EFA7A7, #FCBCB8, #A7E8BD) 0% 0% / 400% 400%;
                  animation: 15s ease 0s infinite normal none running gradientBG;
                  color: white;
                }
                @keyframes gradientBG {
                    0% {
                        background-position: 0% 50%;
                    }
                    50% {
                        background-position: 100% 50%;
                    }
                    100% {
                        background-position: 0% 50%;
                    }
                }
              </style>
              <!-- 自定義樣式.end -->

6. 漸變+圖片

唯美畫風，看這裏

			<!-- 自定義樣式 -->
              <style>
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
                  background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
                  color: white;
                }
                .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel:after {
                  border-right-color:  rgba(255, 165, 150, 0.5);
                }
                .cbp_tmtimeline>li .cbp_tmlabel {
                  background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
                  color: white;
                }
                .cbp_tmtimeline>li .cbp_tmlabel:after {
                  border-right-color:  rgba(0, 228, 255, 0.35);
                }
                .button {
                  background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
                  color: white;
                }

              </style>
              <!-- 自定義樣式.end -->

這裏圖片和顏色都可以修改，具體看總結。

三、總結

可以直接用配置好的顏色和背景圖片，當然你也可以更換。

更換背景圖片
url裏的就是圖片路徑，可以是網圖（jsd等），也可以填相對路徑，不會就百度或者用默認的。
```
url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png")
```

更換配色
#FFD972,rgba(0, 228, 255, 0.35)這個就是顏色，可以更改

background: linear-gradient(-45deg, #FFD972, #EFA7A7, #FCBCB8, #A7E8BD) 0% 0% / 400% 400%;


background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;

更換字體顏色（默認是白色，如果影響觀感，可以修改一下，原則是：深色背景改淺色字，淺色背景用深色字。）
```
color: white;
color: #ff1234;
color: rgba(0, 228, 255);
```

如果這些還不夠，請大佬自行調整以下：（F12就能找到）

-	參數
內邊距（px固定，rem相對）	padding
字體大小	font-size
邊框的圓滑度(默認是12px,數值越大越圓)	border-radius
透明度（0~1）	opacity

鏈接：

本文參考了小康的配色，感謝大佬造的輪子。
好奇我的配色是怎麼來的，這裏免費不要錢，根據你喜歡的50種顏色智能生成配色，看看吧：https://colordrop.io/
調色色盤：https://colorme.io/

Artitalk說說心情發佈頁面（個性定製）

一、前言

二、選妃

1.默認

2.簡約派

3.圖片至上

3.1 自定義壁紙

3.2 bing壁紙

3.3 洛麗塔

4.漸變

4.1 雙色

4.2 多色

5. 動態漸變

5.1 果凍色

5.2 巴啦啦小魔仙色

5.3 暖男色

5.4 程序員色

5.5 雪糕色

6. 漸變+圖片

三、總結

使用c#強大的表達式樹實現對象的深克隆之解決循環引用的問題

痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU啓動那些事（12.A）- uSDHC eMMC啓動時間(RT1170)

Hexo（sakura）neat壓縮導致首頁歸檔頁面分頁處錯位（完美解決）

【寶藏分享】自從用了這款PPT插件，小夥伴們都跪着看我

【Keras+TensorFlow+Yolo3】教你如何識別影視劇模型

【Keras+TensorFlow+Yolo3】一文掌握圖像標註、訓練、識別（tf2填坑）

【Yolo3】入門目標檢測實驗--Python+Opencv2+dnn

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結