分类：前端

基于Nextjs的说说程序
TL;DR

点这里看效果： https://ss.banzhuanriji.com

发布，查看

一代人有一代人的QQ空间要踩 XD ，可是QQ空间怎么少的了说说呢。而且发长文会带动一切RSS订阅用户，偶尔想当个动态/朋友圈发的话，太打扰人了。

所以我想到了两种方案：
- RSS避免某个分类的文章，把这个分类当做说说来发。但我想了想，似乎在function里加一些方法直接控制数据更好用一点，而且样式制作可以直接在CSS里修改，不影响其他文章样式内容。所以wordpress的方案又分为两种
  - 不经过RSS的分类
  - 在wordpress的function中创建独立的方法内容
- 创建一个独立的说说页面
但是目前wordpress的数据库已经够复杂，冗余过于夸张了。并且之后如果我不希望使用wordpress的话，如何迁移？所以决定使用独立的方案。

第一想到的就是目前已经存在的有没有可用的。第一个想到的就是面条大佬的BroadcastChannel ，把TG频道做数据来源。实话实说挺好用的。不过样式不可控，可能需要自己修改，且一些TG的内容样式不支持。所以我就采用了Nextjs+neon数据库的方案写了这个程序。

功能
- 浏览内容，分页
- 鉴权登录
- 发布内容
忽略了内容修改的功能，因为要做修改的话可能需要在首页做登录判断，然后在布局上做一些按钮预留。想了想暂时不做这个了

特色

如果可以成为特色的话…
- 全部白嫖，白嫖！
- 结构超级简单
- Markdown支持
预览

下载

如果你有兴趣可以查看这里： https://ss.banzhuanriji.com

暂时没有提供下载，等我完善之后在github上发出来XD。比较感兴趣的话也可以联系我，我会发给你一份源码： m#hoytzhang.com 或者在文章下面留言；D
2025年5月19日
如何为wordpress的文章添加阅读量
要在 WordPress 上实现文章阅读统计（跟踪每篇文章的阅读次数或页面浏览量），可以借助插件或自定义代码。以下是几种常见的方法和工具，如果使用代码请注意文章内容。

方法一：使用插件实现文章阅读统计
1. MonsterInsights
  - MonsterInsights 是最受欢迎的 Google Analytics 插件之一，可以直接在 WordPress 仪表板中查看每篇文章的页面浏览量、访客行为、跳出率等数据。通过其 Page Insights 扩展，还可以查看单篇文章的详细统计（如页面浏览量、停留时间等）。必须绑定GA。
2. WP Statistics
  - WP Statistics 是一个隐私友好的分析插件，符合 GDPR 要求，无需外部账户，直接在 WordPress 数据库中存储数据。它可以跟踪每篇文章的访问量，并提供详细的图表和分类分析。不过最顶上那个评论似乎说明了一些问题，我没尝试这个插件，观望一下。
3. Post Views Counter
  - 一个轻量级插件，专门用于显示文章、页面或自定义内容的浏览次数。它支持通过 PHP、JavaScript 或 REST API 跟踪数据，并允许自定义计数器的显示位置和样式。
4. Jetpack Stats
  - Jetpack 的统计模块提供文章的浏览量、热门内容、流量来源等数据，适合 WordPress.com 用户或安装了 Jetpack 的自托管站点。免费用户可查看过去 7 天的统计，付费计划解锁更多功能。
5. Independent Analytics
  - 一个专为 WordPress 设计的免费分析插件，加载速度快，符合 GDPR。它可以自动记录文章的访问量，并按类别显示统计数据。
6. 如果你恰好财力雄厚，你可以使用一些主题的pro版本自带的功能
  - 这里就不对赘述了，例如我使用的blocksy主题，在设置页面左侧点击blocksy，设置中文章元数据打开显示即可。
方法二：插件之短码插件(推荐)
1. Post Views for Jetpack
  - 提供短码，可以在文章、页面或小工具中显示各种统计数据。以下部分代码复制于这个插件的讨论区： https://wordpress.org/support/topic/way-to-display-views-in-blocksy-post-meta/
这个插件如何在blocksy中使用？请在你的function.php中添加以下代码（注意把[sbs_views] 修改为你上面短码插件中约定的短码）：
```
add_filter( 'blocksy:archive:render-card-layer', function ( $output, $single_component) {
	if ( 'post_meta' !== $single_component['id'] ) {
		return $output;
	}
	$post_views = do_shortcode( '[sbs_views]' );

	$output = str_replace( '</li></ul>', '</li><li class="post-views">' . $post_views . '</li></ul>', $output );
	return $output;
}, 11, 2 );
```
方法三：自定义代码实现阅读统计

