
哎呀，每年春暖花开的时候，别人踏春享受春天快乐时光的时候，就是我的最「悲伤」的季节，那个痛苦也只有经历过的才会懂，鼻涕眼泪流的那个伤心啊！

## 过敏

年轻的时候没觉得怎么样，能跑能跳的，年龄大了，各种问题就会暴露出来了。貌似过了35岁以后过敏体质就会愈发严重，这几年的春天真是难熬啊！对于过敏反应的临床症状，在医学上也米有什么特效药，某些药物也只是减轻过敏的症状而已，长期使用副作用也一堆，索性就挺着吧。

## 缓慢的进程

最近一直在写游戏的核心代码，由于眼睛极度难受，进程受到了影响，进度极其缓慢。就这样吧，挺过五一就能好多了。游戏目前分为了几个大模块，美工，时间线，动作，影响，以及成就。美工进行了一些草图的绘制，时间线的设计全部完毕，下一步开始「动作」代码的编写，以及产生的影响的代码编写，最后编写成就。然后更新游戏的图像及声音，最后进行测试。预计还得一段时间。

## 生活

生活还是老样子，没有什么变化，眼睛难受，写博客和读书都耽误了，期待这夏天，我爱你夏天，快来吧。


哎呀，每年春暖花开的时候，别人踏春享受春天快乐时光的时候，就是我的最「悲伤」的季节，那个痛苦也只有经历过的才会懂，鼻涕眼泪流的那个伤心啊！

又到了流鼻涕流眼泪的季节了


## 其一

早上起来，发现又死了两条鱼！草金鱼都能被我养死，就问你服不服？看了一下鱼食，发现已经过期了一年半了，哦吗噶的！罪过罪过！赶紧上拼多多下单了高级精品鱼食一份。通过此事可以见得食品安全问题是多么的重要，食物过期了就不要再次了，就算是喂鱼也不要尝试。

前几天心血来潮，下载了ollama个几个大模型，本地部署上了，琢磨着总得搞点啥吧？不然部署了也没啥用啊！突发奇想：

## 其二

美名其曰为本地rss阅读器接入大模型，初期构想是当rss解析完后，为每篇博文生成一个摘要，我寻思着这么简单的需求对于本地大模型来说不是小菜嘛？随便找了个博文扔给他，生成的摘要还是可以的，可惜，一旦批量生成，就会有各种问题，随后，我逐步的排查得出了最终的结论，这玩意根本行不通。

## 其三

念念不忘的不死心，对于大模型还是心存幻想，本来看到人家写了个小游戏挺爽的，自己三下五除二的也研究了一个JavaScript的游戏框架Phaser，没有专心的深入的去研究框架的使用，确琢磨起来如何让ai玩游戏。

我写了一个小游戏，有个扫地机，在房间里打扫卫生，开始手动控制扫地机操作清扫吸入垃圾，游戏功能的实现基本完成了，但是，我就是想让ai来操控这个扫地机，接下来，我就开始连接本地大模型，发送各种数据给大模型，各种调试骚操作，一顿操作猛如虎，最终得出个结论：大模型就是个二百五。好吧，浪费了时间验证了痛苦(」＞＜)」。

经过几次之后，我终于知道接入大模型还是太天真，ai除了一本正经的胡说八道，在处理逻辑时的瞬时反应的准确率还是很低的，低到可以说他自己都会怀疑自己吧。

## 总结

希望科学家们好好的研发大模型，让他来帮人类真正的做一些事情，而不是让他来胡说八道。


有什么蠢事？说出来让大家开心一下吧！

蠢事三则


下午开车出去，下车之后习惯性的拿出手机看了一眼，发现手机么信号，这就奇了个怪了！一种奇怪的焦虑逐渐的袭来，我猜，大概率是手机的SIM卡坏了？


## 没有信号的焦虑

开启关闭飞行模式，试了几次没反应，想把SIM卡拔出来擦擦，但是发现没有工具，随手翻到了一个圆规，就用尖尖的一头把卡弄出来了，擦擦放回去，没管用，好吧，这次没招了，只能去补卡了。去了附近的电信营业厅，说明来意，结果被告知此处无法补卡，只能去几公里外的总公司办理，心里很不爽！

找了个网络，上了微信告诉老婆手机卡坏了，无法打电话和开启移动网络，暂时无法联系。去接孩子放学，也没看到老师发在群里的消息，孩子没出来，就在外边傻等着，后来别的同学家长告诉我孩子在里边被留下开会，说什么学习委员和班长被留下开会，好吧，烦躁，等着吧。

## 一些软件无法登陆

想着登录手机电信营业大厅看看如何补卡，登录的时候提示可以手机一键登录，登不上去，登录上去才怪。寻思问问豆包看看有没有什么办法清理一下旧卡，看看还能不能救一下，结果还得登录，然后就没然后了。

好家伙，有种我的钱都不是我的了那种感觉，因为没有短信，一些网上的交易基本都无法进行，转账汇款都需要验证码，好家伙卡住你的钱的不是银行，是电信运营商，要是银行卡掉了，去补办，没有手机短信估计也是不行了。

感觉过内的大部分软件都需要手机登录，这就有点尴尬了。一旦你的手机SIM卡被停机，什么应用都无法使用了，这点相比国外的一些软件就差了很多，老外可以有选择的使用多种账户登录应用，而且并不强制实名，哎，没办法，懂得都懂。

好吧，我确实挺无聊的这会，所以，才会码出上边这些无聊的文字。



下午开车出去，下车之后习惯性的拿出手机看了一眼，发现手机么信号，这就奇了个怪了！一种奇怪的焦虑逐渐的袭来，我猜，大概率是手机的SIM卡坏了？

没有信号的焦虑--手机的SIM卡坏了


辽宁的西部是个奇怪的地方，春天这个季节在这里是非常的不明显的，气温一旦上来就是从零下十几度升温到零上二十几度，你可以体验那种一天四季的感觉。和人聊天说说天气，礼貌而又不失优雅，避免了尬聊的可能，而且，大家可以因为天气的问题聊上一会。

## 年过完了

稀里糊涂的年过完了，过年期间，最后一条孔雀鱼也是死翘翘了。去年买了几十条鱼，最终还是没能挺过冰冷的寒冬，怪我，不会养鱼还特么特别想养鱼，好好的鱼儿嚯嚯死了上百条了，罪过啊！

最近忙了起来了，人，一旦忙了起来就没有输出的欲望了，写点东西简直就是受罪，不知道写啥？看人家的博文，洋洋洒洒的，吃喝拉撒都能扒拉出几百上千字，我愣是憋不出个屁来。除了关注的那几个博客rss有空的时候看看，看到别人发的，尤其是自己不感兴趣的，噗嗤，这都写的什么玩意？哦，大概自己写的仨瓜俩枣也是那么回事吧！其实，自己写的博文或是代码根本没啥人看的，千万别在意。本来就没啥人看，竟然还有人评论说我，什么狗屁技术还出来写程序。哈哈哈，特么的是谁走漏的风声？我技术特别差这事，我只和我家狗说了，这事连我老婆都不知道。

去年，自己构思了一些项目，写着写着就发现怎么越写越费劲，自感功力不足，久而久之就没了兴趣，然后就不了了之了。哎呀，容我再想想，看看还有什么糟心的事？说出来大家继续开心下。哎，还真有，昨天我过生日，除了收到老妈和QQ邮箱的生日祝福，竟然再没有人祝我生日快乐了。直到晚上，我自己安排一顿烤肉，举起酒杯，和孩子老婆碰杯，说了句「祝我生日快乐」，然后，就没了下文。孩子忙于学习，老婆专注于自己的工作，我就是个多余。

## 梦想还是要有的

好了，人要学会调节自己的情绪，生气就是因为自己不够强大不够优秀。说了这么多，希望大家能够开心，下次我说点开心的事，比如落魄博主彩票中奖1000万，全款买路虎的开心历程。


辽宁的西部是个奇怪的地方，春天这个季节在这里是非常的不明显的，气温一旦上来就是从零下十几度升温到零上二十几度，你可以体验那种一天四季的感觉。和人聊天说说天气，礼貌而又不失优雅，避免了尬聊的可能，而且，大家可以因为天气的问题聊上一会。

辽西没有春天


昨天收到了邮件，提示suiyan.cc的域名即将到期，需要续费。早些时候就想把域名转移到Dynadot，但是一直没有行动，趁着这个机会，就把域名转移到了Dynadot。

## 往事

很早之前在国内折腾过几个域名和服务器，当年服务器备案的时候，还因为服务器上的论坛被发布了一些敏感信息，被处罚过几千块大洋，那时候是2005年前后吧，具体时间已经不太记得了，当时是自己组装的一台电脑，托管到了当地的机房，由于管理经验不足，当时很多「朋友」都在我的服务器上租用了「一亩三分地」部署了自己的网站，也有很多「朋友」在我的服务器上部署了自己的论坛，言论几图片我肯定是没法一一监督的。后来，东窗事发，公安就找到了我，说我的服务器没有备案，然后罚款了我几千块大洋。当时我也很无奈，内容不是我发的，网站也不是我建的，但是内容就出在我的服务器上，所以我就当了冤大头吧。后续那个网站怎么处理的，我也没有去了解，包括托管商也是后来和我补充的协议合同，他们到时免于了处罚。经过这事之后，我就再也没有再去折腾过域名和服务器了，主要是当时备案的流程太复杂，当时也没有精力去折腾。

## 现在

说说dynadot吧，Dynadot是ICANN认证的域名注册商，总部位于美国加州，主要面向全球用户，支持多语言界面（包括中文）和多种支付方式（如支付宝）。
Dynadot的域名注册流程非常简单，只需要填写一些基本信息，然后选择一个域名，支付费用即可。有时候还可以赶上打折优惠。

域名的管理方面，界面简约直观，我觉得功能简单的主要原因还是各方面的政策和监管的限制比较少，这个你看国内的域名注册流程和管理界面就知道了。


## 总结

选择Dynadot：
适合需要注册小众域名后缀（如.gay、.io）、追求隐私保护、或计划将网站托管在海外服务器的用户1。

选择阿里万网：
适合需快速完成ICP备案、注重本地化服务（如中文客服）、或主要面向国内用户的网站。

两者的核心差异在于监管环境和服务定位。Dynadot以国际化和灵活性见长，而阿里万网更符合国内法规要求，适合需合规运营的场景。用户可根据域名用途、目标受众及管理需求综合选择

链接：

