hexobutterfly魔改记录yyyz

使用hexo-butterfly框架搭建个人博客

这里记录一下我自己搭建(魔改/照搬他人)个人博客的步骤,日后查找起来也方便。

这里直接npm安装配置拿来用了。这里转载一下安装方法:

博客根目录执行

npminstallhexo-butterfly-envelope--save在站点配置文件或者主题配置文件添加配置项(对,两者任一均可。但不要都写)

1、首先寻找喜欢的字体,有些字体很好看并且是免费非商用的,我们可以拿来用。

2、将需要使用的字体文件放入博客目录下,我这里是放在blog/source/butterfly/css下,方便css文件引入。

3、如有有css文件,就在最下面继续写;如果没有,则新建一个css文件,文件名任取

/*页脚透明*/#footer{background:transparent!important;}/*头图透明*/#page-header{background:transparent!important;}/*top-img黑色透明玻璃效果移除,不建议加,除非你执着于完全一图流或者背景图对比色明显*/#page-header.post-bg:before{background-color:transparent!important;}/*夜间模式伪类遮罩层透明*/[data-theme="dark"]#footer::before{background:transparent!important;}[data-theme="dark"]#page-header::before{background:transparent!important;}由于前面使用了小康博客的css,页脚的模糊毛玻璃效果没去掉,在页面F12审查元素之后发现是#footer,#footer:before这个选择器有问题,修改如下:

#footer,#footer:before{background:transparent!important}这样页脚就透明了。

博客根目录安装:

npminstall--savehexo-tag-aplayer由于需要全局都插入aplayer和meting资源,为了防止插入重复的资源,需要把asset_inject设为false

在hexo的配置文件中

aplayer:meting:trueasset_inject:false在主题配置文件中,enable设为true和per_page设为true

#Injectthecssandscript(aplayer/meting)aplayerInject:enable:trueper_page:true然后把代码插入到页脚中

inject:head:bottom:-

运行Hexo就可以看到网页左下角出现了Aplayer

最后,如果你想切换页面时,音乐不会中断。把主题配置文件的pjax设为true即可。

参数解释:

参考Akilar大佬的修改方案。

原版的算法生成0的几率很小,所以我把生成随机数的算法改成了Math.floor

首先必须设置网站背景图,在主题配置中找到并且配置。我这里是配置成了'#efefef'

我这里在blog/source/butterfly/js下新建了rdmbkg.js文件

//随机背景图片数组,图片可以换成图床链接,注意最后一条后面不要有逗号varbackimg=["url(/img/bg1.JPG)","url(/img/bg2.jpg)","url(/img/bg3.jpg)","url(/img/bg4.jpg)"];//获取背景图片总数,生成随机数varbgindex=Math.floor(Math.random()*(backimg.length));//重设背景图片document.getElementById("web_bg").style.backgroundImage=backimg[bgindex];//随机banner数组,图片可以换成图床链接,注意最后一条后面不要有逗号varbannerimg=["url(/img/bg1.JPG)","url(/img/bg2.jpg)","url(/img/bg3.jpg)","url(/img/bg4.jpg)"];//获取banner图片总数,生成随机数varbannerindex=Math.ceil(Math.random()*(bannerimg.length-1));//重设banner图片document.getElementById("page-header").style.backgroundImage=bannerimg[bannerindex];最后在主题配置文件中引入js

inject:head:bottom:-最后在主题配置文件中引入js

博客根目录执行命令

npminstallhexo-butterfly-clock--save在hexo配置,或者主题配置中任选一个添加如下配置信息即可。二选一,不要都添加。

最开始使用的是utterances,现在改为Twikoo

这里补充几点:

操作步骤如下:

找到你的twikoogithub仓库,clone到本地,进入api/,执行以下命令:

pipinstallpipenvpipenvinstallrequests然后在该目录创建一个python.py文件,内容如下:

API参数:

完整的url如下所示:

测试一下你的访问路径是否有效,如果能收到消息就说明成功。

在twikoo后台管理WECOM_API_URL中添加你拼接的url即可。

注意msg后面不要有参数:

根目录输入命令安装

npminstallhexo-generator-search--save然后在hexo的配置文件中添加

search:path:search.xmlfield:postcontent:truetemplate:在主题配置文件中打开本地搜索

在[Blogroot]\_config.butterfly.yml的footer配置项中添加徽标,注意事先压缩一下,使他们只留一行。为了不至于太过紧凑,设置一下行内间隔属性margin-inline。

在站点配置文件中修改:

网站地图是什么?

网站地图实际上就像是一个站点的导航文件。网站地图的重要性:

使用方法:

hexo根目录下安装:

npminstallhexo-generator-seo-friendly-sitemap--save在Hexo站点配置文件添加:

sitemap:path:sitemap.xmltag:falsecategory:false参数解释path索引地图的路径,保持默认就好tagfalse:标签页不添加到网站地图中(推荐)categoryfalse:分类页不添加到网站地图中(推荐)设置之后,网站地图就生成完毕了。

以我的站点为例,

百度:

必应:

谷歌:

关于谷歌,有能力的同学可以尝试一下。

首先在本地hexo根目录下安装:

假设你已经阅读了官方文档,并且获得了token。获取token之后,Hexo站点配置文件添加:

配置完成。

接下来只需要hexoclean&&hexogenerate&&hexodeploy即可。

如果推送成功,你会看到如下消息:

复制生成的内容,新建一个robots.txt将内容粘贴进去,然后将它上传至网站根目录下。

hexo博客根目录安装:

npmihexo-filter-nofollow--save然后在配置文件添加:

首先,要保证使用git安装了butterfly主题而不是npm安装,因为通过npm安装并不会在themes里生成主题文件夹,而是在node_modules里生成。

复制这个token备用,token只会显示这一次,如果忘记需要重新生成。

我们需要创建一个用来存放Hexo博客源码的私有仓库,由于仓库会保存刚刚生成的token,如果泄露会导致安全问题,因此选择闭源。用[SourceRepo]表示。

这个仓库可以公开,也可以私有。用[GithubBlogRepo]表示。

打开站点配置文件博客根目录/_config.yml,找到deploy配置项,使用之前生成的token和github仓库URL来组装地址。

博客根目录下,添加.gitignore文件:

.DS_StoreThumbs.dbdb.json*.lognode_modules/public/.deploy*/.deploy_git*/.ideathemes/butterfly/.git在博客根目录下启动终端,使用git指令重设仓库地址。

gitremotermorigin#删除原有仓库链接gitremoteaddorigingit@github.com:Github用户名/[SourceRepo].git#[SourceRepo]为新的存放源码的github私有仓库gitadd.gitcommit-m"githubactionupdate"gitpushoriginmaster前往源码仓库查看,如果你发现theme/butterfly文件打不开并且有一个箭头,是由于我们clone安装的butterfly主题,这个文件夹里面有.git隐藏文件,github就将他视为一个子系统模块了。

解决办法就是:

然后重新add、commit、push即可。

打开GIthub存放源码的私有仓库,找到action,查看是否成功上传博客。

