Butterfly美化

Butterfly美化 Hexo系列文章已经完成上传： 一、Hexo准备—Node.js、Vue 二、Hexo、主题、部署上线 三、Butterfly美化 四、Hexo之更换背景及透明度 五 基本上有所有的美化，还在持续更新ing，谨慎入坑… 主题配置文件修改 基础配置 最最最开始的，好不容易搭建了自己的个人博客，当然要写上自己的名字、签名…，证明身份。 20210206220128.png" alt="31">

2.引入方式

<img src="https://img-blog.csdnimg.cn/img_convert/fd237110c84e<em>5</em>bec954b<em>5</em>a21188dce36 {% endmermaid %} </code></pre> <p><strong>因为这个功能是用在Hexo<em>美化</em>中，在此博客效果不显示，具体可移步我的博客（最下方链接）</strong></p> <h4><a id="5Tabs_1433">5.Tabs

Demo1------默认方式

<code class="prism

Butterfly主题美化

添加星空背景 新建js文件 在butterfly/source/js/创建一个universe.js文件。 default表示默认使用butterfly自带的旋转盒子动画。 修改butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。 =partial('includes/loading/loading', {}, {cache: true}) 修改butterfly\source\css\var.styl。 补充说明 如果出现预加载动画无限施法的情况下，在butterfly/includes/loading-js.pug下添加如下代码以打断施法。 插入方法 插入方法很简单，基于butterfly主题的强大，内置了多种在线聊天工具，这里我选择的是crisp。几步就可以完成。

butterfly主题美化

butterly PC端展示（白天/夜晚） 移动端展示（白天/夜晚） 新增valine评论 twopeople展示 image.png 代码预留 .xpand(style='height:200px;') canvas.illo(width='800' height='800' style='max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;')

butterfly主题美化②

.5s infinite alternate .2666666667s}.key--black-5{animation:key-down-black .5s infinite alternate .3333333333s /XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN /LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x +wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH /QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt

butterfly版权美化教程

更新 -修复教程styl问题 2-7 -修复stylus显示问题 前言 不知道大家对于默认的butterfly版权怎么看？反正我是觉得很丑。 于是在洪哥的推荐下，借鉴了Icarus的版权，制作了butterfly版权美化教程。 原版butterfly版权。 教程 修改post-copyright.pug 打开ROOT\themes\butterfly\layout\includes\post文件夹，将下列代码覆盖post-copyright.pug文件 if diff模式. .post-copyright position: relative margin: 2rem 0 .5rem padding: .5rem .8rem background-color: $noticeOutdate-bg color: $noticeOutdate-color 自定义css 新建copyright.css，适配夜间模式和美化字体样式

butterfly文章页美化教程

安装教程 适用范围:butterfly3.3.0-3.5.1。更低版本以及更高有没有效果不能保证。 新建Styl文件 在ROOT\themes\butterfly\source\css\page目录新建topimg.styl page目录为_page，因为markdown的渲染问题会导致\无法显示 / 0.7rem 1.8rem -0.7rem [data-theme='dark'] & filter: brightness(0.8) 修改post.pug 然后前往ROOT\themes\butterfly

hexo-butterfly美化 (持续更新)

樱花飘落背景 cd theme/Butterfly/source/js wget https://yremp.live/wp-content/uploads/resource/js/sakura.js 把下载好的Js文件放在theme/Butterfly/source/js文件夹下 /Butterfly/layout/includes文件夹下找到head.pug文件，在最后引入 if theme.sakura.enable script(src="/js/sakura.js") 在主题的主配置文件加入Butterfly/_config.yml # 页面樱花飘落动效 sakura: enable: true 浏览器标题恶搞 在theme/Butterfly/source/js文件夹下添加crash_cheat.js文件 填入以下内容记得要修改你喜欢的标题 var OriginTitle = document.title; 添加标签云 使用命令进行安装插件 cnpm install hexo-tag-cloud --save 打开Butterfly/layout/includes/widget/card_tags.pug文件

【Butterfly美化】Hexo Butterfly主题使用阿里巴巴iconfont

Butterfly主题使用阿里巴巴iconfont⛄yooo~ 今天教大家美化Butterfly的字体图标⛄Butterfly主题支持 font-awesome v6 但是还是不够用怎么办呢？ ⛄可以使用阿里巴巴iconfont来拓展啦Butterfly版本：4.5.1选择图标iconfont图标库地址：iconfont-阿里巴巴矢量图标库找到自己需要的图标之后点击 添加入库图片图片将图标添加至项目中图片生成代码 并 复制代码图片图片Butterfly配置新建css文件在Butterfly主题文件夹下的 /source/css 文价夹中新建 font.css 吧复制的代码粘贴进去/* font.css */@font-face grayscale;}.icon-github:before { content: "\ea0b"; color: red; /* 图标颜色需要自行修改 */}/* 此处省略项目中其他字体代码*/引入css文件在Butterfly href="/css/font.css"> # 引入刚刚新建的css文件 bottom: # - <script src="xxxx"></script> # ...使用iconfont在Butterfly

