流浪舟
前言
去掉banner的顏色動畫
添加背景壁紙
修改滑動條
修改導航欄、頁腳及文章卡片標簽的顏色
修改目錄樣式
前言：
這是最后一篇關於hexo-matery博客美化的文章了，大部分都是前端的東西，所以沒啥好講的，對我來說后端更側重一點，這些天都沒怎么寫Java代碼了。離前一篇博客美化文章已過去一個星期了，因為我回了趟老家，住了一個星期，心里感覺很復雜。我本身技術並不是很強，每天都要實實在在的學習知識，家里條件不好，以后的路真的難走！加油吧！
一、去掉banner的顏色動畫
有的同學可能不喜歡banner的顏色遮罩，特別是在banner圖片的顏色和動畫顏色一樣時，表現不出圖片的美觀。去掉后放一張高清小姐姐大圖，博客訪問量一下迅速爆炸！聽我的准沒錯，那如何去掉這個煩人的彩色動畫呢？跟着我：在theme主題目錄下，找到matery.css文件,ctrl+F快捷鍵查找.bg-cover:after，注釋掉即可。
/* .bg-cover:after {
-webkit-animation: rainbow 60s infinite;
animation: rainbow 60s infinite;
} */
二、添加背景壁紙
同樣在matery.css文件下查找body樣式,修改如下：
body {
/* background-color: #eaeaea; */
background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) ) 0% 0% / cover, url("https://x.png"), url("https://x.jpg") 0px 0px;
background-attachment: fixed;
margin: 0;
color: #7F95D1;
}
如果不想要圖片，去掉即可，比如：
body {
cursor:url(/cursor.svg),auto;
background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) );
margin: 0;
color: #34495e;
}
三、修改滑動條（沒試過，好像沒用）
說是說修改滑動條，但是不需要太麻煩，在matery.css中添加樣式即可：
/* 滾動條 */
::-webkit-scrollbar-thumb {
background-color: #FF2A68;
background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
border-radius: 3em;
}
::-webkit-scrollbar-track {
background-color: #ffcacaff;
border-radius: 3em;
}
::-webkit-scrollbar {
width: 8px;
height: 15px;
}
四、修改導航欄、頁腳及文章卡片標簽的顏色
同樣的操作，在matery.css中找到.bg-color,修改即可：
.bg-color {
background-image:
linear-gradient(to right, #3f1b07 0%, #3f1b07 100%);/*咖啡色*/
}
五、修改目錄樣式（沒試過）
在themes\Matery\layout\_partial\post-detail-toc.ejs，在這里修改:
.toc-widget {
width: 345px;
padding-left: 20px;
background-color: rgb(255, 255, 255,0.7);
border-radius: 10px;
box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15), 0 5px 15px rgba(0, 0, 0, .07), 0 2px 5px -5px rgba(0, 0, 0, .1) !important;
}
公眾號：小碼之光
個人站點 https://index.maliaoblog.cn