hexo（matery）背景、滚动条优化+增加点击跳评论

一、前言

嗯，第三个主题了，对于魔改过sakura的“专业人士”来说，如果不动一下主题，我感觉浑身不舒服，哈哈哈，配色是粉红色，喜欢的话就改吧，或者ctrl+F,全文替换颜色。

全新配色，粉粉红：

主页取消了多色变换蒙版层，显示原图。

优化了纯色背景，增加了背景图片层。

添加背景图片后，对目录样式做了优化，透明白底板。

上图中，在右下角还增加了点击直接跳转评论，修改了滑动条样式。

二、个性美化

如果你觉得有参考意义，不妨看看我的优化笔记

1.重新配色

配色包括导航栏，底部栏，a标签等。原主题配色是绿色，我也不懂为什么，可我不想配置成黑白色调，就粉红一下吧。

1. 修改themes\Matery\source\css\matery.css样式
   快捷键ctrl+F查找到#4cbf30（浅绿色）和#0f9d58（深绿色）还有首页字体颜色，修改为你喜欢的颜色
   
   

2.取消首页渐变颜色动画

在themes\Matery\source\css\matery.css，ctrl+F快捷键查找.bg-cover:after，注释掉即可。

/* .bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} */

banner轮播图：原思路是在主题config配置

如果要修改图片轮播效果，在以下文件
themes\Matery\layout\_partial\bg-cover-content.ejs位置。

<% if (theme.banner.enable) { %>
<script>
    // 每天切换 banner 图.  Switch banner image every day.
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/' + new Date().getDay() + '.jpg') %>)');
</script>
<% } else { %>
<script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)');
</script>
<% } %>

可以修改为图片外部链接url：

<script>
    $('.bg-cover').css('background-image', 'url(https://gitee.com/cungudafa/source/raw/master/img/bg/hyo/1.png)');
</script>

或者壁纸接口：（每天一换）

<script>
    $('.bg-cover').css('background-image', 'url(https://bing.rthe.net/wallpaper)');
</script>

二次元接口1：

<script>
    $('.bg-cover').css('background-image', 'url(https://api.abcyun.co/api/others/randacgimage/token/5d8f31cf6a8ab)');
</script>

二次元接口2：

<script>
    $('.bg-cover').css('background-image', 'url(https://api.abcyun.co/api/others/randacgblogbg/token/5d8f31cf6a8ab)');
</script>

如果要多图轮播：主题配置文件夹下设置图片地址

修改随机获取一张图片：

$('.bg-cover').css('background-image', 'url(<%- theme.featureImages[Math.floor(Math.random() * theme.featureImages.length + 1)-1] %>)');

3.增加背景壁纸&优化目录栏

1. 在themes\Matery\source\css\matery.css，ctrl+F快捷键查找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://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
       background-attachment: fixed;
       margin: 0;
       color: #7F95D1;
   }
   

   更多壁纸样式参考：壁纸

2. 适配目录
   我发现目录样式竟然在：themes\Matery\layout\_partial\post-detail-toc.ejs，2333，在这里修改吧，修改内容如下：

       .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;
       }
   

4.增加点击跳转评论按钮

1. 新建文件themes\Matery\layout\_partial\back-comment.ejs,粘贴如下代码

   我这里评论是valine，直接填写的valine的id——href="#vcomments",如果是其他评论，对应修改即可。

   <!-- 直达评论 -->
   <div id="to_comment" class="comment-scroll">
       <a class="btn-floating btn-large waves-effect waves-light" href="#vcomments" title="直达评论">
           <i class="fas fa-comments"></i>
       </a>
   </div>
   

2. 在themes\Matery\layout\_partial\valine.ejs文末添加一条，引用第一步的内容；

   <%- partial('_partial/back-comment.ejs') %>
   

   则只在valine存在的页面才显示直达评论，防止首页其他地方也出现按钮。其实还可以优化为浮动出现，有一点麻烦，我这里没有设置。

3. 增加样式在themes\Matery\source\css\matery.css添加内容如下：

   /*直达评论按钮样式*/
   .comment-scroll {
       position: fixed;
       right: 15px;
       bottom: 135px;
       padding-top: 15px;
       margin-bottom: 0;
       z-index: 998;
   }
   
   .comment-scroll .btn-floating {
       background: linear-gradient(to bottom right, #FF9999 0%, #ff6666 100%);
       width: 48px;
       height: 48px;
   }
   
   .comment-scroll .btn-floating i {
       line-height: 48px;
       font-size: 1.8rem;
   }
   

   bottom: 135px;是距离底部的高度，看看你是否需要修改。

5.修改滑动条

在themes\Matery\source\css\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;
}

魔改笔记，如果你设置了不太美观那肯定是你的问题，有需要就留言（留下你的链接），不忙时会回答。