专栏首页小康的自留地Hexo博客之butterfly主题优化更换背景

Hexo博客之butterfly主题优化更换背景

选择如何修改

对于如何修改背景,我目前想到的方案有三种。

  1. 直接修改源文件 也就是直接修改主题目录下的index.sty文件,这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。
  2. 引入一个新的css文件 这个是我比较推荐的做法,毕竟”魔改一时爽,一直魔改一直爽“。
  3. 使用js文件 最不推荐的做法,这种做法会在一定程度上延缓网页加载的时间,并且修改方式较为复杂。 至于为什么,请自行科普html是如何渲染。

如何选择

对于上述三种方法,我选择第二种,理由与不足如下:

方式比较优雅。

相比第一种不会因为主题更新而再次修改

引入css文件在渲染时不会切换引擎

引入新的文件,会造成页面多一次的请求

覆盖方式可能会需要加!important

创建层叠样式表

这里以第二个方式,css文件建立的方式有两种。

博主的butterfly主题为:2.3.0

在任意位置创建一个css文件,例如background.css。(简单来说,就是创建一个txt文件,把名字改为background.css即可。注意扩展名)

  1. 打开这个css文件,开始编辑 butterfly主题的背景div的id为web_bg,因此我们只需要重新定义这个样式即可。 #web_bg{}
  2. 修改为图片 #web_bg { /* 背景图像的地址(url括号里) */ background: url(); /* 背景图像不重复 */ background-repeat: no-repeat; /* 背景图像大小 */ background-size: cover; }关于background更多用法:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background 关于background-repeat更多用法:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat 关于 background-size更多用法:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size
  3. 修改为渐变背景 例如蓝红色渐变 #web_bg { /* webkit内核 5.1 - 6.0 */ background: -webkit-linear-gradient(left, red, blue); /* Opera 11.1 - 12.0 */ background: -o-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */ background: -moz-linear-gradient(right, red, blue); /* 标准的语法 */ background: linear-gradient(to right, red, blue); }
  4. 纯色背景 纯色背景可以直接在配置文件修改,因此可以直接修改配置文件。

引入文件

引入文件的方式有两种:以相对路径的方式引入和以外链的方式引入。如何选择请各位博主自己斟酌。

以相对路径引入

  1. 将写好的css文件移动到\Butterfly\source\css\目录下。
  1. 然后修改配置文件的引入方式

以外链的方式引入

同样的可以将这个文件上传到cdn,如七牛云、又拍云、GitHub+Jsdeliver等。

只需要将引入地址写为你的文件外链地址即可。

例如我的jsd链接

修改文章页背景及透明度

此项修改主要是修改文章页背后的颜色。默认为白色不透明。

这里我个人建议使用rgba方式,前边的rgb也就是正常的rgb颜色。最后的a代表的是透明度。

.layout_post>#post {
    /* 以下代表白色透明度为0.3 */
    background: rgba(255,255,255,.3);
}
.layout_post>#post {
    background: rgba(255,255,255,.3);
}
.layout_post>#post {
    background: rgba(255,255,255,.5);
}
.layout_post>#post {
    background: rgba(255,255,255,0);
}

附录

这里主要给出一个写修改的参考样式。

1.博主同款渐变背景(参考本文图片)

#web_bg {
  background: -webkit-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -moz-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -o-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: -ms-linear-gradient(
    0deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
  background: linear-gradient(
    90deg,
    rgba(247, 149, 51, 0.1) 0,
    rgba(243, 112, 85, 0.1) 15%,
    rgba(239, 78, 123, 0.1) 30%,
    rgba(161, 102, 171, 0.1) 44%,
    rgba(80, 115, 184, 0.1) 58%,
    rgba(16, 152, 173, 0.1) 72%,
    rgba(7, 179, 155, 0.1) 86%,
    rgba(109, 186, 130, 0.1) 100%
  );
}

2.粉蓝色渐变