在你的主题的function.php中添加以下代码：
```
// 记录文章浏览量
function set_post_views($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if ($count == '') {
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    } else {
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}

// 在单篇文章页面记录浏览量
function track_post_views($postID) {
    if (!is_single()) return;
    if (empty($postID)) {
        global $post;
        $postID = $post->ID;
    }
    set_post_views($postID);
}
add_action('wp_head', 'track_post_views');

// 显示文章浏览量
function get_post_views($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if ($count == '') {
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0 Views";
    }
    return $count . ' Views';
}
```
在需要使用的地方添加：
```
echo get_post_views(get_the_ID());
```
如果需要在blocksy主题中使用：
```
add_filter( 'blocksy:archive:render-card-layer', function ( $output, $single_component ) {
    if ( 'post_meta' !== $single_component['id'] ) {
        return $output;
    }

    $output = str_replace( '</li></ul>', '</li><li class="post-views">' . get_post_views(get_the_ID()) . '</li></ul>', $output );
    return $output;
}, 10, 2 );
```
注意上面所有的代码部分，可能会造成不可回溯的内容。

部分可能会在你数据库的前缀_postmeta表中创建很多key为post_views_count 的数据，介意的话可以使用第三方插件或者自己手动修改。另外注意，有的主题不允许修改functions.php的代码，你复制代码保存失败时，可以按 ctrl+ shift + v 粘贴。
2025年5月15日
从Typecho安全平移到WordPress
这里不比较Typecho与Wordpress的好坏。实际上优缺点都很明显。但如果你没有其他想法，只是想单纯写写内容，Notebook才是最棒的选择。我只是想把加的各位朋友的友链放在除了友链页以外的其他页面，那貌似只能放在sidebar了，所以选择了一个双栏的杂志主题。后来想了想，直接换wordpress得了。

1. 导出数据

数据导出当然使用的是ByTyp，但是我记得之前第一次安装是有什么问题的，貌似是PHP版本不对还是什么东西，忘记了，不过我记得我修改了一些东西。如果你会有这个问题并且你发现搜索不到解决方案，你可以点下面的按钮下载我的备份：

ByeTyp_3zCNM 下载

2. 备份

备份你需要做以下备份
- 下载Typecho的所有文件内容
- 下载Typecho的数据库备份文件
- 尝试新建数据库并导入数据库备份文件查看是否可以导入
- 使用Typecho的备份功能下载备份文件
- 检查以上备份
3. 安装Wordpress和导入数据

因为我后端使用的是宝塔，所以有一键部署。我的域名是banzhuanriji.com，我新建的网站绑定的域名为abc(这里你自己设置).banzhuanriji.com，然后所有的操作都是在这个网站上进行的。

工具-导入-立即安装，安装完成后会显示【运行导入器】，然后选择上面ByTyp导出的文件即可，选择接受用户即可。

4. 修改域名
1. 检查上面的备份内容
2. wordpress后台，设置-常规：WordPress 地址（URL）和站点地址（URL）修改为你的地址
3. 修改网站文件夹名称，也就是删除原来的 banzhuanriji.com，把abc.banzhuangriji.com，修改为banzhuanriji.com
4. 重启Nginx
5. 安装需要的插件

我是所有都设置好之后才修改域名的，现在我点击主题的自定义，就会先显示几条错误提示，再显示自定义网页页面。错误内容如下：
```
Warning: Undefined array key "mp_featuredimg_1" in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 1130

Warning: Trying to access array offset on value of type null in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 1130

Warning: Undefined array key "mp_featuredimg_1" in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 1131

Warning: Trying to access array offset on value of type null in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 1131

Warning: Undefined array key "mp_featuredimg_1" in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 603

Warning: Trying to access array offset on value of type null in /www/wwwroot/banzhuanriji.com/wp-includes/class-wp-customize-widgets.php on line 603
```
貌似是Blocky插件的问题，到现在我都不知道怎么解决…

6. 其他

关于安装的插件和主题，有兴趣的话可以查看关于页面。

如果你没有想使用Wordpress，那么我推荐你使用Tp2MD，可以导出到Markdown文件，你经过简单的修改可以直接在一些hexo，hugo，nextjs或者astro等可以使用Markdown文件的博客系统。
2025年5月12日
堵不如疏，用LLMS.TXT对ai爬虫进行引导
最近发现网站访问量异常。脚标的“当前浏览次数”数字异常。看了一下后台数据貌似是被刷流量了？搜索了一下ip才发现是被ai爬虫爬的。吐槽一下阿里云的ECS，CPU到70%就直接卡死了。面对ai爬虫，2C2G的小机感觉压力好大。想起来之前读的ruanyifeng的科技爱好者周刊（第 343 期）：如何阻止 AI 爬虫，里面提到了两种防止ai爬虫的方案：
- Cloudflare
- Anubis
其中Anubis的逻辑大概是：