butterfly主题的下载及美化

butterfly主题是我用的最多的一个主题 一，安装butterfly主题 1.在博客的根目录下执行以下命令 git clone -b master https://github.com /jerryc127/hexo-theme-butterfly.git themes/butterfly 2.下载 pug 以及 stylus 的渲染器，否则在项目运行时会报错： npm install 三，导航栏配置 1.打开主题下的_config.yml文件进行配置，我的目录：D:\bolg\themes\butterfly，命令执行在博客目录下就行 menu: 首页: / || fa fa-home || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart 接下来对导航栏进行详细配置 归档 这个页面自带无需进行配置 banner of page not setting, it will show the top_img default_top_img: /img/default_top_img.jpg #我设置的本地图片 5、

Butterfly学习笔记

Page Front-matter 用于页面配置 图片 Post Front-matter 用于文章页配置 图片 顶部图 图片 文章封面 cover: # 是否显示文章封面 index_enable: true aside_enable: true archives_enable: true # 封面显示的位置 # 三个值可配置 left , right , both position: both # 当没有设置cover时，默认的封面显示 default_

Hexo Butterfly主题配置

-- 当我们点击提交按钮就可以验证表单了 --> <input type="submit" value="提交"> </form> HTML5 新增的表单属性: 属性 值 说明 class$=data] { color: blue; } ---- 其他特性: 图标变模糊 – CSS3滤镜filter: 语法:filter: 函数(); --> 例如：filter: blur(5px 函数: calc() 此CSS函数让你在声明CSS属性值时执行一些计算, 括号里面可以使用 + - * / 来进行计算 语法: width: calc(100% - 80px); ---- HTML5新特性 :

Butterfly comment board beautify

参考方向 教程原贴 参考了火喵的主题中的侧栏评论样式 火喵日记 预览效果 46bad57ec37eeb49625d5165e55ea5b.png 写在最前 想法的起源 思路理清 事情是这样的，有一天， 新建[Blogroot]\themes\butterfly\source\css\custom\fixed-comment.css div#post-comment.fixedcomment { RemoveFixedComment(); 修改[Blogroot]\_config.butterfly.yml的inject配置项，添加引入的 js 和 css inject: head: 此处我是修改了原生 Butterfly 主题的直达评论按钮。直达评论 ×，评论直达√。 rightside.scroll_to_comment") onclick="FixedCommentBtn();") TO DO 编写侧栏评论区样式 编写侧栏评论区手机端样式 完善夜间模式匹配 新增twikoo魔改美化方案

PyQt5美化你的GUI界面

目录 1 圆点选择选项设置 2 选项按钮设置 3 关闭弹窗设置 4 关闭程序弹窗 5 设置关闭按钮 6 设置背景 7 下拉列表框设置 8 等待时显示进度条 ---- 1 圆点选择选项设置 效果展示 代码参考 /usr/bin/python # -*- coding:utf-8 -*- import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtWidgets import QtWidgets, QtCore from PyQt5.QtWidgets import * class qt_view(QWidget): def __init__(self 设置关闭按钮 效果展示 代码参考 import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtWidgets import * from PyQt5 import QtWidgets, QtCore from PyQt5.QtWidgets import * from PyQt5 import QtGui class gui_view(QWidget

hexo-butterfly-SEO优化

22 SEO优化说明：文章路径优化、百度/Google/必应等搜索引擎收录 2022-01-13 排查收录问题和数据分析 搜索引擎自定义域名调整：将原有github二级域名替换为自定义域名 hexo-butterfly-SEO

GalMenu

随机文章功能参考：HCLonely-Hexo博客美化 自己写了个镜像站的跳转动作。能够更好的利用Gitee工具人。预览效果 ? item3: 标签 link3: /tags/ icon3: item4: 分类 link4: /categories/ icon4: item5: 友人帐 link5: /link/ icon5: item6: 留言板 link6: /comments/ icon6: 进阶教程 添加浏览器动作 前进后退刷新返回顶部等动作直接修改配置项中的 ; icon3: item4: 返回顶部 link4: '#' # 必须用''包起来不然会被识别成注释符 icon4: 添加随机文章功能 这一功能照搬自HCLonely-Hexo博客美化 ，这是个全局功能，不局限于butterfly主题。

Hexo-Butterfly主题修改分享

前言 首先\themes\butterfly\source\css路径下创建一个css文件，比如ahzoo.css 然后在butterfly主题的配置文件（_config.yml）中引入css inject : head: - <link rel="stylesheet" href="/css/ahzoo.css"> 顶部菜单美化 打开创建的css文件（ahzoo.css），添加下面的代码 /* 页头 menus_item { display: inline; padding: 0 0 0 .7rem; margin: 3px 15px; padding: .2rem .6rem .5rem bg-orange">Tencent Cloud