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

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

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页