最近看到越来越多的网站使用字体分段加载(貌似都白嫖的B站)
不过博主找了半天,也是没有找到字体切片的相关文章
所以就手搓了一个…
博主也去了解了下字体切片原理,看起来就是把一个字体内的文字打散,分成很多个文件,浏览器需要的时候加载对应文件
(谷歌字体有篇文章: 貌似写着这样可以减少大约30%的加载大小)
tips: 手搓完成后,我受到了巨大的打击,因为别人告诉我Github上有(不过我去看了下,貌似不全)
准备材料:
一台PC
,Python 3.7
及以上环境(博主是Python 3.9
)
如果没有环境或者遇到问题(或者不会)可以在侧边栏公告那里加入博客群聊,寻求帮助
1 | pip install fonttools Brotli |
然后新建一个文件夹(程序运行时会生成缓存文件)
比如 font
然后把要转换的 TTF
格式字体复制粘贴进去
新建一个 .py
文件,把以下代码丢进去
1 | import os, json |
然后在文件开头修改配置,配置干嘛的都注释好了
看到这里想必各位是不是马上准备双击运行了,
但我想说一句还要在文件夹内新建个 fonts
文件夹,存放生成的字体文件。
然后就可以愉快的双击运行了,
(tips: 建议运行时看着,因为程序逻辑问题有时候报错不会退出)
结束后你就会在这个文件夹内找到个 font.css
和有一堆字体切片文件的 fonts
文件夹
这些东西想必大家都知道是干嘛用的
把 font.css
和 font
文件夹 放在你的cdn里的同一个目录里,
然后主题引入下css
就可以开始游玩了
tips:
字体css建议使用用异步加载
1 | <link rel="stylesheet" href="你的cssURL" media="defer" onload="this.media='all'"> |
不过因为作者学业原因,更新较慢
[ ] Hexosm预计将在2023年寒假结束前发布第一个正式版
[ ] 准备搞个游戏(内部游玩)大概叫做天理回议录/启示录
希望大家2023年幸福,也希望2023年新冠疫情不在肆虐,也祝福大家过个好年
祝大家新年快乐—————
(词穷,第一次写这种东西,不会写,不喜勿喷)
Service Worker
是浏览器的一个高级特性,本质是一个 Web Worker
,是独立于网页运行的脚本。 Web Worker
这个api被造出来时,就是为了解放主线程。因为,浏览器中的 JavaScript
都是运行在单一个线程上,随着web业务变得越来越复杂,js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。 而Web Worker由于独立于主线程,则可以将一些复杂的逻辑交由它来去做,完成后再通过 postMessage
的方法告诉主线程。 Service Worker
则是 Web Worker
的升级版本,相较于后者,前者拥有了持久离线缓存的能力。
Service Workers
本质上充当 Web
应用程序、浏览器与网络(可用时)之间的代理服务器。这个 API
旨在创建有效的离线体验,它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源。它还提供入口以推送通知和访问后台同步 API
。
Service Worker
运行在 Worker
上下文,因此它不能访问 DOM。相对于驱动应用的主 JavaScript
线程,它运行在其他线程中,所以不会造成阻塞。它设计为完全异步,同步 API
(如XHR
和localStorage
)不能在 Service Worker
中使用。
Service Worker
下文简称SW
上文是较为科学的解释,对我来说他的用处只有一个
就是加速博客
因为作者看到好多人的博客都用上了SW。
而且博主万年没更新了(其实是因为没时间)
所以准备水一篇文章。
本文应该只需要懂js基础的小白即可看懂(没有js基础应该也可以明白原理)
但建议配合MDN食用
本人不保证本文没有任何错误,
本文旨在教学/科普那想搞sw的人
本文是根据个人理解所写,不保证完全正确
出于安全考量,Service workers 只能由 HTTPS 承载,毕竟修改网络请求的能力暴露给中间人攻击会非常危险。
但在本地的localhost
和127.0.0.1
是可以使用的(为了方便本地调试)
SW一共有很多种状态,但我们只需要知道其中4个(其他的基本上用不到)
install 安装
waiting 等待
activate 激活
fetch (额,这玩意我也不知道叫啥,大概可以算是请求)
SW在通过安装代码的注册方法 navigator.serviceWorker.register()
后
会下载SW代码
然后进入install
状态
如果不是首次使用sw他就会卡在waiting
状态
需要等待上一个sw停止工作
此时我们就要执行 self.skipWaiting()
来跳过
然后就会进入activate
状态
首次使用sw的时候,并不会直接捕获当前页面的请求
我们可以执行 self.clients.claim()
来立即管理当前页面(或者你安装的时候直接刷新也能达到此目的)
我们将会在我们手搓的sw中使用 addEventListener()
(事件监听器)方法来监听SW的状态
注意:
在SW中可以用this
来表示这个SW
在SW中食用的事件监听器是属于异步的,建议直接使用async function
然后就可以有如下操作
1 | // 注:async () => {} 等同于 async function () {} |
下面的捕获请求也需要用到上面的知识
在学会捕获请求之前
你还需要知道一个新的东西
fetch()
方法
这玩意的功能就类似于 XHR
( XmlHTTPRequest
)
值得一提的是使用
Fetch
API 发送请求是会存在跨域问题的,一旦被跨域拦截,那么就上面都没有返回,会导致页面显示不了请求的内容(例如图片被跨域拦截了),而 img、script 标签它们是不会发生跨域请求问题的。
这玩意的MDN如下(虽然没必要看,因为搞sw不用管它的参数,基本上)
随便的学习了一波Fetch之后,我们就可以开始最激动人心的捕获请求环节
根据上上面的文章我们可以知道 SW
还有个 Fetch
状态
然后就可以有如下操作
注:
event.respondWith()
: 给浏览器一个响应,因为我们已经使用Fetch
API替浏览器发送了请求,并且得到了结果并且返回,那么自然是要返回给浏览器啦
当捕获的请求没有通过这个方法返回数据,浏览器就会假装sw不存在,使用默认的获取方法
而且当返回的数据不正确(比如发生跨域)的时候浏览器也默认跳过
1 | // 捕获请求 |
上面我们都可以使用Fetch
API替浏览器发送请求了,那是不是可以篡改呢?
1 | // 处理请求 |
如上代码,我们就可以将 ajax 请求的第三方库 js 文件请求变为压缩后的请求,并返回给浏览器(篡改成功)
这边还有个前端资源并发的列子
也就是最重要的jsd并发竞速
1 | // 发送所有请求 |
然后在手搓一点点的匹配代码
然后你就成功的搞出sw了
以下代码不能直接复制运行
因为没配置
大概能实现cw的功能
但没缓存功能
1 | // 处理请求 |
然后大概就可以手搓出个大概这样的sw
注意: 本代码不可以直接运行
需要搭配配置
1 | //安装进程 |
派蒙: 前面的区域以后再来探索把~~
该区域正在施工中…
]]>前几天,在给AG bot
(作者的机器人)写原神功能的截图网页,因为作者不会css,所以开着教程网页,一边请教别人一边写网页。
直到昨天,我终于写完了,虽然不是特别好看。但好歹是自己写的,写完之后,感觉我这个小白也要变成小黑了。
今天刚好看见twikoo丑丑的,就想给他来个Butterfly风格的魔改(美化)
没想到不仅成功了还挺好看
部分配色和代码,抄自heo的博客
样式只支持Hexo-Butterfly主题
只需要添加到外挂css里
魔改玩家都清楚咋添加外挂css的
1 | /* 声名部分变量 */ |
很久没去主题官网看了。
昨天发现主题又更新了新版本
因为我没有魔改主题,更新还算方便
魔改的更新就很麻烦
本篇教程不教如何更新魔改主题,但可以利用git记录你的修改再更新主题
再说一遍,本篇教程不教如何更新魔改主题
直接在主题目录下执行(.git
文件夹要复制回去)
1 | git pull |
如果你忘记你的.git
文件夹去哪了
就直接删除主题,回到主题根目录重新拉取最新主题就行
1 | git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly |
因为作者看不惯Hexo生成时的警告,然后听人说,更新到最新版本的Hexo能够解决此报错
进行重大改动的时候要备份的道理,应该都懂
我就不多说了。
1 | npm cache clean -f |
1 | npm install -g npm-check |
更新有2种方法,方法一比较靠谱, 方法二比较简单
使用方法2就不用继续更新全局软件包了,但需要懂一点点英文
1 | npm-check -g |
1 | npm update -g |
1 | npm install --global hexo |
使用交互式界面进行更新
需要懂一点点英文。
通过上下键可以移动光标,使用空格键可以选择需要处理的包,回车直接进行处理。
1 | npm-check -g -u |
进入博客根目录
刚刚的更新操作也可以在博客根目录进行
更新插件同样有2种方法
方法的不同点和刚刚一样
1 | npm-check |
1 | npm-upgrade |
1 | npm update --save |
1 | npm audix |
通过上下键可以移动光标,使用空格键可以选择需要处理的包,回车直接进行处理。
1 | npm-check -u |
1 | npm-upgrade |
1 | npm audix |
然后npm i
一下就好了
因为最近百度统计时常抽风,所以作者切换到了51la统计
首先注册51la统计
(这是一个邀请链接,我会获得10元,新用户会获得8元。(不使用邀请链接均无奖励))
并添加网站,获取网站安装代码(开启了Pjax的可以打开单页应用上报功能)
会得到如下代码
1 | <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> |
加入butterfly主题配置文件
1 | inject: |
在博客根目录内的source
文件夹内建立js
文件夹((其实可以随便放)已经建立的不用重复建立)
在刚刚建立的js
文件夹内新建一个51la.js
内部写上
1 | LA.init("这里填上安装代码的配置json"); |
配置json指的是刚刚复制的代码内的
{id: "xxxx",ck: "xxxx",hashMode:true}
填好后大概长这个样子
1 | LA.init({id: "xxxx",ck: "xxxx",hashMode:true}); |
然后在主题配置文件内加上
1 | inject: |
利用defer标签实现按顺序异步加载
不要变动顺序,会导致不生效
注意: 等会异步安装灵雀应用监控的时候添加的js脚本一定要放在51la.js前面
使用刚刚注册的51la账号登录灵雀应用监控
并且创建应用,获取安装代码
开启了pjax的可以打开单页应用上报
然后会得到以下内容
1 | <script src="https://sdk.51.la/perf/js-sdk-perf.min.js" crossorigin="anonymous"></script> |
加入butterfly主题配置文件
1 | inject: |
在刚刚为异步51la新建的51la.js
内部加上(注意是加上)
1 | new LingQue.Monitor().init("这里填上安装代码的配置json"); |
配置json指的是刚刚复制的代码内的
{id:"xxxxxxxxx",sendSpaPv:true}
填好后大概长这个样子
1 | new LingQue.Monitor().init({id:"xxxxxxxxx",sendSpaPv:true}); |
然后在主题配置文件内加上
1 | inject: |
利用defer标签实现按顺序异步加载
不要变动顺序,会导致不生效
作者今天看到了糖果屋的一篇文章 DIY外挂标签的简单写法与应用 就突发奇想的想给Dplayer写个标签外挂(其实是想以后的时候偷懒)
在博客根目录下新建scripts
文件夹(已建立的不用重复建立)
新建一个随意名称的文件(后缀要是.js
)比如diytag.js
填入
1 | //参数处理函数 |
然后你就可以在文章里用标签外挂的方法使用deplayer了
(记得先在head引入Dplayer)
1 | {% dplayer dplayer %} |
参数dp
表示播放器对象名称
参数dplayer
表示播放器的容器id
所有参数在一个文章中不能出现2个相同的
1 | {% dplayer dplayer %} |
支持切换清晰度(不过给我用成切换视频节点了),默认第1个
1 | {% dplayer dplayer2 %} |
随便的简介
talktalk是博主自己开发的一个说说系统
所有api需要
POST
请求到/api/v1/talktalk
并传递json
数据:{"type": "选择的api"}
测试api地址https://talktalk-six.vercel.app
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api |
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api,这个是load |
num | int | 15 | 指定单次查询数量 |
skip | int | 0 | 指定单次跳过数量 |
{"type": "load"}
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api,这个是good |
id | str | 无 | 说说id(读取说说的返回数据里有) |
{"type": "good", "id": "ewfgyegfyegfreferfuergfygevf"}
以下api需要登录
登录传入json数据
{"type": "login", "pwd": "你的密码"}
返回会话(
session
)数据请求下面的api需要携带
session
数据
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api,这个是send |
data.text | str | 无 | 说说的内容 |
data.device | str | 无 | 发送说说的设备 |
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api,这个是edit |
id | str | 无 | 说说id,加载说说返回数据里有 |
data | json | 无 | 要修改的内容如{"text": "测试测试"} |
参数名 | 数据类型 | 默认值 | 说明 |
---|---|---|---|
type | str | 无 | 选择的api,这个是good |
id | str | 无 | 说说id,加载说说返回数据里有 |
]]>文档施工中(懒…)
twikoo-vercel版评论导出较为复杂,然后作者(博主)写了个脚本,可以一键导出评论数据
打包的文件只支持windows运行,其他系统请使用源码并安装自行安装依赖(建议py大佬尝试)
下载完成后解压
打开twikoo的vercel项目
点击Settings
- Environment Variables
下滑到页面最下面点击MONGODB_URI
环境变量边上的小眼睛,复制出现的内容。
启动刚刚下载的工具里面的.exe
文件
并且按照提示操作(tips: CMD的复制是右键,不是Ctrl+V)
运行完成后当前目录会出现data.json
文件
这就是导出的数据
ClientWorker简称cw
cw是cyf大佬开发的一个简单且配置方便的一个sw
官方是这么介绍的:
ClientWorker
一个基于规则驱动的前端路由拦截器
用规则定义黑科技
墙裂建议参考官方文档 - 快速开始
这里只写 Hexo Butterfly 主题的方法
官方墙裂建议用此方式安装。
在你的网站**根目录(就是博客根目录\scores)**下新建一个名为 cw.js
的文件,里面写上:
1 | importScripts('https://lib.baomitu.com/clientworker/latest/dist/cw.js') |
你也可以采用jsdelivr镜像进行接入
1 | importScripts('https://cdn.jsdelivr.net/npm/clientworker@latest') //最好指定版本 |
官方文档拥有更多引入镜像
官方非常强烈建议在引入脚本时要指定clientworker的版本(而不是默认latest(最新版本)),最新版本可以到官方GitHub Release查看。
这个也是cw最容易出问题的点(最简单也是最难的一步)
在根目录(hexo 请放在 博客根目录\scores
)下新建一个 config.yaml
,填入配置。
1 | name: ClientWorker |
也可以填入我这个什么用也没有的配置
1 | name: ClientWorker |
官方有三种方式接入: 三文件全域安装
、 自定义无刷新安装
、 自定义刷新安装
但我这只讲:自定义无刷新安装
、自定义刷新安装
其中,
全域安装
最简单,对SEO支持也最恶劣(Google会提示额外的计算开销,而百度完全没办法爬取)。比较适用于自用的、只追求速度的。自定义无刷新安装
则对你的HTML和JS水平有所要求,对于部分不遵守标准的浏览器兼容性较差,但是这种方法对SEO没有影响,比较适合于对seo注重的网站。自定义刷新安装
对seo略有影响,会在载入后阻断未经CW的请求并刷新一次,以便于CW及时托管,比较适合于网站提速
通用步骤:
在博客根目录\scores
新建一个js(放在scores文件夹里就行),名称随意比如cw_install.js
本文以
source/js/cw_install.js
为列子
下面有2种方法,可以通过点击tab切换
在刚刚新建的js文件里写上下面这些内容
1 | if (!!navigator.serviceWorker) { |
1 | if (!!navigator.serviceWorker) { |
_config.yml
1 | skip_render: |
1 | inject: |
公共api极易挂,建议使用vercel部署私人api(建议Fork,方便更新)
公共api地址:https://api.cxl2020mc.top
注:仅支持get请求
后加?api=[请求的api]
表示请求的api
获取bing壁纸
url:/?api=bing
参数 | 描述 | 值 |
---|---|---|
idx | 获取历史图片(仅支持过去7天) | (1/2/3/4/5/6/7) 任意选一 |
uhd | 获取原图(大部分都为4k) | 任意值 |
请求url:https://api.cxl2020mc.top?api=bing
请求url:https://api.cxl2020mc.top?api=bing&uhd=blblblblbl
请求url:https://api.cxl2020mc.top?api=bing&idx=1
请求url:https://api.cxl2020mc.top?api=bing&idx=1&uhd=blblbl
获取api和bing api 的连接信息
url:/?api=bing
motrix支持下载 HTTP、FTP、BT、磁力链等资源
支持Windows、Linux、MacOS系统。
单任务最高支持 64 线程下载(超快)。
一般浏览器下不动的东西他都能下。
由于官网下载过慢,所以可以使用云盘的离线下载功能加速下载。
]]>作者自己写的api
原图可能较慢(一张要30秒)bing自己慢
]]>打开多个标签页试试
使用之前先刷新加载js(没放头里。。。。。而且有pjax)
Markdown是一种轻量级标记语言,创始人为约翰·格鲁伯(英语:John Gruber)。 它允许人们使用易读易写的纯文本格式编写文档,然后转换成有效的XHTML(或者HTML)文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性,并且对于图片,图表、数学式都有支持,目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等,甚至还能被使用来撰写电子书。
注意:#和标题要间隔一空格
1 | # 一级标题 |
1 | *斜体* |
斜体
加粗
斜体加粗删除线
高亮
1 | >这是引用 |
效果
这是引用
这是引用
这还是引用
三个或者三个以上的 - 或者 * 都可以。
1 | --- |
1 | ![图片alt](图片网址URL ''图片title'') |
示例:
1 | ![xxx](https://cxl2020mc-1304820025.file.myqcloud.com/file/202205081115370.jpeg "一张图片") |
1 | [链接上的文字](网址URL) |
示例:
1 | [欢迎来到陈鑫磊的博客━(*`∀´*)ノ亻!](https://cxl2020mc.github.io) |
欢迎来到陈鑫磊的博客━(`∀´)ノ亻!
但是Markdown有个缺点就是Markdown原始跳转链接不会新建标签页
所以我们要使用Html解决。
示例:
1 | <a href="https://cxl2020mc.github.io" target="_blank">欢迎来到陈鑫磊的博客━(*`∀´*)ノ亻!</a> |
列表分无序列表,有序列表和待办列表
无序列表用 - + * 任何一种都可以
1 | - 列表1 |
效果如下
1 | - 列表1 |
效果如下
列表1
列表2
数字加点
1 | 1. 列表内容 |
1 | - [ ] 内容 |
上一级和下一级之间敲三个空格即可
1 | 表头|表头|表头 |
示例:
1 | 博客网站 |
博客网站
名称 | 网址 | xxx |
---|---|---|
陈鑫磊的博客 | https://cxl2020mc.github.io | xxx |
高浩轩 | https://hkjyh5.coding-pages.com | xxx |
1 | `代码内容` |
代码块:代码用三个反引号包起来,且两边的反引号单独占一行
1 | (```) 注:这里可以在加编程语言如:java |
注:为了防止转译,前后三个反引号处加了小括号。
缩略有2种一种可以使用Markdown,HTML,一种不可以但是支持HTML
1 | <details> |
效果
1 | <details> |
效果
本站使用butterfly主题支持标签外挂
格式:
( display 不能包含英文逗号,可用‚)
1 | {% hideToggle display,bg,color %} |
示例
1 | {% hideToggle 文字%} |
内容
1 | pip list --outdated |
像我这样
pip的功能只能一个一个更新
1 | pip install -U 模块名 |
1 | :: 更新pip |
安装pip-review。
1 | pip install pip-review |
1 | pip-review --auto |
1 | pip-review --local --interactive |
运行(建议使用管理员身份运行)
输入:A更新所有库
剩下的只有耐心等待