更新记录
- 将gulp内容从合集迁移至独立文章
- 新增字体压缩相关内容
更新记录
参考方向 | 教程原贴 |
---|---|
gulp官方文档,用于查找API用法及查看已收录的gulp插件 | gulp.js中文文档 |
参考了Gulp压缩的基本方案 | Butterfly主题文档-Gulp压缩 |
参考了gulp的优化方案 | 卓越科技-如何优化博客 |
参考了小魏找到的字体压缩方案 | 小魏-fontmin&&hexo 字体压缩 |
gulp-fontmin的使用文档 | gulp-fontmin |
gulp能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括css、js、html乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十KB,效果远远不如imagine、tinypng等压缩方式,所以此处不再写使用gulp压缩图片的内容)。
安装Gulp插件:在博客根目录[Blogroot]
打开终端,输入:
npm install --global gulp-cli #全局安装gulp指令集 |
安装各个下属插件以实现对各类静态资源的压缩。
压缩HTML:
npm install gulp-htmlclean --save-dev |
压缩CSS:
npm install gulp-clean-css --save-dev |
压缩JS
Butterfly主题文档提供了两种压缩JS的插件方案。两者的差别在于terser是ES6+的JavaScript解析器,而gulp-babel是一个JavaScript转换编译器,可以把ES6转换成ES5,两种方案都有效。但使用上各有利弊。考虑到目前的浏览器市场占有率,更加建议各位使用terser来压缩js。
方案一:为了适配绝大多数浏览器(IE:就是老子),可以将ES6语法降为ES5语法。则使用gulp-babel,这一方案在压缩部分使用了ES6的js以后,由于强制降级导致变量生命周期的变动,会引发一系列迷之bug,需要手动再去添加屏蔽项以选择不压缩对应的js。
npm install gulp-uglify --save-dev |
方案二(更加推荐):gulp-terser只会直接压缩js代码,所以不存在因为语法变动导致的错误 。事实上,当我们使用jsdelivr
的CDN
服务时,只需要在css
或者js
的后缀前添加.min
,例如example.js->example.min.js
,JsDelivr
就会自动使用terser
帮我们压缩好代码。
npm install gulp-terser --save-dev |
字体文件作为最让人又爱又恨的静态资源,为了保证站点文字匹配,全字库字体包往往超过15MB,这对博客的加载速度造成了巨大压力。fontmin可以遍历博客内用到的字符,并将字体包内这些字符的字体样式提取出来输出为新的字体包。
font-min仅支持压缩ttf格式的字体包
npm install gulp-fontmin --save-dev |
为Gulp创建gulpfile.js
任务脚本。在博客根目录[Blogroot]
下新建gulpfile.js
,打开[Blogroot]\gulpfile.js
,输入以下内容:
//用到的各个插件 |
可能出现的bug
部分js经过gulp-babel
的压缩加密后,因为一些变量的生命周期变化,可能无法正常使用,报错一般为提示该js中的某个变量未被声明。最快的解决方案就是干脆不要压缩它,对它设置压缩屏蔽。(terser就不会有这问题)
/source/js/example.js
无法正常使用。则在[Blogroot]\gulpfile.js
中修改js压缩任务的相关配置 //压缩js |
//用到的各个插件 |
在每次运行完hexo generate
生成静态页面后,运行gulp
对其进行压缩。指令流程如下:
hexo clean |
./public/**/*.html
)中的字符,然后匹配原有字体包内./public/fonts/*.ttf
字体样式,输出压缩后的字体包到./public/fontsdest/
目录。所以最终引用字体的相对路径应该是/fontsdest/*.ttf
。而本地测试时,如果没有运行gulp,自然也就不会输出压缩字体包到public目录,也就看不到字体样式。更新记录
参考方向 | 教程原贴 |
---|---|
参考了小康的博文中,关于解决hexo deploy无法提交.github文件夹至博客部署仓库的办法。 | hexo 博客每天定时提交网址给百度 |
参考了hexo的生成器的API写法 | HEXO-API-生成器(Generator) |
自从2021年12月20日,jsdelivr因为“某些原因”,在大陆和台湾的ICP证书被吊销。可以说,这让国内的开发生态瞬间天塌一般。目前,虽然jsdelivr已经恢复了服务,但是这只是通过在“中国附件”的节点提供的CDN加速服务,速度上还不如放到本地。这种反向加速的CDN服务,我们已经可以认为jsdelivr已经挂了。
在这一背景下,寻求新的,重点是免费的CDN加速服务,就成了当前最迫切的事情。幸运的是,虽然jsdelivr
挂了,但是npm
依然有大量的镜像节点可以使用,关于此项内容可以参考本站的另一篇教程:
那么,新的问题又出现了新的风暴已经出现,怎么能够停滞不前,众所周知,jsdelivr存在两个加速分支,
https://cdn.jsdelivr.net/npm/package@version/file
,https://cdn.jsdelivr.net/gh/user/repo@version/file
,前者可以通过用npm的其他镜像节点加速来解决,但后者就没有这么多加速节点可以使用了。
虽然也有很多同学尝试通过服务器自建反代jsdelivr来恢复访问速度,可是先抛开反向代理所需的知识点不谈,依赖于服务器的操作一开始就已经为这一方案设立了门槛。
本文尝试通过github action
配合自动打包username.github.io
仓库至npm
。鉴于传统的hexo deploy
方案并不能达成这一目的,所以这里推荐各位先完成github action
自动部署的配置。
因为传统的hexo deploy
无法将.github
文件夹也一并提交至部署仓库,所以需要用git
提交流程来完成站点内容部署。而指令相比hexo deploy
较为繁琐,故而推荐使用github action
来完成。当然实在不想配置github action
的,可以在本地留个自动提交脚本。最终也能实现提交流程的。具体内容会在教程内表述。
以下推荐两篇前置教程,事先完成这两篇教程里的配置,有利于您更好的理解下方本篇教程的主干内容。
[Blogroot]\scripts\npmpublish.js
,使用hexo的生成器API生成npm自动推送action脚本。这一步是因为默认的hexo generate
指令并不会将source目录下的.github
文件夹编译到public
文件夹下,所以必须要用生成器来生成。hexo.extend.generator.register('npmpush', function(locals){ |
public
文件夹中的.github
文件夹至博客部署仓库username.github.io
,所以此处需要我们手动提交。推荐使用ssh链接,这样可以避免反复输入github的账号和密码。cd ./public |
cd ./public |
故此,未配置github action
的可以通过新建一个自动提交脚本[Blogroot]\autopublish.sh
,其他指令可以自己考虑加。这样一来,每次通过双击这个提交脚本就可以完成提交了。
hexo clean |
hexo clean |
使用了github action
的,首先需要用到github
的token
,如果之前配置action的时候用到的token还记得的话可以拿来复用:
访问Github->头像(右上角)->Settings->Developer Settings->Personal access tokens->generate new token,创建的Token
名称随意,但必须勾选repo项。
token
只会显示这一次,之后将无法查看,所以务必保证你已经记录下了Token
。之后如果忘记了就只能重新生成重新配置了。
public
文件夹中的.github
文件夹至博客部署仓库username.github.io
,所有此处我们需要更改autopublish.yml
中关于hexo deploy
部分的指令内容。以本站的教程为例,需要更改部署部分的指令内容:- name: 部署到Github |
- name: 部署到Github |
[Blogroot]\source\
目录下打开终端,输入npm init |
Token
只会显示这一次,之后如果忘记了就只能重新生成重新配置了。username.github.io
)设置项里添加一个名为NPM_TOKEN
的secrets
,把获取的Npm的Access token输入进去。[Blogroot]\source\package.json
中的version
,从而避免每次提交就发布一个版本,导致版本号泛滥的问题。[Blogroot]\source\package.json
中的version
,然后通过上述的github action或者本地提交shell脚本实现提交即可。[Blogroot]/source/img/image.jpg
;![](/img/image.jpg)
;![](https://cdn.jsdelivr.net/gh/akilarlxh/akilarlxh.github.io/akilar-blog/img/image.jpg)
;![](https://npm.elemecdn.com/akilar-blog/img/image.jpg)
,其中akilar-blog是我的npm包名。不得不感叹,2021年实在是过得太快了,用白驹过隙来形容毫不为过。年初,在家窝了一整个春节假期,没能在家过完元宵的我也终于开始意识到我已经没有寒假了。这一年,疫情的软封锁让我们错失了很多机会。绝大部分时间,我都在出租屋和单位两点一线的往返中度过。工作日早早起床,在公交车上昏昏沉沉的补个觉,晚上在路灯下听着广场舞的背景音乐回家。周末窝在家里看看书,打打游戏,做做题,恍恍惚惚的一整年似乎就是每周重复生活的堆砌。但我还是想着能够给平凡的生活加点料。
今年过得相当蜗居,虽然世界这么大,我也很想去看看,但是架不住疫情肆虐,过得提心吊胆。怂,怕出了省就回不来。所以还是窝在家里写写博客,从别人的视角里悄悄看看外面的世界好了。
今年共完成了110份标书,主标36份,陪标74份。还做了10份演示PPT。工作内容涉及到数字化改革,数据整合,国土变更调查,一码管地等内容。
如果说2020年的前半年我还是在校生,2020年的后半年已经步入社会。那2021年就是我第一次完整体会到工作后的生活
的一年。最直观的一点就是,这一年,我再也没有寒暑假了,以前学习半年歇息仨月的美好生活一去不复返。
去年的这时候,我还对着没写过的项目愁眉苦脸,今年已经可以灵活处理每次的标书任务。哪怕是年底的项目大爆发也能游刃有余的应对。标书的编制校稿也越发熟练,曾多次收到同事对我校稿质量的肯定,这点算是值得我骄傲的。
虽然偶尔还是会因为疏忽闹乌龙,比如9月份的时候因为搞错了顺延工期,安排错了任务的先后顺序,自作孽导致加班了一天,好在还能及时补救。
工作之余还经常帮同事处理软件问题,比如装office三件套,激活服务,配置OCR软件,推荐各类工作效率提升的软件算是家常便饭。
也期盼着新的一年也能在融洽的氛围中和各位一同成长。
去四川看大熊猫(因为各种各样的原因搁置了,由于疫情,出省需要核酸证明,怕出得去回不来,家里外公住了院要回去探望。)
考取软考证书(疫情原因取消)
学会一门新的编程语言(学会了python,学会了自己编写API,学会了自己编写博客插件)
写满十篇令人满意的微小说(只写出来一篇)
读完十本广受好评的书(重温了一遍《三体》三部曲,读完了《亚瑟王史诗》,读完了四部历史题材的小说,看完了《解忧杂货铺》原著,再挑一本编程工具书凑数
找到心仪的女朋友
博客访问量突破十万(四月下旬达成)
博客访问量突破二十万(11月中旬达成
写一个专属于自己的主题(三月份的时候计划搁浅了)
填词一首原创歌曲并唱出来
找到心仪的女朋友(今年一定要找了,最小的姐姐也在今年订婚了,整个家族的催婚重心终于还是排到我了)。
熟练掌握一门新的语言(目前初定是学一下日语)。
看十本名著(书架上还有很多没看的,肯定能凑满十本)。
考取软考证书(反正题接着刷,至于能不能考,这个全看疫情给不给面子了)。
博客访问量突破50w(今年贪心一点)
写满十篇令人满意的微小说。(我还是觉得我应该能写出十篇的)
去四川看大熊猫。(劳资倚钉要看熊猫!)
访问本帖如果出现自动播放BGM,且想关闭又暂时找不到的,可以通过Ctrl+M启动网页静音。
看到大佬们的网页可以播放音乐,不得不说我是有点心动的,所以就在这里放一下教程。写这个的时候我也在一边试着安装,算是先驱者。
有两种方式,一种是安装源文件支持,在所有的网页输出上放置播放器,这样你哪个网页都可以看到它。
还有一种是安装插件,这个可以在文章中自定义样式,如此一来,只有当你点开文章的时候才能看到它。
我个人比较倾向于第二种,但这里我都会说,事实上引用的不是同一个js的情况下,貌似也不冲突吧。
(穿越回来的我:事实上体质特殊就是体质特殊,各种无效很无奈。)
先要在官网下载源码:MoePlayer/APlayer总共也就200kb不到,就别捣鼓什么git clone了
解压后将dist文件夹复制到~\themes\next\source文件夹下。
新建 Hexo\themes\next\source\dist\music.js 文件,添加内容:
const ap = new APlayer({ |
以上是基本参数,还有更多参数可以参考这个Aplayer中文文档
audio对应的便是音频文件,所以音乐播放器需要播放的音乐是需要自己进行相关信息(如歌曲链接、歌词、封面等)的配置。
顺便附上一个mp3音乐外链网
这一步也是决定能否在你的所有页面显示的关键。
打开\themes\next\layout\_layout.swig
文件,将以下内容加入到<body itemscope ...>
后面就行,即在<body></body>
里面。
<link rel="stylesheet" href="/dist/APlayer.min.css"> |
之后使用hexo clean 和 hexo g 重新编译页面,就能看到左下角的音乐播放器了。(然而这个方法我并没有成功)
在根目录下使用命令行安装
npm install --save hexo-tag-aplayer |
在你的文章中通过以下格式引用:
{% aplayer title author url [picture_url, narrow, autoplay, width:xxx, lrc:xxx] %} |
参数不止这些,具体可以参看使用手册,虽说也不是很详细就是了。
使用示例,例如在网页里放以下代码,会加载出单曲图标。
{% aplayer "China-Y" "徐梦圆" "https://www.ytmp3.cn/down/59298.mp3" %} |
在网页里放以下代码,会加载出歌曲列表。
{% aplayerlist %} |
MetingJS 是基于Meting API 的 APlayer 衍生播放器,引入 MetingJS 后,播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。
如果想在本插件中使用 MetingJS,请在 Hexo 配置文件 _config.yml 中设置:
aplayer: |
接着就可以通过以下格式在文章中使用 MetingJS 播放器了:
<!-- 简单示例 (id, server, type) --> |
这里放了一个我的网易云歌单,但是可能依然没有加载出来。
<div id="aplayer-TVifDqIH" class="aplayer aplayer-tag-marker meting-tag-marker" data-id="2597489971" data-server="netease" data-type="playlist" data-mode="circulation" data-autoplay="true" data-mutex="false" data-listmaxheight="340px" data-preload="none" data-theme="#ad7a86"></div>
今天的踩坑结论:因为各种各样的我不知道的理由,总之我不配拥有上面网页音乐。它的加载与否太过随性。
参考方向 | 教程原贴 |
---|---|
主题官网教程 | Butterfly添加全局吸底Aplayer教程 |
插件文档 | hexo-tag-aplayer |
[Blogroot]
下打开终端,运行以下指令安装hexo-tag-aplayer插件:npm install hexo-tag-aplayer --save |
[Blogroot]\_config.yml
中新增配置项,建议直接加在最底下:# APlayer |
[Blogroot]\_config.butterfly.yml
中关于Aplayer的配置内容# Inject the css and script (aplayer/meting) |
[Blogroot]\_config.butterfly.yml
的inject配置项中添加Aplayer的容器。inject: |
[Blogroot]
下打开终端,运行以下指令hexo clean |
歌单的id,歌单的服务商、歌单的类型
https://music.163.com/#/playlist?id=4907060762
,此处的palylist对应的就是data-type的值,id就是data-id的值,而网易云的data-server为netease,这个可以通过Aplayer的插件文档查阅到。只有三个参数对应正确才能正常加载歌单。更新记录
之前一直没有留意到,butterfly的原生相关推荐版块和其他布局比起来实在是太突兀了(主要是没有圆角),就那么突然的出现在文章和评论区之间,包括我和@贰猹都觉得有必要改动这个(不过贰猹是不要侧栏党),@洪哥的倒是和整个文本融合的不错(是配色效果吗?)。出于我守财的习惯,我通常不会直接删除主题已有的一些功能,那么要怎么处理这个那么大一块的推荐版块呢?
我的做法就是,把它丢到可以自由控制显隐的侧栏里。还能顺便沿用我之前写的SAO UI和手机端侧栏fixed卡片样式。
说干就干,首先,要定位这个侧栏卡片的源码位置,用F12确定了它的class为relatedPosts,然后在主题源码里全局搜索,发现这个居然不是在pug中生成,而是通过一个hexo的helper函数来处理的,也就是butterfly\scripts\helpers\related_post.js
,好在写插件的时候已经充分接触过这种情况。
第一步,先在F12里复制整个最新文章侧栏卡片的html源码,然后对这部分源码进行美化处理,得到骨架。
<div class="card-widget card-recent-post">
<div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span>
</div>
<div class="aside-list">
<div class="aside-list-item">
<a class="thumbnail" href="/posts/451ac5f8/" title="Butterfly fixed card widget">
<img src="https://npm.elemecdn.com/akilar-candyassets/image/cover1.webp" alt="cover" >
</a>
<div class="content">
<a class="title" href="/posts/451ac5f8/" title="Butterfly fixed card widget">Butterfly fixed card widget</a>
<time datetime="2021-12-09T02:03:59.000Z" title="发表于 2021-12-09 10:03:59">2021-12-09</time>
</div>
</div>
</div></div>
到这一步,基本可以发现推荐版块和最新文章版块的要素变量其实差不多,因此可以很轻易的搬过来,这里我还可以直接沿用一部分class名,这样就能继承已有的css样式,省的我费力写UI了。
然后就是找到related_posts.js中关于html代码构建的部分,按照上面分析出的骨架和现有的变量进行拼装就OK了。
[Blogroot]\themes\butterfly\scripts\helpers\related_post.js
,从大概47行开始到70行的部分。[Blogroot]\themes\butterfly\layout\post.pug
大约26行的位置先移除在文章底部的推荐版块。if theme.post_pagination |
[Blogroot]\themes\butterfly\layout\includes\widget\index.pug
,这个文件每个版本都长得不太一样,这里仅供参考。因为感觉文章也最新文章和推荐文章同时存在,最新文章就显得有点多余了,所以我把最新文章的侧栏卡片注释了。#aside-content.aside-content |
[Blogroot]\_config.butterfly.yml
#侧栏悬浮卡片控制按钮 |
hexo clean
,hexo generate
,hexo server
三件套就能看到完成效果了。此处有必要说明一下,因为改动以后,是将推荐版块放到了侧栏卡片,所以如果要想看到相关推荐侧栏卡片,至少需要满足以下几个条件:
style_simple
,这样才不至于在文章页只能看到一个目录卡片。related_post
配置项,推荐都没开的话就别指望有相关推荐版块了吧。