Butterfly美化 Hexo系列文章已经完成上传： 一、Hexo准备—Node.js、Vue 二、Hexo、主题、部署上线 三、Butterfly美化 四、Hexo之更换背景及透明度 五...导航栏修改 主目录下\source\_data–butterfly.yml: （如果没有这个文件夹，创建一个_data，把\themes\butterfly也就是主题文件夹下的_config.yml移动到..._data文件夹下，重命名为butterfly.yml，以后只需要修改这个文件。...分割线图标更换 本次修改基于Butterfly主题 3.0.0 ！ 将图标更换为“太空飞船”。...特效部分 1.鼠标点击特效 在\source\_data中butterfly.yml修改： ?
Page Front-matter 用于页面配置 图片 Post Front-matter 用于文章页配置 图片 顶部图 图片 文章封面 cove...
添加星空背景 新建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主题使用阿里巴巴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: # - # ...使用iconfont在Butterfly
布局定位属性：display / position / float / clear / visibility / overflow
b.css主要是做不同屏幕大小适配的，自己一点点调的，直接用就可以了。b.css文件夹下贴入如下代码：
butterly PC端展示（白天/夜晚） 📷 📷 移动端展示（白天/夜晚） 📷 📷 新增valine评论 📷 twopeople展示 image.png ...
新建[Blogroot]\themes\butterfly\source\css\custom\fixed-comment.css div#post-comment.fixedcomment {...] div#quit-board.fixedcomment { background: rgba(147, 146, 128, 0.3); } 新建[Blogroot]\themes\butterfly...RemoveFixedComment(); 修改[Blogroot]\_config.butterfly.yml的inject配置项，添加引入的 js 和 css inject: head:...此处我是修改了原生 Butterfly 主题的直达评论按钮。直达评论 ×，评论直达√。...修改[Blogroot]\themes\butterfly\layout\includes\rightside.pug，大约第 36 行的位置， if commentsJsLoad - a#to_comment
更新 -修复教程styl问题 2-7 -修复stylus显示问题 前言 不知道大家对于默认的butterfly版权怎么看？反正我是觉得很丑。...于是在洪哥的推荐下，借鉴了Icarus的版权，制作了butterfly版权美化教程。 原版butterfly版权。...教程 修改post-copyright.pug 打开ROOT\themes\butterfly\layout\includes\post文件夹，将下列代码覆盖post-copyright.pug文件 if...修改post.styl 打开ROOT\themes\butterfly\source\css_layout文件夹，修改post.styl文件 修改范围：.post-copyright至 .post-outdate-notice...post-copyright__title{ font-size:22px; } #post .post-copyright__notice{ font-size:15px; } 放入ROOT\themes\butterfly
22 SEO优化说明：文章路径优化、百度/Google/必应等搜索引擎收录 2022-01-13 排查收录问题和数据分析 搜索引擎自定义域名调整：将原有github二级域名替换为自定义域名 hexo-butterfly-SEO
hexo-butterfly-首页改造 1.Github贡献图表 githubchart-api gitcalendar 挂载容器 color色调参考 构建步骤 参考githubchart-api...npm install hexo-butterfly-swiper --save 主配置文件中引入轮播图插件 # hexo-butterfly-swiper # see https://akilar.top...: https://unpkg.zhimg.com/hexo-butterfly-swiper/lib/swiperstyle.css custom_js: https://unpkg.zhimg.com.../hexo-butterfly-swiper/lib/swiper_init.js 点击查看参数配置说明 参数 备选值/类型 释义 priority number 【可选】过滤器优先级，数值越小，执行越早...# 插件装载 npm i hexo-butterfly-article-double-row --save 配置主配置文件，引入butterfly_article_double_row配置 butterfly_article_double_row
本文基于Hexo+Butterfly主题，其他主题的修改可能会有所不同，请自行了解文件对应位置。 Butterfly主题已默认开启Pjax。...如果您使用的是npm安装，请将以下目录中\themes\butterfly\source\替换为\source\。...新建JavaScript文件 在博客根目录往下找到\themes\butterfly\source\js文件夹，新建sweetalert.js，文件内容请看这里，觉得复制麻烦的可以直接按Crtl+S进行保存...新建CSS文件 在博客根目录往下找到\themes\butterfly\source\css文件夹，新建sweetalert.css，文件内容请看这里。...自动弹窗 在博客根目录往下找到\themes\butterfly\source\js文件夹，新建welcome.js： function welcome(){ let welcome_text
更新记录 2021-01-01 基于hexo-butterfly的基本操作 hexo-butterfly-基础操作 1.hexo-butterfly样式美化 基本配置信息可参考“博客项目基本操作...”文档说明进行配置，此处针对一些个性化设置做简单配置说明 具体配置详情可参考官方文档说明：https://butterfly.js.org/posts/4aa8abbe/ 主题页面 Front-matter...css: /resources/img/tag-top-img/css.jpg javascript: /resources/img/tag-top-img/javascript.jpg linux...: /resources/img/tag-top-img/linux.jpg # 领域方向相关 前端: /resources/img/tag-top-img/front-end.jpg...可配置二维码，若没有配置二维码，可提供icon图片在link相应的链接（link不写默认为图片链接） 修改主題配置文件_config.butterfly.yml reward: enable:
hexo-butterfly-闲聊侧 留言板信封构建，参考akilar大佬的方案进行构建：信笺样式留言板 1.留言板信封 构建说明 组件方式引入 引入组件 npm install hexo-butterfly-envelope...--save 信笺配置 # 在主配置_config.yml或者主题配置_config.butterfly.yml文件中引入配置项 # envelope_comment # see https://akilar.top...LeanCloud appId appKey: '' // Your LeanCloud appKey }) 如果数据正常配置，则出现下述页面标志配置成功 从butterfly...构建步骤 引入hexo-butterfly-artitalk插件 npm install hexo-butterfly-artitalk 在主配置文件或者butterfly配置文件中引入配置.../layout/includes/bbTimeList.pug 2.配置主页themes/butterfly/layout/index.pug装载bbTimeList.pug 3.构建JS&CSS文件，
安装教程 适用范围: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
v=2.0"> 2、添加 打开您的博客所在文件夹，在blog\themes\butterfly\layout\includes\headers目录下的nav.pug文件中添加以下内容...he-plugin-simple"> 也可以写成这种形式 #he-plugin-simple 3、添加weather.js 打开您的博客所在文件夹，在blog\themes\butterfly...: "center", "left": "125", "top": "20", "key": "你的key" } } 4、Inject引入 在配置文件_config.butterfly
感谢糖果屋Akilar店长的帮助——Akilarの糖果屋 ---- ---- Hexo-Butterfly添加天气插件 效果如图所示： 就是JS插件的字体大小我不会调，稍微有一点瑕疵，不过影响不大
获取图标文件和 manifest 配置PWA 实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。...\pwanotice.pug,输入： 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,在文件底部添加以下内容，注意缩进。...butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}: 将之前生成的图标包移入相应的目录，例如我是/...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。
更新记录 2021-01-12 引入IM即时通讯、在线聊天 hexo-butterfly-在线聊天 从3.0开始，Butterfly主题内置了多种在綫聊天工具，此处选用daovoice实现在线聊天功能
安装 在你的Hexo根目录里面 git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly...应用主题 修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly theme: butterfly 安装插件 如果你没有 pug 以及 stylus 的渲染器，请下载安装：...在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。...如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。...Hexo会自动合併主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