页面会在用户的浏览器上，执行一段 JS 程序，进行大量的数学计算。直到计算答案正确，才可以访问目标网站。

这个过程有时很耗时，可能需要1～2分钟。
……
那么，Anubis 到底让爬虫计算什么？

具体来说，就是下面这行代码，计算一个哈希值。

const hash = await sha256(${challenge}${nonce});

可以看到，它就是用 SHA256 算法，计算一个字符串的哈希值。

这个字符串由两部分组成，第一部分challenge，由用户的一些公开信息连接而成，包括用户的 IP 地址、浏览器 user-agent 字段、当前日期、Anubis 的公钥等。

第二部分nonce，表示迭代次数，第一次计算就是1，第二次计算就是2，以此类推。

Anubis 的默认设定是，计算出来的哈希值的前五位必须都为0，否则 nonce 自动加1，再次进行计算，直到满足要求为止。

有时，可能需要计算几百万次，才能得到合格的哈希值。熟悉比特币的同学，应该一眼看出来了，这就是比特币的算法。比特币是非常耗费算力的，所以 Anubis 也能很有效地消耗爬虫的 CPU。

但是这对一个个人网站实在太无厘头了！文章最开始提到了使用robots.txt来拒绝爬虫，但貌似AI的爬虫都不遵守robots.txt的内容… 经过我的搜索了解，我找到了llms.txt ，你可以理解为这是面对ai的robots.txt ，它可以大幅度减少ai爬虫对资源的无意义消耗。这里是本站点的 LLMs.txt

下面我讲简单介绍一下llms.txt，以及如何使用它。

llms.txt 的作用

llms.txt 似乎是一种新兴的网站标准，旨在为大型语言模型（LLMs）提供一个简洁的总结，帮助它们快速获取网站的核心信息。它通常是一个 Markdown 文件，放在网站根目录（如 /llms.txt），包含网站的背景、指南和指向详细文档的链接。这对于 LLMs 来说非常有用，因为它们的上下文窗口有限，无法处理整个网站的复杂 HTML 结构。研究表明，它特别适用于需要快速访问技术文档和 API 的场景，如软件开发环境。

如何使用 llms.txt

对于网站所有者，可以按照以下步骤创建和使用 llms.txt：
- 创建文件: 在网站根目录创建一个名为 llms.txt 的文件，使用 Markdown 格式编写。
- 添加内容: 包括标题（H1）、摘要（使用 blockquote）、可选的详细部分和链接。例如：
```
# My Website

> This is a brief summary of what my website offers.
Here are some key points:
- It provides [API documentation](https://example.com/api.md)
- It includes [tutorials](https://example.com/tutorials.md)
```
- 提供 Markdown 版本: 为关键页面提供 Markdown 版本，通过在 URL 后加 .md 实现。
- 使用工具: 可以利用如 llms.txt 生成器自动生成文件，简化过程。
对于 LLMs，系统会检查网站是否有 /llms.txt 文件，并使用其中的信息快速了解网站，通过链接找到更多详情。

关于周边

为什么我上面会提到大幅度减少呢？因为这是一个新的民间协议，是一个新生的，约定俗成的内容。面对蓬勃发展的ai产业，很多产品经理不会要求自家ai爬虫遵守规则的。

llms.txt 是一种 2024 年 9 月由 Jeremy Howard 提出的网站标准，旨在增强大型语言模型（LLMs）对网站内容的理解和利用，特别是在推理阶段。其设计初衷是解决 LLMs 上下文窗口有限的问题，使其能够高效处理网站信息，而无需解析复杂的 HTML 结构。

llms.txt 的主要作用是为网站提供一个结构化、简洁的 LLM 友好内容入口。证据倾向于认为，它通过提供简短的摘要、背景信息和链接，帮助 LLMs 快速了解网站的目的和内容，避免处理复杂的网页元素如导航、广告和 JavaScript。这对于 LLMs 来说尤为重要，因为它们的上下文窗口通常无法容纳整个网站的全部内容。

使用方法与结构

对于网站所有者，创建和使用 llms.txt 的方法如下：

创建文件：
- 在网站根目录创建一个名为 llms.txt 的文件。
- 使用 Markdown 格式编写，确保内容适合人类阅读，也适合 LLMs 解析。
文件结构：
- 标题（H1）：必须包含项目或网站的名称，例如 # 搬砖日记 。
- 摘要：使用 blockquote 格式提供简短描述，例如 > 白天给代码写对象，深夜给自己写日记 。
- 详细部分（可选）：可以包括段落或列表，但不使用额外的标题，例如：
```
Here are some key points about my website:
- It provides [API documentation](https://example.com/api.md)
- It includes [tutorials](https://example.com/tutorials.md)
```
- 文件列表（可选）：使用 H2 标题分隔，包含超链接和可选说明，例如：
```
## Resources
- [Detailed Guide](https://example.com/guide.md): Comprehensive user manual
```
- “Optional”部分（可选）：用于次要信息，LLMs 可以选择跳过，例如：
```
## Optional
- [Additional Resources](https://example.com/more.md)
```
- 为网站的关键页面提供 Markdown 版本，你可以参考这里： https://docs.fastht.ml/
如果你储存的txt文件在访问时出现中文乱码，那么你应该修改服务器配置：

