Butterfly美化

Butterfly美化 Hexo系列文章已经完成上传： 一、Hexo准备—Node.js、Vue 二、Hexo、主题、部署上线 三、Butterfly美化 四、Hexo之更换背景及透明度 五 基本上有所有的美化，还在持续更新ing，谨慎入坑… 主题配置文件修改 基础配置 最最最开始的，好不容易搭建了自己的个人博客，当然要写上自己的名字、签名…，证明身份。 : true site_pv: true page_pv: true # 網頁運行時間 runtimeshow: enable: true publish_date: 10/11 : 50 "B" : 20 "C" : 10 "D" : 5 {% endmermaid %}

因为这个功能是用在Hexo美化中 -- endtab --> {% endtabs %}

因为这个功能是用在Hexo美化中，在此博客效果不显示，具体可移步我的博客（最下方链接）</strong

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

}.key:nth-of-type(10){animation:key-down-white .5s infinite alternate .6666666667s}.key:nth-of-type(11 alternate .6s}.key__front-10{animation:key-down-color .5s infinite alternate .6666666667s}.key__front-11 {left:260px}.key--black-8{left:320px}.key--black-9{left:350px}.key--black-10{left:380px}.key--black-11 alternate .6s}.key--black-10{animation:key-down-black .5s infinite alternate .6666666667s}.key--black-11

butterfly版权美化教程

更新 -修复教程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 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 fa fa-list: - about || /about/ || fa fa-sitemap - myself || /myself/ || fa fa-id-card - butterfly || https://github.com/jerryc127/hexo-theme-butterfly/ || fa fa-heart 接下来对导航栏进行详细配置 归档 这个页面自带无需进行配置

Windows11 美化+优化教程

回到咱们主题: Windows11美化+优化教程 注意，是Windows 11。禁止Windows 10仿Win11入内！ Dism++优化 美化易上头，一上头就把持不住。尽早跳出坑来，让其他人跳进去。嘻嘻~ 下载解压后，选择自己系统版本，打开对应的Dism++ EXE，尽自己所能优化，不会别动就行。

Windows 11和vscode终端美化

美化后的效果1.

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主题配置

布局定位属性：display / position / float / clear / visibility / overflow

Butterfly comment board beautify

新建[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 主题的直达评论按钮。直达评论 ×，评论直达√。 rightside.scroll_to_comment") onclick="FixedCommentBtn();") TO DO 编写侧栏评论区样式 编写侧栏评论区手机端样式 完善夜间模式匹配 新增twikoo魔改美化方案

hexo-butterfly-SEO优化

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

Win11及WSL2安装和终端美化

本文用到的文件： 链接：https://pan.baidu.com/s/1RZteNm-AoJoB8zH2Zs899g 提取码：wins 效果展示： 安装win11 以管理员身份运行 Windows11InstallationAssistant.exe 安装完之后还建议去设置-检查更新，然后安装更新 win11的右键相比原来有卡顿，可以通过下载 W11ClassicMenu.zip 并解压运行来修改右键为原来的样子 安装 WSL 和 Ubuntu -v查看本系统WSL情况，wsl --update升级WSL内核 如果C盘容量小，可以把子系统迁到其他盘：https://zhuanlan.zhihu.com/p/406917270 终端美化 并解压，然后全选运行，安装字体 打开 Windows Terminal Preview，使用Ctrl+Shift+,快捷键打开setting.json，然后在"defaults"处加入字体 下载安装美化终端包 可以通过Get-PoshThemes命令预览所有主题 点击终端的设置，进行界面、字体的设置 致谢： Windows 11 安装 WSL2-知乎 Windows 11终端美化配置-简书

【Butterfly主题】弹出欢迎弹窗

本文基于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

hexo-butterfly-首页改造

hexo-butterfly-首页改造 1.Github贡献图表 githubchart-api gitcalendar 挂载容器 color色调参考 构建步骤 ​ 参考githubchart-api npm install hexo-butterfly-swiper --save <2>主配置文件中引入轮播图插件 # 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 <2>配置主配置文件，引入butterfly_article_double_row配置 butterfly_article_double_row

hexo-butterfly-闲聊侧

hexo-butterfly-闲聊侧 ​ 留言板信封构建，参考akilar大佬的方案进行构建：信笺样式留言板 1.留言板信封 构建说明 组件方式引入 引入组件 npm install hexo-butterfly-envelope --save 信笺配置 # 在主配置_config.yml或者主题配置_config.butterfly.yml文件中引入配置项 # envelope_comment # see https://akilar.top 构建步骤 <1>引入hexo-butterfly-artitalk插件 npm install hexo-butterfly-artitalk <2>在主配置文件或者butterfly配置文件中引入配置 错误码: INVOKE_FUNCTION_FAILED 错误信息: Code: 1 ScfRequestId: fed46212-9509-11ec-8491-5254008b42b8 Error: Runtime.ImportModuleError 添加一条记录：字段为content、值任意以初始化记录） 错误码: INVOKE_FUNCTION_FAILED 错误信息: Code: -1 ScfRequestId: 597142b9-9516-11ec

hexo-butterfly-基础操作

更新记录 2021-01-01 基于hexo-butterfly的基本操作 hexo-butterfly-基础操作 1.hexo-butterfly样式美化 ​ 基本配置信息可参考“博客项目基本操作 class="gallery-group-main"> {% galleryGroup '壁紙' '收藏的一些壁紙' '/Gallery/wallpaper' https://i.loli.net/2019/11 Found' # 页面子标题 background: https://i.loli.net/2020/05/19/aKOcLiyPl2JQdFD.png # 页面背景图 配置完成，展示页面 基础美化 /resources/img/cover/cover09.jpg - /resources/img/cover/cover10.jpg - /resources/img/cover/cover11 % label text color %} text:文字 clolr:【可选】背景颜色，默认为default(default/blue/pink/red/purple/orange/green) <11