添加星空背景 新建js文件 在butterfly/source/js/创建一个universe.js文件。...主题的_config.yml文件，找到配置文件对应的inject部分，插入，<link rel="stylesheet" href="/css...default表示默认使用<em>butterfly</em>自带的旋转盒子动画。 修改<em>butterfly</em>\source\css\_layout\loading.styl，复制以下代码替换全部内容。...spinner-box是<em>主题</em>原版的盒子加载动画 wizard是巫师施法加载动画 ironheart是钢铁侠核心加载动画 scarecrow是稻草人跳动加载动画 image为自定义添加静态图片或gif作为加载动画...插入方法 插入方法很简单，基于<em>butterfly</em><em>主题</em>的强大，内置了多种在线聊天工具，这里我选择的是crisp。几步就可以完成。
b.css主要是做不同屏幕大小适配的，自己一点点调的，直接用就可以了。b.css文件夹下贴入如下代码：
butterly PC端展示（白天/夜晚） 📷 📷 移动端展示（白天/夜晚） 📷 📷 新增valine评论 📷 twopeople展示 image.png ...
布局定位属性：display / position / float / clear / visibility / overflow
本文基于Hexo+Butterfly主题，其他主题的修改可能会有所不同，请自行了解文件对应位置。 Butterfly主题已默认开启Pjax。...此版基于博主之前所发布的关于NexT主题的修改，同时修复了部分问题。...配置 作者使用了Git进行主题安装。如果您使用的是npm安装，请将以下目录中\themes\butterfly\source\替换为\source\。...新建CSS文件 在博客根目录往下找到\themes\butterfly\source\css文件夹，新建sweetalert.css，文件内容请看这里。...保存完后的结构如下： 引入到主题中 打开主题配置文件，在inject配置项的head中进行注入： inject: head: # - <link rel="stylesheet" href
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...主题文件夹下的 _config.yml 修改配置# 省略其他代码inject: head: - # 引入刚刚新建的...css文件 bottom: # - # ...使用iconfont在Butterfly主题文件夹下的 _config.yml 修改配置使用格式
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
图标设计 在使用PWA之前，我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。...获取图标文件和 manifest 配置PWA 实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。...\pwanotice.pug,输入： 修改[Blogroot]\themes\butterfly\layout\includes\additional-js.pug,在文件底部添加以下内容，注意缩进。...打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。
butterfly主题添加备案信息 由于新版butterfly主题删除了ICP配置，所以我们无法直接通过改_config.yml文件来设置备案信息显示。
- excerpt:strip - gallery - permalink - photos - slug - tags - title 修改主题目录下的配置文件...themes/butterfly/_config.yml algolia_search: enable: true hits: per_page: 10 labels:
(请将%config%替换为你主题配置文件的位置,如果在根目录请无视) 找到 CDN 配置项 在 utils: /js/utils.js 的配置项下添加 wowjs、wowjs-init、animate.../bilibili-banner.pug 6.修改%brt\%config%\_config.butterfly.yml(请将%config%替换为你主题配置文件的位置,如果在根目录请无视) 找到 CDN...冬季样式 除了在主题配置文件通过配置 bilibili_banner: 的默认项，还可以在每个页面的 markdown 文件中通过 front-matter 控制单页配置。...提供了三个选项： false ： 关闭该页面的动态 banner 显示 autumn ： 开启该页面的动态 banner，并设置主题为秋季 winter ： 开启该页面的动态 banner，并设置主题为冬季...页面配置项优先级高于主题配置 悬停左上角时在网站顶部中间位置会出现描述 1.进入%brt%\themes\butterfly\layout\includes\header\修改名为nav.pug的文件
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...五，图片设置 图片可以用云图片链接或者放在本地文件夹位置：/themes/butterfly/source/img.以下代码在主题的配置文件中修改 1、网站图标 # Favicon（网站图标） favicon...修改主题配置文件_config.butterfly.yml： cover: index_enable: true # 是否展示文章封面 aside_enable: true archives_enable
前置说明 本片文章为本人想要换hexo的主题时所写。因此省略node和hexo的安装，直接在初始化博客开始 初始化博客 输入一下命令，并等待程序初始化完成。...安装主题 如果没有cheerio安装npm install cheerio@0.22.0 --save 在你的博客根目录里 git clone -b master https://github.com...启用主题 修改站点配置文件_config.yml，把主题改为Butterfly theme: Butterfly 如果你没有 pug 以及 stylus 的渲染器，请下载安装： npm install...推荐把主题默认的配置文件_config.yml复製到 Hexo 工作目录下的source/_data/butterfly.yml，如果source/_data的目录不存在那就创建一个。...注意，如果你创建了butterfly.yml, 它将会替换主题默认配置文件_config.yml里的配置项 (不是合併而是替换), 之后你就只需要通过git pull的方式就可以平滑地升级 theme-butterfly
一、主题安装 在hexo主题根目录下通过git bash输入以下命令安装Butterfly主题。...命令如下： git config --global http.sslVerify "false" 成功下载： 二、应用主题 修改 Hexo 根目录下的 _config.yml，把主题改为butterfly...三、安装插件 一般情况下在上一步结束后就可以直接在本地运行成功了，但是butterfly主题依赖pug 以及 stylus 的渲染器，如果不安装此插件直接运行网站。...四、主题升级 在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内复制到 _config.butterfly.yml 去。...Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。
前言 首先\themes\butterfly\source\css路径下创建一个css文件，比如ahzoo.css 然后在butterfly主题的配置文件（_config.yml）中引入css inject...主题修改汇总-2#引入Symbol图标部分 底部页脚美化 打开创建的css文件（ahzoo.css），添加下面的代码 /* 页脚 */ #footer { background: var(--card-bg...主题的配置文件（_config.yml）的页脚部分 footer: owner: enable: true since: 2020 custom_text: <div class...btn-bg); border-radius: 7px; box-shadow: 0 8px 12px -3px rgba(73,177,245,0.2); } 后记 博主当初修改的主题时...查看更多主题修改教程：Hexo-Butterfly主题修改汇总
Butterfly 支持6种代码高亮样式： darker pale night light ocean mac mac light 修改 主题配置文件 highlight_theme: light...不适用于隐藏后的代码块（ css 设置 display: none） 社交图标 (Social Settings) Butterfly支持 font-awesome v6 图标....作者: Jerry 连结: http://localhost:4000/posts/bd3c650b/#Paragraph 来源: Butterfly 着作权归作者所有。...主题会优先判断文章Markdown的Front-matter是否有配置，如有，则以Front-matter的配置为准。...否则，以主题配置文件中的配置为准 相关文章 当文章封面设置为 false 时，或者没有获取到封面配置，相关文章背景将会显示主题色。
点击查看更新记录 更新记录 2021-07-28:菜单栏解析 将子菜单从纵向变成横向 添加内联样式，根据子菜单数量调整偏移量 菜单栏居中 点击查看参考教程 参考方向 教程原贴 hexo-theme-butterfly-heo...张洪HEO-产品设计师的知识博客 洪哥的细节美化样式 zhheoblog.css 写在最前 洪哥的博客可以说算是基于butterfly主题里魔改的最舒服的一款了，从最基础的圆角到卡片UI排布，乃至侧栏底栏的...此处之所以是反向解析，是因为我想的是告诉各位洪哥的改动思路，而不是单纯叫你们去抄洪哥的css,本文的最终目的是让各位既知其然亦知其所以然，能够在掌握之后开发属于自己的个性化主题。...因此，并不是说学完本文，你的主题就能和洪哥的博客一样了。而是学完以后，你就会自己制作了。 行文顺序会一个组件一个组件的解析，更新时间可能会很长。还请各位有点耐心。...洪哥的细节美化样式都很贴心的写在了单独的css里，以供参考:zhheoblog.css，可以说，直接引用这个样式，对洪哥的主题模拟就完成了一大半。 下文会重点解析的也是各种dom结构的更改。
前言 博客主题已更新至3.8.4 本文主要用于记录及分享博主在使用butterfly主题时所使用的功能及涉及到的部分修改； 一些直接修改主题配置文件的功能，请移步Hexo-theme-butterfly...此文不涉及源码的修改，源码修改部分请参照Hexo-Butterfly主题修改记录-2 Front-matter markdown文件最上方以---分隔的区域 --- title: date: updated...，同时在主题配置文件中修改封面配置。...volantis 所以使用下面的功能时需要先下载该主题目录下/scripts/tags/中需要文件，将其复制至博客主题文件\scripts\tags路径下，否则会报错 按钮Btns 引入代码： <link...--save # 或者 cnpm i hexo-butterfly-article-double-row --save 在配置文件中添加如下代码： butterfly_article_double_row
第一步 将如下代码添入theme/butterfly/_config.yml里inject的head中如图所示 - 第二步 在theme/butterfly.../source/js下新建文件sun_moon.js 并添加theme/butterfly/_config.yml里inject的bottom里，如图所示 将如下代码填入sun_moon.js中 function...removeClass('fa-moon').addClass('fa-sun'), $('#modeicon').attr('xlink:href', '#icon-sun')) } 最后一步 在theme/butterfly.../source/css下新建文件test.css 并添加theme/butterfly/_config.yml里inject的head里，如图所示 将如下代码贴入test.css中 .Cuteen_DarkSky
页脚修改 添加跳动的心 首先在博客引入这个开源css \themes\butterfly\layout\includes\footer.pug，找到此段代码： if theme.footer.owner.since...\css\下新建文件夹，文件夹名随意 然后在主题文件\source\css\index.styl中添加如下代码 @import '文件夹名/*.css' Hexo-Butterfly添加磁吸效果分类 主题文档...轮播置顶样式 description: Hexo-Butterfly样式的修改 button: 详情 # .........效果图预览： 引入Symbol图标 首先引入fonticon图标库的js链接，引入方式可参考Hexo-Butterfly主题修改记录【引入第三方图标库】部分 菜单图标 butterfly\layout...主题的分类磁贴 2.0 版 Swiper Bar Hexo的Butterfly下如何隐藏部分文章不在首页显示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