Nginx
```
    # Serve .txt files with the correct Content-Type
    location ~ \.txt$ {
        default_type text/plain;
        charset utf-8;    # Ensure charset is specified as UTF-8
    }
```
Apache
```
# Ensure the default charset is set to UTF-8
    AddDefaultCharset UTF-8

    # Configure specific file types with UTF-8 charset
    <FilesMatch "\.(txt)$">
        ForceType 'text/plain; charset=UTF-8'
    </FilesMatch>
```
以上均为需要在配置文件中新添加的内容，请勿覆盖原有内容

最近Github多次从多个技术层面对大陆ip/用户进行了筛选封锁，据说是被CSDN的搬空Github给整的… 无论如何，虽然我不是ai从业者，但是如果恰好有相关的朋友看到这里，我给了一些小建议：
- 在访问网站时，首先检查是否存在 /llms.txt 文件。
- 使用文件中的信息快速了解网站的目的，并通过提供的链接找到详细内容，例如 API 文档或教程。
- 可以结合工具如 llms_txt2ctx 解析文件，生成适合 LLMs 的上下文。
毕竟前台页面是给人看的。如果有winwin的方案，何乐而不为呢？
2025年5月5日

HTTP状态码全指南

一、状态码分类逻辑

HTTP状态码按首位数字分为5类，构成Web通信的「响应语言」：

1xx：信息性状态（协议处理中）
2xx：成功状态（请求已达成）
3xx：重定向状态（资源位置变更）
4xx：客户端错误（请求不合法）
5xx：服务端错误（服务器处理失败）

这种分类方式让开发者能快速定位请求问题的大致方向，极大提升调试效率。

二、全量状态码速查表

1xx Informational（信息响应）

状态码	名称	典型场景	补充说明
100	Continue	客户端应继续发送请求体	常用于大文件上传，先确认服务器接收意向
101	Switching Protocols	服务器同意升级协议（如WebSocket）	需在请求头中指定`Upgrade`字段
102	Processing	服务器正在处理但未完成	多用于WebDAV协议下的复杂操作

2xx Success（成功响应）

状态码	名称	关键特性	常见应用场景
200	OK	标准成功响应	GET请求成功返回数据
201	Created	资源创建成功（POST返回新URL）	接口创建用户、商品等资源时使用
202	Accepted	请求已接收但未处理完	异步任务提交（如文件上传排队）
204	No Content	响应体为空（如DELETE成功）	删除资源后，减少不必要的数据传输

3xx Redirection（重定向）

状态码	名称	缓存行为	方法保留规则	适用场景
301	Moved Permanently	永久缓存	GET可能变HEAD	网站域名更换、页面永久迁移
302	Found	临时缓存	方法可能改变	登录成功后跳转首页
307	Temporary Redirect	不缓存	强制保留原始方法	临时维护页面跳转
308	Permanent Redirect	永久缓存	强制保留原始方法	API接口版本永久变更

4xx Client Error（客户端错误）

状态码	名称	高频触发场景	修复建议
400	Bad Request	请求语法错误	检查参数格式、请求头完整性
401	Unauthorized	未提供有效身份凭证	添加认证信息（如Token、Basic Auth）
403	Forbidden	权限不足（如访问私有文件）	确认用户角色权限配置
404	Not Found	资源不存在	检查URL路径或资源删除逻辑
429	Too Many Requests	触发速率限制	调整请求频率或申请更高配额

5xx Server Error（服务端错误）

状态码	名称	故障类型	排查方向
500	Internal Server Error	未分类的服务器错误	检查服务器日志、代码异常捕获
502	Bad Gateway	上游服务器无响应	确认网关配置、后端服务健康状态
503	Service Unavailable	主动停机维护/过载	查看维护公告、扩容服务器资源
504	Gateway Timeout	上游服务器响应超时	优化网络配置、增加超时重试机制

三、关键场景实战指南

1. SEO优化组合拳

301+308：永久迁移时保留链接权重
429+Retry-After：应对爬虫时友好限流

2. API设计黄金法则

GET /api/users/1 HTTP/1.1
-> 200 OK（成功）
-> 404 Not Found（资源不存在）
-> 410 Gone（资源已删除且无新地址）

3. 错误处理最佳实践

4xx错误必须返回清晰错误详情（如JSON Body）
5xx错误应记录完整日志链（Request-ID追踪）

四、冷知识彩蛋

