网页前端标签。
我的项目 未读
分享一下博客的全新聚合搜索近日博客涉及到大量重构,比如性能问题、屎山清理、hexo版本重新开始追更、插件系统优化、大量动画和冗余代码移除、评论系统重构等等(详见博客更新日志),其中搜索功能的重构是我最近重要的功能之一。
针对站内的博客搜索功能,我就在想,“谁在用?期望能搜索到什么?”
一个个人博客而言,只有一千来个文章,不可 ...
我的项目 未读
洪绘压图网页版上线,这下可以随时随地在线压缩图片了之前做过压缩图片的软件叫“洪绘压图”,目前是支持mac和Windows,但是有的时候需要iOS/安卓或者Linux系统使用就显得捉襟见肘了。想了一下把浏览器支持的功能先搬到网页上,这样大多数基础功能直接通过浏览器就能实现,非常方便。
使用地址https://yatu.zhheo.com/
...
我的项目 未读
洪绘烧纸:一个网页在线电子烧纸,电子祭祀工具在聊天的时候想到给逝去的亲人烧AI过去,但是找了半天没找到在线烧纸的。一般只有app,但是我就是想临时烧一下。算了不管了,干脆写一个!
使用地址:https://burning.zhheo.com/
(别骂了,我知道很抽象)
支持一些常见祭品和自定义祭品,还加了一些小巧思等待你发现。
另外,这很环 ...
经验分享 未读
WebMCP适配教程:为浏览器AI预备好,让网页向 AI 提供工具,本博客已支持MCP 这两年快被说烂了。各种 server 遍地都是,数据库、搜索、设计工具一个个接进来。但有个东西一直没人正经做:网页自己。
网页其实是 AI 最该直接操作的载体。它有 UI、有状态、带着用户的登录身份,AI 想帮你干活的时候,与其靠截图猜、靠坐标点,不如让网站自己把能力说清楚。这个想法就是 W ...
我的项目 未读
我将我最初接触 Vibe Coding 的飞机大战重写了,飞机大战2.0登场在3年前,那个时候我其实就用AI写很多东西了,不过那个时候还处于AI早期,我当时也是代码小白,费了很大劲用各种复制粘贴大法才写出了飞机大战。
文章地址:GPT4上手体验:让GPT写一个飞机大战游戏,编程能力直线提升
1.0版本试玩地址:https://tools.zhheo.com/Aircraf ...
我的项目 未读
抖音iframe代码生成器:将抖音链接转为可嵌入网页的iframe代码逛洪绘星空的时候看到有博主写了文章如何在自己的博客中插入抖音短视频,看到这个东西不错,但是需要提取id,又得浏览器编辑操作等太麻烦了。
效果如下:
于是直接搓一个链接转代码的小工具:
直接点击抖音的分享链接按钮,然后就会有一段文本,直接粘贴即可,例如
17.48 复制打开抖音,看看【林边阿明的 ...
经验分享 未读
Taiwindcss项目如何混淆类名,React项目压缩类名教程最近做的网页我都是用Taiwindcss来搞的,因为编辑起来很方便,不需要html和css来回去切换,直接编辑一个文件即可。无论是修改还是调整都很快捷。但是类名有的时候过长了,所以就找了个插件来压缩、混淆类名,来节省空间。
混淆只在build阶段有效,dev还是普通类名,不影响。
安装插件执行
1n ...
经验分享 未读
实现全站图片使用avif格式,替代臃肿的webp教程前面写了个文章讲述关于HDR的事情,我也通过HDR了解到了关于AVIF格式的相关信息。越看越喜欢。我想将我的博客文章也换成avif。
avif的体积优势真的太大了。另外我已经实现了全站avif,在支持avif的浏览器下你在本博客访问的绝大多数图片均使用avif格式。
本站已实现全站avif。
就 ...
经验分享 未读
在网页中展示HDR图像,用iPhone拍摄,用AVIF、JPG和HDRMP4展示目前很多网站采用webp+其他格式兼容的方案。webp作为当下非常流行的在线网站的浏览格式非常不错。但是AVIF的出现我觉得可以打破一些webp擅长的领域,例如图像压缩。并且还支持一些webp不支持的特性,例如HDR。
我特别喜欢HDR,这也是我使用Apple设备的重要原因之一。可以chrome并不 ...
我的项目 未读
基于百度统计实现显示近一年的pv、uv数据的API搭建因为之前我的界面是用的51la的数据,但是我近期为了隐私和数据考虑想尽可能减少第三方的统计服务,所以想要移除掉51la,但是在我的界面的数据用的51la的数据,所以得想办法使用百度统计来替换一下。
百度统计提供了TongjiAPI,所以我们可以直接使用这个API来获取。
实现效果:
https:// ...
经验分享 未读
Python一键检查Butterfly主题友情链接可用性脚本因为友情链接实在是太多了,想要高频率检查几乎不可能,所以写了个python脚本来读取本地yml文件,然后发送head请求来检查是否能够访问。检查完生成一个txt文件能够看到所有无法请求到的url,然后就可以一个一个手动访问查看是否有问题。证明确实无法访问的移动到失联列表,显著提高效率。
友情链接格式 ...
经验分享 未读
HeoBlog存在大量网址尚未收录到Google的情况解决方案我在清理的时候发现有几千个网址没有被收录,仔细一看发现很多链接都是错误的,没有带html后缀,访问直接就404了。
我感觉减少这些错误的地址对于收录的权重来说还是比较重要的,我们可以点进去看一下这些地址从哪里来的。
数据从哪里来点击放大镜可以看到
我发现这些地址都来自于他们本身
然后在f12 ...
经验分享 未读
使用Git将Hexo部署在服务器以确保以下情况。
已经成功在电脑上部署、安装、使用Hexo创建博客。
已有服务器,安装了宝塔面板
已经通过SSH密钥成功连接服务器(不推荐用密码)
服务器已经安装了Git(可以ssh使用命令git --version查看git版本)
如果上面情况没达成,那么需要访问咕咕写的:将Hexo部署到阿里 ...
经验分享 未读
如何适配macOS的Safari将网站保存到应用的功能上一篇文章介绍了如何将网站保存为应用程序。Safari的网站应用程序有着与macOS无缝协同的配合、更好的性能。那么作为网站主如何将自己的网站适配macOS的新特性呢?
这个文章主要来介绍一下如何将你的网站适配Safari的macAPP。
如果您的网站有自己的导航控件,或者您的网站上下文中不需要导航 ...
经验分享 未读
如何自己搭建busuanzi不蒜子平台,搭建静态博客的访问量统计之前看了一下网站的网络响应,可以说busuanzi占用了50%多的时间,busuanzi不蒜子太慢太卡,而很多静态博客都是用的busuanzi。毕竟公益免费。但是速度实在是太慢了,严重拖垮了网站速度。所以我放弃了数百万的数据,还是自搭建比较香,博客速度提升一大截。
看到杜老师开的公益项目,自搭建了一 ...
经验分享 未读
Hexo的Butterfly魔改教程:我的装备,分享你在用的设备受到林木木的好物界面影响,制作了一个装备界面,你可以非常方便的分享你正在使用的商品和设备,算是朋友之间推荐的一种吧。也避免了大家询问“你用的是什么电脑啊”,“博主用的是什么好东西啊”这种情况。我经常写一些文章来介绍产品的使用体验,通过这个功能也能很方便的链接到文章。所以我认为这个功能可以和博客无缝配 ...
经验分享 未读
让网页支持iOS添加到主屏幕全屏应用,webapp启动图生成好久没有写魔改了,这次写一个提升网页体验的魔改教程吧!因为比较喜欢打开APP的感觉,但是为了博客做一个app显然是大材小用了。毕竟也不是社交媒体社区之类的。所以一个简单的类似应用内一样的app是最好的。看到了爱发电的iOS版本用的就是添加网页到桌面的方式,但是没开启pwa,所以我就尝试一下复刻。
...
我的项目 未读
如何让博客支持AI摘要,使用TianliGPT自动生成文章的AI摘要最近研究AI在博客和文章领域的应用,发现AI摘要是一个很不错的方向,研究了很久给搞出来了。在这篇文章中,我将帮助大家如何让你的博客接入TianliGPT。
了解文章摘要的升级版PostChat,支持知识库对话、无限摘要额度
访问项目Github仓库
随机访问已经支持TianliGPT的网站
效果预览 ...
我的项目 未读
微信公众号静态单页 - 优雅的让用户关注你的公众号大多数站长其实比较喜欢在自己的页面上悬浮显示自己的公众号二维码,我其实一直对这种行为非常排斥。因为二维码这种东西在我看来并不好看。即使你做了美化,那结果其实就是屎上雕花而已。所以我从一开始设计关注公众号挂件时,就避免用户直接看到二维码。
那么如何才能显示二维码呢?一般来说,要么是通过鼠标hover悬 ...
我的项目 未读
HeoMusic - 一个开源的基于Aplayer和MetingJS的静态音乐播放器看到安知鱼写的独立的音乐,感觉很不错,突发奇想想要给自己写一个音乐播放器,用于iPad挂墙上的时候放音乐显示歌词。虽然Apple Music的界面我非常喜欢,奈何中文曲库还有待完善。其他音乐app界面都太丑了,所以写了一个静态网页。
效果预览
HeoMusic - 用音乐感染人心
特性多设备兼容性支 ...
经验分享 未读
网页H5字体文件只提取项目中用到的文字,大幅度压缩字体大小近期有个项目,我的设计稿中用到了一些宋体,但是作为移动端H5页面大多都只有系统默认的字体,偏黑体更多一些。但是纯黑体表现的更多是简洁、严肃、理性。但是如果想表达更加感性的东西时,我们可能更多的是需要宋体来突出文化底蕴。
虽然文字比较少,但是使用图片的方法一个是体积太大,一个是不容易编辑,再一个就是不 ...
我的项目 未读
友链朋友圈5 - 我的部署历程与主题样式分享友链朋友圈已经是一个历史悠久的项目了,这次yyyz开发了全新版本为这个老项目焕发生机。
部署项目我个人用的方案是:Docker+Sqlite
使用这个方案你需要一个服务器。没有服务器的小伙伴请看更多部署方式。
预览我的部署效果
后端部署后端部署非常容易。你需要有python3.8即以上和机器安装d ...
经验分享 未读
腾讯云COS配置教程:我是如何将COS加入到Hexo博客工作流程中的最开始打造低成本博客的时候,使用的是GitHub转七牛云图床上的。当时流量小,加上七牛云有无限期10G免费额度,所以就用着了。后来因为转HTTPS,再因为自己域名服务器都在腾讯云,所以也将七牛云转到腾讯云上了。还有一个原因就是腾讯COS比七牛云便宜。
转移图床得益于转移过程非常的简单,也加速了我用腾 ...
我的项目 未读
洪墨时光主题 - 免费开源的图片信息流Typecho主题想要做一个相册功能,一开始考虑改造butterfly,但是考虑到博客真的太臃肿了,并且即刻短文一定程度与这个功能有重复性,再加上每次部署都要等待很久,所以目前还是打算将相册站独立出来。
找了很多主题,发现Time主题非常适合我所期望的,简单展示图片的需求,而且开源免费。所以这就是我选择这个主题的原因 ...




















































