Butterfly美化

Butterfly美化 Hexo系列文章已经完成上传： 一、Hexo准备—Node.js、Vue 二、Hexo、主题、部署上线 三、Butterfly美化 四、Hexo之更换背景及透明度 五 "23">

3.打字特效

在\source\_data中butterfly.yml</code

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主题美化②

l7{-webkit-animation-name:typing-f3-l7;animation-name:typing-f3-l7}path#f3-l8{-webkit-animation-name: typing-f3-l8;animation-name:typing-f3-l8}path#f3-l9{-webkit-animation-name:typing-f3-l9;animation-name ,transparent 3px);background-color:#3f3b43;background-position:0 0,4px 4px;background-size:10px 10px; (3px);background-color:#3f3b43}.key--black .key__bottom{width:20px;height:6px;transform:rotateX(-90deg +k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP

butterfly版权美化教程

更新 -修复教程styl问题 2-7 -修复stylus显示问题 前言 不知道大家对于默认的butterfly版权怎么看？反正我是觉得很丑。 于是在洪哥的推荐下，借鉴了Icarus的版权，制作了butterfly版权美化教程。 原版butterfly版权。 .5rem padding: .5rem .8rem border: 1px solid var(--light-grey) transition: box-shadow .3s .5rem padding: .5rem .8rem border: 1px solid var(--light-grey) transition: box-shadow .3s 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 如：cover: https://cdn-1.nesxc.com/cdn-3/yydd(1).webp 的写法会导致css结构破坏，如有这种建议更改为： cover: https://cdn-1.nesxc.com /cdn-3/yydd-1.webp以区分 修改原理 基本原理就是插入一个新的标签作为头图,再用css隐藏旧头图和定义新头图的样式 效果 修改之前： 修改之后： 鸣谢： 矩阵大佬 温馨提示：oops

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 hexo-renderer-pug hexo-renderer-stylus --save 3.修改项目根目录下的_config.yml文件（称为站点配置文件），开启主题 # Extensions source目录下生成对应的文件夹 2、修改：source/tags/index.md --- title: 标签 date: 2022-07-30 08:45:06 type: tags --- 3、 : /img/favicon.png 2、头像 avatar: img: /img/avatar.jpg #图片路径 effect: false #头像会一直转圈 3、主页封面图片 # The

Butterfly学习笔记

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

美化Matplotlib的3个小技巧

在本文中，我们将介绍3个可以用于定制Matplotlib图表的技巧： 减少x轴或y轴上的刻度数 添加一个辅助y轴 共享x轴的子图坐标对齐 本文中我们将使用折线图为例，但这些技巧也可以应用于其他类型的图。 fig, (ax1, ax2, ax3, ax4) = plt.subplots(nrows=2, ncols=2) 使用nrows和ncols参数自定义网格的大小。 以上就是3个Matplotlib可视化的小技巧，这些技巧肯定会帮助你创建信息更丰富、功能更强大的数据可视化图表。

Hexo Butterfly主题配置

文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-wor 其他属性CSS3： 具有class属性 并且属性值 必须是 data结尾的这些元素 */ section[class$=data] { color: blue; } ---- 其他特性: 图标变模糊 – CSS3滤镜

美化Matplotlib的3个小技巧

来源：DeepHub IMBA 本文约2300字，建议阅读5分钟 本文中，我们将介绍3个可以用于定制Matplotlib图表的技巧 Matplotlib是Python的数据可视化库的基础。 在本文中，我们将介绍3个可以用于定制Matplotlib图表的技巧： 减少x轴或y轴上的刻度数 添加一个辅助y轴 共享x轴的子图坐标对齐 本文中我们将使用折线图为例，但这些技巧也可以应用于其他类型的图。 fig, (ax1, ax2, ax3, ax4) = plt.subplots(nrows=2, ncols=2) 使用nrows和ncols参数自定义网格的大小。 以上就是3个Matplotlib可视化的小技巧，这些技巧肯定会帮助你创建信息更丰富、功能更强大的数据可视化图表。 编辑：王菁 校对：林亦霖

美化Matplotlib的3个小技巧

在本文中，我们将介绍3个可以用于定制Matplotlib图表的技巧: 减少x轴或y轴上的刻度数 添加一个辅助y轴 共享x轴的子图坐标对齐 本文中我们将使用折线图为例，但这些技巧也可以应用于其他类型的图。 fig, (ax1, ax2, ax3, ax4) = plt.subplots(nrows=2, ncols=2) 使用nrows和ncols参数自定义网格的大小。 以上就是3个Matplotlib可视化的小技巧，这些技巧肯定会帮助你创建信息更丰富、功能更强大的数据可视化图表。

Butterfly comment board beautify

新建[Blogroot]\themes\butterfly\source\css\custom\fixed-comment.css div#post-comment.fixedcomment { 100vh; overflow: scroll; z-index: 90; background: rgba(255,255,255,0.95); box-shadow:3px data-theme="dark"] div#post-comment.fixedcomment { background: rgba(22,22,22,0.95); box-shadow:3px 此处我是修改了原生 Butterfly 主题的直达评论按钮。直达评论 ×，评论直达√。 rightside.scroll_to_comment") onclick="FixedCommentBtn();") TO DO 编写侧栏评论区样式 编写侧栏评论区手机端样式 完善夜间模式匹配 新增twikoo魔改美化方案

hexo-butterfly-SEO优化

22 SEO优化说明：文章路径优化、百度/Google/必应等搜索引擎收录 2022-01-13 排查收录问题和数据分析 搜索引擎自定义域名调整：将原有github二级域名替换为自定义域名 hexo-butterfly-SEO 填充站点地图地址即可 2.自动推送 构建说明 <1>配置各个搜索引擎的站长平台秘钥 <2>引入hexo-submit-urls-to-search-engine插件，主配置文件_config.yml中引入配置 <3> bing_token:处填写0 <2>设置环境变量BAIDU_TOKEN，BING_TOKEN，值为已获取的token ​ 此处可构建Travis CI配置，自动部署hexo项目，使用Travis持续集成 <3> : 'url', type: 'URL_UPDATED', notifyTime: '2021-02-11T04:59:54.251941474Z' } } } <3> 如果是新站索引量0->1需要一定的时间，收录速度也收其他因素影响 推送记录查询 ​ 登录相应的站长平台，随后访问对应网域资源，查看统计数据统计 ​ 百度资源平台、必应站长工具、谷歌站长工具 3.

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），添加下面的代码 /* 页头 bg-orange">Tencent Cloud