418 I’m a teapot：源自HTTP愚人节RFC（真实存在于某些库中）
206 Partial Content：支持断点续传的核心状态码

2025年4月18日

一些免费的图床整理和对比

因为我有SM.MS账号，所以一直是登录使用。最近才发现SM.MS禁止了游客上传图像，今天试的imgdd上传出现了问题。正好闲来无事整理一下现在可用的免费图床。

图像处理：

https://ic.yunimg.cc/

可选择多种文件尺寸和图像质量，并可在线预览对比图像质量后保存。

https://imagestool.com/webp2jpg-online/

几乎全能图像在线转换压缩处理工具

图床

以下为图床列表，示例图片文件大小为1.01Mb左右(1041 kb，1065532 字节)，你可以按F12，在开发人员工具中选择网络-停用缓存，然后按F5刷新页面，查看图片下载速度。

只做收集使用，没有任何利益关系。请注意备份您的数据

（更多…）

2025年3月24日
Astro初体验
初体验的问题

作为一个前端新手，我决定用 Astro 框架重构个人博客。听说它的静态生成能力和 Partial Hydration 特性可以让网站又快又省资源，这对我这种追求极简的写作者来说简直完美。本地开发时一切顺利，热更新响应迅速，Markdown 渲染流畅。但当我部署到 Vercel 后，用户反馈点击文章链接需要等待 3-5 秒才能看到内容。整个跳转给我的感觉就是卡卡的 —— 明明用了静态站点生成，为什么会有这个诡异的延迟？

打开 Network 面板重新加载页面，发现：

HTML 文件加载仅需 100ms，但主内容渲染延迟了 2.3s；页面加载时触发了多个；Hydration 事件客户端；JS 体积达到 420KB…

然后我大概就知道问题在哪里了。

简单地说你可以理解为，本来一次点击，浏览器从A页面跳转到B页面，无论是A页面的消失还是B页面的逐步呈现，这个过程都没有被忽略。Astro的部分渲染，在B页面被完全加载出来之前都停留在A页面，他需要等待B页面的不同内容加载之后刷新视图，呈现B页面的内容。

另外我发现这个特行可以让你实现类似Android里的共享元素的炫酷效果。

我意识到问题可能与 Astro 的核心特性有关：

1. 过度使用客户端组件

在文章页模板中，我为了实现 “阅读进度条” 功能，错误地使用了client:load指令：
```
 <ReadingProgress client:load />
```
这导致整个组件在页面加载时立即执行 Hydration，阻塞了主线程。

2. 动态路由的 Hydration 策略

我的文章路由采用动态参数[slug].astro，默认配置下：
```
// astro.config.mjs（原配置） export default defineConfig({ experimental: { islands: false } });
```
这导致 Astro 在客户端重新渲染整个页面，而非仅更新必要部分。

3. 资源加载未优化

未压缩的图片平均大小 300KB;未启用 Gzip;第三方字体文件阻塞渲染。

这里图片我是引用的第三方图库，虽然没有加preload，但是速度其实还算可以。不过多张图片引用也会影响速度。

尤其要说一下这个字体，我最开始测试的，google fonts的访问速度怎么会比loli.net要快这么多？难道是国内也有服务器？

后来我发现了问题。

google fonts引用的css，是切割好的字体文件。也就是这个css可以理解为是一个目录，里面有分好包的实际字体文件（目前常用方法），然后这个css会分批引用实际字体文件。给👴🏻整无语了。一整个页面就在那里等它这个字体加载。

系统性优化方案

经过调试，我逐步实施了以下解决方案：

1. 组件 Hydration 策略优化
```
 <ReadingProgress client:visible />  <ArticleMeta server />
```
2. 配置调整

3. 资源加载优化

使用astro-imagetools自动压缩图片。其实直接添加懒加载就可以了。

4. 给所有二进制文件添加preload

优化后数据
- 优化后：首字节时间（TTFB）从 800ms 降至 120ms
- 最大内容渲染时间（LCP）从 2.8s 降至 700ms
- 客户端 JS 体积减少至 180KB(js问题不大)
最后

静态站点生成不等于自动高性能

前端性能优化需要系统性思维

Astro 的强大在于合理利用其特性，而非盲目使用

现在，我的博客不仅加载速度提升了，Lighthouse 98 XD。

更重要的是，我学会了如何通过 Chrome DevTools 和 Astro 内置工具进行性能分析。如果你也遇到类似问题，可以参考一下我上面的方案。（避雷Google fonts）
2025年3月13日
冷饭加鸡肋，越炒越无味

2025年3月14日更新：

没想到ruanyifeng这周和我写一个话题的内容。

https://www.ruanyifeng.com/blog/2025/03/weekly-issue-341.html

TL;DR

我不认为低代码平台+ai会变香