#web_bg {
  /* 图片可下载上传到自己的图床也可以删掉*/
  background-image: url("https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png"),
    -moz-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url("https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png"),
    -webkit-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url("https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png"),
    -ms-linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
  background-image: url("https://ae01.alicdn.com/kf/H5662031fbf344418aa2c8bf74c68826eV.png"),
    linear-gradient(45deg, #6dd0f2 15%, #f59abe 85%);
}

3.美美哒渐变

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

4.动态渐变

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
#web_bg {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

5.紫蓝色渐变

#web_bg {
    background: linear-gradient(to right bottom, rgb(0, 255, 240), rgb(92, 159, 247) 40%, rgb(211, 34, 255) 80%);
}

6.图片滤镜渐变

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

7.背景图 参考壁纸页。

渐变配色 https://webgradients.com/ https://www.grabient.com/ 更多(在线渐变配色的网站还有很多,可以自己去找) 或者自行扒取别人的配色,或者自己搭配都是可以的。

其他 更多骚操作都可以直接写在这个选择器下。

可能遇到的问题

  1. 背景不生效
    • 请确保你能成功引入这个css
    • 请尝试关闭js动态背景后再次尝试
    • 请确保你写的内容正确且符合css的语法规则
  2. 其他问题 请先确保自己拥有一定的前端基础(如果拥有,你是不会遇到问题的) 学会如何使用百度搜索引擎 如果以上两种方式还是无法解决你的问题,那么可以在下方留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hexo关于Butterfly的一些小修改

    注:大多css没有提供可以直接引用的链接,大家可以自行创建css,然后放到博客目录进行引用。

    Dreamy.TZK
  • 优雅解决LeanCloud流控问题

    最近好多人遇到了"因流控原因,通过定时任务唤醒体验版实例失败,建议升级至标准版云引擎实例避免休眠"。我也遇到了这种问题,太难受了。难道白嫖结束了,羊被薅死了?

    Dreamy.TZK
  • 三次握手与四次断开

    TCP是一种面向连接的单播协议,在发送数据前,通信双方必须在彼此间建立一条连接。所谓的“连接”,其实是客户端和服务器的内存里保存的一份关于对方的信息,如ip地址...

    Dreamy.TZK
  • 【Rust投稿】从零实现消息中间件(1)

    消息中间件在现代系统中非常关键,包括阿里云,腾讯云都有直接的消息中间件服务,也就是你不用自己搭建服务器,直接使用它提供的服务就可以了.那么我们今天就从零开始一步...

    MikeLoveRust
  • 免费好用的Diff和Merge工具大总结

    总结:比较下来:diffmerge和P4merge最好用,kdiff比较专业些,支持自动merge。

    2Simple
  • 通俗易懂讲解WebSocket

    什么是WebSocket WebSocket是一种网络协议,在OSI模型中,WebSocket协议与HTTP协议一样,都属于最顶层的应用层协议。有些朋友可能会有...

    黄泽杰
  • 深入分析 Java 方法反射的实现原理

    通过 Java 的反射机制,可以在运行期间调用对象的任何方法,如果大量使用这种方式进行调用,会有性能或内存隐患么?为了彻底了解方法的反射机制,只能从底层代码入手...

    CG国斌
  • 一文读懂WebSocket

    WebSocket是一种网络协议,在OSI模型中,WebSocket协议与HTTP协议一样,都属于最顶层的应用层协议。有些朋友可能会有疑问,既然已经有了HTTP...

    Java技术江湖
  • 正式启动丨2020腾讯犀牛鸟「云开发」校园技术布道师养成计划

    十八般武艺,非一时练就。腾讯犀牛鸟「云开发」校园技术布道师养成计划,由老鸟带你飞,不仅炼就全栈开发技能,更能习得技术布道技巧!60 天,从菜鸟技术布道师到出师,...

    腾讯云开发TCB
  • WebSocket协议入门介绍

    WebSocket是基于TCP的应用层协议,用于在C/S架构的应用中实现双向通信,关于WebSocket协议的详细规范和定义参见rfc6455。 需要特别注意...

    2Simple

扫码关注云+社区

领取腾讯云代金券