使用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:-
最后,如果你想切换页面时,音乐不会中断。把主题配置文件的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:-
博客根目录执行命令
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,查看是否成功上传博客。