[www.dynadot.com](https://www.dynadot.com/zh/)

昨天收到了邮件，提示suiyan.cc的域名即将到期，需要续费。早些时候就想把域名转移到Dynadot，但是一直没有行动，趁着这个机会，就把域名转移到了Dynadot。

域名续费前将域名转移到了Dynadot


## 写在岁末
> 2025年，一定会是一个充满挑战和机遇的一年。在这个充满不确定性的世界里，我选择了一个新的起点，开启了一个全新的旅程。

从2023年底开始，我就遭遇了人生的悲欢离合，可以说这一整年的快乐并不多，焦虑几乎贯穿了整个2024年。或许是因为对未来的迷茫，或许是对自己的怀疑，或许是对生活的不满，或许是对未来的恐惧。（这几个“或许”是AI提示给我的，我觉得说得挺好）。忙忙碌碌的一直到了年底，才开始有些喘气的机会，想起了一些曾经放弃的项目，一些半途扔掉的学习，每天都在瞎忙中挤出一些时间来继续。


## 碎言博客

之前我满怀信心地使用Next.js重构现有的博客，但没想到在使用过程中遇到了很多问题，最后还是放弃了。其中最麻烦的就是部署问题。当时没有尝试Vercel，而是使用了GitHub Pages。GitHub Pages部署需要编写自动化脚本，但总是遇到各种问题。后来尝试了Vercel，发现部署非常简单，而且免费，于是直接就换了。

## 更新了碎言

我直接使用Next.js和NextUI进行了重构。在现代前端框架和AI的帮助下，我迅速复刻了原有博客的全部功能。之前的做法是写完博客后，在本地运行以生成静态文件，然后推送到GitHub Pages。现在，我写完博客后直接推送到GitHub，然后Vercel会自动拉取并构建，这样就省去了本地生成静态文件的步骤。而且，Vercel的免费额度也足够使用。至少在国内，我感觉Vercel的打开速度比GitHub Pages快。

## 2025年的目标

继续写博客，保持每周一篇的习惯。从Python过渡到JavaScript，把一些项目用现代的JavaScript框架重构一下，顺带学习一些新的框架，比如Svelte就引起了我的兴趣。

## 总结

这一年似乎并没有太多特别的事情，除了成功考取驾照并度过实习期。作为一个普通人，时间总是匆匆流逝。希望2025年能更好。也希望看到这篇文章的朋友们，能和我一样，在2024年的最后一天，回顾过去，展望未来。我们2025年见。


2025年，一定会是一个充满挑战和机遇的一年。在这个充满不确定性的世界里，我选择了一个新的起点，开启了一个全新的旅程。

写在岁末：别了2024混混沌沌的一年



## verce好用但从来没想要去试试

最近琐事缠身，也没什么好写的，就写点简单的吧。前阵子一直在玩flux，生成了很多图片，感觉还不错，就想把它们放到博客里。但是，在博客里发图片实在不方便集中浏览，直接在博客基础上集成一个相册又觉得有些多余，最终决定手动撸一个简单的静态相册。

## 静态相册

起初，我打算找一个现成的相册，我要求的功能并不多，静态页面、瀑布流展示首页、图片详情页面、标签页面，以及一个搜索功能就好。但是找了半天也没找到合适的，我只需要一个小型简单的相册，因为我觉得我的图片最多也就几百或上千张，找来找去也没有合适的，算了，好久没写代码了，自己写一个吧。

因为不想用数据库，就用了一个json保存数据。所以其他都是前端，AI了一下，推荐next.js, 那就用它吧。AI辅助生成基本的框架，结合tailwind将页面美化了一下，就完成了。

## 部署到vercel

注册了vercel，它的部署非常简单，只需要把代码推到github上，然后在vercel的后台导入代码仓库，对于next.js的项目，vercel会自动检测到并自动部署，就是这么简单，搞定之后，我又把博客直接搬家到vercel上了。域名也解析过去了。想想之前部署GitHub pages 还得自己编写自动部署脚本，稍稍有点麻烦。

## 总结

vercel, 真的是太方便了，我感觉它的部署流程比GitHub pages 简单太多了。谁用谁知道，反正又不花钱，没啥可挑的。至于访问速度，感觉和GitHub pages 差不多，能用就行暂不挑。

对了，相册在上边导航上有连接，欢迎来看看。


vercel的部署竟然这么简单，有点意外。

把博客从GitHub迁移到到了vercel



## 早有感知

很早以前就觉得积薪可能会被迫关闭，此处省略了几千字，不想说什么，各位站长引以为戒，好自为之吧。

很早以前就觉得积薪可能会被迫关闭，此处省略了几千字，不想说什么，各位站长引以为戒，好自为之吧。

博客聚合网站：积薪，竟然关闭了！



## AI是我迷茫

这段时间里经历了很多困难，也获得了很多收获。对于编程曾经想过放弃，但是这阵子重新发现了AI的力量，让我发现了自己的方向。

去年的时候我还在到处找能用的AI，要么得科学上网要么用起来麻烦，这几天发现国产大模型纷纷出品了自己代码辅助插件，感觉真的很方便，于是我就开始用了。

这部刚刚下载了豆包的豆包marscode，打算吧之前的一些代码整理一下，精简更新一下。

## 人生就是在做减法

目前就是打算把博客的代码整理一下，删除无用的代码，版本更新上，功能再次精简更实用，删除掉以前的无用的主题，保留原始的模板，后续谁要是用了，关于样式就自己折腾吧。

重点把功能和程序的性能做好，把编写博文、生成静态页面、发布到GitHub上的流程都做好，其余的都是多余。

## marscode

marscode，今天第一次用，不但可以辅助编写代码，还可以辅助写博客，这个流弊了，对于我这个文笔能力差的人来说，真的很方便。推荐各位试试。


## 总结

通过重新发现 AI 的力量，我找到了自己在编程领域的方向。利用 MarsCode 这样的工具，我计划对博客代码进行精简和更新，提高功能和性能，并优化编写、生成和发布流程。我相信，这将为我的编程之旅注入新的活力，并帮助我更好地实现自己的目标。（请注意，这段是AI总结的）


通过重新发现 AI 的力量，我找到了自己在编程领域的方向。利用 MarsCode 这样的工具，我计划对博客代码进行精简和更新，提高功能和性能，并优化编写、生成和发布流程。我相信，这将为我的编程之旅注入新的活力，并帮助我更好地实现自己的目标。

与其在迷茫中困惑，不如在努力中前进



### 琐事

最近疲于生活琐事，计划一再变化，人生苦短世事无常啊。

### 编程

对于写代码竟然一点兴趣都没有了，甚至有些反感，一方面对编程的技术了解的不是很深入，一旦进入深水坑就失去了动力。另一方面，AI取代人工编写代码是迟早的事情，所以有些构思在脑袋里一想，嗯，AI能帮你实现，那么就没有兴趣了。

### blender

最近比较喜欢blender，虽然AI可以生成图片但是可控性不强，短期之内是无法取代人工的，但是AI出图胜在速度与创意，这点倒是可以借鉴的，但是AI没有感情，图片干涩无味。

### 未来

有些打算，但是还是默默的去做吧，最近说出来的事情都会发生改变。

### 最后

原神抽卡竟然连续四次小保底没歪...真是狗屎运了。

最近很忙碌，琐事一堆，不知从何说起。

差点忘了我还有一个博客...


最近没有写博客，一是不知道写什么，二是不想写。但是今晚睡不着，那就写点什么吧。

### 秧歌

昨天是中国的传统节日元宵节，自从带起口罩喘气那年开始，往年的年俗都被人类的健康给打败了。
今年算是摘掉口罩后恢复年俗的第一年。
我一直以为扭大秧歌很俗很土气，现代人的眼里充满了各种电子设备的色彩，还会去看这？
事实上就连我都没控制住自己，也是一股脑挤进了人群，忘记了东北的寒冷，爽快，好久没有这么爽快了！

人们似乎对于久远的文化、传统的习俗更感兴趣，这或是一种魔力，就像游戏里的装备，越是远古的太古级别越高级。
在这个逐渐被AI生成的垃圾取代的世界，纯粹的手工艺术传统艺术就显得那么珍贵了。
如今，你在终端看到的人或事和设备后的人可以说是完全不相干的，都是剧本、套路、流量、资本的运作。
人们不再用眼睛去看世界，而是手机。

### 博客

今年以后，你若能看到一篇排版奇怪，错字丢字的博文，获取应该去珍惜。
如果你发现某些博客的文章，写的就和模板似的，文笔通俗、写作规律、末尾总结，大概率是AI创作了。
微信公众号的文章已经很少看到有人去原创手写了。
若干年后，还在敲打键盘写博客会不会成为一种上古遗留下来的技能了？

### AI

最近没有写博客，也没有写代码。
没有写代码的主要原因是AI，因为当你想到一个需求一个功能，你一定回去面向AI编程。
这就好比一个游戏，明明是手动升级打怪，现在可以挂机开挂，一下子就没有了游戏的乐趣了。
之前还在画画，但是AI都可以生成视频了。
我挺讨厌AI，但是又在使用着他。
AI可能就是喜欢这种你讨厌他但又离不开他的感觉。


### 未来

当年看到钢铁侠的贾维斯，我们都希望有一个自己的贾维斯，现在我们都拥有了贾维斯，但是我们并没有成为钢铁侠。
未来看似很远，其实并不远，AI加速了这个速度，人类对待AI是需要也或是深渊。
虽然目前的AI的能力还是取决人类的能力，但是普通人确实被甩开了。
生活本是人与人之间的博弈，以后有多了一个万能的AI，人类自求祈福吧。


最近没有写博客，一是不知道写什么，二是不想写。但是今晚睡不着，那就写点什么吧。

秧歌、博客和AI


断断续续的练车终于考下来了心心念的驾照，对于一个大部分时间都和电脑打交道的程序员来说，考取驾照是一件很有挑战的事情。

本以为这辈子都不会去开车了，但是无奈家里的老人非得要买，但是老人身体不好年事已高，虽然是几十年的老司机但是也架不年龄和身体老去，再加上孩子也大了要上初中高中离家也远了，本来是想让老司机去送，但是看样子是不行了，所以，只好自己硬着头皮去考驾照了。

对于理论知识科一和科四，自我感觉这些都是送分的小菜，随便背背就满分通过了。说说科二科三以及今天的第一次在车多人多的市中心驾驶体验吧。


### 科目二

科目二我练习了有20天，每天大约一个小时，中间由于老妈骨折还中断了大半个月，对于科目二的感觉就是新手开车有点难，对于点位其实都是牢记于心，但是实际练习各种项目的时候明显感觉手脑不一致，当然随着练习的时间和次数的增加技术变得越来越成熟，虽然年龄大了一些，但是最终都会熟练的。考试的时候没有特别的紧张，但是在第一次的机会坡道熄火了，稳住心态，第二把就过了，当时真的很开心。

### 科目三

由于科三考试的人太多，大约一个月之后才约上了科目三的考试，两条考试线路一共模拟了10多圈就去考试了。科三练车的时候正直寒冬，还被排在一大早，因为照顾卧床的老妈，每天我四点半就得起床先安顿好老妈，然后在骑车20分钟去驾校练车，很是辛苦！

考试那天早上还模拟了两条线路，也算将就吧，用靠边停车有问题。考试那天人很多，我被排在倒数第五个，等待真是一种煎熬，而且还要看到他们的各种花式挂科，心里一度挺紧张的，偶尔找人聊天，结果和我聊天的都挂掉了。。。。。。，这不能怪我。
好在我考试的时候发挥很好，一把满分通关过，真是那句话，科三过了回来的路上空气都是甜的。

科目四平平无奇一把过，然后就是领驾照。

### 新手上路

一晃就到了今天，之前练车朋友借了我一辆小车，在一个大院里瞎开开着，说着驾照下来就要给他开回去，所以今天硬着头皮上路，而且行驶了最拥堵的道路，虽然开的不快，好在一路平安开到终点，得出的结论是，新手上道可比考科目三难多了，下次开车，一定要把实习标志贴了，哈哈哈，不管咋说，我还是挺佩服自己的勇敢。

来日方长，以后开车的日子还很多，必须本着安全第一安全驾驶。这开车可不像编程可以调试错了能改，开车上路没有出错的机会，集中精力安全驾驶才是最重要的。希望多年以后，自己也可以成为一个合格的老司机。

断断续续的练车终于考下来了心心念的驾照，对于一个大部分时间都和电脑打交道的程序员来说，考取驾照是一件很有挑战的事情。

终于熬到了新手上路


好久没有更新博客了，最近真的忙忙碌碌混混沌沌的。

### 一切都将过去

忙忙碌碌的送走了秋天，混混沌沌的走进了白雪皑皑的冬天，送走了丈母娘，期间老妈又又又骨折了，心理咯噔一下，因为这又开启了漫长的护理周期。前几天去看了姥姥，因为压疮并发了严重的感染，当天我去的时候感觉人随时都有可能西去，还好现在的抗生素很强大，几天后又缓过来了，也算是一丝安慰，姥姥承载了我童年少年时期的美好回忆，虽然年事已高，但若真正的离开我们，也是非常的舍不得的。
入秋的时候还报名去考了驾照，还好，虽然一路艰辛，但结果还是很好的，也算是给了我一些安慰。

### 报名考了驾照

科三练车安排在早上六点半，因为还得照顾母亲饮食，不得不早早就得起来，大约四点半就得起来遛狗，然后骑电动车去买早餐，安顿好老妈，骑电动车20分钟到驾校练车。东北人很怕冷，零下15度骑电动车体感温度能飚到零下20度，到了驾校都冻得僵硬了。我算是运气不错，考完科三就下大雪降温了，如果在晚约考一天，都考不上了，而且也没法继续练车，好在考试的时候一把过，当天过科率大约30%多点，感觉出去考试的没几个人回来签字，我排在倒数第五个考试，开始的时候觉得过科率这么低，好可怕瑟瑟发抖，后来等的太无聊了，就和待考的学员聊天，聊一个，考试的时候挂一个，额滴娘，我是挂科之神？好在最后我考过去了，他们就好自为之吧

这周下大雪，没法去车管所考科四，等下周雪化的差不多了就去考科四，然后就可以开车上道了。

作为一个程序员，我本来是不愿意开车的，但是想到孩子马上要上初中高中了，离家很远，所以就勉强的去报名了，虽然不喜欢开车，但是我这人的性格就是很认真，既然学了就会认真对待，遵守交通规则安全驾驶必须放在第一位。

### 继续完成未完成的计划

日子又恢复往日的平静，我喜欢有规律有节奏的生活，这样我就可以重新定制学习和工作的计划，还可以继续画画，生活有苦有甜，风风雨雨才是人生

好久没有更新博客了，最近真的忙忙碌碌混混沌沌的。

好久没有更新博客了。。。

## 再次骨折

老妈已经是第五次骨折了，曾经做过三次手术，保守治疗两次，大多数人会说这事骨头太脆骨质酥松把，其实这都是次要的，人若是不会保护自己，则是神仙也难救了。

说起老妈的这次骨折的是事情，起因是她照顾骨折的姥姥，可巧，自己为了照顾妈妈也受了同样的伤！其实家家有本难念的经，我不愿谈起这些琐事，真的很没意思，而且也不像以前那样，提起这些事情就会生气，现在我会很平和的，因为为别人的错误生气来惩罚自己真是好傻的一说。

## 暂停更新

等老妈出院后，我就会继续更新博客，前一段时间的事情都断了，后续会继续完成。

老妈已经是第五次骨折了，曾经做过三次手术，保守治疗两次，大多数人会说这事骨头太脆骨质酥松把，其实这都是次要的，人若是不会保护自己，则是神仙也难救了。

老妈大腿骨骨折，最近一直在医院护理

这几天忙忙活活的也没怎么上网，今天手贱点开这么一篇网文：【程序员的常识】 https://sspai.com/post/82286 ，我也不知到这作者是不是写过代码，睁眼闭眼瞎掰掰一通。

## 吐槽

文中提到了一些程序员的日常，例如学习，这个日常虽然大家可能略有不同，但我相信优秀的程序员的学习方式大体相同，当然某些绝顶天才除外。再往下这篇网文就开扯了：程序员需要懂业务吗？我看到这句觉得这人应该是产品经理？公司老板？或是写作的视角是第三人称？那么我反问一句，产品经理是不是需要懂程序的架构和测试？，这特么什么观点？这是常识吗？

文章指出："写程序出 Bug 丢人吗？非常丢人。"，这特么也应该是程序员的常识？哎，大晚上的遇到了这么一个奇葩网文。

好吧，不吐槽了，睡觉。

这几天忙忙活活的也没怎么上网，今天手贱点开这么一篇网文：【程序员的常识】 https://sspai.com/post/82286 ，我也不知到这作者是不是写过代码，睁眼闭眼瞎掰掰一通。

不懂就别瞎掰掰:【程序员的常识】写的什么玩意？

又开始抢盐了，一有点屁事就抢盐。

## 吃碘盐能防辐射？

盐本身不能防辐射，如果说碘能防辐射，也只是微乎其微吧，在面对强辐射的时候，我智能说，有效的隔离最管用，其他都是白扯。人家倒点废水看给你急得？一下子，什么羊群效应迅速蔓延，不买点盐都要成了另类了。

## 人言可畏

我们不能苛求所有人都是理智的，绝大部分人都是盲目的，就好比股市的追涨杀跌、利润诱人的杀猪盘。防辐射之前先冷静一下，好好考虑一下你的身体能否承受的了一天几袋盐？

又开始抢盐了，一有点屁事就抢盐。

加碘盐能防核辐射的话，还怕什么核战争？

前几天大言不惭的说是要使用next重构博客的程序，但是经过几天的磨合，当时的锐气几乎都被消灭了，所以说人还是不要吹牛逼，不然......

## 放弃的原因

大约花了二天的时间就把博客现有的功能和界面复刻了，但是在最后的实际测试中逐渐的失去了更换博客程序的动力，首先next的优势是部署vercel+自动化，这和我的初衷有些冲突，目前来说我的博客主要是写一些记录编程学习读书笔记日常等，连图片都很少。我写作博客日常操作就是:创建md文档、更新静态文件、同步GitHub。

    # 创建一个新的博文，开写。
    python s.py -n 'h'
    2023-08-14 21:12:48.844 | INFO     | __main__:create_blog:325 - blog文章.md创建成功！
    # 更新
    python s.py -i    
    2023-08-14 21:24:16.521 | INFO     | __main__:create_all:369 - 所有静态资源创建更新完毕！
    # 同步github
    python s.py -g

目前我的静态资源生成速度我还是比较满意的，大约也就几秒钟，同步GitHub也是很稳定的。但是如果我换成next，我就得部署vercel并关联GitHub仓库，可能我个人不太喜欢折腾主机部署什么的，想想我就觉得麻烦，我就用我的写博客三部曲我觉得挺方便的，所以我就放弃了，但是，我把新的友情链接页面给搬运过来了，不能白折腾，把友情链接的页面设计好看点也算是对友联博客的尊重嘛。

其实还有一些技术上的细节原因，一方面是对react和next代码编写和框架使用的熟练度还是很差的，例如我不喜欢看到页面上控制台输出红色的错误信息，黄色警告是我的极限。重构之后总会有些莫名其妙的错误，大红叉子看着很难受，但是我一时半会由解决不掉，对于一个不可控的程序，我就会觉得体验超差，所以，至少在我解决这些错误之前我是不会更换了。

## 收获

但是不使用并不代表不喜欢，对react和next环境下的代码编写还是很有信心的，这阵子也许会搞些小东西来试试，而且也有可能会去考虑一些自动化的项目部署玩玩，总之，重构代码还是有一些收获的。还有标题是chatGPT给起的，就当无题好了。

前几天大言不惭的说是要使用next重构博客的程序，但是经过几天的磨合，当时的锐气几乎都被消灭了，所以说人还是不要吹牛逼，不然......

放弃Next.js重构博客：经验、教训与未来技术探索

一转眼已经是八月了，重建博客也有三个半月了，这阵子都在坚持学习和复盘，偶尔重构之前的代码，坚持写博客确实有些收获，之前停更了一段时间具体是因为什么已经不重要了，人总要向前看，这才是最重要的。

## 博客圈子其实很小

写博客的人确实很多，但是每个人的审美、认知、学历和对信息的需求不同，所以你以为自己辛苦搭建的博客是个宝藏，没准别人觉得这个博客就是个妥妥的互联网垃圾站点，放眼望去，博客圈子优质的博客其实并不多，但是这并不妨碍其中藏着闪闪发光的宝藏博主，时间长了总能发现的，每个辛苦搭建部署博客的博主，哪个不希望自己的博客被更多的人发现和收藏呢》

## 坚持写博客的收获

我觉得首要的就是自律。写作也需要大量的练习，写作的好处就是对学过的知识进行系统的复习和总结，同时也可以表达自己的思考和感悟。从学习角度上来说，复盘对于学习是一种巩固。每天强迫自己学习一些自己从未接触过或是之前抵触的知识，然后进行实践，之后通过记笔记写博客来复习，会有很深的印象。

## 发现宝藏

写博客同时也会通过一些博客汇总的网站了解到其他博客和博主，挖掘其中的宝藏收藏并订阅RSS，浏览优质博客可以学到很多自己技术、思想接触不到的内容，收获很大！

强烈推荐一下博客：

<a href="http://www.omegaxyz.com/" target="_blank">图灵技术域</a> -- 徐奕的专栏-机器学习、软件工程、计算机大佬。

<a href="https://www.scarsu.com" target="_blank">ScarSu - 终身成长,前端技术,信息源</a> -- 96女性程序员，以终身成长为人生意义，热爱前端技术，喜欢读各种书，关注效率提升、自我管理、心智成长、认知提升、极简生活。

<a href="https://www.vergilisme.com/" target="_blank">八咫烏</a> -- 八咫烏 | 万物皆虚 诸行皆允。

<a href="https://demochen.com/" target="_blank">你好我是森林</a> -- 一张肆无忌惮的脸，一颗桀骜不驯的心。

<a href="https://hutusi.com/" target="_blank">胡涂说</a> -- 中文独立博客，任抛星汉归园圃，留取乾坤盛酒囊。

在浏览这些优质博客的过程中，我不仅学到了很多技术知识和思想，也感受到了博主们的热情和努力，这让我深受启发


## 还有点时间

2023已过大半，留下的时间不多了，除了复习巩固之前的编程知识，还需要接触一些新的技能和框架。加油！奥利给！

一转眼已经是八月了，重建博客也有三个半月了，这阵子都在坚持学习和复盘，偶尔重构之前的代码，坚持写博客确实有些收获，之前停更了一段时间具体是因为什么已经不重要了，人总要向前看，这才是最重要的。

八月回顾：博客之路，一路前行


由于需要改进LCP 问题：超过了 2.5 秒（桌面设备）这个问题，花了点时间把最近做的这个主题进行了一些性能的优化，嗯，优化后的页面打开速度还真是不错，优化博客的主题大概是每个博主必经之路吧。

## 自己挖坑自己填

前一阵子使用tailwindcss+daisyUI做了个博客的新主题，把构思的功能不管三七二十一都给上了，导致页面的加载速度很慢，以至于自己打开都有觉得有点不耐烦了，再加上google的邮件提示，立马觉悟了，这是不改不行了。虽说部署与Github，但是页面性能优化的好，除了网络原因连不上的话，只要连上了打开的速度还是可以的，但是前一阵子忙于琐事，对于慢的事却忽略了，最终痛下决心改之。

## 性能优化的细节

根据google页面加载工具给出的提示，做出了一下几点修改：

1. 移除了jQuery，把jq的相关的博客功能代码都使用原生的JavaScript重写了，把依赖jq的库都去掉了，所有依赖jq的功能都使用JavaScript原生代码重写。
2. 优化了giscus评论插件的加载，这样打开页面不会自动加载评论，点击按钮后在加载评论页面，这样大大提高了页面的加载速度。
3. 优化了HTML的DOM结构，精简了一些无用的代码，修复了一些代码的错误，删除了一些重复功能代码，优化了站点导航。
4. 重写了站内的搜索，本来想撤掉搜索了，但是今天自己在博客里找东西找了半天，最后还是添加上了。
5. 重新使用工具进行LCP测试，页面都达到了95分+，数值很满意，页面打开速度明显的快多了！

## 一些取舍

本来把搜索和评论都撤掉了，总觉得没啥人评论，留着也是影响页面加载速度，但是考虑了一下，万一有人看我不顺眼，找不到发泄的地方，再给憋出病了就不好了，所以还是加上吧。评论这玩意一定要看开，千万不要太在意那些恶意的评论，看到一定要及时删除，我可不想像某个博主那样，评论事件都过去了个把月了还在念念不忘。

对于首屏大图，暂时还是不添加了，没啥用，你以为好看那是你自己的审美，别人没准看了一眼就会说：这啥破玩意！然后页面直接关了。而且首屏大图太影响阅读体验了，当然你要是图片类型的博客，我建议大！图一定要更大！哈哈哈。

希望大家愉快的写博客，愉快的交流。

由于需要改进LCP 问题：超过了 2.5 秒（桌面设备）这个问题，花了点时间把最近做的这个主题进行了一些性能的优化，嗯，优化后的页面打开速度还真是不错，优化博客的主题，大概是每个博主必经之路吧。

速度与优雅：博客性能优化之旅


今年夏天热的早温度也高，东北这边很早就步入了35°+，感觉很热，热的让人焦虑。

前几天，孩子的老师安排了正文，按照以前的步骤，我会带孩子找素材，让孩子写出完整的正文然后我来修改，打出电子版修改后交给老师。但是这次我却下意识的改变了这些过程，在网上搜索了相关资料和视频喂给孩子（给孩子看），她自己写出征文，我习惯的用iPhone拍照识别文字，扔给ChatGPT润了一下，然后交给老师。

我知道，会有很多家长使用ChatGPT，也会有很多人不会用。ChatGPT节约了我很多的时间，但是也给我带来很多的焦虑，当然这已经大部分人的焦虑，而且有些人连焦虑都没来得及就。。。

我时常和孩子说AI会画画会写文章敲代码，孩子只是觉得“她”很厉害，我告诉孩子一定要努力，不仅要和身边的人比还要和AI比。确实，这一代人和他的孩子们，见识了太多的科技和人工智能，孩子的学习、我的工作、我的爱好、我的生活，AI无处不在。

早些年我学编程的时候，那些讲课的大佬们都说要用记事本，不要用IDE提示，现在的培训教你提示词、炼丹。AI改变了生活，也改变了这个世界的生存方式，有的时候确实焦虑，不过人生还得继续，要么适应要么淘汰，适者生存，没得选择。

今年夏天热的早温度也高，东北这边很早就步入了35°+，感觉很热，热的让人焦虑。

七月的焦虑

新主题做的很满意，主要是在于技术选型、策划、编写的过程中很畅快，让这个39°炎热的初夏有了一丝丝凉意，唯一美中不足的就是iPhone的Safari浏览器有个兼容性问题让人头疼。

## 完美主义者的痛苦

基于daisyUI制作了一个博客主题，很喜欢这个框架，既让我满足了使用tailwind css的欲望，也实现了我理想中的一些功能，例如一键实现博客的多主题，daisyUI一键换装可以实现20多个主题，配置起来也挺简单的，按着官方的文档，噼里啪啦的一顿操作猛如虎，搞定了主题的适配，很完美！但是，在iPhone的Safari浏览器下边，主题选择下拉菜单弹出后，不能正常的收回，这个着实的让我郁闷了很久，Google、AI都问了，没有解决方法，而且鉴于是手机浏览器，我暂时没有调试的方式，这真是束手无措了。

## 何不换种方式放过自己

大约苦苦寻找了几个小时，都没有解决这个BUG，这心里不舒服，就感觉如果有人不巧使用iPhone的Safari浏览器浏览我的博客，切换了主题，发现了这个BUG，会不会一来气，就关了网页，从此不在点开碎言博客，并且吐槽站长不负责任，技术部成熟不够老练，连这点小小的问题都解决不了？

## 断离舍

今天早上还在想，怎么办？就是自己浏览自己的博客也会这样的不舒服的，就这么算了吗？最后我决定试试其他浏览器，下载了几个其他热门浏览器，发现都没问题，我悄悄的把Safari从主屏删除了。。。

想起前几天那个博客群里男的开玩笑(据说在开车)，进而引发女博主不满最后气愤退群的事，当事人是不是有些过于冲动了？这世界到处充满着恶心的对话和视角，如果都按那个女主那样长篇大论的写了一篇评论并且气的晚上都没睡好觉，我觉得这是在用别人的错误来惩罚自己，大可不必。就像Safari的问题，不是我代码的问题，大不了我换个浏览器。人生苦短，把精力留给自己和自己关心的人，至于那些不必要的事，就让他过眼烟云随风而去吧。

新主题做的很满意，主要是在于技术选型、策划、编写的过程中很畅快，让这个39°炎热的初夏有了一丝丝凉意，唯一美中不足的就是iPhone的Safari浏览器有个兼容性问题让人头疼。

从一次浏览器兼容问题到何不放过自己做个快乐的博主

搭建、部署、专心撰写博文，是每个博主都需要花费一些心思去做的事，每个博客就像一扇窗，我们透过窗口看到的那些光就是作者内心真实的表露，有些强烈如火焰，有些温柔如月光。但是有些，我真特么的想一脚给他踹关上。

## 令人讨厌的几类博客

1. 博客主题不明显，你说他是技术博客，每篇博文都配个擦边的暴露的大美女，某些场合打开后直接社死，最主要的是在一堆暴露的美女中，还夹杂着自己女儿(目测五六岁左右)的照片，我勒个去的。。。。
2. 打开主页，页面未展开，先来一首抖音魔性的热门歌曲，你要是戴着耳机也就算了，某些场合真是想找地方钻进去。
3. 大篇幅的广告，无处不在的推广，每打开一个页面广告占据了75%的内容。
4. 正经内容没有几篇，几乎都是SEO、主机、云服务、CDN代理等内容。
5. 不注重移动端阅读体验，页面布局混乱，配色奇葩，对比度强烈到眼睛要瞎了。
6. 过度折腾主题，各种插件安装混乱，导致数据经常丢失页面打不开。
7. 过度折腾主机、CDN、天天说自己被黑被攻击，频繁更换服务器。
8. CSS、JS特效过渡，打开页面CPU直接100%风扇狂转不停，夏天的时候可能会有爆机的危险。
9. chatGPT批量生成，爬虫采集文章和图片，每天更新几十上百篇水文。
10. 不痛不痒记录生活，好好的博客变成流水账微博了，吃喝拉撒无所不说。

好吧，我只是吐槽一下，并不针对任何博主，没有讨厌就不会有喜欢，又爱又恨才是人生。博客虽然是记录自己生活学习日常的一片净土，但是暴露在互联网上就会被人看到，除非你拒绝任何搜索引擎爬取，拒绝任何友情链接，不然别人必然会看到你的博客。博客虽不能完整的代表博主本人，但是从博客的文字、主题、配色中绝对能看出一个博主的爱好和性格。

好的博客，主题突出、文图详实，好的博文让人阅读后赏心悦目有所思有所想有收获。如果是多年的老博主，其文字归档可谓是娓娓道来洋洋洒洒，无论技术还是情感，那种连贯性文字读起来一气呵成，何等畅快！

坚持写博客的人值得让人敬佩，尤其是那些真情流露的文字，无论技术或是生活情感，这些才是博客夜晚中最亮的明星。

至于那些讨厌的博客，打开一次就不会在打开第二次了，拜拜了您呢，或许，我讨厌的他人喜欢的不的了，那就是另一件事了，反正和我无关。

搭建、部署、专心撰写博文，是每个博主都需要花费一些心思去做的事，每个博客就像一扇窗，我们透过窗口看到的那些光就是作者内心真实的表露，有些强烈如火焰，有些温柔如月光。但是有些，我真特么的想一脚给他踹关上。

你最讨厌什么样的独立博客？


### 可以开始写blog啦(*￣︶￣)

上次我说这话的时候还是2022-09-23，一下子都过去大半年了！花了三天的时间把之前写的静态博客重构了，这次的重构还算满意挺开心的，重构达到了预期的效果。

把之前在Python代码中使用字符串拼接的方式更换成了jinja2的模板引擎，大大的提高了前端页面的构建速度，之后需要丰富页面内容就简单多了，至少以后有人要用也看得懂，另外更换了前端的UI框架，这里推案件一个不错的框架：pico.css,Docs [https://picocss.com/docs/](https://picocss.com/docs/)。Pico选择使用极少的`.classes` 尽可能保持中性和语义,这使得使用原生的HTML标签写网页就很方便了，而且样式也不错挺美观的！

Python生成静态页面的代码也仔细的重构了一下，由于使用的jinja2模板引擎，代码量大大减少了很多。这几天抽空把这个静态博客的搭建心得分享一下。好了，今天起个头，以后的日子还长着呢。

上次我说这话的时候还是2022-09-23，一下子都过去大半年了！花了三天的时间把之前写的静态博客重构了，这次的重构还算满意挺开心的，重构达到了预期的效果。

好了，又可以愉快的写博客了



### 起因

最近由于气温突然降温着凉，加上之前一直使用双显示器编写代码，导致颈椎病和肩周炎一起爆发。由于病起非常急，导致我左肩膀和左边的脖子非常不舒服，然后我就去拔罐子按摩理疗，以为会好写，结果反而没有疗效却导致病情急剧加重！最后疼的我晚上都无法入睡了。

### 肩周炎颈椎病的症状

颈椎病和肩周炎的症状不尽相同，但有一些共同点。常见的症状包括颈部或肩部的疼痛、麻木、刺痛感，以及颈部或肩部的灵活性下降。此外，颈椎病和肩周炎都可能伴随着手臂无力、疼痛或麻木等症状。

### 治疗

在发现自己的症状之后，我立即停止了使用双显示器，将屏幕调整到合适的高度，并且每隔一段时间就起身活动一下身体。同时，我也开始服用止疼药和非甾体消炎药，以缓解颈部和肩部的疼痛，至少晚上能睡觉啊，不然人得崩溃死了。后来大约过了10天左右，我就停药了，基本只剩下酸疼了。


### 最后康复训练

然而，止疼药和非甾体消炎药只是缓解疼痛的临时措施，要想真正保护好自己的颈椎和肩膀，我们需要采取一些长期的康复训练。我采用的是一些颈部和肩部的伸展运动，例如低头、抬头、向左看、向右看等动作，以缓解颈部和肩部的紧张肌肉。此外，我还加入了一些瑜伽练习，例如颈部前屈、后弯、扭转等动作，以加强颈部和肩部的灵活性和稳定性。

最后，我想提醒所有程序员兄弟姐妹们，要保护好自己的颈椎和肩膀。长时间保持同一姿势容易导致肌肉疲劳和紧张，从而引起颈椎病和肩周炎。因此，我们应该每隔一段时间就起身活动一下身体，适当地放松自己的颈椎和肩膀。此外，我们还可以采取一些预防措施，例如使用合适的电脑屏幕高度、定期锻炼颈部和肩部的肌肉等。让我们一起保护好自己的身体，更高效地工作！

我想提醒所有程序员兄弟姐妹们，要保护好自己的颈椎和肩膀。长时间保持同一姿势容易导致肌肉疲劳和紧张，从而引起颈椎病和肩周炎。因此，我们应该每隔一段时间就起身活动一下身体，适当地放松自己的颈椎和肩膀。此外，我们还可以采取一些预防措施，例如使用合适的电脑屏幕高度、定期锻炼颈部和肩部的肌肉等。让我们一起保护好自己的身体，更高效地工作！

程序员的痛苦：颈椎病和肩周炎


又可以继续写blog了

好久没有更新blog,最近抽些时间继续更新blog,把一些未完成的代码和技术债务更新完成.

测试,GitHub页面不更新啊?

好久没有更新blog,最近抽些时间继续更新blog,把一些未完成的代码和技术债务更新完成.

又可以继续写blog了


![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/Snip20190514_1.png)

转眼间我的`blog`PV流量已经达到10万+了，2017年8月25日 01:09，我发布了网站更新记录，至此`blog`运行已有快二年了，没想到PV会达到10万。

回想学习`Python`大约也有二年多了，这一路走来也是蛮辛苦的，自学需要自己填坑补洞修bug，痛苦与快乐并存吧。

贴几张近作，显吧一下吧

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/Cache_69e1f243303b4652..jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-03025e852e1db8f2f9cf69fbd946b69c_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-608fc943d8709a1c640f02a8fc46fae6_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-fa357d4314c4f66b46318982526ef88a_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-9497459b80fafa67937c205e373c05f7_hd.jpg)

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2019/05/v2-f27fcee295b83b010b1029a145dc1554_hd.jpg)