THE END
1.免费可商用字体包下载免费可商用字体包下载 小编把一些最常用字体按品牌和用途打包提供下载,为大家节省时间,快速下载并安装到合适字体库,譬如ps字体包、cad字体包、word字体包、方正字库、魔兽字体、懒人字体、篆书字体包等。 一、Mac系统自带字体 Monaco:专为编程和代码编辑设计的等宽字体,以其简洁明了的无衬线设计风格、高可读性和清晰的https://www.jianshu.com/p/cd3e3e994658
2.手写中文字体可商用免费下载10款在数字时代,手写字体因其独特的人文气息和个性化特征,越来越受到设计师和内容创作者的青睐。以下是10款可商用的免费手写中文字体,它们不仅美观,而且完全免费,适合用于各种设计项目和内容创作,以增强视觉效果和个性化表达。 1. 清松手写体 清松手写体以其流畅的线条和自然的风格,适合用于品牌标识、邀请函和个人博客等场https://www.vfxcool.com/40049.html
3.可以考虑强调第一卡盟排行榜这一权威性以及qq超级会员低价购买在数字化时代,QQ作为一款国民级的社交软件,其超级会员服务为用户提供了诸多便利与特权,官方渠道购买超级会员的费用对于部分用户来说可能是一笔不小的开销,寻找一个可靠且价格低廉的购买平台成为了许多用户的需求,本文将详细介绍当前市场上备受瞩目的第一卡盟排行榜中的QQ超级会员低价购买平台,帮助您做出明智的选择。 http://hushidaojia.cn/post/1995.html
4.提升阅读体验最佳免费手机汉字字体汇总在移动互联网的时代,智能手机已经成为我们日常生活中不可或缺的一部分。随着屏幕尺寸的不断增加,我们越来越倾向于在手机上阅读书籍、新闻、文章等内容。而选择合适的字体对于提升阅读体验至关重要。本文将为大家推荐一些最佳的免费手机汉字字体,以及如何进行免费下载。 https://www.paimingb.com/wen-zi/573045.html
5.为什么能看VIP的电视软件越来越受欢迎综上所述,能看VIP的电视软件之所以越来越受欢迎,主要是因为它们提供了优质内容的独家播放、无广告打扰的观影体验、丰富的个性化推荐、多屏互动的观影方式以及便捷的付费方式等多种优势。这些优势使得用户能够更加方便地观看自己感兴趣的内容,享受更好的观影体验。随着科技的不断进步和用户需求的不断变化,相信这类VIP电视http://m.zsbxxzx.com/aefvsbr/32034.html
6.qq免费的个性名片有哪些(中免费的个性名片有哪些)设置免费名片的步骤如下1 打开手机并登录账号2 点击顶部的头像进入个人资料页面3 在个人资料页面顶部,点击“我的个性装扮”选项4 进入个性装扮页面后,找到并点击“名片”选项5 在名片页面,可以看到多种名片类型,选择标有“免费”字样的名片6 选中免费名片后,点击名片底部;免费字体是固定的四个,分别是默认字体,腾讯http://wap.sysy3131.com/post/55239.html
7.男生QQ昵称简短好听的创意指南打造独一无二的网络身份简介男生QQ昵称简短好听的创意指南:打造独一无二的网络身份 选择合适的字体和颜色 在设计男生QQ昵称时,字体和颜色的选择至关重要。可以考虑使用简洁、现代感十足的字体,如Arial、Helvetica等,这些字体既能展现出年轻人的活力,也能让昵称看起来更加专业。同时,色彩也是一个关键因素,可以选择一些鲜明且不易被忽视的颜色https://www.uggheoazj.cn/xiong-di-wang-ming/927653.html
8.2021年最新,QQ永久免费个性名片,打造独一无二的社交形象!QQ永久免费个性名片 展现独特魅力,无需付费 1、QQ个性名片概述 - 定义及作用 - 发展历程 - 用户群体分析 2、获取免费个性名片方法 - 手机QQ操作步骤 - 电脑端操作步骤 - 其他途径获取免费名片 3、常见免费个性名片类型 - 卡通动漫类 - 风景建筑类 - 插画艺术类 4、使用免费个性名片注意事项 - 更新与维护 -http://m.tk.tuokeb2b.com/post/11530.html
9.2024年QQ免费字体大放送2024年QQ免费字体来啦!无论你是日常聊天还是朋友圈分享,这些精选字体都能让你的文字更加出彩哦!? 中英文字体、书法字体、可爱字体,应有尽有,满足你的各种需求。无论是中英文的混搭,还是书法风格的独特展现,这些字体都能帮你轻松搞定! 适用PS、AI、CDR、Procreate等软件,无论你是设计师还是普通https://mbd.baidu.com/newspage/data/dtlandingsuper?nid=dt_4525044932360318229
10.qq会员字体免费qq会员字体下载手机qq会员字体设置免费无会员设置svip会员字体软件apk是一款免费设置qq微信等聊天会员字体apk下载,该软件可以亮钻,修改免费会员字体,还有各种免费修改会员气泡,可以免费使用各种.. 立即下载 安卓版 下载 免费无会员设置svip会员字体软件apk 安卓最新版 6.4M 18-01-16 编辑推荐:免费无会员设置svip会员字体软件apk是一款免费设置qq微信等https://cr173.com/k/qqhuiyuanziti/
11.qqsvip字体有哪些演示品牌型号:华为p40pro,iPhone12Pro;系统:emui10.1,ios14;软件:QQ8.5.5。https://edu.iask.sina.com.cn/jy/2vhEmbYpQxL.html
12.QQ汉仪蝶语体怎么设置永久汉仪字体分类发现字体9个字体 简介: QQ汉仪蝶语体怎么设置永久 MDC-Uptown Soft Edge 语言:英文 下载 Buernooutline 语言:英文 下载 KosherCondensed Normal 语言:英文 下载 najwa saidistudio 语言:英文 下载 Bathuk Anget 语言:法语(加拿大) 下载 Takor-Bold 语言:英文 下载 Fuzzy 4 语言:英文 下载 BenpenOne 语言http://www.qiuziti.com/fontlist2?id=1037387
13.qq漏洞刷会员2016qq漏洞刷svip会员下载v1.0《qq漏洞刷会员》是一款帮助大家刷QQ会员软件,大家可以根据腾讯的超级会员充值漏洞来成功免费得到QQsvip会员,刷的会员最短可以持续3个月。运气好的话一年没有问题! 软件介绍 QQ破解SVIP超级会员补丁是一款可以帮助非超级用户实现超级会员会员部分功能的软件,使用这款软件可以帮助用户在本地点亮SVIP标志,具有去广告、使用http://m.962.net/y/116239
14.→字体大师无会员设置svip字体软件下载v1.4.1安卓版svip的字体给大家,随意设置吧。 应用截图 应用介绍 无会员设置svip字体软件下载,这是无会员就可以设置超级会员字体的软件,QQ中的所有字体都可以免费使用,是一个不错的软件哦。快来下载看看。 无会员设置svip字体 下载软件,点击想刷的业务。 自定义刷钻系统,可编辑9条短信进行同秒发送。 http://qqtn.com/sj/302565.html
15.qq里面的svip企鹅图怎么改qq中有哪些不用续费就可以用的svip字体? QQ中免费的字体非常少,有这三种“腾讯标准体、汉仪蝶语体、方正硬笔行书”限免字体在一直限免,但需要通过搜索才能够找到, 永久svip的网址-全网稳定的 图图业务网,全天秒单的专业QQ业务 永久svip的网址 图图QQ业务网,低价永久svip的网址QQ业务网,提供更低价优质的Q会、超https://wenda.so.com/q/1685151894211265
16.站酷快乐体商用免费ttf字体免费下载免费资源站酷快乐体-商用免费ttf字体免费下载 资源下载 本地下载 资源仅供学习研究,不保证100%完美以及不提供技术支持,虚拟资源可复制,不支持任何理由退款,建议查看付费下载说明以后再下载。 站酷快乐体-商用免费ttf字体免费下载 小易 7月13日更新 关注私信 https://www.yizhanzzw.com/15346.html
17.qq超级会员SVIP9正式上线十万成长值直升SVIP9qq超级会员SVIP9正式上线 十万成长值直升SVIP9成长值达到了就可以直升svip9 需要10万成长值QQSVIP9特权含5个2000人群 专属字体等有十万成长值的朋友们快去晋级吧http://www.qqzywang.com/news/62937.html
18.字体下载,字体大全,免费字体下载,在线字体字客网参与字客网SVIP活动抽奖 新浪微博 Facebook Twitter Google+ vk.com 百度网盘 字客网官方淘宝网店 字客网粉丝2群 字客网粉丝3群 字客网粉丝4群 字客网粉丝5群 网站导航 频道 字体 字体家族 字体设计师 字体公司 样张 资讯 工具 语言 简体中文 English 字体工具 字体识别 字体格式转换器 字体子集生成器https://www.fontke.com/?key=%CD%F5%BE%C5%B4%EF&category_path=01.43.00.00.00.00&att=s8589934592%3A8589935014
19.字体下载GOING建站资源免费下载-酷客帮|KUKEBANG.CN今日友情推荐优质资源 PPT模板 游戏前端个人简历模板 2020-06-17 简单易用 大气欧美高山自然风景PPT模板 2020-07-29 猜你在找 spa 分享 字体下载 1. 本站付费资源来源于网络,如有侵权请邮件联系站长!480700525@qq.com 2. 分享目的仅供大家学习和交流,您必须在下载后24https://www.kukebang.cn/ztxzgoing
20.长安汽车字体矢量素材长安汽车LOGO字体矢量图CHANGAN长安汽车矢量『宜图矢量素材网』?长安汽车字体矢量素材长安汽车LOGO字体矢量图CHANGAN长安汽车矢量素材EPS素材 1图币 普通用户赞助价格 :1图币 赞助SVIP会员赞助价格 :0图币 终身赞助SVIP赞助价格 :免费 有效期永久 已下载36 最近更新2023年09月20日 QQ咨询http://www.epspic.com/8843.html
21.FinalShellv4.3.10云端同步,免费海外服务器远程桌面加速,ssh加速,本地化命令输入框,支持自动补全,命令历史,自定义命令参数等。 主要特性: 1.多平台支持Windows、macOS、Linux; 2.多标签,批量服务器管理; 3.支持登录ssh和Windows远程桌面; 4.漂亮的平滑字体显示,内置100多个配色方案; https://www.296o.com/1268.html
22.ArtText4forMacv4.3.1艺术字体制作软件支持中文字体Art Text 4 for Mac 是一款图形设计软件,已针对创建文本效果和基于文本样式的图形进行了调整。该应用程序包含多种文本设计预设和效果,可帮助您创建视觉增强的照片标题,徽标,新闻通讯和传单标题,演示文稿甚至电影标题。 创建3D 文本 独特的 3D 引擎。 在“美术文字”中输入文字,然后观看它可以立即根据用户选择的字体创https://macoshome.com/app/graphicesdesign/11403.html
23.教程中国科技资讯网一、qqsvip有什么用(一)qqsvipqq超级会员,简称SVIP,是腾讯在QQ会员新升级的基础上推出的一项服务,旨在满足用户在QQ世界旅行时更具个性和汇世网 2023-01-05 08:58小米4a路由器怎么设置?小米4a路由器设置教程 小米AIoT路由器AX3600采用外置7天线设计,其中包括1支IoT设备天线、2支2 4GHz天线、4支5GHz天线,确保信http://edu.kejixinwen.net/
24.#PS教程吧#英文字体推荐无衬线体(15款来自PS教程吧#PS教程吧# 英文字体推荐——无衬线体(15款)来源:站酷 作者:艺海拾贝Design https://weibo.com/1868646494/Kebj00Gai