文章目录

一、前言
二、个性美化
- 1.重新配色
- 2.取消首页渐变颜色动画
- 3.增加背景壁纸&优化目录栏
- 4.增加点击跳转评论按钮
- 5.修改滑动条

一、前言

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

全新配色，粉粉红：

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

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

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

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

二、个性美化

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

1.重新配色

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

修改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.增加背景壁纸&优化目录栏

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

更多壁纸样式参考：壁纸

适配目录
我发现目录样式竟然在：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.增加点击跳转评论按钮

新建文件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>

在themes\Matery\layout\_partial\valine.ejs文末添加一条，引用第一步的内容；
```
<%- partial('_partial/back-comment.ejs') %>
```
则只在valine存在的页面才显示直达评论，防止首页其他地方也出现按钮。其实还可以优化为浮动出现，有一点麻烦，我这里没有设置。

增加样式在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;
}

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

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

Hexo优化(鼠标点击效果+评论系统+站点统计+hexo-admin-qiniu+markdown图片存储+live2d板娘）
欢迎访问我的博客文章目录欢迎访问[我的博客](http://blog.duanzy.xyz) 鼠标点击效果鼠标点击出现桃心鼠标点击出现爆炸烟花评论系统 DISQUS Facebook Com ...
基于Hexo+Matery的LuckyBlog开源搭建教程
前言之前在B站上发布了个人博客的视频,播放量也破千了,有网友私聊也想要搭建一个这样的博客.经过一段时间的准备,现将本人博客的源代码公布出来,大家只需要根据以下的步骤,即可快速搭建一个漂亮完善的博客. ...
unity 手机模糊效果_GUI背景模糊效果优化
欢迎关注"数天技术"!" 作者介绍:数字天空项目组客户端工程师 – 文立" 导语在游戏界面显示时,通常会对背景进行模糊,使显示界面更加清楚.此外,在处理景深( ...
hexo+matery个人主页操作总结
写博客在_post 文件夹下,新建&&.md 文件或 hexo new <title> 基本配置如下:title: 文章标题top: 是否把文章置顶img: 是否给文章定 ...
2021 hexo matery主题个性魔改
hexo matery主题个性修改一.雪花飘落先来看看效果: 找到你的博客目录,在主题在/themes/matery/layout/layout.ejs 中写下如下代码即可 [外链图片转存失败, ...
ecshop文章增加点击次数插件
2019独角兽企业重金招聘Python工程师标准>>> ecshop文章增加点击次数显示,一般的CMS都的文章系统都有点击次数,而ecshop的各个版本都没有这个功能,增加这个功能比 ...
android 增加触摸范围,android seekBar 增加点击和滑动范围
seekBar的的范围有限,有时候设计师要求高度为4dp,此时范围太小,很难滑动成功.因此,我们需要在不改变 UI 的前提下,增加点击和滑动范围. 直接上代码: public class MainAc ...
白鹭引擎增加点击事件实例
白鹭引擎描述:给图像,元素按钮增加点击事件 main.ts 中书写加入点击按钮: //这是加入了一个绑定按钮let onStart = new egret.Shape();onStart.gra ...
Creator 拓展展Button组件增加点击音效默缩放。点击间隔
扩展Creator Button组件 Creator 拓展展Button组件增加点击音效默缩放.点击间隔. 往往游戏的按钮都会加上音效.而大部分通用的音效每次都代码添加是一件很繁琐的工作. ...

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