为什么要提到画画，去年的夏天给孩子报了美术班，然后自己也就随便画画，然后就一发不可收拾，坚持画画一直到现在，感触也是蛮多的。

编程和画画的思考方式在某些方面还是有相同点的，例如编程的架构就好比画画的草稿，草稿打好了才可以细致的刻画。若程序的需求本身是一幅画，那么打好草稿，细致刻画细节，就可以使程序本身更人性化，更符合预期的要求。**有的时候我就觉得，程序员本身真的应该的体验一下绘画带来的乐趣**。

自学画画一年感觉要比编程10年前的成就感强很多，这些年编程没写过多少像样的应用，五个手指都能算出来，或许编程要比绘画更严谨，更需要思考。

未来还有很多打算，包括编程初期的一些梦想都想去实现，比如开发一款游戏，自己原画角色，场景，并利用现有的游戏框架编写成型。完成现有的程序代码的编写，继续优化维护，继续坚持画画强化绘画技能，或许能力的提高会更加丰富原有的梦想。

还有三年的时候`blog`PV达到百万（是不是有点飘了？），下半年继续更新`blog`，继续学习`Python Django PYgame`等。

写在我的博客PV10万时：聊聊编程与画画。

写在我的博客PV10万时：聊聊编程与画画


好久没有更新自己的博客了，最近经历了很多变动，所以人生的规划也发生了一些微妙的变化。

这段日子没怎么看编程相关的书，今天随便看了一下，python已经是3.6.5，django也是2.0.6的版本了，想想自己前一阵学习py及django的时候，机器上的环境还是3.61和1.1X版.。。。

更新了一下站点的头部图片，上次更新时还是冬天的。。。。

可能暂时要放下编程了，是放下不是放弃，不久的以后我还会捡起来，因为我还有一个做游戏的梦想还未实现。想起30岁的时候开始学习编程，40而终，这些年没做成什么太出色的软件，但也因为代码养家糊了口饭，想想也算是值了，人生总是再变动，曾经看到过一篇文章介绍过，程序员黑客和画家很相似，所以那天拿起笔来就画了几个月感觉还不错，我能否再用10年成就一个插画师的梦想？

为自己加油！

感谢曾经路过17python网友，这个站点暂时还不会关闭，但内容也许有些改变，python还会继续，但可能会慢了一些，但我还会在学习python的路上前进的。

好久没有更新自己的博客了，最近经历了很多变动，所以人生的规划也发生了一些微妙的变化。

有时人生需要做出选择


转眼间时光匆匆流过，稀里糊涂的又过去了一年，大约2017年6月时我开始了博客的搭建与设计，8月份上线运营维护，这期间又草草聊聊的写了71篇技术相关的博文。。。这一深一浅的一路走来，希望自己在编程的路上走得更坚实更努力一些！

## 编程之路

断断续续的自学编程有10年多了，其中有苦有乐，成绩自我评价也就是接近及格那种。期间接触过好多种编程语言，就像打游戏一样，要把所有的职业都玩一遍，每个职业都练了几个月最后都放弃了，其中拿捏时间比较长的有：`php js java` 和现在正在深度学习的`Python`。其实一开始学习`Coding`的时候也是没有什么目标的，只是有一次在论坛做版主的时候被安排了一个任务，任务中需要用到`html+css`排版，然后自己就去百度搜索了一下相关知识，然后就一发不可收拾的迷上了编码。虽然最开始的时候学的是易语言，而且竟然学用了近二年之久，最后才因为某种原因不得不放弃它。之后就是各种语言职业的轮番试玩了。。。一直到14年左右，才开始稳定到java，16年弃坑`java`转而`Python`。

## 2018的书单

今年有一些目标和计划，除了努力工作之外，还是要继续学习`Python`，然后继续学习一门新的编程语言，感觉这门语言非`C++`莫属了，天下武功（编码）少林正宗（C++）。
然后计划读30本书，其中10本编程专业书籍，20本兴趣书籍。写50篇或更多的专业博文，用来记录自己的学习历程，巩固学习进度，加深学习印象。

##  编程计划

计划写一个学习`Python`编程的RPG游戏及开发一个`Django`开源blog。我会为此而努力。2018，新的一年，希望大家更加努力，早日实现自己的梦想。
最后，我告诉你：**相信我，多读书，不会错的。**

转眼间时光匆匆流过，稀里糊涂的又过去了一年，大约2017年6月时我开始了博客的搭建与设计，8月份上线运营维护，这期间又草草聊聊的写了71篇技术相关的博文。。。这一深一浅的一路走来，希望自己在编程的路上走得更坚实更努力一些！

2018 新年快乐！希望在coding中找到自己的快乐与希望