最近在 X 上又刷到有人吹低代码平台，说它“未来可期”。作为一个写了十几年代码的老程序员，我实在忍不住想吐槽。2025 年 3 月的今天，低代码仍然在炒，但我怎么看都觉得它像个老掉牙的故事——多年前就有人做过，有人退场，活下来的也没多风光。开发者真要为它担心失业？我看未必。

低代码的炒作历史

低代码并不新鲜。十年前就有一堆“零代码”“低代码”平台冒出来，喊着“拖拖拽拽就能做应用”。OutSystems、Mendix 这类老面孔仍在，国内也涌现了不少平台，但看看，有多少已经悄无声息地退出了市场？活下来的，像 Appian 或者钉钉宜搭，日子也不算滋润。我认识一哥们儿用低代码搭了个库存系统，业务一调整就改不动，最后还是找我重写。

根据Gartner 2024年报告，全球低代码市场规模增速已从2021年的23.6%下降至7.2%

Forrester 报告中的结论：低代码项目平均维护成本比传统开发高 2.3 倍。

AI的加入与现实

最近，低代码平台开始加入 AI，宣传上功能似乎变强了，能自动生成 UI、调优逻辑等。听起来很吸引人，但我一想，这不扯吗？“好用”不是一开始就该有的吗？AI 是新添的没错，但作为一个开发工具，基础功能好用才是最基本的要求。加了 AI 就吹得天花乱坠，好像以前不好用是理所当然似的。更别提 AI 生成的内容，改起来还是老样子——要么直接用，要么手动调整，跟十年前改代码没啥两样。AI 救不了低代码的命，最多也就是个噱头。

对开发者的影响

有人说低代码抢初级开发者的饭碗。确实，简单的表单和内部工具能拖几下搞定，初级程序员可能有点压力。但对我这种习惯复杂逻辑的人来说，低代码根本动不了我。那些“80% 简单需求”它能凑合，剩下 20% 的高性能、高定制化活儿，还得靠我们。

低代码还老给我添乱。客户用它搞个半成品，跑来让我修 bug、调性能，比从头写还费劲。我见过公司拿低代码做了个原型，上线后卡得要死，最后还得重构。省了点时间，却留下一堆烂摊子，这算啥“革命”啊？

收费模式的高数题

再说说低代码的收费模式，真是让人无语。免费版的基础功能弱得可怜，比如最多建几个表、连个像样的 API 都不行，想干点正事儿就得掏钱。收费功能层级森严，基本每个平台都有“基础版”“专业版”“企业版”之类的分级，价格一级比一级离谱。举个例子，我试过一个平台，免费版连导出数据都不行，想加个自定义插件，得升到每月几百块的专业版。更别提什么“无限用户”“高级支持”了，全锁在最贵的套餐里。这哪是工具啊，简直是圈钱的套路机器。

未来？别指望它翻天

低代码的粉丝总爱说未来会更智能，靠 AI 翻身。我听了只想笑。AI 是牛，但低代码加了 AI 就能写分布式系统？能优化算法？我看悬。这么多年，低代码的套路我都看透了：炒一波概念，忽悠一波企业用户，然后慢慢淡出视线。活下来的，要么靠大厂撑腰（比如微软的 Power Apps），要么苟在小众市场，风光不到哪去。

什么“低代码 + 传统开发共存”的说法，我也懒得信。企业用低代码无非图快图便宜，可业务一复杂，它就成鸡肋，重写成本还更高。我宁可从头写个扎实的系统，省得回头返工。

结论：低代码的未来

在我眼里，低代码就是个“伪命题”。炒了这么多年，没真干掉谁，也没见哪个平台成了行业霸主。加个 AI 也救不了它，免费功能鸡肋，收费还一套一套的。开发者要失业？除非你只会写“Hello World”。对我来说，低代码顶多是个玩具，玩玩行，想靠它吃饭，我看悬。

所以，别被低代码的宣传唬住了。想在这行混好，还是老老实实练功——算法、架构、DevOps，这些真本事才是我们的护身符。低代码？让它继续炒吧，我码我的代码。

2025年3月11日
所以，我是从哪里Copy的CSS样式
首先你可以查看这个页面： https://banzhuanriji.com/about.html

本主题原先是没有评论功能和样式的，我在AI的帮助下完成了基础的评论功能。那么CSS我是从哪里获取的呢？就是下面这个网站：

https://neumorphism.io/

有四个样式供你选择，并且可以选择光源效果。下面是我其他的一些获取CSS的方案：
- Codepen
不多介绍了

 https://codepen.io/
- Ui.glass
这个没什么特别的，帮你写一个毛玻璃效果的div

https://ui.glass/

如果你找不到体验地址可以点这里：https://ui.glass/generator/
- Uiverse.io
超级棒的整合了各种ui的css开源网站

 https://uiverse.io/
