Butterfly主题背景魔改

最新推荐文章于 2024-07-05 15:26:07 发布
最新推荐文章于 2024-07-05 15:26:07 发布
阅读量1.9k 收藏 7
点赞数 4
分类专栏： Butterfly主题 文章标签： hexo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44264850/article/details/112852177
版权
本文详细介绍了如何对Butterfly主题进行背景魔改，包括设置顶部图片透明、页脚透明、添加随机背景图以及页脚养鱼的实现方法。通过修改主题文件并引用外部工具库，可以为博客增添个性化的视觉效果。记得检查代码格式和资源引入是否正确，以确保预览效果。
摘要由CSDN通过智能技术生成

Butterfly主题背景魔改

顶部图片透明

在hexoblog\themes\butterfly\layout\includes\header\index.pug 中插入

if !is_post()
  - var bg_img = 'background-color:transparent;'

页脚透明

在 hexoblog\themes\butterfly\layout\includes\layout.pug 中插入

if !is_post()
  if (footerBg <
最低0.47元/天 解锁文章
Lincop
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Hexo博客之butterfly主题优雅更换背景
小康博客
06-21 1万+
选择如何修改 对于如何修改背景，我目前想到的方案有三种。 直接修改源文件 也就是直接修改主题目录下的index.sty文件，这种方式简单直接。唯一的不足就是每次更新主题需要重新修改。 引入一个新的css文件 这个是我比较推荐的做法，毕竟”魔改一时爽，一直魔改一直爽“。 使用js文件 最不推荐的做法，这种做法会在一定程度上延缓网页加载的时间，并且修改方式较为复杂。 至于为什么，请自行科普html是如何渲染。 如何选择 对于上述三种方法，我选择第二种，理由与不足如下： 方式比较优雅。 相比第一种
Hexo：Butterfly主题魔改之头部导航栏
weixin_42464282的博客
06-01 1769
Butterfly主题魔改之头部导航栏
Butterfly主题一图流背景及文章顶部图修改
最新发布
Gzzz的博客
07-05 553
将Butterfly主题改成一图流背景，并且将首页以外的顶部图移到标题下方显示。 设置网站背景，将主页顶部图和页脚背景改为透明。 默认背景亮度较低，可以改亮些。 另外，此方案是通过修改主题源文件的方式实现的，后续更新主题时，需重新修改。 也可以使用插件的方式实现，更新主题时，只要结构变化不大，无需任何操作即可继续使用。
学习 Butterfly主题美化 这一篇就够了
Laptoy的博客
04-21 3180
配置
【hexo】butterfly主题魔改之天气插件
m0_66648798的博客
08-24 1253
最近我使用hexo博客框架搭建了我的个人框架主题使用的是butterfly今天给大家带来的是导航栏天气插件效果如下：放大一点看看面板展开。
buttfly主题魔改
憨豆婆的博客
02-01 803
butterrfiy魔改参考。
Hexo+Butterfly主题设置背景透明度和字体
CodeRain的博客
11-19 1459
效果 新建css文件 引入css改变页面的样式，推荐在一个自己新建目录创建。有人选择在主题文件夹下找到css文件夹(\themes\Butterfly\source\css)，这样系统升级可能会把自己的代码覆盖掉。本人是在Blog\CodeRain\source\css新建一个transpancy.css文件(文件名可以自取)，修改最右边的数字改变透明度。 目录截图： transpancy....
Butterfly 主题魔改记录
云玩家
04-17 3739
欢迎到我的博客查看最新文章: https://blog.zplayer.cloud 记录下我对 Butterfly 主题的魔改, 一方面可供参考, 另一方面可以记录下自己的修改方便查找. post 文章侧边栏去掉滚动条 文章有标题时, 左边就会出现侧边栏, 而侧边栏的滚动条实在是不太美观, 于是隐藏掉. 进入 layout/includes/sidebar.pug 看到以下内容 if ...
hexo-blog-lionkk:魔改自butterfly主题，提供完整详细的文档，同时为了回馈开源，这不是生成后的网页文件，是您可以直接使用的源码，您只需要把博客相关信息换成您自己的就可以可以部署了，对于新手或者不懂编程的小伙伴来说，简直是福音！
03-23
给这个开源小项目取个名字吧，由于本人狮子座（单身，苦笑），而且微信公众号名字也是取名：小狮子前端Vue ，由于并非自己开发的主题，起名就不添加theme了，那就叫hexo-blog-lionkk 。<<<<<>>>>>
butterfly外观设置
04-08
【标题】"butterfly外观设置"涉及到的是一个关于个人博客主题定制的过程，特别是使用Butterfly主题的美化和优化。Butterfly是一款基于Jekyll的静态博客框架，它为用户提供了丰富的自定义选项，使得博客外观可以根据...
butterfly-qr-android
03-11
Butterfly-qr-android
hexo-theme-butterfly:He六方主题
04-06
六主题蝴蝶 演示： :thumbs_up: || :crossed_fingers: 文件： :open_book: 基于主题。 安装 GIT 如果您在中国大陆，则可以在下载 稳定分支[推荐]： git clone -b master ...
blog-butterfly:CC的蝴蝶主题部落格原始码
03-25
博客是个人或团队在线分享知识、经验和见解的重要平台，而`blog-butterfly`则是一个专为CC（可能指的是Creative Commons，一种开放版权协议）设计的蝴蝶主题部落格（Blog）源码。这个项目旨在提供一个美观且功能丰富...
butterfly-themes:蝴蝶主题存储库
04-28
蝴蝶主题 蝴蝶主题存储库 用法 （无礼的主题要求安装libsass python软件包） 将现有主题复制到目录中，当您键入[Alt] + [s]并选择它时，butterfly会告诉您。 您可以通过键入[Alt] + [Shift] + [s]刷新样式的更改 ...
Butterfly 主题魔改记录_has-jax(2)，2024网络安全进阶者的新篇章
m0_58397123的博客
04-05 709
在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算**
【源码级】butterfly魔改
weixin_46192593的博客
05-05 580
首页文章使用新标签页打开 官方没有提供解决方案，但是可以通过修改源码的方式进行修改。 找到主题下的layout/includes/mixins/post-ui.pug，在第16行、第19行添加target="_blank"即可实现。 标签、分类页使用新标签打开 官方没有提供解决方案，但是可以通过修改源码的方式进行修改。 找到主题下的layout/includes/mixins/...
Hexo之更换背景及透明度
MoYu's Blog
02-11 6855
Hexo之更换背景及透明度 引入方式 首先，介绍一下引入方式，外部导入css文件，不影响内部配置。 1.创建css文件 创建一个css文件移动到\themes\butterfly\source\css目录下。 2.引入 inject在\source\_data的butterfly.yml中： （如果没有，可以创建一个_data文件夹，将\themes\butterfly中的_config.yml复制过去，重命名为butterfly.yml） 按以下方式引入css文件。 <link rel="styl
一些在线图床工具
热门推荐
echo
06-29 1万+
以下排列按个人喜爱程度
hexo butterfly 动态背景
06-28
### 回答1： Hexo Butterfly 动态背景是一种在 Hexo 博客中使用的动态背景效果。它可以让博客页面的背景图像动态变化，增加页面的视觉效果和吸引力。这种效果可以通过在 Hexo 主题中添加相应的代码实现，具体的实现方法可以参考相关的教程和文档。 ### 回答2： Hexo Butterfly是一款非常流行的静态博客生成器，其特点是快速、简洁、易于使用。 给博客添加动态背景是很多Hexo Butterfly博客主人喜欢的方式，这不仅可以给博客增加一些视觉效果，还可以吸引更多的读者来访问我们的博客。 要在Hexo Butterfly博客中添加动态背景，首先需要选择一个合适的动态背景效果。这可以通过访问网上的一些网站或素材库来选择。一般来说，可以选择一些与博客主题相关的动态背景。例如，如果我们的博客主题是与大自然有关的，我们可以选择一些山谷、瀑布、森林等自然美景的动态背景。 在选择动态背景之后，我们需要安装和配置一些Hexo插件来实现该效果。 其中一个常用的插件是hexo-tag-bg，它可以帮助我们简单地添加动态背景到我们的博客中。 安装此插件后，我们需要在我们的博客中指定背景效果的类型并配置相关属性参数才能将其实现。 要使用hexo-tag-bg插件，需要在Hexo博客的configuration文件中添加以下代码： tag_bg: type: attributes: “type”是动态背景的类型，例如“particle”或“wave”。 “attributes”是一个属性对象，其中可以配置动态背景的属性，例如颜色、速度、大小和透明度等。 完成以上步骤后，我们就可以在我们的博客中看到动态背景的效果了。 但需要注意的是，我们应该只选择轻量级的动态背景效果，以保持我们的博客速度和性能不受影响，并避免影响读者的阅读体验。 总结而言，动态背景效果是Hexo Butterfly博客中增加交互和视觉效果的好方式，但我们需要选着合适的背景效果，并正确地配置插件参数来实现该效果。 ### 回答3： Hexo Butterfly 是一种可以为Hexo博客添加动态背景的主题。该主题的设计和风格都非常独特，它依托于 Particles.js 这一强大的 JavaScript 库，使得整个页面的背景能够呈现出自然流动，光影变幻的效果。Hexo Butterfly 主题让网页背景仿佛是一个“蝴蝶谷”，非常美丽动人。 Hexo Butterfly 主题的动态背景是由大量的点、线、形状和色彩组成，这些元素会以瞬息万变的方式，产生丰富的变化和交错。比如说，你在网页中描绘一个圆，在 Hexo Butterfly 主题中，这个圆会轻松随意地变成气泡、球体、椭圆或其他形状。无论是平面还是立体效果，都显得极其自然，让浏览者目不暇接。 另外，Hexo Butterfly 主题的背景动态效果也非常灵活，用户可以随意调整各种参数，来实现自己预期的效果。主题提供了多种参数设置，可以使背景元素的数量、速度、透明度、大小、颜色、形状等等发生变化，所呈现的效果因人而异。同时，页面的其它元素也可以与动态背景进行无缝的衔接，如导航栏、标题、文字等，一切展现出完美的视觉效果和流畅的用户体验。 总之，对于喜欢高赞美度的网站设计和用户体验的用户来说，Hexo Butterfly 主题的动态背景绝对是一大亮点，其独特美观的效果让人过目难忘，非常吸引人的眼球。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值