26 03 20

使用‌Speculation Rules API‌ 加速网页

使用‌Speculation Rules API‌ 加速网页

代码<script id="speculation-rules" type="speculationrules"> ,"eagerness":"moderate"}]} </script>‌Speculation Rules API‌ 是由 Google 提出并由 Chromium 内核浏览器(如 Chrome、Edge)支持的一种‌原生网页预加载技术‌,通过声明式 JSON 配置,让浏览器在用户尚未点击链接前,就提前下载甚至完整渲染目标页面,从而实现“点击即现”的极致体验。核心功能与模式‌prefetch(预取)‌提前下载目标页面的 HTML、CSS、JS 等资源至 HTTP 缓存,‌不执行脚本或渲染页面‌。资源消耗低,适合全站兜底使用。‌prerender(预渲染)‌在后台‌完整加载并运行页面‌,包括执行脚本、发起请求、渲染布局。点击时几乎瞬间切换,但消耗较多 CPU、内存和网络资源,需谨慎使用。触发时机(eagerness 参数)值触发条件适用场景immediate发现规...

24 12 05

Typecho后台美化插件开发历程

Typecho后台美化插件开发历程

TeAdmin插件灵感来自:https://www.ruletree.club/archives/1066/ 就是借助css隐藏默认后台菜单,然后在用js获取默认后台菜单dom,然后对dom进行调整,在插回页面。主要用到后台的header和begin接口。【生命周期:2020年~2024年,支持typecho1.2.0~1.2.1】NewAdmin插件购买地址:https://typecho.fans/archives/newadmin-typecho-plugin.htmlTeAdmin屎山叠的太厚了,所以在2023年从零重写了个新插件,更加简洁美观,起初实现方式原理也是用js构建页面。重构1:后在2024年12月重构使用ob_get_clean加simple_html_dom.php来获取初始菜单,不在依赖js构建,完全消除因等待js执行而导致的页面闪烁问题。然后利用navBar接口把重构样式的菜单塞到菜单位置上去。2025年重构2:不再使用ob_get_clean加simple_html_dom.php的粗暴方式,改为直接手写函数获取菜单组件并重构样式,提高执行效率缩进代码...

24 11 18

gif.js库的使用与反思

gif.js库的使用与反思

之前在Q群里里面看到群机器人有个生成撅人表情包的功能,如下图所示,当时就在想能不能自己用JS也实现个,但感觉自己这方面一片空白,一直就没弄,直到有次电脑打开了这个表情gif,发现一共就三帧动画,好像也不是很复杂的样子,于是乎就又有动力了。记得在张鑫旭大佬博客看到过生成gif图的文章,搜了下是gif.js库,然后就是引用库,加上ai一顿乱套代码,屎山代码把功能实现了,就是用canvas画三个画布,然后gif.js合并canvas变成gif图。因为canvas我不熟练,代码ai加上自己理解乱弄的很乱,后来想到html2canvas库,我就自己用html布局,然后用html2canvas把html布局变成canvas,最后再用gif.js合并。步骤多了但用html布局舒服多了,代码清晰自己也能看懂了。问题gif.js生成的透明背景图,会导致黑色部分也变透明,实际上他处理过程是把透明背景当成黑色,然后再统一把黑色变透明,导致的这个问题,可以用transparent设置个颜色,然后把它替换成透明而不是把黑色替换成透明,然后html2canvas也可以设置背景色,之前是设置成透明,现在就设置...

22 12 01

更干净的哔哩哔哩iframe播放器

更干净的哔哩哔哩iframe播放器

众所周知,大部分视频网站,个人投稿的视频下方的分享功能,都支持嵌入代码的分享方式,也就是iframe,当然B站也不例外。iframe能够很方便的将视频嵌入到论坛以及各种网站中,方便其他网站引用其视频直接播放,另一方面视频网站方也可以在iframe的播放器上插入自己视频网站的宣传信息以及网站入口,来实现引流,至此达到了使用者和视频网站方双赢局面。B站iframe播放器B站pc端上分享功能上的iframe代码效果如下图:大体上感觉也没有毛病,但是如果告诉你,暂停时(如上图),除了点击上方视频标题和去哔哩哔哩观看会跳转到B站外,点击画面中间的视频以及作者信息也会跳转,点击左下角的二维码也会跳转,甚至切换分辨率也会跳转,虽然无可厚非但是不是觉得宣传元素过多了?但其实这些还是能忍受的,主要是还有2个缺点,1是浏览器隐身模式下无法播放,2是此播放器在较窄的网页下会自动变为移动端的iframe播放器,这种自动变的是只有播放暂停功能,其余啥功能都没有,甚至没有进度条,但是用手机访问的话触发的触发的移动端的iframe播放器就很正常甚至很清爽。考虑到以上种种,我就在想要不直接用移动端iframe播...