- 多边形图片SVG生成
这个我都不知道怎么介绍，随便编了一个标题，具体效果你可以点开看看

 https://www.softr.io/tools/svg-shape-generator
- 随机波浪线生成
https://getwaves.io/
- Headlessui
自我简介：旨在与Tailwind CSS完美兼容的样式

 https://headlessui.com/
- Page ui
建立在TailwindCSS之上，专为React制作的落地页集合

 https://pageui.shipixen.com/
- CSS buttons
CSS按钮大合集

 https://cssbuttons.app/
- CSS Portal
CSS Portal 是许多 CSS / HTML 示例以及如何在网站设计中使用它的地方。在这里，您将找到所有 CSS 属性和许多 CSS 生成器，以帮助您满足所有设计需求。您将找到数百页的工具、资源和生成器来帮助使用 CSS 和 HTML。我们所有的生成器都将生成必要的代码，然后您可以将其复制并粘贴到您的 Web 项目中。希望您发现此网站有助于帮助您满足 CSS 和 HTML 需求。

（为什么这么长，因为这也是我copy的）

https://www.cssportal.com/
2025年1月10日
一些获取随机图像的接口
不评判储存在服务器还是使用第三方的方案，只记录一些随机获取图像的接口。下面每个方案前都会放置相对于的接口的图像。

以下内容仅为个人记录用处，从未有意侵权已注册商标，也从未试图冒充任何开放内容官方。当然如果您认为下列内容侵犯了您的权益，请您与我联系 m#hoytzhang.com 。

无需注册的方案

Bing image

2025年3月3日发现该网站证书失效。有兴趣的朋友可以访问下面的开源地址。或者你也可以考虑自己部署这个仓库到vercel上。 https://github.com/flow2000/bing-wallpaper-api

TL;DR

获取bing每日图像的接口非常多，下面是我推荐的一个，目前运行还是比较稳定的

官网地址

 https://bing.img.run/api.html

开源地址

 https://github.com/mike126126/bing

使用方法

Bing今日壁纸
```
<img src="https://bing.img.run/uhd.php" alt="Bing每日壁纸UHD超高清原图" />
<img src="https://bing.img.run/1920x1080.php" alt="Bing每日壁纸1080P高清" />
<img src="https://bing.img.run/1366x768.php" alt="Bing每日壁纸普清" />
<img src="https://bing.img.run/m.php" alt="Bing每日壁纸手机版1080P高清" />
```
随机获取Bing历史壁纸
```
<img src="https://bing.img.run/rand_uhd.php" alt="随机获取Bing历史壁纸UHD超高清原图" />
<img src="https://bing.img.run/rand.php" alt="随机获取Bing历史壁纸1080P高清" />
<img src="https://bing.img.run/rand_1366x768.php" alt="随机获取Bing历史壁纸普清" />
<img src="https://bing.img.run/rand_m.php" alt="随机获取Bing历史壁纸手机版1080P高清" />
```
Picsum.Photos

官网

TL;DR

一款开源的，采用Unsplash图像源的免费网站

下面的内容我几乎是从他的官网直接复制过来的。你可以点击下面访问官网，带有图像更容易理解方便你使用。

https://picsum.photos/

源码

 https://github.com/DMarby/picsum-photos

使用方法
- 直接返回固定大小图像地址
```
https://picsum.photos/200/300
```
- 返回固定大小的方形图像
```
https://picsum.photos/200
```
- 获取指定id的图像，带有id的图像列表在这里：https://picsum.photos/images
```
https://picsum.photos/id/237/200/300
```
- 自定义seed的图像
```
https://picsum.photos/seed/picsum/200/300
```
- 去色图像（灰色）
```
https://picsum.photos/200/300?grayscale
```
- 添加高斯模糊（最后的参数支持1-10）
```
https://picsum.photos/200/300/?blur
https://picsum.photos/200/300/?blur=5
```
官方推荐的使用方法

您可以组合上述任何选项。

例如，获取灰度和模糊的特定图像。
```
https://picsum.photos/id/870/200/300?grayscale&blur=2
```
要在浏览器中请求多个相同大小的图片，请添加 random 查询参数以防止图片被缓存：
```
<img src="https://picsum.photos/200/300?random=1">
<img src="https://picsum.photos/200/300?random=2">
```
如果需要文件结尾，可以在 url 末尾添加 .jpg。
```
https://picsum.photos/200/300.jpg
```
要获取 WebP 格式的图像，您可以在 URL 末尾添加 .webp。
```
https://picsum.photos/200/300.webp
```
列出图像地址

列出图片

使用 /v2/list 端点获取图像列表。
```
https://picsum.photos/v2/list
```
默认情况下，API 将每页返回 30 个项目。

要请求另一个页面，请使用 ?page 参数。