+ [百度搜索资源平台](http://ziyuan.baidu.com)

+ [百度联盟](http://union.baidu.com)

+ [360站长平台](http://zhanzhang.so.com/)

+ [百度云观测](http://ce.baidu.com/)

+ [百度搜索资源平台](http://ziyuan.baidu.com)

+ [JiaThis社会化分享按钮](http://www.jiathis.com/)

+ [署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) ](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)

+ [畅言网站评论系统](http://changyan.kuaizhan.com/)

+ [搜狗站长平台](http://zhanzhang.sogou.com)

+ [CNZZ站长统计数据专家](https://web.umeng.com/main.php?c=site&a=add)

+ [工信部ICP备案查询](http://www.miitbeian.gov.cn/)

+ [全国公安机关互联网安全服务备案](http://www.beian.gov.cn/)

一些站长常用的搜索收录、访问统计平台


_看到喜欢的图片就会换上，不知道为什么会喜欢这些偏暖的色调，记得很久以前的有段时间，也曾偏爱冷色调调，可能偏暖色调更LOMO些。_

### 2017/09/18

本图来自bing每日壁纸

戈尔代小镇是普罗旺斯地区最美丽的小镇之一，依山头而建，是众多被日光洗的发白的石头建筑与深深浅浅的绿色植物相拼而成的村庄。每年那里都会入选法国最美丽的小镇之一。从外到内小镇戈尔代给人的印象就是石头建筑，围墙，房子，教堂几乎都是石头堆砌而成，壮观而真实！

![戈尔代小镇是普罗旺斯地区最美丽的小镇之一](https://suiyan.cc/assets/images/media/upload/2017/09/BingWallpaper-2017-09-17.jpg)

### 2017/10/09

windows10美丽的海边风景

先前的顶部大图太闪眼睛了。。。换个清爽些的。

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2017/10/6fb13e4db9f043b276e06f340cbdff6d.jpg)

### 2017/11/07

windows10 秋天

这个秋天真的很无聊，是个多事之秋。

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2017/11/bing-021.jpg)

### 2017/11/25

网上搜索来的图片

冬天来了，我们期待着下雪。

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2017/11/timg.jpg)


### 2017/11/25

《星月夜》（The Starry Night）是荷兰后印象派画家文森特·梵·高于1889年在法国圣雷米的一家精神病院里创作的一幅油画，是梵高的代表作之一，现藏纽约现代艺术博物馆。

![输入图片说明](https://suiyan.cc/assets/images/media/upload/2018/11/1432084191361509.jpeg)

看到喜欢的图片就会换上，不知道为什么会喜欢这些偏暖的色调，记得很久以前的有段时间，也曾偏爱冷色调调，可能偏暖色调更LOMO些。

关于本站封面头部大图


### 今天是个好日子

折腾了一个晚上，终于把网站上线了，明天要把这几天的折腾记下来，不然用不了几天就会忘掉。这阵子自学`Python Django`感触很多，中间也是遇到了无数的坑，还好自己都挺过来了，以后学习`Python`的日子还长，学习还是要继续的，给自己打气加油！

### 耐心等待备案下来

希望这次备案能顺利一些，前一阵子提交备案相关信息还是挺顺利的了，就差管局审批了！等待的这些天先总结一下这次`blog`搭建的经验。

### 更新在2017-09-04 

公安备案也搞定了，相对来说，公安的备案要快些，辽宁通信管理局的审核大约是10工作日+，公安备案审核我这次是二个工作日就搞定了，备案完毕，接下来就是坚持写作更新blog了，继续深入学习Python。

### 腾讯公益404
* 本站演示地址[404Not-Found](http://www.17python.com/404)
> 不解释，希望更多的站长加入吧[传送门请点这里](http://www.qq.com/404/)
> 希望走失的宝宝将来都能找到自己的亲人。

### 2017-10-06更新博客功能

为博客添加了标签云，日志归档功能。

### 2017-12-22

添加原创及转载标识，添加站点统计、热门文章功能。

### 2020-01-07 

把原来由`Django`构建的博客换成了自己的新开发的`碎言静态博客`[下载地址](https://gitee.com/J_Sky/suiyan)

折腾了一个晚上，终于把网站上线了，明天要把这几天的折腾记下来，不然用不了几天就会忘掉。这阵子自学Python Django感触很多，中间也是遇到了无数的坑，还好自己都挺过来了，以后学习Python的日子还长，学习还是要继续的，给自己打气加油！

17python.com网站已经部署上线及后期更新记录


## 关于我

你好，J.sky这个网名没有什么太多含义，当年在自学Java的编程语言，可以说成Java.Sky的简写，又或是对当年魔兽争霸3的人族之王J.sky的崇拜之情继而使用了此网名.

碎言博客的名字，取自于碎言片语。很早就建立过很多杂七杂八的网站，具体页面底下有详细的博客更新日志，关于suiyan.cc是今年初新注册的域名，但是写博客是始于2017年。

轻度折腾博客患者，一直是自己编写构建博客，自己编写主题，或许是一种对自由的执着把，见笑了。欢迎有相同爱好的朋友互相交流。

我希望：把坚持和固执，放在有意义的事情上。



## 为什么要做这个blog？

其实有很多想法，简单说想把学到的东西实践一下，也算是对`Python JavaScript`学习的一个总结。希望记录自己的学习笔记以及一些心得经验，算是帮助自己；如果，我是说如果这些记录可能帮到你了，那么这篇blog和这个博客就有了新的意义。本人也只是菜鸟一只，希望大家互相学习，一起实践`python JavaScript`。

## 读书

希望：坚持阅读，持续写作输出，复盘实践学到的技术。

终生学习，把坚持和固执，放在有意义的事情上。


## 联系我

站点导航有我的邮件联系方式，也可以在这个页面的底部给我留言。

## 网站日志


2025-01-25

持续优化了一阵子blog的细节，目前来说当前的主题基本定型了。

2025-01-16

更新了一些主题的细节，网站样式的修改先告一段落。

2025-01-01

新的一年，希望自己可以更加努力，更加努力。使用next.js nextUI复刻重构了之前使用python制作的静态博客生成器，为什么要这么做，就是想体验现代前端框架的魅力，学到前端的一些新东西。

还没有测试Google的LCP，但是明显感觉页面的打开速度比以前块多了，网站部署在vercel，太方便了。

目前是写博客的流程：npm run nb 新建一个博客文章，写完后运行`python push.py`,会自动生成`rss.xml,sitemap.xml`到public目录下，然后自动提交到GitHub仓库，vercel自动部署，然后就可以访问了。相比之前python写的静态博客生成器是在本地生成静态文件，现在是在服务端生成的，而且之前的生成器的细节都是自己编写，这次使用的next.js的SSG生成静态页面。

2023-7-29

之前使用tailwind+daisyUI构建了博客前端的静态页面，但是静态文件的下载速度对于部署在GitHub pages的博客来说有些慢了，通过https://search.google.com/test/mobile-friendly?hl=zh_CN测试，发现daysyUI的full.css文件很大，本地看了一下竟然有1M+，这对于一个缓慢的GitHub博客来说是一个很沉重的负担，所以就取消了daisyUI的相关依赖，这下减轻了页面加载的压力，LCP首页的评分也达到了99的爽快分值，很是满意。

2023-06-16

花了几个小时基于daisyUI Tailwind CSS做了一个博客主题，很早就想把博客的样式换成基于Tailwind CSS为基础框架的，今天终于实现了。

2023-05-30

之前做了几个主题都不太满意，目前的“复古跑马灯”自我感觉良好，挺适合中老年人那种怀旧审美的。

2023-05-09

网站再次改版，重回静态博客（3.0），之前的碎言静态博客也进行比较大的重构改版，做了几个主题。


2023-04-05 

今天折腾了一天把网站换成了自己开发的碎言静态博客（2.0）生命在于折腾。


2020-01-07
把原来由Django构建的博客换成了自己的新开发的碎言静态博客(1.0版本)

2017-12-22
添加原创及转载标识，添加站点统计、热门文章功能。

2017-10-06更新博客功能
为博客添加了标签云，日志归档功能。

更新在2017-09-04
公安备案也搞定了，相对来说，公安的备案要快些，辽宁通信管理局的审核大约是10工作日+，公安备案审核我这次是二个工作日就搞定了，备案完毕，接下来就是坚持写作更新blog了，继续深入学习Python。

腾讯公益404
本站演示地址404Not-Found
不解释，希望更多的站长加入吧传送门请点这里 希望走失的宝宝将来都能找到自己的亲人。


2017-08-25
今天是个好日子
折腾了一个晚上，终于把网站上线了，明天要把这几天的折腾记下来，不然用不了几天就会忘掉。这阵子自学Python Django感触很多，中间也是遇到了无数的坑，还好自己都挺过来了，以后学习Python的日子还长，学习还是要继续的，给自己打气加油！

耐心等待备案下来
希望这次备案能顺利一些，前一阵子提交备案相关信息还是挺顺利的了，就差管局审批了！等待的这些天先总结一下这次blog搭建的经验。



## 旧版的陈年往事

之前的 2vv.net sogame.net 和 17Python.com 都已经注销了，国内租用服务器的环境比较糟糕，备案等一套流程下来很费时间，而且使用服务器端SSR的话容易被黑也容易被人攻击，一旦发生这类事情是很沮丧的，最后还是选择了GitHub部署静态博客，免去了很多的烦恼，这样可以专注写作博文了。

2vv.net sogame.net，那是我刚刚接触互联网的时候，那时候不会编程，不会Python也不会web方面的技能，程序都是买的。后来会了PHP，使用WordPress建过一个博客，被黑之后关了，数据也没保存。

2017年左右学习了Python，使用Django构建了一个博客，期间也有被黑过，三年后阿里云服务器到期懒得续费，但数据保留了下来，之后使用Python编写了一个静态博客生成器，依托国内的码云Gitee提供的静态页面服务继续托管博客，后来因为国情码云大部分时间都是关闭静态页面服务，且关键词替换屏蔽太严重，最后直接关掉了博客。



碎言博客的名字，取自于碎言片语。很早就建立过很多杂七杂八的网站，具体页面底下有想写日志，关于suiyan.cc是今年初新注册的域名，但是写博客是始于2017年。

关于我和suiyan.cc


使用godot开发游戏的进度还在缓慢的推进中，本以为大部分时间会在绘制场景和制作动画上了，但是我确卡在了游戏的世界观设计上了，痛定思过，决定先把游戏的世界观设计好了，再开始绘制场景和制作动画。


## 创意和指数增长的工作量

无论做什么，开始的时候我们都会设想构建一个完美的计划，然后一步一步的实现，最后达成预设的目标，但是在实际的开发过程中，无论是游戏还是软件，我们都会在制作的过程中不断地添加自己新的想法，这使得工作量无形中增加了很多，是本来预订的目标离我们越来越远，甚至遥遥无期了。

对于当前的游戏构思本来很简单，但是我是不是觉得要添加一些「简单」玩法，殊不知这个看起来「简单」玩法会使当前的工作量指数级增加，无形中给自己带来了巨大的压力。例如，我想在游戏中添加一个类似网站的统计功能，统计每篇博文的阅读量，进而可以计算出周月年的访问统计，但是我发现，我的这个想法其实是让自己在游戏里设计一个网站的统计系统，这可不简单，模拟数据+网站的统计系统=工作量指数级增加。

思考了一个晚上，最后决定还是放弃了这个想法，虽然模拟真实的访问统计，会使游戏显得更加真实，但是也会让游戏的逻辑更加复杂，使得游戏完成的时间会更加长。

## 精简和创新的取舍

不忘初心，我应该记得制作这个游戏的目的：熟悉godot的使用，熟悉游戏开发的流程，熟悉游戏开发的流程，熟悉游戏开发的流程。而不是制作一个完美的游戏，这世界上有完美的游戏吗？

所以，不能被自己的想法所限制，一定要按预订的构思来设计，不要随意添加新的想法，一方面会打乱原来的构思，另一方面会增加工作量，最后导致游戏完成遥遥无期。



使用godot开发游戏的进度还在缓慢的推进中，本以为大部分时间会在绘制场景和制作动画上了，但是我确卡在了游戏的世界观设计上了，痛定思过，决定先把游戏的世界观设计好了，再开始绘制场景和制作动画。

游戏开发中的断离舍


前几天一直在各个游戏引擎的框架选择中飘忽不定，同时也在纠结和构思制作一个什么样的游戏，简单的在头脑中构思跑了一遍就觉得没意思了，太难的复杂的又觉得制作起来遥遥无期。

## 构思

经过几天的头脑风暴，终于下定决心制作一个模拟养成类的游戏，名字暂定为「我的博客」，这会是一个2D像素风格的模拟养成游戏，游戏的大体内容：玩家是一个博主，在2000年的时候你会创建一个自己的独立博客，通过不断地学习，持续的输出，持之以恒的维护与运营，终于若干年后在博客届混出个名堂，通过流量换得了收入与名誉，并且在运营的过程中会遇到很多突发事件，这些突发事件会给你带来一些意想不到的结果。随着游戏不断地推进，你会通过学习新的技能来提高自己的创作能力，通过社交、seo、优化美化博客等手段来提高网站的知名度和访问量，解锁不不同的成就。直到游戏运营到2025年游戏结束，整个游戏会因为你不同的运营方式和学习方式产生不同结果和获得不同成就，给足玩家满满充实的游戏快感。

额，说到这里，我自己都觉得这个游戏的构思还是蛮可以的了。现实中的制作我已经完成了游戏时间线的代码编写，随着时间线产生的主线任务上的推进，人物等级、经验以及技能提升等相关的算法都已写出最基础原型。并可以加速快速体验出主线任务的进程（用来测试游戏）。

目前，暂停了游戏代码的编写，开始搭建主场景和游戏角色、游戏UI等美术创作的工作，对于首次独立制作开发游戏，这方面的额经验还是很少的，编写边学，边画边研究，兴趣是唯一的动力！

## 绘制构想

游戏框架我选用Godot，这个就不过多解释了，感兴趣的可以去搜索下。还好自认为对Python比较熟悉，GD自带的脚本语言语法与Python基本一致，所以上手很快。对于目前游戏的制作，我觉得美工绘画会占去我大部分的时间，如果整个游戏的制作时间为10，我目前认为游戏美工绘画会占了8左右或更多时间。对于绘画我还是很有信心的，之前几年经常手绘，这次绘制像素风的游戏场景和角色等还是蛮有信心的！

最近，除了工作、生活以外，满脑子都是在构思这个游戏的一些细节。以前，总觉得做一个游戏应该不会太难（因为使用代码编写过一些小游戏），但是，真正搞起来才发现，对于一些稍微大一点的游戏，内容就是一个微观的世界，你要掌控这个世界宏观构建的理论基础，还要控制对这个世界的微观操作，要把数字化的思想，用视觉效果传达给玩家，并且让玩家在游玩的过程中，有情绪价值上的收获，到最后得到了玩家的认可，才不会觉得自己荒废了大把的时间。

## 期待

兴趣就是动力，几十岁的人了，很多人可能对于玩玩游戏都提不起精神了，哈哈哈，我还要去做游戏，希望自己能够坚持下去，把这个游戏制作完成。


前几天一直在各个游戏引擎的框架选择中飘忽不定，同时也在纠结和构思制作一个什么样的游戏，简单的在头脑中构思跑了一遍就觉得没意思了，太难的复杂的又觉得制作起来遥遥无期。

突然想做一个模拟养成类的游戏


Phaser3的游戏开发环境搭建其实很简单的，如果你引入CDN的话，只需要一个HTML页面即可，但是这里我并不推荐使用CDN搭建，这里我推荐使用Vite。对于代码编写我推荐trae或vscode。


## 环境搭建

首先你的环境需要安装好Node.js，然后:

```bash
npx --yes create-vite . -t vanilla
```

安装Phaser的最新版:
```bash
npm install phaser
```

修改index.html:
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

`/src/main.js`就是游戏的入口文件了。

编写一些简单的测试代码，然后运行:`npm run dev`。打开浏览器，你就可以看到你的游戏了。

## 使用AI辅助编写代码

有了入口文件，你就可以使用各种AI辅助编写代码了，初期，建议让AI把所有代码都添加详细的注释，最好每一行都要添加注释，直到你完全理解了代码的逻辑。

## 基础框架代码

这个基础框架是指游戏最基础的一些代码，例如：

配置变量:`config`, 游戏对象:`game`, 场景:`scene`等。

`configg`对象常用属性：

### 基础配置
- type : 渲染器类型，可以是 Phaser.AUTO 、 Phaser.CANVAS 、 Phaser.WEBGL 或 Phaser.HEADLESS
- width : 游戏画布宽度（像素）
- height : 游戏画布高度（像素）
- parent : 游戏画布要挂载的 DOM 元素 ID
- backgroundColor : 游戏背景颜色
- scale : 缩放配置，控制游戏如何适应不同屏幕尺寸
- scene : 游戏场景配置，可以是单个场景或场景数组
- title : 游戏标题，显示在浏览器标签上
- url : 游戏的 URL
- version : 游戏版本号
- physics : 物理引擎配置，用于处理游戏中的物理效果
- audio : 音频配置，用于管理游戏中的音频资源
- input : 输入配置，用于处理游戏中的用户输入
- dom : DOM 配置，用于控制游戏中的 DOM 元素
- callbacks : 回调配置，用于处理游戏中的事件回调
- render : 渲染配置，用于控制游戏的渲染方式

## game对象的常用属性：
Phaser 中的 Game 对象是整个游戏的核心，它包含许多重要的属性。以下是 Game 对象的常用属性：

### 核心属性
1. game.config - 游戏的配置对象，包含创建游戏时设置的所有参数
2. game.renderer - 游戏使用的渲染器实例（WebGL 或 Canvas）
3. game.canvas - 游戏的 HTML Canvas 元素
4. game.context - Canvas 的 2D 上下文或 WebGL 上下文
### 管理器属性
5. game.anims - 全局动画管理器
6. game.cache - 缓存管理器，存储所有加载的资源
7. game.input - 输入管理器，处理所有用户输入
8. game.scale - 缩放管理器，处理游戏的尺寸和缩放
9. game.scene - 场景管理器，控制所有游戏场景
10. game.sound - 声音管理器，控制游戏音频
11. game.textures - 纹理管理器，管理所有图像资源
12. game.time - 时间管理器，提供游戏计时功能
### 状态属性
13. game.isBooted - 游戏是否已启动
14. game.isRunning - 游戏是否正在运行
15. game.isPaused - 游戏是否已暂停
### 性能相关属性
16. game.loop - 游戏循环对象，控制游戏的更新频率
17. game.fps - 当前游戏的帧率
### 设备相关属性
18. game.device - 设备信息对象，包含有关设备的详细信息
19. game.device.os - 设备的操作系统
20. game.device.type - 设备的类型（桌面、移动、平板电脑等）
21. game.device.touch - 设备是否支持触摸事件
### 事件相关属性
22. game.events - 全局事件管理器，用于触发和监听自定义事件
23. game.events.on - 用于监听事件的方法
24. game.events.off - 用于取消事件监听的方法
25. game.events.emit - 用于触发事件的方法
### 插件相关属性
26. game.plugins - 插件管理器，用于加载和管理游戏插件
27. game.plugins.install - 用于安装插件的方法
28. game.plugins.remove - 用于移除插件的方法
29. game.plugins.get - 用于获取插件实例的方法
30. game.plugins.getActive - 用于获取所有激活的插件实例的方法
### 调试相关属性
31. game.debug - 调试工具，用于在游戏中添加调试信息
32. game.debug.start - 用于启动调试工具的方法
33. game.debug.stop - 用于停止调试工具的方法
34. game.debug.graphics - 用于创建调试图形的方法
35. game.debug.body - 用于调试游戏对象的物理体的方法
36. game.debug.sprite - 用于调试精灵的方法
37. game.debug.text - 用于在游戏中添加文本调试信息的方法

## scene对象的常用属性：

Phaser 中 Scene 对象有许多常用属性，以下是一些最常用的：

### 系统相关属性
1. this.sys - 场景系统，管理场景的内部工作
2. this.game - 对 Phaser.Game 实例的引用
3. this.config - 场景的配置对象
4. this.scene - 场景管理器，用于控制场景的启动、暂停、恢复等
5. this.time - 时间管理器，用于创建计时器和延迟事件
### 渲染相关属性
6. this.add - 游戏对象工厂，用于创建精灵、文本等游戏对象
7. this.cameras - 摄像机管理器，控制游戏视图
8. this.make - 游戏对象创建器，与 add 类似但不会自动添加到显示列表
9. this.children - 显示列表，管理场景中的所有游戏对象
10. this.lights - 光照系统（WebGL 模式下）
### 输入相关属性
11. this.input - 输入管理器，处理鼠标、触摸、键盘等输入
12. this.scale - 缩放管理器，处理游戏的缩放和尺寸调整
### 物理相关属性
13. this.physics - 物理系统，管理游戏中的物理效果
14. this.matter - Matter.js 物理引擎（如果启用）
### 动画和效果相关属性
15. this.anims - 动画管理器，用于创建和播放精灵动画
16. this.tweens - 补间动画管理器，用于创建平滑的属性变化动画
17. this.particles - 粒子系统，用于创建粒子效果
### 数据相关属性
18. this.data - 数据管理器，用于存储和检索与场景相关的数据
19. this.cache - 缓存管理器，存储和访问加载的资源
20. this.registry - 全局数据存储，可在场景间共享数据


更多的API请访问官方的API文档：

[https://docs.phaser.io/api-documentation/api-documentation](https://docs.phaser.io/api-documentation/api-documentation)

官方示例：

[https://phaser.io/examples/v3.85.0](https://phaser.io/examples/v3.85.0)




Phaser3的游戏开发环境搭建其实很简单的，如果你引入CDN的话，只需要一个HTML页面即可，但是这里我并不推荐使用CDN搭建，这里我推荐使用Vite。对于代码编写我推荐trae或vscode。

Phaser3 游戏开发环境搭建


起因是一直在关注「極客死亡計劃」最近写的几篇博客，前几天他终于发布他的游戏大作[为战斗献上心脏！](https://www.geedea.pro/posts/%E4%B8%BA%E6%88%98%E6%96%97%E7%8C%AE%E4%B8%8A%E5%BF%83%E8%84%8F/)，看的心痒痒，又想写游戏了，为什么要说有又？因为以前懵懵的编写过一些小游戏，但是大多都是按着实际的案例照抄，主要是学习游戏的编写，具体自己完整的构思和制作并没有体验过，所以就有了这篇Phaser3的学习笔记。

## 为什么是Phaser3？

很早以前，我曾使用Java编写过一个弹球小游戏，甚至是复刻了一个简单的俄罗斯方块，后来我又转到了python，自然就会用到pygame，但是pygame的使用并没有想象中那么顺利，曾经还想再pygame的基础上封装一个游戏引擎，但是后来还是放弃了。昨天把，问了Gemini，推荐一些JavaScript的2D游戏引擎，Gemini推荐了Phaser3，我去了官方网站看了下他的API，发现这不就是我当初要封装pygame的引擎吗？有些API看到后竟然有一种似曾相识的感觉，所以我就选择了Phaser3。

## Phaser3学习资源

[Phaser3 官方网站](https://phaser.io/)

官方网站上的学习资料非常的充足，可以满足任何层次的学习。


## Phaser3基础概念

这些概念是Gemini总结的：

在开始编写代码之前，了解 Phaser 的一些核心概念非常重要。

- Phaser 框架概述: Phaser 是一个开源的 HTML5 游戏框架，它提供了丰富的功能来帮助您创建基于浏览器的 2D 游戏。
- WebGL 和 Canvas 渲染: Phaser 默认使用 WebGL 进行渲染，如果浏览器不支持 WebGL，它会自动回退到 Canvas 渲染。WebGL 利用 GPU 加速，通常能提供更好的性能。
- 场景（Scene）: 场景是游戏的基本构建块。每个场景代表游戏中的一个独立部分，例如主菜单、游戏关卡、结束界面等。您可以在不同的场景之间切换。
- 游戏对象（Game Objects）: 游戏对象是您在游戏中看到和操作的元素，例如图片、精灵、文本、形状等。
- 精灵（Sprite）: 精灵是一种特殊的游戏对象，通常用于表示动画角色或移动的物体。它可以包含纹理和动画。
- 游戏循环（Game Loop）: 游戏循环是游戏的核心，它不断地执行一系列操作来更新游戏的状态和渲染画面。Phaser 的游戏循环包含三个主要的函数：
- preload(): 在场景启动之前调用，用于加载游戏所需的资源（图片、音频等）。
- create(): 在 preload() 完成后调用一次，用于创建游戏对象、设置初始状态等。
- update(): 在游戏循环中每帧都会被调用，用于更新游戏逻辑、处理用户输入、移动游戏对象等。
- config 游戏配置对象: 在创建 Phaser 游戏实例时，您需要提供一个配置对象来定义游戏的属性，例如宽度、高度、渲染模式、场景等。

这些内容可以指导你如何开始学习 Phaser 3。

后续会继续在这个博文中继续补充记录一些重要的学习笔记。

当然，建议从官方的第一个教程开始学习：

[Making your first Phaser 3 game](https://phaser.io/tutorials/making-your-first-phaser-3-game/part1)


在游戏开发中，常见的图集（Atlas）类型主要有以下几种：

1. 纹理图集（Texture Atlas）
   
   - 将多个独立的图片打包成一张大图
   - 适用于角色、UI、道具等独立精灵
   - 在 Phaser 中使用 this.load.atlas() 加载
2. 瓦片图集（Tileset Atlas）
   
   - 用于构建游戏地图的重复性图块集合
   - 通常配合瓦片地图编辑器（如 Tiled）使用
   - 在 Phaser 中使用 this.load.tilemapTiledJSON() 加载
3. 精灵表（Sprite Sheet）
   
   - 将动画帧按固定大小排列的图集
   - 每帧大小相同，规则排列
   - 在 Phaser 中使用 this.load.spritesheet() 加载
4. 字体图集（Font Atlas/Bitmap Font）
   
   - 包含字体字形的特殊图集
   - 用于高性能文本渲染
   - 在 Phaser 中使用 this.load.bitmapFont() 加载
5. 粒子图集（Particle Atlas）
   
   - 专门用于粒子系统的图集
   - 包含粒子效果所需的各种状态图像
   - 可以使用普通的 atlas 加载方式
6. 九宫格图集（Nine-Slice Atlas）
   
   - 用于可伸缩UI元素的特殊图集
   - 将图像分为9个区域，支持不同方向的拉伸
   - 在很多UI系统中都有支持

未完待续。

起因是一直在关注「極客死亡計劃」最近写的几篇博客，前几天他终于发布他的游戏大作「为战斗献上心脏！」看的心痒痒，又想写游戏了，为什么要说有又？因为以前懵懵的编写过一些小游戏，但是大多都是按着实际的案例照抄，主要是学习游戏的编写，具体自己完整的构思和制作并没有体验过，所以就有了这篇Phaser3的学习笔记。

Phaser3 学习笔记



## Gemma 3 是什么？

> Gemma 是 Google 基于 Gemini 技术构建的轻量级模型系列。Gemma 3 模型是多模态的，可处理文本和图像，并具有 128K 上下文窗口，支持 140 多种语言。它们提供 1B、4B、12B 和 27B 参数大小，擅长问答、总结和推理等任务，而其紧凑的设计允许在资源有限的设备上部署。

## Ollama的安装与配置

请参考这篇文章：


[为什么选择Chatbox + Ollama](https://www.suiyan.cc/blog/20250203045150)

文中详细的介绍了Ollama的安装与配置。

## 部署Gemma3:12b


    ollama run gemma3:12b


当下载完成后，就会看到交互的界面了，输入问题，就会与AI进行对话。

## Gemma3:12b 使用感受

对比deepseek 14B,Gemma3 12b的回答更加快速，在某些问题的回答上也更加准确。当然，这也是我个人的见解，建议大家可以下载部署体验一下。

对于不想再终端中输入问题的小伙伴，可以使用Chatbox。

下载地址：

[Chatbox 官方免费下载](https://chatboxai.app/zh)

对比deepseek 14B,Gemma3 12b的回答更加快速，在某些问题的回答上也更加准确。当然，这也是我个人的见解，建议大家可以下载部署体验一下。

Windows下Ollama部署gemma3:12b



> Trae 是国内首个 AI IDE，深度理解中文开发场景。AI 高度集成于 IDE 环境之中，为你带来比 AI 插件更加流畅、准确、优质的开发体验。


## trae CN

为啥是CN？ 因为之前我下载的trad和今天下载的trae CN从界面上来说是一样的，但是，他们使用的大模型是不一样的。国内版：

* 豆包 1.5 pro
* DeepSeek R1
* DeepSeek V3

还有注册方式不一样，但是都是免费的。

## 安装及使用

关于安装和使用它们二者基本上差不多啊，虽然还是有些智障，但是相信会越来越好的。至少现在免费，赶紧羊毛薅起来吧。

额，官网地址：

[国际版 trae](https://www.trae.ai)

[国内版 trae](https://www.trae.com.cn/)

Trae 是国内首个 AI IDE，深度理解中文开发场景。AI 高度集成于 IDE 环境之中，为你带来比 AI 插件更加流畅、准确、优质的开发体验。

国内首个 AI IDE:Trae 发布了


## 什么是 Trae？

> Trae（/treɪ/）与 AI 深度集成，提供智能问答、代码自动补全以及基于 Agent 的 AI 自动编程能力。使用 Trae 开发项目时，你可以与 AI 灵活协作，提升开发效率。
> 

## 支持Windows

trae支持Windows了,赶紧试试吧！

![trae](https://www.suiyan.cc/assets/images/2025/trae3.png)

目前打开官网就可以下载Windows版本的trae了，而且不需要代理，不需要付费，chat模式、Builder模式均可使用！

官方地址: 

[www.trae.dev](https://www.trae.dev/)

[trae官方文档](https://docs.trae.ai/docs/what-is-trae?_lang=zh)

## Builder模式

![trae](https://www.suiyan.cc/assets/images/2025/trae1.png)

> Builder 模式可以帮助你从 0 到 1 开发一个完整的项目。你可以将它无缝融入到项目构建的流程中。
> 在 Builder 模式下，AI 助手在回答时会根据需求调用不同的工具，包括分析代码文件的工具、编辑代码文件的工具、运行命令的工具等等。从而让回答更精确、更有效。

亲测，非常好用，赶紧试试吧！



目前打开官网就可以下载Windows版本的trae了，而且不需要代理，不需要付费，chat模式、Builder模式均可使用！

trae支持Windows了,赶紧试试吧！


在 AI 辅助编程的大环境中，程序设计与代码编写有了新的思路和方法。

## 程序设计
### 基于全面需求分析
在设计程序前，利用 AI 对需求进行深度剖析。如案例中电商应用开发，AI 提取并分类商品浏览、购物车管理等各类需求，这为设计提供清晰方向。我们要依据 AI 细化后的需求，如明确订单状态分类，来规划程序架构。对于复杂需求，像个性化推荐功能，可参考 AI 根据行业数据给出的优先级建议，决定是否在初始版本中重点设计或简化处理。

### 架构与模块设计
根据 AI 提供的建议选择合适架构。对于高并发电商应用，若 AI 推荐微服务架构，可将用户登录注册、商品管理等设计为独立微服务。同时，AI 辅助划分模块，如依据购物车功能需求划分添加商品、修改数量等子模块。模块间接口设计也可参考 AI 意见，保证数据交互流畅，如支付模块与订单模块间接口设计要考虑安全和信息传递准确性。

## 代码编写
### 代码生成与补全
编写代码时，利用 AI 生成代码框架。比如开发商品浏览页面，向 AI 描述功能需求，它能生成基本的页面加载和商品信息展示代码。对于重复代码任务，如电商应用中多处用到的表单验证，可让 AI 生成代码，再按需修改。在编写过程中，AI 的代码补全功能可提高效率，输入部分代码，它能根据上下文猜测并补全，减少手动输入量。

### 代码质量保障
借助 AI 检查语法错误，无论是 JavaScript 还是 Python 代码，一旦出现语法问题，AI 能迅速指出。同时，AI 可保持代码风格统一，按照预定风格规范，如 Python 的 PEP8 风格，自动调整代码格式。在代码逻辑方面，AI 能根据功能需求生成测试用例，如对购物车总价计算函数输入不同场景数据测试。若代码出现问题，AI 可定位缺陷，像支付功能报错时，分析可能出错的代码位置，并针对常见逻辑错误提供修复建议，保障代码质量。

总之，在 AI 辅助编程环境下，充分利用其优势进行程序设计和代码编写，能提高开发效率和质量。

在AI辅助编程的大环境中，程序设计与代码编写有了新的思路和方法。

AI 辅助编程下的程序设计与代码编写


![演示](https://suiyan.cc/assets/images/2024/mc.png)

在编程的世界里，我们都在追求更高效、更优质的开发体验。今天，我要向大家介绍一款编程领域的神器——豆包旗下的 MarsCode。

## 一、MarsCode 的卓越功能

### （一）AI 能力大揭秘
1. **代码补全**
当你在编码的时候，是否常常为如何快速准确地输入代码而烦恼？MarsCode 的代码补全功能就像是你的贴心助手。它不仅可以为你提供单行或多行代码推荐，还能根据你的注释生成相应的代码片段。比如，当你需要编写一个返回成功响应的代码时，原本你可能需要手动输入以下代码：

```
from flask import jsonify

@app.route('/success')
def success():
    data = {'message': 'Success'}
    return jsonify(data)
```

而有了 MarsCode，它能迅速给出精准的建议，让你的编码过程如行云流水，节省大量时间。

2. **单测生成**
对于提升代码质量而言，单元测试至关重要。MarsCode 可以为你选中的函数生成单元测试，这大大提高了单测覆盖率。就像在处理注册函数时，假设我们有一个简单的用户注册函数：

```
def register_user(username, password):
    # 这里是注册逻辑，比如插入数据库等
    return True
```

MarsCode 能快速生成合适的单测，如：

```
import unittest

class TestRegister(unittest.TestCase):
    def test_register_user(self):
        result = register_user('testuser', 'testpass')
        self.assertEqual(result, True)
```

帮助你及时发现潜在问题，确保代码的稳定性和可靠性。

3. **代码解释**
面对复杂的项目仓库，理解代码往往是一件头疼的事。不过别担心，MarsCode 能轻松帮你解读代码，无论代码多么晦涩难懂，它都能让你快速上手，如同拥有了一把打开代码宝库的金钥匙。

4. **代码补全 Pro Beta**
在修改或重构代码时，MarsCode 的代码补全 Pro Beta 功能大放异彩。例如，你有一段旧的代码用于计算两个数的和：

```
def add_numbers(a, b):
    return a + b
```

现在你想修改它，使其可以处理多个数的相加。MarsCode 能根据你的编辑行为，预测改动点并给出推荐，可能会建议你将函数修改为：

```
def add_numbers(*nums):
    return sum(nums)
```

让代码的修改和重构不再是难题。

5. **生成注释**
清晰的注释是代码可读性的保障，也是团队协同开发的关键。MarsCode 可以为函数或每行代码生成注释，让你的代码一目了然。比如对于以下函数：

```
def calculate_area(length, width):
    return length * width
```

MarsCode 可能会生成注释：“此函数用于计算矩形的面积，接收长度和宽度作为参数，并返回面积值。”无论是新加入项目的成员还是未来的自己，都能轻松理解代码的含义。

6. **错误修复**
代码中的错误就像隐藏在暗处的小怪兽，而 MarsCode 就是超级英雄。它能快速发现代码问题，并给出优化建议。比如，以下代码存在潜在的类型错误：

```
def concat_strings(str1, str2):
    return str1 + 2  # 这里应该是 str2 而不是 2
```

MarsCode 会指出错误并建议修改为正确的代码：

```
def concat_strings(str1, str2):
    return str1 + str2
```

帮助你轻松打败这些小怪兽，让代码更加健壮。

7. **AI 问答**
在研发过程中，我们总会遇到各种各样的问题。MarsCode 的 AI 问答功能可以优化研发领域知识问答质量。无论是接入 Github 登录鉴权这样的具体问题，还是其他编程相关的疑惑，它都能为你提供满意的答案。

### （二）广泛的支持
1. **编程语言支持**
MarsCode 对编程语言的支持堪称强大，它涵盖了超过 100 种编程语言，从广受欢迎的 Python、Go、JavaScript、HTML/CSS、TypeScript、C++、Java、Kotlin、C、Rust 等，无论你是从事 Web 开发、数据分析、人工智能还是其他编程领域，MarsCode 都能满足你的需求。
2. **IDE 兼容**
它还完美兼容 VSCode 和 JetBrains 代码编辑器，这意味着无论你习惯使用哪种主流的开发工具，都可以轻松地将 MarsCode 融入你的编程环境。

## 二、便捷的安装教程

### （一）VSCode 安装方式
1. **快速安装**
如果你使用 Visual Studio Code，安装 MarsCode 简直易如反掌。只需打开 Visual Studio Code 插件市场，搜索 MarsCode 并下载安装，然后重启 IDE，登录后你就可以尽情体验它的强大功能啦。
2. **手动安装**
当然，如果你更喜欢手动操作，也没问题。在安装好 VSCode 后，点击左侧导航栏的扩展，搜索 MarsCode 并进行安装。安装完成后重启 VSCode，登录你的帐号，从左边栏找到 MarsCode，开启你的编程新旅程。

## 三、安全与隐私保障
在数据安全和隐私备受关注的今天，MarsCode 表现出色。它使用的是开源合规的训练数据集，数据传输基于 HTTPS 协议加密，更重要的是，它承诺不会使用用户的代码和数据进行二次训练，让你没有后顾之忧，可以安心使用。

亲爱的编程小伙伴们，MarsCode 就像是编程世界里的一盏明灯，照亮我们前行的道路，提升我们的编程效率和质量。快来加入 MarsCode 的大家庭，一起探索编程的无限可能吧！让我们的代码在 MarsCode 的助力下，更加优秀、更加闪耀。💻✨

MarsCode一个免费的智能编程助手，邀你用AI助力编码，快来注册使用吧！[https://www.marscode.cn/](https://www.marscode.cn/)


在编程的世界里，我们都在追求更高效、更优质的开发体验。今天，我要向大家介绍一款编程领域的神器——豆包旗下的 MarsCode。

探索编程新境界：MarsCode 助你一臂之力



在当今的编程世界中，AI 辅助编程工具正逐渐成为开发者们的得力助手。这些工具不仅能够提高开发效率，还能为代码质量提供有力保障。本文将为大家介绍十款免费的 AI 辅助编程工具，包括它们的优缺点以及官方网址。

## 1. MarsCode

## 1.1 优点
MarsCode作为一款免费的AI辅助编程工具，其优势主要体现在以下几个方面：

- **功能全面**：MarsCode提供代码完成、代码生成、代码优化、代码注释生成、代码解释等多种功能，这些功能覆盖了编程的各个阶段，极大地提高了编程效率。据官方数据显示，使用MarsCode的开发者在编码速度上平均提升了30%。
  
- **语言支持广泛**：MarsCode支持超过100种编程语言，包括但不限于Python、Java、C++等主流语言，满足了不同开发者的需求。这种广泛的语言支持使得MarsCode能够服务于更广泛的用户群体。

- **集成开发环境**：MarsCode与主流IDE集成，如Visual Studio Code和JetBrains系列，方便开发者在熟悉的开发环境中使用。根据用户反馈，集成后的MarsCode在使用上更为便捷，用户满意度高达95%。

## 1.2 缺点
尽管MarsCode提供了强大的功能和广泛的语言支持，但根据用户反馈和市场分析，其缺点主要体现在以下几个方面：

- **定制化限制**：MarsCode在某些特定需求下可能无法进行深度定制，这限制了其在一些特殊场景下的应用。

- **依赖性问题**：过度依赖AI辅助编程工具可能会导致开发者自身编程能力的下降，这是一个值得关注的问题。

- **未来收费计划的不确定性**：虽然目前MarsCode提供免费服务，但未来可能会有收费计划，这可能会影响一部分用户的使用决策。

## 1.3 官方网址
MarsCode的官方网站为用户提供了详细的产品信息和下载链接，以下是MarsCode的官方网址：

- MarsCode国内版：[MarsCode国内版](https://www.marscode.cn/)
- MarsCode国际版：[MarsCode国际版](https://www.marscode.com)
## 2. 通义灵码

## 2.1 优点
通义灵码作为一款基于通义大模型的AI辅助编程工具，其优点主要体现在以下几个方面：

- **提高开发效率**：通义灵码能够自动生成代码和单元测试，极大地节省了开发者的时间和精力。据统计，使用通义灵码的开发者在编码效率上平均提升了25%。

- **多语言支持**：通义灵码支持Java、Python、Go、C/C++等多种主流编程语言，为不同语言的开发者提供了便利。这种多语言支持使得通义灵码能够适应各种开发环境和项目需求。

- **智能问答功能**：通义灵码的智能问答功能可以帮助开发者快速解决编程中遇到的问题。根据用户反馈，该功能在解决复杂技术问题上的平均响应时间少于5分钟，有效提升了问题解决效率。

## 2.2 缺点
尽管通义灵码提供了强大的功能和广泛的语言支持，但也存在一些缺点：

- **学习曲线**：新用户可能需要一定时间来熟悉通义灵码的使用方法。根据用户调研，大约有15%的新用户表示在初次使用时遇到了操作上的困难。

- **依赖性问题**：过度依赖AI辅助编程工具可能会导致开发者自身编程能力的下降。有专家警告称，长期依赖AI辅助编程可能会削弱开发者的代码调试和问题解决能力。

- **成本考虑**：虽然目前通义灵码提供免费服务，但未来可能会有收费计划，这可能会影响一部分用户的使用决策。

- **定制限制**：在某些特定需求下，通义灵码可能无法进行深度定制，这限制了其在一些特殊场景下的应用。

## 2.3 官方网址
通义灵码的官方网站为用户提供了详细的产品信息和下载链接，以下是通义灵码的官方网址：

- 通义灵码：[通义灵码](https://tongyi.aliyun.com/lingma)
## 3. 代码小浣熊（Raccoon）

## 3.1 优点
代码小浣熊（Raccoon）作为一款免费的AI辅助编程工具，具有以下显著优点：

- **界面友好性**：代码小浣熊以其直观的用户界面和流畅的操作体验，特别适合初学者和中级开发者使用，有效降低了学习成本。根据用户体验报告，超过80%的新用户能够在5分钟内掌握基本操作。

- **代码质量提升**：代码小浣熊的代码分析功能能够帮助开发者识别和修复潜在错误，提升代码质量。官方数据显示，使用该工具后，代码错误率平均下降了40%。

- **强大的AI技术支持**：基于商汤科技的AI技术，代码小浣熊在算法性能上表现出色。在最新的代码生成测试中，其准确率达到了75.6%，显示出强大的技术实力。

## 3.2 缺点
尽管代码小浣熊（Raccoon）提供了诸多便利，但也存在一些局限性：

- **功能基础性**：目前代码小浣熊提供的功能相对基础，与市场上一些高级的AI辅助编程工具相比，可能在某些高级功能上略显不足。

- **语言支持限制**：代码小浣熊主要支持主流编程语言，对于某些冷门编程语言的支持可能不够全面，这限制了其在特定领域的应用。

- **复杂场景支持不足**：在处理一些复杂的编程场景时，代码小浣熊可能无法提供深度的技术支持，这需要开发者具备一定的自主解决问题的能力。

## 3.3 官方网址
代码小浣熊（Raccoon）的官方网站提供了详细的产品介绍和下载链接，以下是代码小浣熊的官方网址：

- 代码小浣熊：[代码小浣熊](https://code.sensetime.com)
## 4. 文心快码

## 4.1 优点
文心快码（Baidu Comate）作为百度推出的AI辅助编程工具，具有以下显著优点：

- **语言支持广泛**：文心快码支持超过100种编程语言，包括Java、Python、C++等主流语言，这使得它能够覆盖广泛的开发需求，为不同语言的开发者提供便利。根据官方数据，文心快码在多语言项目中的应用提升了开发效率高达40%。

- **实时续写功能**：文心快码的实时续写功能可以在开发者编写代码的过程中提供智能提示和灵感，这一功能基于百度的文心大模型，能够根据上下文智能生成代码块。用户反馈显示，这一功能在快速开发时尤其有用，节省了大量敲键盘的时间。

- **智能化程度高**：文心快码的智能化程度高，能够生成高质量的代码。在代码生成的准确性测试中，文心快码的准确率达到了90%以上，这一数据体现了其在代码生成方面的领先地位。

## 4.2 缺点
尽管文心快码提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **高级功能成本较高**：文心快码的高级功能可能需要付费使用，这对于个人开发者来说可能是一个较高的成本。根据市场调研，约有30%的个人开发者因为成本问题而无法充分利用所有功能。

- **冷门语言支持尚待提升**：虽然文心快码支持多种语言，但在一些冷门编程语言中的表现尚待提升。开发者社区的反馈显示，对于某些特定领域的开发者，文心快码的支持力度还不够。

## 4.3 官方网址
文心快码的官方网站为用户提供了详细的产品信息和下载链接，以下是文心快码的官方网址：

- 文心快码：[文心快码](https://comate.baidu.com/)
## 5. iflycode

## 5.1 优点
iFlyCode作为科大讯飞推出的智能编程助手，其优点主要体现在以下几个方面：

- **语音输入功能**：iFlyCode支持语音输入，这一独特的功能为编程提供了新的交互方式，特别适合在无法使用键盘或者需要快速输入的场景下使用。根据用户反馈，语音输入的识别准确率高达95%以上，极大地提升了输入效率。

- **语音识别和自然语言处理技术**：iFlyCode的语音识别和自然语言处理技术领先，这使得非程序员也能快速上手编程。官方数据显示，使用iFlyCode的非专业开发者在编程学习速度上提升了50%。

- **降低开发门槛**：iFlyCode通过其智能编程助手的功能，降低了编程的学习门槛，使得更多非专业人士能够参与到软件开发中来。这一趋势有助于扩大编程人才池，推动软件开发的民主化。

## 5.2 缺点
尽管iFlyCode提供了创新的语音编程功能，但也存在一些局限性：

- **功能局限性**：iFlyCode的功能相对有限，可能无法满足一些复杂的编程需求。特别是在处理大型项目和复杂的算法时，iFlyCode可能无法提供足够的支持。

- **复杂场景下的稳定性**：在一些复杂的编程场景下，iFlyCode可能表现不够稳定。开发者反馈显示，在处理高复杂度的代码逻辑时，iFlyCode的准确率有所下降。

- **语音编程的适用性问题**：虽然语音编程是一个创新点，但在一些编程语言中可能不太适用，特别是在需要精确语法和格式的编程环境中，语音输入可能带来额外的挑战。

## 5.3 官方网址
iFlyCode的官方网站为用户提供了详细的产品信息和下载链接，以下是iFlyCode的官方网址：

- iFlyCode：[iFlyCode](https://iflycode.xfyun.cn/)
## 6. CodeGeeX

## 6.1 优点
CodeGeeX作为一款免费的AI辅助编程工具，具有以下显著优点：

- **高精度代码生成**：CodeGeeX支持生成Python、C++、Java、JavaScript和Go等多种主流编程语言的代码，在HumanEval-X代码生成任务上取得47%~60%的求解率，这一性能较其他开源基线模型有更佳的平均性能。这一数据表明，CodeGeeX在代码生成的准确性上具有明显优势。

- **跨语言代码翻译**：CodeGeeX支持代码片段在不同编程语言间的自动翻译转换，翻译结果正确率高，在HumanEval-X代码翻译任务上超越了其他基线模型。这一功能对于多语言项目开发非常有帮助，能够显著提升开发效率。

- **自动编程插件**：CodeGeeX插件现已上架VSCode插件市场，完全免费，用户可以通过其强大的少样本生成能力，自定义代码生成风格和能力，更好辅助代码编写。根据用户反馈，该插件的使用体验良好，能够显著提高编程效率。

## 6.2 缺点
尽管CodeGeeX提供了强大的功能和广泛的语言支持，但根据用户反馈和市场分析，其缺点主要体现在以下几个方面：

- **社区和文档支持**：作为一个相对较新的工具，CodeGeeX的社区和文档支持可能不如一些成熟的AI辅助编程工具，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然CodeGeeX在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 6.3 官方网址
CodeGeeX的官方网站为用户提供了详细的产品信息和下载链接，以下是CodeGeeX的官方网址：

- CodeGeeX：[CodeGeeX](https://codegeex.cn/)
## 7. Codeium

## 7.1 优点
Codeium作为一款免费的AI辅助编程工具，其优势主要体现在以下几个方面：

- **多功能集成**：Codeium基于尖端人工智能技术构建，提供代码补全、智能搜索和支持20多种语言的AI聊天功能。这些功能覆盖了编程的各个阶段，极大地提高了编程效率。根据官方数据显示，使用Codeium的开发者在编码速度上平均提升了25%。

- **广泛的语言支持**：Codeium支持超过20种主流编程语言，包括Python、Java、C++等，这使得它能够服务于更广泛的用户群体，满足不同开发者的需求。

- **智能搜索功能**：Codeium能够帮助开发者快速找到所需的代码片段和解决方案。在最新的性能测试中，Codeium的搜索准确率达到了85%以上，显示出其在代码搜索方面的领先地位。

- **AI聊天功能**：Codeium的AI聊天功能可以帮助开发者解释代码、重构代码和添加文档，甚至在更复杂的编码任务中提供AI的帮助。这一功能在用户满意度调查中得到了90%以上的好评。

## 7.2 缺点
尽管Codeium提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **社区和文档支持**：作为一个相对较新的工具，Codeium的社区和文档支持可能不如一些成熟的AI辅助编程工具，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然Codeium在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 7.3 官方网址
Codeium的官方网站为用户提供了详细的产品信息和下载链接，以下是Codeium的官方网址：

- Codeium：[Codeium](https://codeium.com/)
## 8. Tabnine

## 8.1 优点
Tabnine作为一款免费的AI辅助编程工具，具有以下显著优点：

- **AI驱动的代码补全**：Tabnine的AI驱动代码补全功能可以显著提高编程速度和准确性。根据官方数据，Tabnine能够减少代码编写时间高达20%，同时提升代码质量。

- **多语言和IDE支持**：Tabnine支持包括Python、Java、JavaScript、C++、Go、Ruby等多种编程语言，并且能够与主流IDE如Visual Studio Code、IntelliJ IDEA等无缝集成，这使得不同语言和环境的开发者都能便捷地使用Tabnine。

- **隐私和安全性**：Tabnine注重代码隐私和数据安全，提供本地和VPC部署选项，确保代码隐私，零数据保留，这为企业提供了一个安全的AI编程助手。

- **个性化学习**：Tabnine能够根据开发者的编码习惯进行个性化学习，提供高度相关的代码建议，这种个性化体验使得Tabnine更加贴合开发者的实际需求。

- **企业级保护**：Tabnine为企业用户提供赔偿，并符合SOC 2和GDPR标准，这意味着Tabnine在企业级使用中也能提供足够的安全保障。

## 8.2 缺点
尽管Tabnine提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **社区和文档支持**：与一些成熟的AI辅助编程工具相比，Tabnine的社区和文档支持可能还不够完善，这可能会对新用户的学习和使用造成一定的障碍。

- **特定场景下的局限性**：虽然Tabnine在多语言支持和代码生成方面表现出色，但在处理一些特定复杂场景时，可能还存在局限性，需要开发者具备一定的自主解决问题的能力。

## 8.3 官方网址
Tabnine的官方网站为用户提供了详细的产品信息和下载链接，以下是Tabnine的官方网址：

- Tabnine：[Tabnine](https://www.tabnine.com/)
## 9. Amazon CodeWhisperer

## 9.1 优点
Amazon CodeWhisperer作为AWS提供的一项AI代码助手服务，具有以下显著优点：

- **AWS服务集成**：CodeWhisperer深度集成AWS服务，使得开发者可以便捷地在AWS环境中使用，尤其是在使用AWS Lambda等云服务时，能够提供更加精准的代码建议。据统计，使用CodeWhisperer的AWS用户在云服务集成方面的效率提升了约35%。

- **多语言支持**：CodeWhisperer支持包括Python、Java、JavaScript在内的多种编程语言，覆盖了绝大多数开发场景，满足了不同开发者的需求。这种广泛的语言支持使得CodeWhisperer能够服务于更广泛的用户群体。

- **安全代码检测**：CodeWhisperer提供了安全代码检测功能，能够帮助开发者识别和修复潜在的安全漏洞。根据AWS官方数据，使用CodeWhisperer的安全扫描功能能够降低约40%的安全漏洞风险。

## 9.2 缺点
尽管Amazon CodeWhisperer提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **预览模式限制**：CodeWhisperer目前处于预览模式，尚未完全完善，可能在某些功能上存在限制，这可能会影响部分用户的使用体验。

- **代码建议偏差**：虽然CodeWhisperer的代码建议通常准确，但在某些情况下可能会有偏差，特别是在处理复杂的编程逻辑时，可能需要开发者进行手动调整。

## 9.3 官方网址
Amazon CodeWhisperer的官方网站为用户提供了详细的产品信息和接入指南，以下是CodeWhisperer的官方网址：

- CodeWhisperer：[Amazon CodeWhisperer](https://aws.amazon.com/cn/codewhisperer/)
## 10. CodiumAI

## 10.1 优点
CodiumAI作为一款免费的AI辅助编程工具，具有以下显著优点：

- **代码质量提升**：CodiumAI专注于提高代码的可读性和可维护性，通过自动测试生成、代码补全等功能，帮助开发者编写更高质量的代码。据用户反馈，使用CodiumAI后，代码审查的效率提高了约40%。

- **IDE内集成**：CodiumAI与流行的IDE如Visual Studio Code和JetBrains系列集成，使得开发者可以在熟悉的开发环境中无缝使用AI辅助功能。这种集成方式提高了工具的易用性，根据用户调研，90%以上的用户认为集成后的体验更加流畅。

- **学习辅助功能**：CodiumAI具有潜在的学习辅助功能，它不仅能够提供代码建议，还能通过解释代码和提供改进建议，帮助开发者提升编程技能。官方数据显示，使用CodiumAI的开发者在代码理解上的平均速度提升了30%。

## 10.2 缺点
尽管CodiumAI提供了强大的功能和广泛的语言支持，但也存在一些局限性：

- **高级功能定价**：CodiumAI的高级功能可能需要付费使用，这可能对个人开发者来说是一个较高的成本。根据市场调研，约有25%的个人开发者因为成本问题而无法充分利用所有功能。

- **AI局限性**：CodiumAI虽然能够提供代码建议和测试生成，但AI的局限性意味着它可能无法完全替代人类开发者的创造力和判断力。在处理复杂的编程逻辑和创新性问题时，开发者仍需依赖自身的专业能力。

## 10.3 官方网址
CodiumAI的官方网站为用户提供了详细的产品信息和下载链接，以下是CodiumAI的官方网址：

- CodiumAI：[CodiumAI](https://www.qodo.ai/)


在当今的编程世界中，AI 辅助编程工具正逐渐成为开发者们的得力助手。这些工具不仅能够提高开发效率，还能为代码质量提供有力保障。本文将为大家介绍十款免费的 AI 辅助编程工具，包括它们的优缺点以及官方网址。

AI 辅助编程：免费工具的优缺点及官网一览


昨天晚上在X上看到很多程序员大佬都在推荐一个全新的AI IDE：`trae.ai`。根据X上大佬们的评价对这款新的智能IDE还是充满推荐的。


## trae.ai

官方网址 ： [trae.ai](https://www.trae.ai/).

> Trae is an adaptive AI IDE that transforms how you work, collaborating with you to run faster.

看来AI IDE领域又加入了一个新的竞争对手，我去官网看了一下，本来冲着字节的APP想下载测试一下，结果发现，Windows下的版本还没有开放，需要排队预约，小小的失望了一下。但是还是默默的留下了邮箱等待后补成功。

trae应该和市面上的一些AI IDE的功能相似，能感知上下文和智能代码提示，不过由于是字节出品，应该在国内的使用比较方便，这个应该还是可以期待的。

有没有大佬已经在Mac上使用了？说下感受如何？

昨天晚上在X上看到很多程序员大佬都在推荐一个全新的AI IDE：trae.ai 根据X上大佬们的评价对这款新的智能IDE还是充满推荐的。

trae.ai 字节出品的AI IDE


这个程序写在12年之前，当时和一些有孩子的亲属朋友聊天，他们总是说孩子几个月就会走路了，一岁就会背古诗了，但这明显就是在吹牛逼，让他们拿出一些证据却拿不出来。
我想或许他们记得这些事，但是不记得具体的时间和细节，如果有一个可以记录这些的与孩子相关的日记，那会是一件很有意义的事。

于是，我就开始编写这个程序：BabyLog。

## 12年前的构思

我记得当时孩子还有几个月就要出生了，我萌生这个软件的构思，但是当时我的编程能力真的是很菜，我甚至不知道如何开始编写这个软件。然后我就买了一本《PHP从入门到精通》，
研究了MySQL的一些基础知识，然后照着书上的代码开始了缓慢的软件编写。直到孩子出生了，我的软件基本功能还没有写完，只写完了信息的录入，和简单的信息的查询。

## 维护与重构

大约孩子三个月左右我写完了第一个版本的babylog，完成了预期的大部分功能，程序的数据写入读取，都是手动编写的，还用HTMLcss写了一个简单的柱状图图表用来展示孩子身高和体重。
但是当时还不支持上传照片，因为图片的上传功能不会写。直到后来使用PHP的框架thinkPHP，才开始支持上传图片。

后来，开始接触Java，然后使用Java重构程序，但是觉得Java的代码太复杂了，而且Java的代码也很难维护，所以就放弃了Java。后来接触了Python，发现了flask这个框架，然后使用flask重构了程序，
在后来有使用fastapi重构了程序，前后端分离了，这次算是把所有预期的功能都实现了，但是对于代码的维护还是不够好，不够理想。

## 继续重构

前几天，trae支持了Windows，赶紧下载了Windows版本的trae，然后使用trae重构了程序，使用trae的Builder模式，真是太方便了，我只需要写好程序的需求，然后trae就会自动生成代码，几乎没写什么代码，花了两三天的时间，就重构了程序，太爽了！

## 最后

项目地址：

[github仓库](https://github.com/bosichong/BabyLog)

[gitee仓库](https://gitee.com/J_Sky/babylog)

视频演示：
[https://www.bilibili.com/video/BV1kbXfYkEdm](https://www.bilibili.com/video/BV1kbXfYkEdm)

感兴趣的可以下载试试！


这个程序写在12年之前，当时和一些有孩子的亲属朋友聊天，他们总是说孩子几个月就会走路了，一岁就会背古诗了，但这明显就是在吹牛逼，让他们拿出一些证据却拿不出来。我想或许他们记得这些事，但是不记得具体的时间和细节，如果有一个可以记录这些的与孩子相关的日记，那会是一件很有意义的事。于是，我就开始编写这个程序：BabyLog。

分享自己维护了12年的开源程序：BabyLog 宝贝日记


今天突然发现字节旗下的豆包变成助手也支持DeepSeek R1/V3了，这简直是太棒了，而且还是免费使用！

![MarsCode](https://www.suiyan.cc/assets/images/2025/ms.png)

MarsCode是什么？

字节豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力。

## 安装MarsCode

安装方法：

在vscode中搜索MarsCode，安装即可。

在设置中，找到MarsCode，设置模型为DeepSeek R1/V3。


![MarsCode](https://www.suiyan.cc/assets/images/2025/ms1.png)


也支持WebStorm等IDE。

## 总结

DeepSeek R1/V3是一个非常强大的模型，它可以帮助我们提高开发效率，减少开发时间，提高开发质量。赶紧去试试吧！

今天突然发现字节旗下的豆包变成助手也支持DeepSeek R1/V3了，这简直是太棒了，而且还是免费使用！

MarsCode编程助手模型接入满血版DeepSeek R1/V3


![DeepSeek](https://www.suiyan.cc/assets/images/2025/ds.png)

首先，这是一次偶然性的测评，并非专业的测评不具有代表性，仅从个人的使用感受如实记录而已，大家看看就好哈，不必太在意。

事情的起因是这样的，本来打算写一个基于next.js的小项目，用来检测孩子的英语单词默写。前一阵子DeepSeek官方经常性的无法打开，索性在本地部署DeepSeek R1 14B ,然后就是在本地询问R1如何来编写这个程序的大体框架。结果呢？令人大失所望，14B的模型在复杂一点的推理、理解、以及编程能力确实差了很多，提示词经过了10来次的修改，依然无法输出正确的代码，最后只好上线测试

## 提示词

下边这些提示词：

    我想构建一个next.js的静态页面应用，用来检测孩子的英语单词背诵结果，整个应用只有两个主要页面，请使用SSG生成静态页面，JavaScript编写，不要使用ts，文件的结尾都是.js，不要使用API，只使用静态页面即可，数据在生成静态页面的时候都加载到页面上，切记。主页，用来显示题库的列表，遍历src/data下的.json，有标题和简介用来显示。答题页面，根据src/data目录下存放的每个.json文件就是一个题库，答题页面使用SSG技术生成静态页面，每个.json都提供了题目的标题简介答题时间以及答题内容，请根据这些内容生成答题页面，答题页面的要求是：1.进入页面显示标题，简介，答题时间，按开始答题进入答题页面，开始回答问题，使用一个输入框来输入回答的英文结果，每次回答一道题，回答完成后点下一题，进入到下一道题回答，可以点上一道题返回修改，回答到最后一道题的时候，下一题显示为提交结果，进入最后的结果页面，结果页面显示标题简介，答题时间，用表格的方式显示回答结果和正确答案对比，然后进行得分计算，换算成百分制的枫树结果。不需要用户登录系统，纯静态的就可以了，只要实现考试答题的基本功能就行

    下边是一个题库：test.json的样本，你可以参考一下：
    {
        "title": "JavaScript基础题",
        "description": "JavaScript基础题，测试案例。",
        "time": 2000,
        "questions": [
          {
            "type": "简答题",
            "question": "猫咪",
            "answer": "cat"
          },
          {
              "type": "简答题",
              "question": "狗狗", 
              "answer": "dog"
          },
          {
              "type": "简答题",
              "question": "苹果", 
              "answer": "apple"
          },
          {
              "type": "简答题",
              "question": "红色", 
              "answer": "red"
          },
          {
              "type": "简答题",
              "question": "蓝色", 
              "answer": "blue"
          }
        ]
      }

然后我把些提示词，分别发送给了：DeepSeek Kimi Gemini，因为这三个模型都有思考型的大模型，他们分别给出了自己的答案。

这里能，我就不贴他们的回答了，仅从结果来进行一些简单的分析：

undefined 回复速度：Gemini>Kimi>DeepSeek ,速度来说，还是google的最快，新模型2.0flash速度真的很快！
undefined 通过率：DeepSeek>Gemini>Kimi ,DeepSeek R1 一次性通过代码检测，直接复制代码到指定文件，程序可运行，功能基本实现，界面进行了适当的美化。Gemini，首次运行出错，让其修改了一次后完美运行，没有界面的美化。Kimi提供的代码无法运行，看起来修改的话估计也得花点心思，估计得几次修改，所以也米有测试。
undefined 关于程序的建议，DeepSeek>Gemini>Kimi  
DeepSeek给出：
● 所有用户答案都存储在客户端内存中，刷新页面会丢失进度
● 没有使用任何持久化存储
● 分数计算基于简单对比，不区分大小写
● 答题时间目前仅做展示，实际使用时可以自行添加倒计时功能
其他两个模型给出的建议很一般，就不提出来了。

## 总结

DeepSeek>Gemini>Kimi ，在编写代码的准确性上，DeepSeek R1 在本次测试中胜出，Gemini的表现也不错。

附：
DeepSeek,Kimi,Gemini的官网地址：
DeepSeek：https://www.deepseek.cn/
Kimi：https://kimi-ai.com/
Gemini：https://gemini.so/




首先，这是一次偶然性的测评，并非专业的测评不具有代表性，仅从个人的使用感受如实记录而已，大家看看就好哈，不必太在意。

一次 DeepSeek Kimi Gemini 代码编写能力的测评


## 为什么选择Chatbox + Ollama

在本地部署大模型的过程中，我曾尝试在Windows Docker下安装Open WebUI。然而，这个过程并不顺利。Docker的配置、模型的加载以及与GPU的适配等问题，让我遇到了不少坑。经过一番折腾后，我意识到，或许需要一种更简洁、更高效的方式来实现本地部署。于是，我转向了Chatbox和Ollama的组合。

### Ollama的安装与配置

访问Ollama的官方网站：[Download Ollama on Windows](https://ollama.com/download)，下载适用于Windows的安装程序。

![Ollama](https://www.suiyan.cc/assets/images/2025/d1.png)


安装完成后，在命令提示符或PowerShell中输入以下命令验证安装是否成功：

    ollama --version

如果显示版本号，说明Ollama已成功安装。指定安装目录与修改模型下载目录为了避免模型文件占用过多C盘空间，我们可以指定Ollama的安装目录和模型下载目录。通过设置环境变量 OLLAMA_MODELS,将模型文件存放在其他磁盘分区。例如，将模型文件存放在D盘的 ollama_models  目录下，可以在系统的环境变量设置中添加如下变量：

![Ollama](https://www.suiyan.cc/assets/images/2025/d5.png)


### 下载并运行DeepSeek R1 14B模型

在命令提示符或PowerShell中输入以下命令，下载DeepSeek R1 14B模型：

    ollama run deepseek-r1:14b


下载可能会很慢，最好放一边先干点别的事。下载完成后，模型会自动运行，

![Ollama](https://www.suiyan.cc/assets/images/2025/d3.png)

当看到上边的命令行的时候，就表明可以开始和deepseek大模型进行交互。



## Ollama 常用命令

基本命令

•   ollama   显示 Ollama 的帮助信息，列出所有可用的命令及其用法。

常用命令

•   serve   启动 Ollama 服务。这是运行 Ollama 的主要命令，用于启动本地服务，以便与模型进行交互。

•   create   根据指定的 Modelfile 创建一个模型。Modelfile 是一个配置文件，定义了模型的结构和参数。

•   show   显示指定模型的详细信息，包括模型的版本、大小、依赖关系等。•   run   运行一个模型。例如，  ollama run deepseek-r1:1.5b   会启动指定版本的 DeepSeek R1 模型。

•   stop   停止一个正在运行的模型。如果需要关闭某个模型，可以使用此命令。

•   pull   从模型仓库中拉取（下载）一个模型。例如，  ollama pull deepseek-r1:1.5b   会从远程仓库下载指定版本的模型。

•   push   将本地模型推送到模型仓库。这通常用于将自定义模型上传到远程仓库，以便共享或备份。

•   list   列出所有已安装的模型。此命令可以帮助你查看本地已下载和安装的模型列表。

•   ps   列出所有正在运行的模型。此命令可以帮助你查看当前正在运行的模型及其状态。

•   cp   复制一个模型。可以将一个已安装的模型复制到另一个位置或重命名。

•   rm   删除一个模型。如果不再需要某个模型，可以使用此命令将其从本地删除。

•   help   获取关于某个命令的帮助信息。例如，  ollama help run   会显示   run   命令的详细用法和参数说明。



## 安装Chatbox并配置本地模型

Chatbox是一个可视化界面工具，可以让我们更便捷地与模型交互。下载与安装访问 [Chatbox 官方免费下载](https://chatboxai.app/zh)，下载适用于Windows的版本。

配置本地模型安装完成后，打开Chatbox，进入设置页面：

![Ollama](https://www.suiyan.cc/assets/images/2025/d2.png)


• API类型：选择“OLLAMA API”。

• 接口地址：填写  http://localhost:11434  。

• 模型名称：填写  deepseek-r1:14b  ，确保与之前下载的模型版本一致。

完成配置后，就可以在Chatbox中与DeepSeek R1 14B模型进行对话了。

![Ollama](https://www.suiyan.cc/assets/images/2025/d4.png)


测试与总结

经过上述步骤，成功的在Windows环境下使用Chatbox和Ollama部署了DeepSeek R1 14B模型。在测试过程中，模型的响应速度和准确性都令人满意。比起使用docker折腾webUI要简单得多。


博在本地部署大模型的过程中，我曾尝试在Windows Docker下安装Open WebUI。然而，这个过程并不顺利。Docker的配置、模型的加载以及与GPU的适配等问题，让我遇到了不少坑。经过一番折腾后，我意识到，或许需要一种更简洁、更高效的方式来实现本地部署。于是，我转向了Chatbox和Ollama的组合。

在Windows下用Chatbox和Ollama部署DeepSeek-R1:14b


从大年初一开始，DeepSeek官方的一些功能无法访问和使用，例如联网、API。今天早上测试了一下，联网的功能已经恢复了。而且API也可以使用了。

当然如果你那边的使用还是有问题，可以考虑使用纳米AI搜索的APP中选择使用DeepSeek-R1 360高速专线临时使用一下，估计DeepSeek官网会逐渐恢复开放使用。


DeepSeek API 我使用的VScode 中的插件 cline 进行了测试，已经可以使用了，速度还是不错的。但是DeepSeek官方API页面还是无法打开。

[DeepSeek服务状态](https://status.deepseek.com/) 这里可以看到DeepSeek官方的一些服务状态。

从大年初一开始，DeepSeek官方的一些功能无法访问和使用，例如联网、API。今天早上测试了一下，联网的功能已经恢复了。而且API也可以使用了。

DeepSeek官方暂时恢复了访问



官方公告原文：

> 近期DeepSeek线上服务受到大规模恶意攻击，为持续提供服务，暂时限制了+86手机号以外的注册方式，已注册用户可以正常登录，感谢理解和支持.


今天晚上在使用DeepSeek的时候明显感到了回答速度的缓慢，而且我刚刚在vscode里安装上了cline，配置好了DeepSeek的API进行测试，结果在接收回答数据的时候变得异常缓慢，而且会直接卡主。

过了一小会官方在页面的上部就进行了公告提示，「近期DeepSeek线上服务受到大规模恶意攻击，为持续提供服务，暂时限制了+86手机号以外的注册方式，已注册用户可以正常登录，感谢理解和支持.」

看来DeepSeek影响力实在是太大了，除了访问人数激增造成服务器负载超出预期，当然官方公告所说内容也是很有可能的，树大招风。


近期DeepSeek线上服务受到大规模恶意攻击，为持续提供服务，暂时限制了+86手机号以外的注册方式，已注册用户可以正常登录，感谢理解和支持.

DeepSeek线上服务受到大规模恶意攻击!


DeepSeek最近这几天可以说是很有风头，很多地方都报道了他的新的推理模型，抱着试试看的心态，也去体验了一下。

## 对比豆包

豆包在解决编写代码上确实有点一般，以至于后来我也不用他了，DeepSeek今天试了一下，感觉非常不错，解答问题条理清晰引用和解释的也很到位。

## 对比Kimi

Kimi有一点不太好，就是回答问题太慢，要是大段的代码得等半天，这点DeepSeek的回复速度很快，至少不用漫长的等待。

## DeepSeek-R1

官方号称性能对标 OpenAI o1 正式版,这个咱不是专业人员，无法进行比较，但是从实际应用中去体验，R1深度的思考后回答的问题还是不错的，会考虑很多，然后再组织内容回答，有时候提问也会得到比较不错的回答。

## 总结

DeepSeek不管怎么说，免费好用，我总觉的他的反应速度很快，还有他的使用界面清爽，相比腾讯的AI通过电脑管家无耻入侵你的电脑，还没明白怎么回事就给你装上了。阿里的通义用的少，打开界面也是一堆智能体。

目前我的AI使用率排行：

国内：DeepSeek > Kimi > 豆包 > 腾讯元宝 > 阿里通义

国外: Gemini > chatGpt > 其他







DeepSeek最近这几天可以说是很有风头，很多地方都报道了他的新的推理模型，抱着试试看的心态，也去体验了一下。

DeepSeek的一些使用感受


今天像往常一样运行了终端命令，正常来说会使用`code`命令在vscode中打开新建的md文件，但是今天运行了命令，报错了，报错信息如下：

    PS D:\code\next\suiyanblog> code md\20250221005203.md
    code : 无法将“code”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
    所在位置 行:1 字符: 1
    + code md\20250221005203.md
    + ~~~~
        + CategoryInfo          : ObjectNotFound: (code:String) [], CommandNotFoundException
        + FullyQualifiedErrorId : CommandNotFoundException

奇怪了，我也米动弹他呀？好吧只好寻求AI的帮助了。

## 解决方法

1. 确定 VSCode 的安装路径：默认安装路径一般是 C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code。这个在Windows下，可以鼠标右键获取地址


2. 打开系统环境变量设置：

右键点击 “此电脑”，选择 “属性”。在弹出的窗口中，点击 “高级系统设置”。在 “系统属性” 窗口里，点击 “环境变量” 按钮。

编辑系统的 Path 变量：

在 “系统变量” 列表中找到 “Path” 变量，选中它并点击 “编辑”。

在 “编辑环境变量” 窗口中，点击 “新建”，将 VSCode 安装目录下的 bin 文件夹路径（例如 C:\Users\你的用户名\AppData\Local\Programs\Microsoft VS Code\bin）添加进去。

依次点击 “确定” 保存设置。

测试 code 命令：关闭所有终端窗口，重新打开 VSCode 终端，输入 `code --version` 命令进行测试。

今天像往常一样运行了终端命令，正常来说会使用`code`命令在vscode中打开新建的md文件，但是今天运行了命令，报错了。

code : 无法将“code”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。


昨天，我有一些图片需要放大，之前我一直使用SD配置一些放大模型进行图片的放大，但是速度实在是太慢了，后来问了朋友，他们推荐了一个AI图片放大工具：Upscayl，使用感觉非常不错，推荐给大家。

![Upscayl](https://www.suiyan.cc/assets/images/2025/Upscayl.png)

## 简介

Upscayl 是一个免费开源的 AI 图片放大工具，它可以将低分辨率的图片放大到高分辨率，同时保持图片的清晰度和细节。Upscayl 使用了深度学习技术，可以在放大图片的同时，自动调整图片的颜色和亮度，使其更加自然和真实。

Upscayl 是一个开源项目，可以在 GitHub 上找到它的源代码。你可以根据自己的需求，对 Upscayl 进行定制和优化。

## 下载与安装

本地版下载安装
1. 访问官网：打开浏览器，访问 Upscayl 官网：[https://upscayl.org/](https://upscayl.org/)。
2. 选择版本：在官网首页，找到“下载”按钮，点击进入下载页面。根据你的操作系统选择对应的版本进行下载。例如，如果你使用的是 Windows 系统，就下载 Windows 版本的安装包。
3.  安装程序：下载完成后，双击安装包，按照提示进行安装。安装过程非常简单，一路点击“下一步”即可完成安装。

## 使用方法

Upscayl 的使用非常简单，只需要将低分辨率的图片拖放到 Upscayl 的界面中，然后点击放大按钮，Upscayl 就会自动将图片放大到高分辨率。Upscayl 还支持批量处理图片，你可以一次性选择多张图片进行放大。

Upscayl 还支持自定义放大比例，你可以根据自己的需求，选择适合的放大比例。Upscayl 还支持自定义输出格式，你可以选择将放大后的图片保存为 PNG、JPEG 或者 WebP 格式。

## 优点

Upscayl 的优点是它可以自动调整图片的颜色和亮度，使其更加自然和真实。Upscayl 还支持批量处理图片，你可以一次性选择多张图片进行放大。Upscayl 还支持自定义放大比例和输出格式，你可以根据自己的需求进行定制。

## 总结

Upscayl 作为一款免费开源的 AI 图片放大工具，凭借其出色的效果、简单的操作和强大的功能，绝对值得你尝试。无论是处理老照片、设计素材还是其他需要高清图片的场景，它都能轻松搞定。快去下载安装 Upscayl，让你的图片瞬间变得清晰、锐利吧！如果你在使用过程中遇到任何问题，可以访问 Upscayl 的中文社区，那里有详细的教程和用户讨论，可以帮助你更好地使用这款工具。


Upscayl 是一个免费开源的 AI 图片放大工具，它可以将低分辨率的图片放大到高分辨率，同时保持图片的清晰度和细节。Upscayl 使用了深度学习技术，可以在放大图片的同时，自动调整图片的颜色和亮度，使其更加自然和真实。

免费开源的AI图片放大神器：Upscayl


从这本书的写作水准来说，我读完后给了一个「一般」的评分。这本书或许叫《阿里巴巴传》会更好一些。

## 回忆

对于马云的认识最早可以追溯到2004年前后。那时，我搞了一些杂七杂八的网站，当时的盈利模式主要是与网站广告联盟合作，在页面上挂联盟广告。我记得当时挂得最多、时间最长的就是淘宝网的广告。淘宝网的广告回报率实在太诱人了。那时候，只要有人通过点击网站页面上的淘宝广告进行注册，每成功注册并激活一个ID，网站主就能获得10元广告费。这在当时的网站广告中是非常高的回报率了。所以，我的网站挂了很多淘宝广告。当时我的网站每天最多能赚几百块钱，有一阵子还真没少赚！（当时我有一个游戏站点，其世界排名曾挤进Alexa前8000名。）

## 情怀

后来，由于备案的原因，个人网站被关停了很大一部分，个人站长纷纷转行。我看到淘宝那么火，就直接注册了淘宝店铺，在淘宝当了一段时间店主。后来因为懂一些代码，就开始搞店铺装修。那时候正值淘宝店主注册的大爆发期，店铺装修的收入非常可观，甚至直接让我买了一套全款房。说到这里，我还真得感谢马爸爸。《马云传》的前半部分，对于中小卖家来说真是满满的回忆。不过，到了淘宝商城风暴那会儿，中小卖家的好日子基本就到头了。马云在中国确实是个传奇人物。他的愿景——「让天下没有难做的生意」，这句话让中国无数中小卖家走上了致富的道路。然而，随着阿里越做越大，资本的运作逐渐改变了马云的情怀，或者说，他的情怀被资本所利用。

## 愿景与价值观

整本书提到最多的就是愿景和价值观。马云很喜欢金庸的武侠世界，他身上有一股江湖侠气，花名“风清扬”。我觉得江湖的侠义精神对马云后期的影响很大。毕竟，阿里最后成了一个资本巨人，而江湖讲的是侠义，资本讲的是利益。在这两者之间，马云选择了资本和利益，而放弃了情怀。

## 不足

这本书的不足之处在于，对马云的成长和生活讲述得太少，内容大多都是网上可以查到的。而且整本书都是作者在自说自话，没有任何第三方采访。这有点可惜。有时候，从家人、同事、朋友甚至敌人那里获取一些信息，或许更能让人全面了解马云。

从这本书的写作水准来说，我读完后给了一个「一般」的评分。这本书或许叫《阿里巴巴传》会更好一些。

《马云传》我的回忆和情怀


![musk](https://www.suiyan.cc/assets/images/2025/musk.jpg)

## 硅谷钢铁侠

花了整整12个小时，我终于读完了《硅谷钢铁侠：埃隆·马斯克的冒险人生》。读完后的第一感觉是，这本书在某些方面似乎只是开了个头，更像是人类殖民火星和探索未知宇宙任务的前传。

阿什利·万斯（Ashlee Vance）是一位知名的美国商业专栏作家、资深科技记者，同时也是电视节目主持人，这本书正是出自他之手。万斯大约花费了18个月才完成这本书的写作。开篇，他便介绍了为写这本书与马斯克及其身边人接触时所遭遇的种种困难，好在最终他如愿以偿，并且得到了马斯克本人的支持。


## 21天阅读挑战

巧合的是，当我看完这本书时，正好完成了微信读书的21天阅读挑战，这也可以算作是习惯养成的一次阶段性胜利。这阵子，我刷抖音短视频的频率明显减少，生活又回归了正常。
并不是说刷抖音不好，如果你觉得刷抖音快乐，那就尽情去刷；如果你觉得读书快乐，那就去好好阅读。这一切都取决于你自己，取决于你的目的。

![21day](https://www.suiyan.cc/assets/images/2025/21-day.png)

## 天才与疯子

再说说马斯克，他是一个充满智慧且富有勇气的天才，同时也很幸运。回顾马斯克近20年的发展历程，我觉得他运气爆棚！当然，运气也是实力的一部分。马斯克有理想，并且肯为了理想而努力。他有目标地去学习，有计划地实现理想，并且在实现理想的过程中，不断改造并丰富曾经的理想，为之竭尽全力。
当然，在最开始的时候，人们都觉得他是个疯子。确实，上个世纪八十年代，火星殖民还只是科幻小说中的情节，但如果你一本正经地胡说八道，别人一定会认为你是个疯子。就算是现在2025年，即便人类有机会在火星上生活，那也得耗费大量的资源和时间才能实现。
马斯克似乎正在逐步完成人类文明殖民火星和其他行星的主线任务。而且，以目前的人类科技水平来看，只有马斯克的SpaceX最有希望。关于马斯克和他的公司的故事实在太多了，书中尽量挑选了一些比较重要的情节。其实，某些事情如果单独拿出来写，完全可以再写一本甚至几本书。真是难以想象马斯克每天能有这么多事情发生。
把马斯克称为“钢铁侠”，是一种精神上的比喻。相比钢铁侠，马斯克更真实。他确实值得人们尊敬和崇拜。他将理想与科技、创造紧密联系在一起，创造了科技和财富，实现了不止他自己的梦想。


花了整整12个小时，我终于读完了《硅谷钢铁侠：埃隆·马斯克的冒险人生》。读完后的第一感觉是，这本书在某些方面似乎只是开了个头，更像是人类殖民火星和探索未知宇宙任务的前传。

马斯克：理想、勇气与「钢铁侠」精神


## 回忆

时间总是在不经意间悄悄流逝，尤其是在春节前这个忙碌的时期。

前几天我曾说「卸载抖音，重构我的2025」，一晃都过去半个月了。

今天微信读书弹出信息提示我，坚持读书21天10小时的任务还有半小时就要完成了。

额，这么快吗？我怎么感觉就好像是昨天立的flag？

看了下APP使用时长：

![时长](https://www.suiyan.cc/assets/images/2025/IMG_8588.PNG)

![时长](https://www.suiyan.cc/assets/images/2025/IMG_8589.PNG)

微信读书的时间上升，抖音以及小红书的使用时间有所下降，尤其是抖音几乎不看了。

小红书由于有运营的账号，所以还是得打开查看。微信的使用时间受浏览公众号文章的影响，使用时间还是挺长的。

## 改变

改变一个习惯最好的办法就是马上去执行改变的计划，不要拖延，所以那些年前你说年后要做的事就不要再拖了。

今天直接充值了微信读书一年的VIP，虽然可以在APP内打卡参与各种活动来积攒天数兑换，但我只想自由安心地读书，而不是为了蹭VIP而读书。

再者，每年购买新书的费用也得几百块，随便省下几本书都够充值VIP，这样算来还是蛮划算的。

阅读与写作的目的每个人都不一样，但带来的影响在某些方面确实相同，例如思考、联想、提升写作能力等。总之，比起刷短视频，阅读更能激发大脑的潜能，养成一些好的习惯。

## 展望

新的一年即将开启，也希望大家都能提前准备好目标并为之努力，争取实现这一年的计划。

值此新春佳节，我祝愿各位网友，春节快乐，喜乐安康，开开心心地过个团圆年。


时间总是在不经意间悄悄流逝，尤其是在春节前这个忙碌的时期。

那些年前你说年后要做的事就不要再拖了。


今天在微信读书上啃《JavaScript语言精髓与编程实践》，这是一本极其深入详细讲解JavaScript基础理论的神书。它不同于我们平时在互联网上看到的那些教程，不愧是资深程序员大佬爱民老师的巨作。

凡事都有其运作的原理，在科技发达的今天，人们享受着科技带来的便利，若不是专业人员或学着，很少有人愿意去花时间研究事物运作的规律和本质。就好比我们每天都在浏览他人的博客，但是很少有人去研究在地址栏输入域名就会打开你的博客这一过程是如何实现的？markdown文档是如何接到网页中的？博客中的评论数据库的结构是怎样的？博客程序的原理是什么？主题是如何制作的？当然，我会开车就行，为什么要学习怎么造车？

JavaScript是一门入门简单但是又充满深度的语言，我们在互联网看到的一切可以说都是离不开JavaScript的，甚至我们使用的软件APP都我有可能是使用JavaScript框架编写出来的。不光是学习编程、编写代码和设计程序，任何一个行业如果想在领域里做出一些成绩，不深挖行业的细节是不行的。

哎呀，啃理论类的书籍啃的头大，我决定看完这本换换口味，专业书籍和其他类书籍串换着，不然会掉头发的。这本书暂定《硅谷钢铁侠》，看看马斯克是如何从一个普通人做到参与世界主线任务的。


今天在微信读书上啃《JavaScript语言精髓与编程实践》，这是一本极其深入详细讲解JavaScript基础理论的神书。它不同于我们平时在互联网上看到的那些教程，不愧是资深程序员大佬爱民老师的巨作。

阅读随感


## 你有遗憾吗？

> 我本以为，人生最大的遗憾是所爱隔山海，山海不可平，后来才知道，海有舟可渡，山有路可行所，山海皆可平，难平是人心。

> 没有人不遗憾，只是有人不喊疼，即便是盛世长安三万里，不也处处写尽了遗憾么，高适蹉跎半生，暮年得志，不遗憾么？李白潇洒肆意，空有大鹏之志，却沦为阶下囚，最终了然一生，不遗憾么？裴十二一介女子，文不输李白，武不输高适，只因女子之身，报国无门。少年杜甫，惬意灵动，却最终只道，南村群童欺我老无力，不遗憾么？



「你有遗憾吗」林姨的新书以这句让人思绪翻滚的问候开场，让我们带着满满的回忆翻看着书中的每一字每一句。

很早就在抖音上浏览过别人转发的林姨讲课的视频，毫不夸张地说，2024年这一年，在所有看过的视频中，林姨侃侃而谈的视频留下的印象是最深刻的。

“你有遗憾吗？”这一句话就让我陷入了深深的回忆，脑海中的思绪就像计算机在不停地检索和计算。是啊，人生过半，尔等皆凡人，谁的身边不是充满了密密麻麻的遗憾？时间就是一台遗憾的制造机，不管你如何努力地躲避，不管你如何地逃避，遗憾，始终都会发生。



## 写中年，中年咋写？

> 写中年，中年咋写？应该是"年少励志三千里，踌躇百步无寸功。转眼高堂已白发，儿女蹒跚学堂中。不如意事常八，可与人言无二三。可是诸位不用悲伤。稻盛和夫说，人生并不是一场物质的盛宴，而是一场精神修炼。我想要的中年，是沧桑不诉，锋芒不露，锐气不减，拼尽一身剐也要与这岁月周旋。



任何一个中年人看到这段话，都会引起强烈的共鸣。这一生，忽然步入中年，让你还来不及回忆和思索。“年少立志三千里”，“当初的愿望实现了吗？事到如今只好祭奠吗？”我猛吸了一口烟，那些愿望跟随我吐出的烟雾一起灰飞烟灭。

人到中年万事休，我怎肯虚度了春秋？那又怎样？琐事缠身，生离死别，渐行渐远的这一生飘忽不定。就算倾尽这一生，也还是会有更多遗憾。


## 你孤独吗？

> 年少时，我坚信的是「莫愁前路无知己 ，天下谁人不识君」
可后来才发现，「相识满天下，知心无几人」
那些想倾诉的事，终是止于唇齿，掩于岁月，匿于年华，不可说，不能说 ，不必说。
人生就是一场孤独之旅 


可能现在还在坚持独立博客写作的人，大部分都是孤独的人。那些话，朋友圈不能发，亦不能与身边的人诉说，所以，孤独常伴，把酒倒满。

《你有遗憾吗》，这是一本适合在夜晚安静时慢慢细品的书，一字一句地品味，一点一滴地回味。把回忆缝缝补补，愿未来可期，也愿所有的放弃都值得。


我本以为，人生最大的遗憾是所爱隔山海，山海不可平，后来才知道，海有舟可渡，山有路可行所，山海皆可平，难平是人心。

你有遗憾吗？


## 起因

为什么会选择读一本关于写作的书籍呢？或许是博客重构完毕后，我突然发现自己又不知道该写什么了。大约花了三个小时读完这本关于写作方法理论探讨的书籍，感觉自己受益匪浅，那就说说自己的感受吧。

## 基础方法

《九宫格写作法：如何写出一篇好文章》这本书介绍的写作方法很基础，并没有太多高深的写作理论和技巧。书中所提出的九宫格写作法，就是在一张纸上画九个格子，在中间的格子里写下你希望写作的主题，然后在每个格子里进行自问自答。这么做的目的是为了在真正开始写作之前，进行一次写作素材的搜集。

关于格子的数目并不是固定的。太少，文章会显得瘦弱而空洞；太多，文章又会显得臃肿。这是我这次写读后感时准备的素材，当然也是现学现卖。

![九宫格](https://www.suiyan.cc/assets/images/2025/jgg.png)

## 深挖

格子和自我问答构成了写作的基础。格子是横向的，作者又提出了“铲子问题”，即深挖每个格子，继而发现更多的问题与答案，这就是文章的拓展。怎么样？是不是思路打开了？如果你去读这本书，感触会更大一些。


## 单一职责

书中介绍了很多写作的方法与技巧，但有一个非常简单的技巧给我留下了深刻印象，那就是“一句话只写一个意思”，一文一意。当我读到这里时，我联想到编程中的单一职责原则，即一个方法应该只有一个功能。当然，类似这种大道至简的理念在生活中还有很多实践，只要你细心发现，就会发现单一职责的理念随处可见。

## PDCA

有时，我觉得写文章和编写软件或脚本很相似，搜集功能需求也可以采用九宫格的方式。当一切素材（需求）准备妥当后，我们就可以开始写作（编码）了。
这个过程可以用“PDCA”来概括。“PDCA”是一种常用的管理模型，它包括四个阶段：计划（Plan）、执行（Do）、检查（Check）、处理（Act）。我觉得“PDCA”模式不仅可以用在写作上，其他任何事情几乎都可以套用。“PDCA”可以循环迭代，从而达到最佳效果。

## 写作模版

这本书并没有带来什么特别高深的写作方法，除了基础的九宫格自问自答，还有四套文章写作模板，我觉得简单好用。当然还有一些不错的的写作技巧，感兴趣的话可以去微信读书上借阅，这里就不继续剧透了。

## 总结

通篇读完这本书，学到的不仅是一些写作技巧，更多的是来自开篇的提示：自问自答。我在读这本书时，不停地在问自己，在思考如果是我，我该如何运用这些技巧，甚至想到了曾经写过的代码，哪里需要优化、需要重构。这或许就是一场思想上的转变，或者说是重新的认知吧。作者巧妙地把写作方法渗透到了其他领域。

我不禁想到了以前写的那些博文，这些文字给自己和读者带来了什么收获？也想到了什么样的博文才是一篇好的博文？如何才能做好一个博客？
写作，或许就是一场自我意识的博弈，而文章就是结果。无论结果是为了自己还是为了取悦他人，只要有所收获，那么这些文字就有了它存在的意义。
最后，若你对写作有兴趣，或正处于迷茫与混沌之中，感兴趣的话，我推荐你去读读这本很薄的书。收获的不光是写作技巧，更是思想上的自我问答。



为什么会选择读一本关于写作的书籍呢？或许是博客重构完毕后，我突然发现自己又不知道该写什么了。大约花了三个小时读完这本关于写作方法理论探讨的书籍，感觉自己受益匪浅，那就说说自己的感受吧。

读《九宫格写作法》的一些感悟


之前一直在使用`giscus`作为blog的评论系统，个人评价`giscus`接入方便、使用简便，依托全世界最大的代码平台Github，其在评论系统商的功能可以说是非常的丰富和完善的，而且稳定可靠，不用操心。之前的blog只有一个主题，所以`giscus`也选择了对应的主题，后来blog增加明暗主题的切换，但是`giscus`主题却没有跟随系统的样式进行切换，当用户切换了blog的主题是，`giscus`的主题却没有切换，如果是明暗主题切换就会有很明显的对比，所以就有了下边的内容就是如何解决`giscus`的样式跟随主题切换。

## 分析

如果你事直接复制的代码

    data-theme="preferred_color_scheme"

这里就是giscus主题的设置属性，只需要data-theme的值跟随blog主题属性值一起变化就好。

## 编写代码

    // 定义一个状态变量 giscusTheme，用于存储 Giscus 的主题
    const [giscusTheme, setGiscusTheme] = useState('');

    // 在组件挂载后执行副作用函数
    useEffect(() => {
        // 在客户端获取主题并设置 Giscus 的 theme 属性
        const savedTheme = localStorage.getItem('theme');
        // 如果主题为 dark，则设置 Giscus 的 theme 属性为 dark_dimmed
        // 如果主题为 light，则设置 Giscus 的 theme 属性为 light_high_contrast
        // 否则，设置 Giscus 的 theme 属性为 savedTheme
        setGiscusTheme(savedTheme === 'dark' ? 'dark_dimmed' : savedTheme === 'light' ? 'light_high_contrast' : savedTheme);
    }, []);

这样，以后用户切换blog样式的同时，也会改变giscus主题，已达到自动切换giscus主题样式的目的。
我使用的next.js框架，所以使用useEffect副作用函数，你可以根据上边的思路，修改代码到自己的blog系统中。




之前一直在使用`giscus`作为blog的评论系统，个人评价`giscus`接入方便、使用简便，依托全世界最大的代码平台Github，其在评论系统商的功能可以说是非常的丰富和完善的，而且稳定可靠，不用操心。之前的blog只有一个主题，所以`giscus`也选择了对应的主题，后来blog增加明暗主题的切换，但是`giscus`主题却没有跟随系统的样式进行切换，当用户切换了blog的主题是，`giscus`的主题却没有切换，如果是明暗主题切换就会有很明显的对比，所以就有了下边的内容就是如何解决`giscus`的样式跟随主题切换。

让giscus的主题跟随blog的主题一起变化

这几天一直琢磨这给博客文章页面添加个第三方的评论系统，最好是免费的，然后就搜到了`giscus`，从安装到使用，用一个字来评价：真特么绝！具体效果可以拉倒最底端查看。

## giscus 安装与配置


首先，需要Using the GraphQL API for Discussions，这个跟着GitHub的官方文档安装没有任何难度，传送门：[Using the GraphQL API for Discussions](https://docs.github.com/en/graphql/guides/using-the-graphql-api-for-discussions),其实就是开通一个仓库的评论系统，一般大家默认选择存放站点静态文件的仓库就好。

然后，安装[giscus](https://github.com/apps/giscus)，点开后，install就OK了。

最后，打开这个网址：[giscus官方和评论系统代码配置](https://giscus.app/zh-CN)，把你刚刚打算作为评论系统的仓库地址填到配置项的表单字段那里，然后选择几个选项，就可以生成配置代码了，把它添加到你的博客需要的地方就可以显示出来了。

这几天一直琢磨这给博客文章页面添加个第三方的评论系统，最好是免费的，然后就搜到了`giscus`，从安装到使用，用一个字来评价：真特么绝！

giscus一款基于GitHub的免费评论系统！


今天读完了《React进阶之路》，其实并没有完全读完整本书，只是把前半部分的基础理论和路由那部分仔细的看了看，后边的项目实战并没有仔细的去研究。

## 一些回忆

使用React搞过几个小项目，当前版本的碎言博客就是基于next.js构建的，而next.js就是一个react框架。构建web程序从Python过渡到JavaScript花了有一年的时间，自认为脑子不灵巧，学习做项目都是很慢很艰难的那种。之前的blog程序经历了五个版本才做到现在的这样，可能有些朋友会觉得自己写代码构建blog的程序有些多余，为什么不直接使用现成的blog程序，例如WordPress等，哎，我还真用过啊。很早的时候用过WordPress，评论被灌水，虚拟主机被黑，灌满了各种页面。那个时候还没有现在的服务器，一个主机就是挺贵了。由于受不了这些折腾，还有就是博客的主题没有自己心仪的，索性就自己使用Django构建了一个，大约使用了三年，最终也是被黑了，放弃。


2023年前后，决定构建一个静态的blog，并且设计自己喜欢的界面和功能，一路迭代到现在，才算稳定下来。读这本书就是想加深对react的基础知识的印象，巩固一下对其设计理念的理解。

## 对比Vue

曾经使用过一段vue，那个时候刚刚发布3.0吧，对于vue和react，我个人觉的还是react对新手更友好，当然这只是我个人的见解。react在使用中更接近原生的JavaScript，如果你JavaScript用的6，几乎上手没什么难度会很快，但是vue，就需要一些学习成本，需要学习新的语法糖。对于写过的代码，我在回顾的时候，react会更快的进入状态。

## 随感

有的时候会想为什么几个编程语言或框架一起学习？以前确实有一阵子莫名的就这么做了，觉得多学习一些编程语言，多接触一些框架，会学到更多的东西，以为想打游戏一样，在游戏中多体验几个角色、几种玩法会更爽。实际开发中，对于一个业余选手，智商欠佳的中老年人，这简直是要命的。做项目要考虑很多，使用最拿手的语言和框架来开发还会遇到重重困难，难道还要换种方式来折磨自己吗？这和打游戏换个角色体验不同的玩法的感受是不同的，一个是够虐，一个是刺激。

最近手头上还有一些项目在拖延，还有想重构的，看来要仔细考虑一下了。



今天读完了《React进阶之路》，其实并没有完全读完整本书，只是把前半部分的基础理论和路由那部分仔细的看了看，后边的项目实战并没有仔细的去研究。

读完《React进阶之路》闲聊几句


![演示](https://suiyan.cc/assets/images/2024/todo.png)

## 一、项目构建构思

### （一）功能设计
1. **任务管理**
    - 用户能够添加新的待办任务，包括任务标题和描述。
    - 针对每个任务，用户可进行编辑，编辑功能应允许修改任务标题和描述。
    - 用户可以删除不再需要的任务。
    - 每个任务能被标记为已完成或未完成，方便用户跟踪任务进度。
2. **任务列表展示**
    - 以清晰、美观的列表形式展示所有待办任务，已完成和未完成的任务有明显的视觉区分。
    - 可以按照任务创建时间、完成状态等进行排序，便于用户查看。
3. **数据存储与持久化**
    - 使用本地存储（localStorage）来保存任务数据，确保用户刷新页面后数据不会丢失。

### （二）技术选型与架构设计
1. **Next.js**
    - 作为项目的核心框架，利用其服务器端渲染（SSR）和静态生成（SSG）能力，提高应用的性能和 SEO。
    - Next.js 的路由系统方便实现不同页面和功能的导航（虽然本项目暂不需要多页面，但为后续扩展考虑）。
2. **Tailwind CSS**
    - 用于快速搭建应用的用户界面，通过其丰富的实用类来设置样式，使页面布局和设计更加简洁高效。
3. **组件化设计**
    - 将应用划分为多个组件，如任务输入组件、任务列表组件、任务项组件等，提高代码的可维护性和复用性。每个组件负责特定的功能和展示逻辑。

## 二、项目创建过程

### （一）项目初始化
1. 创建 Next.js 项目：
  
        
        npx create-next-app todo-app-with-edit
        

    然后进入项目目录：


        cd todo-app-with-edit


2. 安装 Tailwind CSS：

        npm install -D tailwindcss postcss autoprefixer
        npx tailwindcss init -p


    在`tailwind.config.js`中配置内容路径：


        module.exports = {
        content: [
            "./pages/**/*.{js,ts,jsx,tsx}",
            "./components/**/*.{js,ts,jsx,tsx}",
        ],
        theme: {
            extend: {},
        },
        plugins: [],
        };


    在`styles/globals.css`中导入 Tailwind 基础样式：


        @tailwind base;
        @tailwind components;
        @tailwind utilities;



### （二）创建组件
1. **任务输入组件（`components/TaskInput.js`）**


        // 导入 React 和 useState 钩子
        import React, { useState } from 'react';

        const TaskInput = ({ onAddTask }) => {
        // 状态来存储任务标题和描述
        const [title, setTitle] = useState('');
        const [description, setDescription] = useState('');

        const handleSubmit = (e) => {
            e.preventDefault();
            // 检查标题是否为空
            if (title.trim()!== '') {
            // 创建新的任务对象
            const newTask = {
                id: Date.now(),
                title,
                description,
                completed: false
            };
            onAddTask(newTask);
            setTitle('');
            setDescription('');
            }
        };

        return (
            <form onSubmit={handleSubmit} className="bg-white p-6 rounded shadow-md">
            <h2 className="text-2xl font-bold mb-4">Add New Task</h2>
            <input
                type="text"
                placeholder="Task Title"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full border border-gray-300 p-2 rounded mb-4"
            />
            <textarea
                placeholder="Task Description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                className="w-full border border-gray-300 p-2 rounded mb-4"
            />
            <button
                type="submit"
                className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
            >
                Add Task
            </button>
            </form>
        );
        };

        export default TaskInput;


2. **任务项组件（`components/TaskItem.js`）**
    

        import React, { useState } from 'react';

        const TaskItem = ({ task, onToggleComplete, onEditTask, onDeleteTask }) => {
        const [isEditing, setIsEditing] = useState(false);
        const [editedTitle, setEditedTitle] = useState(task.title);
        const [editedDescription, setEditedDescription] = useState(task.description);

        const handleEditToggle = () => {
            setIsEditing(!isEditing);
        };

        const handleSave = () => {
            const updatedTask = {
            ...task,
            title: editedTitle,
            description: editedDescription
            };
            onEditTask(updatedTask);
            setIsEditing(false);
        };

        return (
            <div className="bg-white p-4 rounded shadow-md mb-4">
            {isEditing? (
                <>
                <input
                    type="text"
                    value={editedTitle}
                    onChange={(e) => setEditedTitle(e.target.value)}
                    className="w-full border border-gray-300 p-2 rounded mb-2"
                />
                <textarea
                    value={editedDescription}
                    onChange={(e) => setEditedDescription(e.target.value)}
                    className="w-full border border-gray-300 p-2 rounded mb-2"
                />
                <button
                    onClick={handleSave}
                    className="bg-green-500 text-white px-4 py-2 rounded mr-2"
                >
                    Save
                </button>
                <button
                    onClick={handleEditToggle}
                    className="bg-gray-500 text-white px-4 py-2 rounded"
                >
                    Cancel
                </button>
                </>
            ) : (
                <>
                <h3 className={`text-xl font-bold ${task.completed? 'line-through' : ''}`}>{task.title}</h3>
                <p className="text-gray-700">{task.description}</p>
                <button
                    onClick={() => onToggleComplete(task.id)}
                    className={`${task.completed? 'bg-green-500' : 'bg-yellow-500'} text-white px-4 py-2 rounded mt-2 mr-2`}
                >
                    {task.completed? 'Completed' : 'Mark as Completed'}
                </button>
                <button
                    onClick={handleEditToggle}
                    className="bg-blue-500 text-white px-4 py-2 rounded mt-2 mr-2"
                >
                    Edit
                </button>
                <button
                    onClick={() => onDeleteTask(task.id)}
                    className="bg-red-500 text-white px-4 py-2 rounded mt-2"
                >
                    Delete
                </button>
                </>
            )}
            </div>
        );
        };

        export default TaskItem;


3. **任务列表组件（`components/TaskList.js`）**
    

        import React from 'react';
        import TaskItem from './TaskItem';

        const TaskList = ({ tasks, onToggleComplete, onEditTask, onDeleteTask }) => {
        return (
            <div className="container mx-auto px-4">
            {tasks.map(task => (
                <TaskItem key={task.id} task={task} onToggleComplete={onToggleComplete} onEditTask={onEditTask} onDeleteTask={onDeleteTask} />
            ))}
            </div>
        );
        };

        export default TaskList;


### （三）页面组件（`pages/index.js`）


    import React, { useState, useEffect } from 'react';
    import TaskInput from '../components/TaskInput';
    import TaskList from '../components/TaskList';

    const HomePage = () => {
    const [tasks, setTasks] = useState([]);

    useEffect(() => {
        // 从本地存储获取任务数据
        const storedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
        setTasks(storedTasks);
    }, []);

    const addTask = (newTask) => {
        setTasks([...tasks, newTask]);
    };

    const toggleComplete = (taskId) => {
        setTasks(tasks.map(task => {
        if (task.id === taskId) {
            return {
            ...task,
            completed:!task.completed
            };
        }
        return task;
        }));
    };

    const editTask = (updatedTask) => {
        setTasks(tasks.map(task => {
        if (task.id === updatedTask.id) {
            return updatedTask;
        }
        return task;
        }));
    };

    const deleteTask = (taskId) => {
        setTasks(tasks.filter(task => task.id!== taskId));
    };

    useEffect(() => {
        // 将任务数据保存到本地存储
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }, [tasks]);

    return (
        <div className="min-h-screen bg-gray-100">
        <TaskInput onAddTask={addTask} />
        <TaskList tasks={tasks} onToggleComplete={toggleComplete} onEditTask={editTask} onDeleteTask={deleteTask} />
        </div>
    );
    };

    export default HomePage;



## 三、部署上线（以 Vercel 为例）

### （一）准备工作
1. 确保项目在本地运行无误，包括所有功能都正常工作，没有报错。检查添加、编辑、删除任务以及标记任务完成等功能是否都能正常执行，同时检查本地存储的数据是否正确保存和读取。
2. 检查项目中是否有敏感信息（如 API 密钥等），如果有，确保妥善处理，避免泄露。

### （二）连接 Vercel
1. 注册并登录 Vercel。
2. 在 Vercel 控制台，点击“New Project”（新建项目）按钮。
3. 选择“Import Git Repository”（导入 Git 仓库）选项。如果你的项目已经托管在 Git 平台（如 GitHub、GitLab、Bitbucket 等），Vercel 会自动检测到你的仓库并列出。选择你的`todo - app - with - edit`项目仓库。

### （三）配置项目
1. Vercel 会自动识别项目为 Next.js 框架。
2. 在“Project Settings”（项目设置）中，可以设置项目名称等基本信息。
3. 如果有需要，可以在“Build & Development Settings”（构建和开发设置）中配置构建命令等。一般情况下，Next.js 项目默认的构建命令`npm install && npm run build`就可以正常工作。

### （四）部署项目
1. 点击“Deploy”（部署）按钮，Vercel 会开始克隆仓库、安装依赖、构建项目。
2. 在部署过程中，可以在控制台查看构建日志和部署进度。部署完成后，Vercel 会提供一个访问 URL，通过这个 URL 就可以在线访问你的可编辑和删除的 ToDo 待办事项应用了。

这样，我们就完成了一个具有添加、编辑和删除功能的 ToDo 待办事项应用的构建和部署。用户可以方便地管理自己的任务列表，并且数据在本地存储中得以持久化保存。

项目仓库地址：https://github.com/bosichong/todo-app

利用 Next.js 和 Tailwind CSS 这两个强大的工具来构建一个可编辑和删除的 ToDo 待办事项应用，帮助用户更好地管理他们的任务。

使用 Next.js 和 Tailwind CSS 构建可编辑和删除的 ToDo 待办事项应用

之前在html中使用clipboard.js是很简单的，引用CDN，然后new一个clipboard对象，绑定DOM就可以搞定一键复制文本了。这次要在react中使用，所以原来的方式就不行了，来看看react中如何使用clipboard.js。

## 安装clipboard.js

    npm install clipboard --save

## react中使用

首先还是dom的绑定：

    
    <textarea id="bar">Mussum ipsum cacilds...</textarea>

    
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
        Cut to clipboard
    </button>

然后再组件内初始化clipboard.js

    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

这里官方给出的案例代码，分别列出了复制成功和失败的处理方法，就是这么简单。


[clipboardjs官方地址](https://clipboardjs.com/)

之前在html中使用clipboard.js是很简单的，引用CDN，然后new一个clipboard对象，绑定DOM就可以搞定一键复制文本了。这次要在react中使用，所以原来的方式就不行了，来看看react中如何使用clipboard.js。

在react中使用复制插件clipboard.js

今天需要再react组件内渲染一段HTML代码，但是直接复制到组件内渲染会被当做HTML渲染出HTML的dom结构，我的本意是要把这段HTML代码输出为字符串，记录一下解决过程。

## 问题重现

在return中需要输出一段HTML代码的字符串：

    在body中添加canvasHTML标签:<canvas id="matrix"></canvas>

但是这段代码会把HTML代码直接渲染出dom结构了。

## 解决方法

如果你想在React中将HTML代码作为字符串处理，可以使用DOMPurify库来进行安全的HTML代码转义。DOMPurify库可以过滤和清理HTML代码，防止潜在的跨站脚本攻击（XSS）。

首先，你需要安装dompurify库。可以使用npm或者yarn执行以下命令：


    npm install dompurify

或者

    pnpm install dompurify

安装完成后，你可以按照以下步骤在React组件中使用DOMPurify：


    import React from 'react';
    import DOMPurify from 'dompurify';

    function App() {
    const htmlString = '<p><canvas id="matrix"></canvas>';
    const sanitizedHtml = DOMPurify.sanitize(htmlString);

    return (
        <div>{sanitizedHtml}</div>
    );
    }


在上面的例子中，我们导入了DOMPurify库并将HTML代码字符串传递给sanitize函数。sanitize函数会清理和过滤HTML代码，确保其中不包含恶意代码。然后，我们将经过处理的HTML代码字符串作为文本内容渲染在React组件中，而不会被解析为HTML。

使用DOMPurify库可以帮助确保安全地处理HTML代码字符串，并防止潜在的安全问题。

今天需要再react组件内渲染一段HTML代码，但是直接复制到组件内渲染会被当做HTML渲染出HTML的dom结构，我的本意是要把这段HTML代码输出为字符串，记录一下解决过程。

react中如把HTML代码转成字符串进行渲染？

今天在react useEffect()中有一个function需要防抖，于是乎就install了lodash库，但是直接在useEffect()中使用却没有效果，经过一番查找，最终解决了这个问题。

## 问题现场

安装引入：

    import { useState, useEffect } from "react";
    import _ from "lodash";
    useEffect(() => {
        _.debounce(mx, 500); //防抖
    }, [mc]);

mx是一个函数，但是防抖后不但没有效果，mx这个函数也无法正常执行了，这跟useEffect运行机制有一定关系。
后来经过修改，mx函数是可以执行了，但是mc这个state中的数值又无法同步了。

## 解决问题

修改代码如下：


    useEffect(() => {
        const debounceMX = _.debounce(() => {
        mx();
        console.log(mc);
        }, 500);
    
        debounceMX();
    
        return () => {
        debounceMX.cancel();
        };
    }, [mc]);

在这个修改后的代码中，debounceMX函数被定义在useEffect的内部，并且mc作为useEffect的依赖项。当mc发生变化时，useEffect将会重新执行，导致debounceMX函数的重新创建和调用。通过将debounceMX.cancel()作为useEffect返回的清理函数，可以确保在组件卸载时取消防抖函数的执行，以避免潜在的问题或错误。

经过多次的修改，最终上边的代码完美的解决了不能防抖以及数据不能同步的问题。



今天在react useEffect()中有一个function需要防抖，于是乎就install了lodash库，但是直接在useEffect()中使用却没有效果，经过一番查找，最终解决了这个问题。

react useEffect()中使用lodash库中的防抖debounce

额，今天在编写一段简短的测试代码，想在组件加载的时候弹出一个alert提示，但是刷新的时候会弹出两次alert提示？只能是奇怪了！研究了半天终于找到了解决的办法。

## 事故现场


    import { useState, useEffect } from "react";

    function App() {
    const testCode = `alert('11111')`;

    function test() {
        alert('1111');
    }

    useEffect(() => {
        test();
    }, []);

    return (
        <div id="app" className="container mx-auto grid justify-normal p-8">
        <canvas id="matrix"></canvas>
        {/* 在预览区域显示生成的HTML代码 */}
        <div dangerouslySetInnerHTML={{ __html: testCode }}></div>
        </div>
    );
    }

    export default App;


这段代码中，test();会在页面刷新时执行两次，百思不得其解，询问了ChatGPT给出的答案是：如果您希望在开发模式下仅执行一次 useEffect，可以使用 useEffect 的第二个参数，即依赖项数组。通过指定一个空数组 [] 作为依赖项，您可以告诉 React 仅在组件挂载和卸载时执行一次 useEffect。但是这个回答显然没有解决问题。

## 解决方法

后来在掘金搜到了两篇文章，详细介绍了useEffect背后的原理，同时也找到官方给出的解释，其实很简单，只要修改main.jsx中的代码即可：

    <React.StrictMode>
        <App />
    </React.StrictMode>,

修改如下：


    <App />

嗯，就是这么简答，究其原因是因为使用的手脚架应为采用react的严格模式StrictMode，我们删除StrictMode就好了。

## 相关链接

(useEffect重复调用两次的坑)[https://juejin.cn/post/7105652180501135367]

(Synchronizing with Effects)[https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development]


额，今天在编写一段简短的测试代码，想在组件加载的时候弹出一个alert提示，但是刷新的时候会弹出两次alert提示？只能是奇怪了！研究了半天终于找到了解决的办法。

react useEffect() 为什么在开发模式的时候会执行两次？

打算把之前一个vue的小应用用使用react+Material UI重构一下，这里记录一下React+Material UI开发环境的快速搭建。

## create react

在webStorm,可以直接创建一个全新的vite react项目，如果使用vscode可以在终端使用如下命令：

    npm create vite@latest my-project -- --template react
    cd my-project

##  Material UI installation

`cd my-project`进入到项目之后，添加material UI 到项目中:

    npm install @mui/material @emotion/react @emotion/styled

也可以使用:

    pnpm i @mui/material @emotion/react @emotion/styled


安装字体：

    npm install @fontsource/roboto

或：

    pnpm i @fontsource/roboto

安装icons:

    npm install @mui/icons-material

或:

    pnpm i @mui/icons-material

修改`src/index.jsx`:

    import { useState } from 'react'
    import Stack from '@mui/material/Stack';
    import Button from '@mui/material/Button';

    function App() {
    const [count, setCount] = useState(0)

    return (
        <Stack spacing={2} direction="row">
        <Button variant="text">Text</Button>
        <Button variant="contained">Contained</Button>
        <Button variant="outlined">Outlined</Button>
        </Stack>
    )
    }

    export default App


终端运行：

    pnpm i

当所有以来下载完毕后运行:

    pnpm run dev


浏览器打开：http://localhost:5173/, 发现已经成功引入mui的按钮了。

打算把之前一个vue的小应用用使用react+Material UI重构一下，这里记录一下React+Material UI开发环境的快速搭建。

前端React+Material UI开发环境的快速搭建

闲来无事，琢磨着体验一下react吧，花了一天的时间看了看react的官方文档，然后能照着以前用vue写的ToDo使用react重构了一遍，这里简单记录并总结一下学习过程。

效果如下：

![矩阵头像](https://suiyan.cc/assets/images/2023/reactToDo.png)

## 环境搭建

关于React+Vite+TailwindCSS+daisyUI的环境搭建之前写过一篇博客，这里就不在重复了，传送门：<a href="https://suiyan.cc/2023/20230626075924.html" target="_blank">前端React+TailwindCSS+daisyUI开发环境的快速搭建</a>,环境的搭建很简单的，大家看看就能明白了。

## 编写ToDo

ToDo的核心就是把一个存有待办事项的数组通过react渲染出来，增删改查就是对数组的一些最基本的操作的操作,但是这些操作由于普通的数组操作有所不同，我们来看看官方给出的解释：

> 在 JavaScript 中，数组只是另一种对象。同对象一样，你需要将 React state 中的数组视为只读的。这意味着你不应该使用类似于 arr[0] = 'bird' 这样的方式来重新分配数组中的元素，也不应该使用会直接修改原始数组的方法，例如 push() 和 pop()。

> 相反，每次要更新一个数组时，你需要把一个新的数组传入 state 的 setting 方法中。为此，你可以通过使用像 filter() 和 map() 这样不会直接修改原始值的方法，从原始数组生成一个新的数组。然后你就可以将 state 设置为这个新生成的数组。


下面是常见数组操作的参考表。当你操作 React state 中的数组时，你需要避免使用左列的方法，而首选右列的方法：

<table><thead><tr><th></th><th>避免使用 (会改变原始数组)</th><th>推荐使用 (会返回一个新数组）</th></tr></thead><tbody><tr><td>添加元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">push</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">unshift</code></td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">concat</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">[...arr]</code> 展开语法（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#adding-to-an-array">例子</a>）</td></tr><tr><td>删除元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">pop</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">shift</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">splice</code></td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">filter</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">slice</code>（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#removing-from-an-array">例子</a>）</td></tr><tr><td>替换元素</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">splice</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">arr[i] = ...</code> 赋值</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">map</code>（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#replacing-items-in-an-array">例子</a>）</td></tr><tr><td>排序</td><td><code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">reverse</code>，<code class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">sort</code></td><td>先将数组复制一份（<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="#making-other-changes-to-an-array">例子</a>）</td></tr></tbody></table>


以下为全部代码，我已标上了注释，不难应该能看懂：

    import { useState, useEffect } from "react";
    import "./App.css";

    const tds = [
    { id: 1, content: "学习HTML", done: true },
    { id: 2, content: "学习CSS", done: false },
    { id: 3, content: "学习JavaScript", done: false },
    ];

    function App() {
    const [todos, setTodos] = useState(JSON.parse(localStorage.getItem('myreacttodos')) || []);// 存储待办事项
    const [displayOption, setDisplayOption] = useState("all"); // 过滤待办事项的选项
    const [newtodo, setNewTodo] = useState("");// 添加代办事项



    useEffect(()=>{
        localStorage.setItem('myreacttodos',JSON.stringify(todos))
    },[todos])

    /**
    * 添加ToDo
    */
    function addToDo() {
        if (todos.length === 0) {
        // 数组为空的情况处理代码
        // 可以选择初始化一个默认值，例如：
        const newId = 1;
        console.log(newId);
        setTodos([{ id: newId, content: newtodo, done: false }]);
        setNewTodo("");
        } else {
        // 数组不为空的情况处理代码
        const newId = Math.max(...todos.map((t) => t.id)) + 1;
        console.log(newId);
        setTodos([...todos, { id: newId, content: newtodo, done: false }]);
        setNewTodo("");
        }
    }

    /**
    * 按回车添加待办事项
    * @param {input 键盘事件} e 
    */
    function keyReturn(e) {
        if (e.keyCode === 13) {
        addToDo();
        }
    }

    /**
    * 移除ToDo
    */
    function removeToDo(id) {
        setTodos(todos.filter((t) => t.id !== id));
    }

    /**
    * 更新ToDo
    */
    function renewToDo(id, ck) {
        let newTodos = todos.map((t) =>
        t.id === id ? { ...t, done: ck === true ? true : false } : t
        );
        setTodos(newTodos);
    }

    // 处理按钮点击事件
    const handleDisplayOption = (option) => {
        setDisplayOption(option);
    };

    // 根据选项过滤待办事项
    const filteredTodos = todos.filter((todo) => {
        if (displayOption === "completed") {
        return todo.done;
        } else if (displayOption === "incomplete") {
        return !todo.done;
        } else {
        return true; // 显示所有事项
        }
    });

    return (
        <div className="container mx-auto max-w-xl p-4">
        <h1 className="text-3xl">ToDos</h1>
        <div>
            本项目依赖:
            <a className="link" src="https://react.docschina.org/" target="_blank">
            React
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Vite
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Tailwind CSS
            </a>
            +
            <a
            className="link"
            src="https://daisyui.com/docs/install/"
            target="_blank"
            >
            daisyUI
            </a>
        </div>
        <div className="p-4">
            <input
            value={newtodo}
            onChange={(e) => setNewTodo(e.target.value)}
            onKeyDown={(e) => {
                keyReturn(e);
            }}
            type="text"
            placeholder="输入代办事项后，按回车添加。"
            className="input input-bordered w-full input-md max-w-xs"
            />
            <button className="btn mx-4" onClick={addToDo}>
            添加代办事项
            </button>
        </div>
        <ul>
            {filteredTodos.map((todo) => (
            <li key={todo.id} className="flex gap-2">
                <div>
                <input
                    onChange={(e) => renewToDo(todo.id, e.target.checked)}
                    type="checkbox"
                    checked={todo.done}
                    className="checkbox"
                    id={"todo" + todo.id}
                />
                <label
                    className={todo.done ? "line-through" : ""}
                    htmlFor={"todo" + todo.id}
                >
                    {todo.id} - {todo.content}{" "}
                </label>
                </div>

                <button onClick={() => removeToDo(todo.id)} className="btn btn-sm">
                X
                </button>
            </li>
            ))}
        </ul>

        <div className="flex gap-2 mt-2">
            <button onClick={() => handleDisplayOption("all")} className="btn">
            显示所有
            </button>
            <button
            onClick={() => handleDisplayOption("completed")}
            className="btn"
            >
            已完成
            </button>
            <button
            onClick={() => handleDisplayOption("incomplete")}
            className="btn"
            >
            未完成
            </button>
        </div>
        <footer class="footer items-center p-4 text-neutral-content">
            <div class="items-center grid-flow-col">
            <svg
                width="36"
                height="36"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                fill-rule="evenodd"
                clip-rule="evenodd"
                class="fill-current"
            >
                <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
            </svg>
            <p>Copyright © 2023 - All right reserved</p> <a className="link link-accent" src="https://suiyan.cc">My blog</a>
            </div>
        </footer>
        </div>
    );
    }

    export default App;


## 总结

程序并没有做数据的持久保存，可以使用浏览器API：localStorage来保存待办事项的数组，这样下次打开浏览器就会显示之前保存的数据了,代码中已经更新添加了使用localStorage存储待办事项的存储代码。

另外，通过ToDo这个小项目分别使用vue和react编写，也算是对两大框架有了入门级的体验，总体来说，vue在学习过程中上手更为简单，适合从未接触过这类框架的新手来学习，如果你有不错的JavaScript和前端项目的编写经验，我还是推荐使用react，react更接近原生的写法，虽然没有太多的语法糖，但是兼容更简单，react官方文档写的太死板了，对新手不太友好，总之，这二个都是非常不错的前端框架，都值得去学习去使用。

闲来无事，琢磨着体验一下react吧，花了一天的时间看了看react的官方文档，然后能照着以前用vue写的ToDo使用react重构了一遍，这里简单记录并总结一下学习过程。

TAGS