22 11 21

纯CSS根据图片取色设置背景色

纯CSS根据图片取色设置背景色

前几天无意间访问到了个韩国的动漫视频站,然后看到个页面每个div背景色都不同疑似根据图片进行的取色,然后就想看看他是用什么js设置的,f12一看发现好像不是js,然后我就以为是写死的,想看看怎么写的,结果一看不要紧,学到个骚操作。代码Html部分的核心代码<div class="board"> <div class="images"> <div class="image" style="background-image:url(图1)"></div> <div class="image" style="background-image:url(图2)"></div> <div class="image" style="background-image:url(图3)"></div> </div> <div cl...

22 09 24

QQ邮箱自动删除邮件脚本

QQ邮箱自动删除邮件脚本

前言因为博客评论后我都会收到邮件通知,五年了,攒了几千条邮件,100多页,然而很奇怪qq邮箱的全选删除好像坏了,只能勾选当前页进行删除,这100多页页太麻烦了,所以写了个js的定时执行脚本,f12在控制台执行脚本即可开始删除脚本代码window.setInterval(function() ,3000)原理很简单,定时器每三秒执行一次,执行两个点击事件,一个是勾选当前页,一个是删除!如何停止脚本:按f5刷新浏览器即可或者关闭当前窗口,脚本执行后请不要用鼠标点击切换页面否则可能会删除你切换到的页面的邮件。

21 06 11

Typecho使用AJAX自动填写游客信息思路分享

Typecho使用AJAX自动填写游客信息思路分享

灵感来源35个月前写过一篇《Typecho使用AJAX实时获取评论头像》文章,当时只是获取ajax处理了邮箱,然后将gravatar头像地址给到头像。昨天看了大佬的文章《写了一个很鸡肋的功能》,通过邮箱读取gravatar网站的api获取用户昵称,然后自动填入到评论区昵称上,觉得灵感很棒,本来想抄下的,后来一想gravatar有墙啊,那就有点难受了。实现于是经过几秒钟的思考,觉得直接读取历史评论里面的信息不就好了嘛,只要填过一次,下次评论时只要写下邮箱,别的信息就自动获取到了。流程:用户填写邮箱地址,然后ajax请求api,api这里返回三个数据(头像地址,昵称,网站地址),然后将返回的信息自动填入。重点就是api返回的三个数组的实现,头像地址比较简单,就是将邮箱用md5加密下,然后拼上地址就行了。//差不多就是这种感觉 $avatar = 'https://secure.gravatar.com/avatar/'.md5($email).'?d=mm';然后就是昵称和网站地址的查询了,通过邮箱使用sql查询评论列表,然后抽取最新一条的信息...

20 06 01

百度地图设置显示公司地址

百度地图设置显示公司地址

在百度地图开放平台(http://lbsyun.baidu.com/)登录账号新建应用,应用类型选择浏览器端,建立完成后我们会得到应用AK。css样式代码#allmap 地图显示代码<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的ak"></script> <div id="allmap"></div> <script type="text/javascript"> // 百度地图API功能 var map = new BMapGL.Map("allmap"); var point = new BMapGL.Point(坐标,坐标); map.centerAndZoom(point, 15);//显示层级,具体可以参考下方坐标拾取那里,层级越高地址越详细 ...

16 10 22

robots.txt书写错误导致的严重后果

robots.txt书写错误导致的严重后果

robots介绍就是一个网站根目录的txt文本,需要自己建立的,目的就是告诉搜索引擎哪些页面可以抓取,哪些页面不准抓取。事情的起因就是我建立了这个东西,下面就是我写的东西。User-agent: * Disallow: /a*/这个是不准抓的链接 Disallow:/install/这个是不准抓的链接 sitemap:https://zezeshe.com/sitemap.xml错就错在这个声明上了Disallow: /a*/,这个就是禁止http://zezeshe.com/a带有这样格式的链接,而我的文章格式是https://blog.zezeshe.com/archives/demo.html这样的,因为每篇文章链接都含有http://zezeshe.com/a,所以搜索引擎完全没有抓取我的文章。(容我哭一下)创建robots.txt本身是优化收录的,结果我这么一写反而起了超级大的反效果,哭。之前怀疑过https导致收录过慢,也怀疑过我自己修改文章链接格式导致的原因,现在我发现我错了,最大的原因居然是这个不起眼的txt文件。robots文件写法User-agent: * 这...