要更改每页的项目数，请使用 ?limit 参数。
```
https://picsum.photos/v2/list?page=2&limit=100
```
链接的header需要包含有关下一页/上一页的分页信息

获取图像信息
```
https://picsum.photos/id/0/info
https://picsum.photos/seed/picsum/info
```
返回的格式如下
```
{
        "id": "0",
        "author": "Alejandro Escamilla",
        "width": 5616,
        "height": 3744,
        "url": "https://unsplash.com/...",
        "download_url": "https://picsum.photos/..."
}
```
LoremFlickr

官网

TL;DR

图像来自于Flickr，官网称目前的服务被严重影响

官网仅推荐当作占位符（Placeholder）来使用

 https://loremflickr.com/

开源地址

 https://github.com/MastaBaba/LoremFlickr-2
- 直接使用
如果你不指定任意内容，将会返回小猫的图像，例如下面的这种用法
```
https://loremflickr.com/320/240
```
- 指定主题
```
//这个地址将会返回`小狗（dog）`相关的图像
https://loremflickr.com/320/240/dog
```
- 保留色彩
相对于picsum的灰色图像，LoremFlickr可以选择保留更多色彩
```
https://loremflickr.com/g/320/240/paris
```
这个示例将会返回灰色的 小狗（dog） 相关的图像。你还可以尝试 p 、red 、 green 和 blue 这些关键字！
- 多个关键字
下面这个地址将会返回与 小猫（cat）和小狗（dog） 相关的图像
```
https://loremflickr.com/320/240/cat,dog
```
- 强调关键字
上面的使用方案可能会同时包含 小猫（cat）和小狗（dog） ，如果你像强调关键字，那么你可以使用下面的方法
```
https://loremflickr.com/320/240/cat,dog/all
```
可以搭配色彩关键字使用
```
https://loremflickr.com/g/320/240/cat,dog/all
```
- 锁定图像
```
https://loremflickr.com/320/240?lock=30976
```
- 避免重复图像，同样支持random函数
```
https://loremflickr.com/320/240?random=1
https://loremflickr.com/320/240?random=2
https://loremflickr.com/320/240?random=3
```
- 支持json返回数据
```
https://loremflickr.com/json/g/320/240/paris,girl/all
```
- 支持RSS订阅
```
https://loremflickr.com/rss/d/g/320/240/paris,girl/all
```
需要注册的方案

Unsplash

大名鼎鼎的Unsplash的免费接口寿终正寝后（貌似是因为流量太大且没有回流），api从开放式改为账号调用。

2024年6月11日官方下线了免费调用，但是你依旧可以注册后使用这个服务，不过免费服务存在一些限制，下面是三个档次的服务区别：
1. Demo：每小时50次调用
2. Production：在遵守Unsplash条件的前提下，每小时5000次
3. Enterprise：联系Unsplash团队
在第二条中，Unsplash的要求包括但不限于：
- 每张图片只允许使用Url返回的 photo.urls 的图像
- 用户进行图像下载时，必须使用 photo.links.download_location 的链接进行下载
- 每张图像展示时标明摄影师且附带摄影师的个人链接
- 不允许制作Unsplash的竞品程序
如果你可以接受并遵守以上条件，你可以访问这个文档进行申请：https://unsplash.com/documentation
2024年12月28日

分类： 前端

TL;DR

功能

特色

预览

下载

方法一：使用插件实现文章阅读统计

方法二：插件之短码插件(推荐)

方法三：自定义代码实现阅读统计

1. 导出数据

2. 备份

3. 安装Wordpress和导入数据

4. 修改域名

5. 安装需要的插件

6. 其他

llms.txt 的作用

如何使用 llms.txt

关于周边

使用方法与结构

创建文件：

文件结构：

Nginx

Apache

一、状态码分类逻辑

二、全量状态码速查表

1xx Informational（信息响应）

2xx Success（成功响应）

3xx Redirection（重定向）

4xx Client Error（客户端错误）

5xx Server Error（服务端错误）

三、关键场景实战指南

1. SEO优化组合拳

2. API设计黄金法则

3. 错误处理最佳实践

四、冷知识彩蛋

图像处理：

图床

初体验的问题

1. 过度使用客户端组件

2. 动态路由的 Hydration 策略

3. 资源加载未优化

系统性优化方案

1. 组件 Hydration 策略优化

2. 配置调整

3. 资源加载优化

4. 给所有二进制文件添加preload

最后

TL;DR

低代码的炒作历史

AI的加入与现实

对开发者的影响

收费模式的高数题

未来？别指望它翻天

结论：低代码的未来

无需注册的方案

Bing image

官网地址

开源地址

使用方法

Picsum.Photos

官网

源码

使用方法

官方推荐的使用方法

列出图像地址

获取图像信息

LoremFlickr

官网

开源地址

需要注册的方案

Unsplash

分类：前端