
![牛河梁](https://www.suiyan.cc/assets/images/2025/nhl.jpg)

五四青年节的那天我带着孩子去了牛河梁遗址，整个五一假期都是刮风下雨的，刚好4号那天的天气真的很不错，就赶紧带着孩子去了牛河梁遗址博物馆，走的长深高速，高速上的车也是不多很通畅。

## 牛河梁遗址

牛河梁遗址位于凌源市，是中国历史上的一个重要遗址，嗯，怎么说呢？我个人对历史尤其是那些远古时期的历史不是很感兴趣，我只是想找个地方看看，然后就去了。凌源虽然离我很近，100多公里，但是我竟然没有去过，这次也算是了心愿。

凌源给我的第一感觉就是干净，绿化很好，空气新鲜。牛河梁博物馆也不算很大，没有做观光车，两个多小时也走完了公园的所有路程，看看风景呼吸新鲜的空气我就很满足了。回家之前，我们又去了牤牛河湿地公园，这里的风景也很好，我也很喜欢。


## 游戏的进度

《我的博客》游戏还在编码中，一直在断离舍中不停地思考，一个免费的游戏，我不想做的太复杂，但是每次做到了就觉得应该把这个功能完善一下，但是又不想做的太复杂，所以，就这样一直在纠结中编写代码。

当然，我很希望五月把所有的代码都编写完毕，把游戏内的事件都做完，六月和七月我会把游戏的美工和音效都做好，然后再把游戏发布到网上，让大家都可以玩到。理想很丰满，现实很骨感。

期待吧，等我开始美工制作的时候，我会放出一些游戏的截图和细节。


五四青年节的那天我带着孩子去了牛河梁遗址，整个五一假期都是刮风下雨的，刚好4号那天的天气真的很不错，就赶紧带着孩子去了牛河梁遗址博物馆，走的长深高速，高速上的车也是不多很通畅。

纠结的五月


本来以为大萝卜3国服这辈子都不可能重启了，结果网易已经在4月16日正式开启了技术测试，前几天闲着没事就下载了这款养老的中老年经典游戏玩了一个星期。

## 都是回忆

暗黑3算是完了很久的一款游戏了，具体是哪年开始玩的，竟然没有了一点印象。之前，网易和暴雪的分分合合导致了暴雪国服的游戏停止运营，很可惜，但是发现暴雪的玩家都很平淡，你关服务器，我就不玩了，我也不去跟你折腾，很是神奇。

## 再次开服

这几天上去玩了一下，感觉还是熟悉的味道，熟悉的玩法，哎，岁数大了，很多细节竟然想不起来了，但是玩玩的就想起来了，这游戏真是奶草，玩起来很舒服，很享受，打算用来养老了。


## 游戏的进度

哎呀，自己一直在赶进度，愚蠢无知的我一直采用瀑布模式努力的开发者，我当然想再五月分的时候完成所有的代码编写，六月分完成所有的游戏美工的绘制，下了几次的决心，感觉没有屁用，好在有一颗永不放弃的心，我非常不想制作到半路的时候，因为种种原因把这个未完成的游戏封存，所以我一直坚持下去，努力吧游戏做完！

本来以为大萝卜3国服这辈子都不可能重启了，结果网易已经在4月16日正式开启了技术测试，前几天闲着没事就下载了这款养老的中老年经典游戏玩了一个星期。

中老年游戏:《暗黑破坏神III》国服技术测试现已开启


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

## 过敏

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

## 缓慢的进程

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

## 生活

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


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

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


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


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

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

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

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

## 精简和创新的取舍

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

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



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

游戏开发中的断离舍


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

## 构思

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

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

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

## 绘制构想

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

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

## 期待

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


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

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


## 其一

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

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

## 其二

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

## 其三

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

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

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

## 总结

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


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

蠢事三则


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 学习笔记


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


## 没有信号的焦虑

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

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

## 一些软件无法登陆

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

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

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

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



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

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



## 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


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

## 年过完了

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

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

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

## 梦想还是要有的

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


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

辽西没有春天



> 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 发布了


这个程序写在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 宝贝日记


昨天收到了邮件，提示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


今天突然发现字节旗下的豆包变成助手也支持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


今天像往常一样运行了终端命令，正常来说会使用`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、函数、脚本文件或可运行程序的名称。


## 什么是 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了,赶紧试试吧！


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

## 回忆

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

## 情怀

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

## 愿景与价值观

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

## 不足

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

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

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


![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 代码编写能力的测评


昨天，我有一些图片需要放大，之前我一直使用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


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

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


## 为什么选择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线上服务受到大规模恶意攻击!


## 回忆

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

前几天我曾说「卸载抖音，重构我的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，这样算来还是蛮划算的。

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

## 展望

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

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


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

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


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

## 对比豆包

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

## 对比Kimi

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

## DeepSeek-R1

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

## 总结

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

目前我的AI使用率排行：

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

国外: Gemini > chatGpt > 其他







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

DeepSeek的一些使用感受


之前一直在使用`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的主题一起变化


昨天晚上在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


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

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

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

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


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

阅读随感


今天读完了《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进阶之路》闲聊几句


早上使用手机的微软浏览器点开了自己的博客，弹出了一个广告的窗口，很是郁闷，因为这个广告他只弹出一次，在手机上也无法查询这个弹窗的出现，刷新又不会再次出现。
不知网友们打开碎言是否有弹出广告页面？无论弹出与否请在页面下边留言告知与我，谢谢了！！


## 排查

因为全站都是静态页面，所以植入广告的方法的最大可能就是在打包编译的时候加进去，仔细排查了那些模块，就这几个：

    "dependencies": {
        "@giscus/react": "^3.0.0",
        "@nextui-org/react": "^2.6.10",
        "framer-motion": "^11.15.0",
        "gray-matter": "^4.0.3",
        "next": "15.1.2",
        "next-themes": "^0.4.4",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-markdown": "^9.0.1"
    },
    "devDependencies": {
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "tailwindcss-motion": "^1.0.1"
    }


都是比较知名的模块，被植入AD的可能性极低了。

搜索并排查前端加载的代码，没有任何收获。除了以上方式，还有一些比较高级的广告植入方法，例如DNS污染，浏览器插件。

但是家里的路由器我手动设置了DNS为：`8.8.8.8 `和 `114.114.114.114`.这个被污染的可能性极低了。那么唯一的一个还不能排除的就手机里的浏览器了，但是这个，我一天只能测试一次，排查起来很麻烦？各位大佬可有其他方法？

还有两个额外的代码引入，一个Github的评论插件，一个是51la的页面统计，感觉都不太可能是这二处。

## 网站安全在线检测

顺手搜了一些网站安全在线检测的网址，测试了一下，都很安全。

- [https://zh.gridinsoft.com/website-reputation-checker](https://zh.gridinsoft.com/website-reputation-checker) 输入链接或域名，我们将检查该网站是否存在已知的钓鱼、诈骗、黑名单状态和恶意代码。

- [https://www.virustotal.com/](https://www.virustotal.com/) 分析可疑文件、域、IP 和 URL 以检测恶意软件和其他违规行为，并自动与安全社区共享。

- [https://metadefender.com/](https://metadefender.com/) 分析和共享恶意软件样本和威胁情报，以加入对抗网络威胁的战斗。

- [https://www.ssltrust.com.au/ssl-tools/website-security-check](https://www.ssltrust.com.au/ssl-tools/website-security-check) 一个免费的网站安全检查工具，用于扫描和检查面向公众的网站的安全性。检查来自 Google、Comodo、Opera、Securi 等公司的 80 多个数据库。此工具可以帮助确定访问网站和共享信息是否安全。它还可以进行快速的 SSL 证书检查以确保其有效且安全。没有网站是 100% 安全的，因此我们建议您在分享敏感信息时始终小心。

如果你对自己的网站安全有疑问，可以使用上边的四个安全网站扫描，看看扫描结果报告，分析一下原因。看来我还得慢慢排查啊，

早上使用手机的微软浏览器点开了自己的博客，弹出了一个广告的窗口，很是郁闷，因为这个广告他只弹出一次，在手机上也无法查询这个弹窗的出现，刷新又不会再次出现。 不知网友们打开碎言是否有弹出广告页面？无论弹出与否请在页面下边留言告知与我，谢谢了！！

一些提供网站安全在线检测的站点


## 你有遗憾吗？

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

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



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

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

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



## 写中年，中年咋写？

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



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

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


## 你孤独吗？

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


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

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


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

你有遗憾吗？


## 起因

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

## 基础方法

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

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

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

## 深挖

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


## 单一职责

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

## PDCA

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

## 写作模版

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

## 总结

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

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



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

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



## 起因

寒假终于开始了，今天，孩子返校，老师讲解期末考试的卷子，孩子的成绩有所下降，虽然分数几乎没变，但是年级组排名从15下降到了21，这个假期几乎可以确定焦虑会是主旋律了。孩子需要反思自己成绩下降的原因，制定了假期的学习计划。而我，也因此陷入了一些对自己这阵子稀里糊涂生活的思考。

## 荒废

看了下手机APP使用时间的排行，前三名是抖音、小红书、原神。这让我有种娱乐至死，快乐+500智商-1000的感叹。前一阵子，只要打开手机就会第一时间点开抖音，沉迷在大数据推荐的视频中，周而复始，看够了抖音再刷小红书，每天坚持做原神的委托和活动任务，不亦乐乎。


## 偶然

24年的年底，不知是点开了哪个博客聚合的网站，心不在焉的浏览了一些博客，突然觉得自己久未更新的博客藏在角落里已经落满了灰尘，是时候打扫一下沉默许久的尘埃了。酝酿了很久却没有实施的重构计划立马放到了案前，一鼓作气，在新的一年到来之前，将酝酿了很久却未实施的重构计划实施完毕。

## 觉醒

看了一些更新频率高且质量非常不错的博客，越是浏览越是感到惭愧。阅读所带来的思想上的冲击与抖音短视频的瞬间快感完全不同。虽然短视频也有不错的内容，但是架不住大数据和好友的影响，很快就会把刚刚燃起的兴趣给埋没在庸俗的海洋里了。


## flag

新的一年，第一件事就是减少抖音和小红书的使用频率，减少游戏时间。虽然去年也在坚持阅读，但是阅读的时间明显还是太少了。今年的主要任务是把阅读和写作摆在第一位上。

关于阅读的计划，我立个flag，大约每周阅读一本书（一段开源程序源码也可以）。为此下载了微信读书取代了抖音和小红书，或许刚开始的时候会有些难度，但是一年阅读50本书并写出对应的读后感是一定要做到。

## 自律，坚持，努力

每当我看到那些优秀的博主们侃侃而谈，无论是生活琐事、时事评论，还是天马行空随心所欲畅所欲言的时候，我就觉得自己不能再沉迷于娱乐和游戏之中了，阅读和写作或许可以改变一下自己，让自己真正的觉醒吧。

看那些持续写作博客的博主，由衷的感叹他们的毅力和时间安排，写作是一场自我的博弈和思想的战争，无论是自娱自乐还是有感而发都是值得佩服的，刷到一个有近千篇博文的博主，想想这得是多么强大的坚持与动力。

自律，坚持，努力，我希望这些词汇在2025年能够贯穿一整年，为自己加油！

后续将搜集一些大佬博客的rss加到自己的阅读器里，一方面方便拜读他们的大作，另一方面更是督促自己时刻提醒自己不要半途而废。




自律，坚持，努力，我希望这些词汇在2025年能够贯穿一整年，为自己加油！

放下抖音，重构我的2025


如果经常浏览那些大佬的博客会发现他们的文章底部或是网站的底部通常会有一个小图标，类似这种图标：

![CC BY](https://www.suiyan.cc/assets/images/by-nc.png)

有的也会附上一些文字提示，例如：`Licensed by CC BY-SA 4.0`等一些文字提示，所有的这些都会链接到一个叫做`https://creativecommons.org/`网站提供的页面，这些页面提供了与之相对应的协议详情。

## 知识共享许可协议

早些年混迹于互联网浏览他人博客的时候就会看到这些小图标，当时也没在意这是什么东西，后来有了自己的博客写了一些东西，虽然没什么价值但是也不能直接被人复制粘贴啊，后来就学别人写一些提醒：转载请保留作者以及原文链接等话语，后来就发现了这个「知识共享许可协议」。

> 组织成立：2001年，在公共领域中心的支持下，以美国斯坦福大学法学院教授劳伦斯·莱斯格为首的一批专家学者共同发起成立了非营利性组织“知识共享”（Creative Commons）。
>
> 
> 协议发布：2002年12月16日，知识共享组织正式发布了第一版知识共享许可协议，通过一系列公共授权条款，将版权作品提供给公众免费使用，创作者可以根据自身意愿选择不同的授权模式，允许他人在特定条件下使用、分享和改编其作品

2013年11月25日发布的4.0版本是目前最新且最为广泛使用的版本。

## CC协议有何用途？

一般来说，我们原创一些文章或是制作了一些声音、图片等作品，有的时候我们会希望这些作品的发布是唯一的，或是在一些约束的许可下进行传播。于是我们会草草写一些版权声明，但是这份声明还不够完整和准确，这时我们就需要用到这个「知识共享许可协议」了，但是CC目前有六个版本，我们可以根据自己的需求进行选择。


## 如何选择CC许可协议？

有六种不同的许可证类型，从最宽松到最不宽松列出：

> CC BY
> 此许可使再使用者能够以任何媒介或格式分发、重新混合、改编和构建材料，只要注明创作者。该许可证允许商业用途。


> CC BY-NC
> 此许可允许再使用者仅出于非商业目的以任何媒体或格式分发、重新混合、改编和构建材料，并且前提是注明创作者。

以上只是列举其中的两种，其他几种许的详细的内容请查看官方的详细介绍：

[https://creativecommons.org/share-your-work/cclicenses/](https://creativecommons.org/share-your-work/cclicenses/)

在网站上，这些协议以从最宽松到最不宽松列出，大家可以根据自己的实际情况来进行选择。


## 如何使用这些协议？

可以在下边的这个网址进行协议的选择，如果你已经了解了协议的内容，可以直接进行选择，如果不了解协议的内容可以选择帮助你来选择协议，然后就一步一步的进行选择，最后在网页的右边就可以出现代码复制区域了，复制代码到你的网站，添加到页面适合的位置即可，例如文章的底部，或是整个网站的底部。


## 使用这些协议有什么好处？

对于博客的博主即创作者，你可以明确你的文章或是作品的传播方式，一个宽松的CC协议会得到更广泛的传播，而那些认为不应该随意传播或是修改的作品，你也可以明确标明许可协议。

对于使用和传播者，遵守CC的许可协议会更加激励和促进原创者的创作。对于整个社会来说，鼓励原创尊重传播，而且也会激励在许可的条件下进行更多的二次创作，好的作品需要转发，但是要记得尊重他人的劳动，遵守相关许可和协议。

参考：

[https://creativecommons.org/ ](https://creativecommons.org/ )  官网

https://baike.baidu.com/item/%E7%9F%A5%E8%AF%86%E5%85%B1%E4%BA%AB%E8%AE%B8%E5%8F%AF%E5%8D%8F%E8%AE%AE/23190065   百科




如果经常浏览那些大佬的博客会发现他们的文章底部或是网站的底部通常会有一个小图标......

他们博客上的那些CC协议到底是怎么一回事？


有时我们在编写前端项目的时候会加入大量的模块来进行功能测试，久而久之就会有些模块因为功能的缺失或弃用而闲置，如何找到这些闲置的模块并且删除掉呢？

## 手动查询

- 根据模块的名称在IDE中使用查找功能对项目文件进行全文搜索。
- 手动逐一的检查每个文件的头部import语句或require函数调用（不推荐！）

## 使用工具分析

depcheck它会分析项目的代码和package.json文件，列出未使用的依赖模块。

安装：

    npm install -g depcheck

在项目的根目录终端下运行：`depcheck`

显示：

    Unused dependencies
    * @giscus/react
    * dateformat


这表示@giscus/react和dateformat这两个模块在项目中未被使用。

还有一个工具npm-check也是类似的功能。


有时我们在编写前端项目的时候会加入大量的模块来进行功能测试，久而久之就会有些模块因为功能的缺失或弃用而闲置，如何找到这些闲置的模块并且删除掉呢？

前端项目中如何查询未使用的模块？


去年一直想从python过度到JavaScript，尤其是在前端美化方面，上个版本的Blog由于模块引用一直采用老旧落后的CDN引用模式导致很多功能无法继续开发，所以长痛不如短痛，我决定进行重构！！

### 重构之路

### 需求与功能

我对功能的诉求很简单，一条命令创建一个新的空博文的.md文档，写完blog，一条命令直接提交到服务器，其余的打包、编译以及静态资源更新等都要自动完成。

前端要使用漂亮的UI组件库，方便折腾各种功能，服务器要免费，因为一直是这样的……

#### 解决方案

目前来说比较成熟的方案有两条：`Vue vs React` 二选一，我选后者，至于为什么？我觉得React的组件与状态模式更简单，编写起来更接近原生的JavaScript，Vue语法糖太多，用起来反而不习惯，当然黄瓜萝卜各有所爱仁者见仁智者见智。

### 框架的选择

基于react生成静态的页面，next.js肯定是首选了，对应的服务器部署就是 Vercel,简单的流程就是，编写代码，push到GitHub，触发Vercel的监听仓库，自动拉取并打包生成静态资源部署到服务器，我只需解析域名即可。

至于其他的框架，基本上都是围绕着Next.js的生态了。


    "dependencies": {
        "@giscus/react": "^3.0.0",
        "@nextui-org/react": "^2.6.10",
        "framer-motion": "^11.15.0",
        "gray-matter": "^4.0.3",
        "next": "15.1.2",
        "next-themes": "^0.4.4",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-markdown": "^9.0.1"
    },
    "devDependencies": {
        "postcss": "^8",
        "tailwindcss": "^3.4.1",
        "tailwindcss-motion": "^1.0.1"
    }

• @giscus/react：版本 ^3.0.0。这是一个用于在 React 应用中嵌入 Giscus（一个开源评论系统）的组件库。Giscus 可以方便地为网站添加评论功能，它基于 GitHub Discussions 构建，用户可以通过 GitHub 账号进行评论，且评论数据存储在 GitHub 仓库中，便于管理和维护。

• @nextui-org/react：版本 ^2.6.10。NextUI 是一个基于 React 的开源 UI 组件库，它提供了丰富的组件，如按钮、卡片、输入框、模态框等，具有现代化的外观和良好的用户体验。NextUI 支持主题定制，可以方便地与 Tailwind CSS 等工具集成，帮助开发者快速构建美观、响应式的界面。


• framer-motion：版本 ^11.15.0。这是一个用于 React 的动画库，它提供了简单易用且功能强大的动画 API。开发者可以使用 framer-motion 创建各种复杂的动画效果，如元素的进入、离开动画，以及基于滚动、点击等事件的交互式动画。它支持动画的链式调用、动画的缓动函数自定义等，能够满足大多数项目中的动画需求。

• gray-matter：版本 ^4.0.3。gray-matter 是一个用于解析文件头部元数据（front matter）的库。在一些静态网站生成器或内容管理系统中，文件的头部元数据通常用于存储文章的标题、日期、作者等信息。gray-matter 可以方便地从文件中提取这些元数据，将其转换为 JavaScript 对象，以便在项目中进一步处理和使用。

• next：版本 15.1.2。Next.js 是一个基于 React 的开源服务器端渲染（SSR）框架。它提供了许多开箱即用的功能，如页面路由、静态生成（SSG）、增量静态再生（ISR）等，能够帮助开发者构建高性能、可扩展的 Web 应用。Next.js 优化了页面的加载速度和 SEO，同时支持热模块替换（HMR），提高了开发效率。

• next-themes：版本 ^0.4.4。这是一个用于 Next.js 项目的主题切换库。它可以方便地在项目中添加主题切换功能，支持暗黑模式和亮色模式的切换。开发者可以通过简单的配置和 API 调用，实现主题的动态切换，并且 next-themes 还提供了一些额外的功能，如根据系统偏好自动设置主题等。

• react：版本 ^18.3.1。React 是一个用于构建用户界面的开源 JavaScript 库，由 Facebook 开发并维护。它采用了声明式编程范式，通过组件化的方式构建界面，使得代码更加可维护和可复用。React 提供了高效的 DOM 更新机制，能够根据组件状态的变化自动更新界面，是现代前端开发中非常核心的技术之一。

• react-dom：版本 ^18.3.1。react-dom 是 React 的 DOM 绑定库，它负责将 React 组件渲染到浏览器的 DOM 中。它提供了操作 DOM 的 API，使得 React 能够与浏览器进行交互，实现界面的动态更新。在 React 项目中，react-dom 是必不可少的依赖，与 React 核心库紧密配合，共同完成界面的渲染和更新工作。

• react-markdown：版本 ^9.0.1。react-markdown 是一个用于将 Markdown 文本渲染为 React 组件的库。它可以将 Markdown 语法的文本转换为对应的 HTML 结构，并以 React 组件的形式呈现出来。开发者可以通过插件系统对渲染过程进行定制，例如添加代码高亮、自定义链接处理等功能，非常适合在项目中展示 Markdown 格式的内容。


• postcss：版本 ^8。PostCSS 是一个使用 JavaScript 插件来转换 CSS 的工具。它可以对 CSS 代码进行各种处理，如自动添加浏览器前缀、压缩 CSS、转换 CSS 语法等。在项目开发过程中，PostCSS 通常与 Tailwind CSS 等工具配合使用，通过配置相应的插件，可以优化 CSS 代码的编写和维护，提高开发效率和代码质量。

• tailwindcss：版本 ^3.4.1。Tailwind CSS 是一个实用主义的 CSS 框架，它提供了一系列预定义的类，开发者可以直接在 HTML 元素上使用这些类来快速构建界面。Tailwind CSS 采用原子化 CSS 的设计理念，通过组合不同的类来实现复杂的样式效果，减少了 CSS 代码的冗余。它还支持配置文件，开发者可以根据项目需求自定义主题、颜色、间距等样式配置，具有很高的灵活性和可定制性。

• tailwindcss-motion：版本 ^1.0.1。tailwindcss-motion 是一个 Tailwind CSS 插件，用于为 Tailwind CSS 添加基于 framer-motion 的动画功能。通过这个插件，开发者可以在 Tailwind CSS 的配置中定义动画相关的类，然后在项目中像使用其他 Tailwind CSS 类一样使用这些动画类，实现元素的动画效果。它将 Tailwind CSS 的便捷性和 framer-motion 的强大动画能力结合起来，使得在项目中添加动画变得更加简单和高效。


以上就是一些程序中使用的依赖库，可以供参考。

## 核心代码

`getStaticPaths`与`getStaticProps`这二个next.js提供的静态资源获取的方法，结合`gray-matter`就可以搞定为每一篇博文生成一个基于react构建的静态的页面。

`getStaticPaths`中负责搜集所有博文的路径，`getStaticProps`和`gray-matter`通过解析博文头部的数据提取博文相关的信息。

以上基本就解决了blog程序的大部分功能了。要知道上个版本，我是用 Python 编写的静态博客生成器，这些功能，我竟然都是自己重新实现的，而且写得很有劲，嘿，那股子傻劲还挺让人兴奋的。


## 其他blog功能

博客其他的基础功能也基本上都是围绕着这上边的核心方法编写的，借助AI辅助，按小时算的话，大约花费了10个小时写完了所有的核心功能，前端这里使用的NextUI，博客的主题样式还是老样子没什么大变化，细节上可能对有些改变。

## 关于SEO

一个blog不能没有sitemap和rss,next.js中有一个sitemap的模块，但是不能在服务器部署的时候自动生成，所以，这二个xml只好自己手动写个两个脚本，用来生成这两个xml文件，在准备提交到GitHub之前生成到public目录中，这样就可以自动部署到服务器了。

## 关于评论系统

暂时没打算自己编写，一方面没有啥评论系统编写的经验，一方便面是监管的压力，权衡利弊采用了Giscus，功能足够了，而且我这个站也是很少有人评论，大部分来的应该都是程序员，都有GitHub账号，最终选定Giscus。

## 总结

记录这些或许并没有多大实际意义，只是希望如果有人也是用Next.js编写自己的blog，那么这些经历希望能给你一个小小的参考。


去年一直想从python过度到JavaScript，尤其是在前端美化方面，上个版本的Blog由于模块引用一直采用老旧落后的CDN引用模式导致很多功能无法继续开发，所以长痛不如短痛，我决定进行重构！

博客程序重构回忆录


![lucy](/assets/images/2025/lucy.png)

这个冬天到现在还没有下雪，总觉得少了点什么似的，虽然没下雪，但是用东北话讲：这天啊，还是嘎嘎冷啊！前一阵子孩子先是在学校被传染了甲流，没过几天就传染给我了，没啥严重的症状，就是咳嗽，尤其是晚上咳嗽的更厉害，没办法，为了不影响老婆休息，只好搬到客厅的沙发上来睡觉了。


平日里，下午会在沙发上睡一觉，Lucy也会过来和我一起挤着睡上一个午觉。

## Lucy

Lucy是一只黑白相间的雪纳瑞，性格温和胆小怕事的小女生。本来老婆是想养一只金毛，金毛被带回家不到几天就送回去了，因为孩子太小，金毛总是欺负小孩，没办法，只好送回去了，后来孩子逐渐的长，老婆还是想养狗，就偷摸的买了一只雪纳瑞，虽然我不喜欢养狗，但是孩纸和老婆都喜欢，我也没办法，只好收留了她。


## 成长与陪伴

一晃时间飞快，Lucy都快六岁了，从一只倔强的小毛驴变成了可爱的憨憨。这几天，我咳嗽的非常厉害，晚上躺在沙发上，Lucy依然紧紧的挨着我，用头枕着我的胳膊。我咳嗽的自己都烦躁的狠，她竟然能在我的咳嗽声中做梦，这个真是流弊了。整晚的咳嗽，她竟然没有嫌烦，一直趴在我身边睡觉💤，而且睡的还很香，我很是欣慰。


据说，和狗狗在一起，双方都可以分泌一种叫做催产素的物质，可以使双方都会感受到一种放松愉悦的心情，或许这是真的，Lucy趴在身边的时候，我和她确实很安静，心率血压以及心情都处在一种平稳的状态中。


有的时候我觉得，他是不是觉得我快不行了，哈哈哈，后来才知道，狗狗趴在主人身边睡觉是很有安全感的，所以她会睡的更香，或者说，她是在保护你，拍你睡的太死了，无法发现危险，如果有了危险她会及时的旺旺叫。


平时，我只要坐在哪里，她都会趴到我腿上待着，例如坐在电脑前和沙发上，我要是不动弹，估计她能在我的大腿上趴一天一直趴着。


有时候睡到半夜，她会起来，在屋里走上一圈，或是去喝口水，然后回来，咣当的一下子躺在你身边，后来我知道了，她这是在巡视领地，看看有没有危险，没有危险了继续睡觉。


我每次出去回来，她都会过来迎接我，那意思是:老大，你可回来了，要不我以为你在外边捕猎死了呢。


虽然我每次回家都没有带猎物回家，但是Lucy已经习惯了我的捕猎失败，只要我活着回来，她就很开心。


## 简单并快乐


狗狗的世界很小，她的眼里只有食物，水，和主人。曾经以为雪纳瑞很倔，想毛驴一样，实际雪纳瑞成长到一年半左右就会变成天使陪伴犬，有耐心有爱心，喜欢和孩子玩耍，安静的时候就是睡大觉，喜欢吃吃吃，对运动要求也不高，体味小的几乎没有，能有一只这样的可爱的狗狗，简直是上辈子修来的福气，我，一定会好好的珍惜这段美好的时光的。




Lucy是一只黑白相间的雪纳瑞，性格温和胆小怕事的小女生。

Lucy是一只优秀的陪伴犬


今天盯着博客的页面，就觉的少点什么？对，就是动画，一动不动的太死板了，得搞些动画，但是如果手动编写JavaScript和CSS动画，不符合现代前端的构建方式，所以就搜了一下tailwind相关的动画插件，最终选定：`tailwindcss-motion`

## 安装

    npm i -D tailwindcss-motion


添加到你的tailwind.config.js：



        // tailwind.config.js

        export default {
            content: [...],
            theme: {
                extend: {...},
            },
            plugins: [require('tailwindcss-motion')],
        };

或者，要使用 ESM：

    import tailwindcssMotion from "tailwindcss-motion";

    /** @type {import('tailwindcss').Config} */
    export default {
        content: [...],
        theme: {
            extend: {},
        },
        plugins: [tailwindcssMotion],
};


然后在你的项目中，要使用动画的元素上添加class:

    <div class="motion-preset-pulse"></div>

## 动画效果

[https://rombo.co/tailwind/](https://rombo.co/tailwind/)

在官方的主页上，有个动画的选择器，点选自己喜欢的动画效果，然后复制class添加到元素的class中就好了，还有高级的动画定制，很高科技！

具体效果可以参看本站的动效。

## 总结

如果你的项目也是使用tailwind，需要添加动效动画，可以考录tailwindcss-motion这个插件，真的不错。


今天盯着博客的页面，就觉的少点什么？对，就是动画，一动不动的太死板了，得搞些动画，但是如果手动编写JavaScript和CSS动画，不符合现代前端的构建方式，所以就搜了一下tailwind相关的动画插件，最终选定：tailwindcss-motion

tailwindcss-motion 一个简单、功能强大的动画库


Heroicons是一个免费的开源图标库，由Tailwind CSS的创始人开发。它提供了大量精美的SVG图标，旨在与 Tailwind CSS 无缝配合使用，但也可以在任何项目中使用。图标分为三种风格：Outline（轮廓）、Solid（实心）和 Mini（迷你），以满足不同的设计需求。网站提供了图标浏览、搜索和下载等功能，方便开发者和设计师快速找到并使用合适的图标。

## Heroicons

前一阵子使用next.js重构了blog，其中就包括一个内容：更换站内使用的图标为开源的免费的SVG图标，之前的图标很乱，使用图片和SVG的混合方式，而且源地址也不同，这次更换了next.js之后也是搜索了一段时间才发现的Heroicons，Heroicons使用方便，图标目前提供了300+，blog这种小项目的日常应用足够了。

搜索图标后，可以选择复制SVG或是复制jsx代码，这个很方便的，尤其是在项目中创建组件的时候复制jsx代码大大的节省了很多时间。

## 总结

https://heroicons.com/  官方地址，赶紧用起来吧！谁用谁知道，太方便了。


Heroicons 是一个免费的开源图标库，由Tailwind CSS的创始人开发。它提供了大量精美的 SVG 图标，旨在与 Tailwind CSS 无缝配合使用，但也可以在任何项目中使用。图标分为三种风格：Outline（轮廓）、Solid（实心）和 Mini（迷你），以满足不同的设计需求。网站提供了图标浏览、搜索和下载等功能，方便开发者和设计师快速找到并使用合适的图标。

Heroicons由Tailwind CSS创始人开发免费的开源图标库




## 为啥要说这个？

收藏夹里有几个博客聚合类的站点，其中有个叫做川流的网站，起初是因为这个站的简约设计而吸引，进而关注，并且申请了加入，这大约是去年的事吧。

我隔段时间就会刷刷这些博客聚合站，今天发现，川流首页在吵架，大体原因就是收录了某个博客，但是人家不同意收录，然后他们就吵起来了。

## 一些想法

之前关注过一个叫做积薪的博客聚合类站，也加入过，后来也是因为站长的某些立场与收录的博客站意见不同，进而引发争论直到互撕开骂。结果，积薪关闭了，今天看到川流也是处于半关闭状态。


抛开他们的个人恩怨来说，博客聚合类型的站点应该尊重被收录的博主，大家当初也是一眼之缘才申请加入的，茫茫网海，相遇即是缘。聚合站点多做引导，善于发掘优质博客和博文，积少成多聚沙成塔，才会打造有影响力的信息聚合。如若把自己的主观加入到聚合信息中，势必影响原文的思想传递，或是引战焚身与博主们站在对立的立场上整个你死我活，这些都不利于博客聚合类站点的发展。

## 写在最后

曾几何，我也想过要做一个现代的创意的博客聚合类站点，但是一想到要面对众多的博主，如何让大家都能有机会平等的展现在聚合中，让大家有个开心的个性的聚合展示，就觉得自己的技术平庸，思想落后，要实现理想中的乌托邦聚合是需要考虑到很多的。所以，我希望现有的博客聚合类的网站保持现有的状态与初心，继续服务于博友们，避免发生类似积薪，川流等站点的不愉快事件。

大家闲事写个博文，分享有用的知识和快乐的情绪就好，喜欢就收藏评论，不喜欢下次就不去看就好了。


最后祝大家2025年开心快乐每一天。




简单聊聊博客聚合类站点的生存之道以及一些想法。

博客聚合类站点的生存之道


## 简介

NextUI是一个基于Next.js的UI库，它提供了丰富的组件和样式，帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的，这里记录一下如何手动安装配置。

为啥要手动配置安装？主要是使用NextUI的cli工具安装的话，会出现一些问题，而且有一些老项目以后页会使用NextUI的。


## 安装

### 创建项目

这里我想手动创建一个项目用来演示，使用`npx create-next-app`命令来创建项目。

项目没什么特别的，只要记得选上`tailwind`就可以了

### 安装NextUI


    npm install @nextui-org/react
    # 或者
    yarn add @nextui-org/react


### 配置 Tailwind CSS

    /** @type {import('tailwindcss').Config} */
    const {nextui} = require("@nextui-org/react");
    export default {
    content: [
        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
        "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
    ],
    theme: {
        extend: {
        colors: {
            background: "var(--background)",
            foreground: "var(--foreground)",
        },
        },
    },
    darkMode: "class",
    plugins: [nextui()]
    };

### 设置 NextUIProvider

在你的 Next.js 应用的根组件中，使用`NextUIProvider`来包裹你的应用。通常，这可以在`pages/_app.js`或`pages/_app.tsx`中完成：

    import "@/styles/globals.css";
    import {NextUIProvider} from "@nextui-org/react";
    import {ThemeProvider as NextThemesProvider} from "next-themes";
    export default function App({ Component, pageProps }) {
    return (
        <NextUIProvider>
            <NextThemesProvider attribute="class" defaultTheme="dark">
            <Component {...pageProps} />
            </NextThemesProvider>
        </NextUIProvider>
    );
    }


这里，我使用`next-themes`来实现主题切换。`defaultTheme="dark"`可以设置默认的主题样式。


### 使用组件

修改`index.js`内容：


    import {Button} from "@nextui-org/react";


    export default function Home() {
    return (
        <div>
            <Button>Click me</Button>
        </div>
    );
    }


运行项目，就可以看到效果了。

## 总结

NextUI的安装配置还是比较简单的，而且这是一个非常漂亮的UI库。免费的组件基本上能满足日常的需求。

NextUI是一个基于Next.js的UI库，它提供了丰富的组件和样式，帮助开发者快速构建现代化的Web应用程序。个人感觉还是挺好用的，这里记录一下如何手动安装配置。

Next.js项目手动安装配置NextUI


## 期待一场鹅毛大雪

太久没有见到一场畅快的鹅毛大雪了。

如果不下雪，空气中就会滋生一些有毒的物质，对身体不好。

这不，带着孩子跑了一天的医院，连续咳嗽10多天了，拍了片子抽了血，被大夫撵回家了。


不光是孩子咳嗽，我最近几天也是咳嗽的越发严重了，

这阵子病毒横行霸道已经分不清是什么病毒了，反正就是病了，

吃什么药也不灵，有时候觉得人类的医学就是个笑话，

治病还得靠自身的免疫系统，所以大家还是多吃多喝保持好身体吧。

## 林姨的书

《你有遗憾吗》，林姨的新书。

刷抖音的时候刷到她在推荐自己的新书，迫不及待的就下单了。

之前刷到过那些她拍的视频，那些词汇和语句太能打动人任何一个年龄段的人了，

平时经常看“光头”侠们的代码书，偶尔换换口味也好。

## 原神更新了5.3

夏天的时候就在盼着原神5.3的更新了，元旦那天终于更新了，

运气不错，小保底没歪抽到了火神，

火神还是建模和技能还是挺帅气拉风的，

对得起大家的期待，

不过抽完火神做完主线任务，原神又要开启了漫长的长草期了。



太久没有见到一场畅快的鹅毛大雪了，如果不下雪，空气中就会滋生一些有毒的物质，对身体不好。这不，带着孩子跑了一天的医院，连续咳嗽10多天了，拍了片子抽了血，被大夫撵回家了。

久未见雪，满怀期待。


## 写在岁末
> 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混混沌沌的一年

## 一、 Socket.IO 简介
Socket.IO 由 Guillermo Rauch 开发，旨在解决 WebSocket 在不同浏览器和网络环境中的兼容性问题。它提供了统一的 API，让开发者无需担心底层传输协议的差异，轻松实现实时双向通信。

其主要特点包括：

跨平台支持：支持 Node.js、Python、Java、.NET 等多种语言和平台。例如，在 Python 中可以通过安装python-socketio库来创建服务器，有多种创建方式，如使用多进程多线程模式的 WSGI 服务器对接、作为 Flask 或 Django 应用的一部分，或者使用协程的方式运行（推荐）。

自动回退机制：如果 WebSocket 不可用，Socket.IO 会自动回退到其他协议，如 XHR 轮询、JSONP 轮询等。这样确保了在各种网络环境下都能实现实时通信。

事件驱动：基于事件的编程模型，支持自定义事件。开发者可以根据具体需求定义和处理各种事件，实现灵活的交互逻辑。

命名空间：支持命名空间，可以在同一连接中区分不同的逻辑通道。比如，可以创建不同的命名空间来处理不同类型的实时通信需求，提高代码的可维护性和扩展性。

房间机制：支持房间（Rooms）功能，可以实现群组通信。服务器端可以通过socket.join(room)让客户端加入特定房间，客户端也可以通过发送特定事件加入房间，实现高效的群组通信。

连接管理：内置心跳机制和重连功能，保证连接的稳定性和可靠性。即使在网络不稳定的情况下，也能自动尝试重新连接，确保实时通信不中断。

总之，Socket.IO 是一个强大且灵活的库，非常适合需要实时通信的应用，如聊天室、实时协作工具和在线游戏等。

## 二、安装与创建

### （一）服务器端安装

在服务器端安装 Socket.IO 非常简单，首先确保你已经安装了 Node.js。然后，在命令行中运行以下命令来安装 Socket.IO：

    npm install socket.io

### （二）客户端安装

在客户端，可以通过`<script>`标签加载 Socket.IO 库。例如：

    <script src="/socket.io/socket.io.js"></script>

### （三）创建服务器

在 Node.js 中，可以直接使用http模块创建服务器并引入 Socket.IO：

    const http = require('http');
    const server = http.createServer();
    const io = require('socket.io')(server);
    server.listen(3000, () => {
        console.log('Server listening on port 3000');
    });

在 Express 框架中创建 Socket.IO 服务器：

    const express = require('express');
    const app = express();
    const server = require('http').Server(app);
    const io = require('socket.io')(server);
    server.listen(80);
    app.get('/', function (req, res) {
        res.sendfile(__dirname + '/index.html');
    });
    io.on('connection', function (socket) {
        socket.emit('news', { hello: 'world' });
        socket.on('my other event', function (data) {
            console.log(data);
        });
    });

在 KOA 框架中创建 Socket.IO 服务器：

    const koa = require('koa');
    const static = require('koa-static');
    const path = require('path');
    const bodyParser = require('koa-bodyparser');
    const indexRouter = require('./routers/indexRouter');
    const { createServer } = require('http');
    const app = new koa();
    const httpServer = createServer(app.callback());
    const socketServer = require('./service/socketService');
    socketServer(httpServer);
    app.use(bodyParser());
    app.use(static(path.join(__dirname, 'public')));
    app.use(indexRouter.routes());
    httpServer.listen(3000, () => {
        console.log('server start');
    });

### （四）建立连接

服务器和客户端建立连接的过程如下：在服务器端，当有客户端连接时，会触发connection事件。例如在 Node.js 中：

    io.on('connection', (socket) => {
        console.log('A client connected');
    });

在客户端，通过创建Socket实例并连接到服务器。例如：

    const socket = io('http://localhost:3000');
    socket.on('connect', () => {
        console.log('Connected to server');
    });

当连接建立成功后，可以在服务器和客户端之间进行事件的发送和接收。

## 三、Socket 对象方法

### （一）发送和接收数据

Socket.IO 通过事件进行通信，socket.emit()方法用于发送事件，socket.on()方法用于监听事件。
例如，在服务器端可以使用以下方式发送事件：

    io.on('connection', (socket) => {
        socket.emit('customEvent', { message: 'Hello from server!' });
    });

在客户端，可以通过以下方式监听事件并接收数据：

    const socket = io('http://localhost:3000');
    socket.on('customEvent', (data) => {
        console.log(data.message); // Hello from server!
    });

### （二）断开连接

在客户端和服务器端都可以主动断开连接。
客户端断开连接：可以在特定情况下调用`socket.disconnect()`方法来断开与服务器的连接。例如，当用户退出应用时，可以触发断开连接操作。
// 假设在某个用户操作后触发断开连接
`socket.disconnect();`

服务器端断开连接：服务器可以在特定条件下调用`socket.disconnect(true)`强制断开与某个客户端的连接。
当连接断开时，会触发相应的事件。在客户端，会触发`socket.on('disconnect')`事件；在服务器端，会触发`socket.on('disconnect', (reason) => {... })`事件，其中reason参数表示断开连接的原因。

### （三）其他常用方法
SocketIO 对象有许多常用方法，如emit、close、on、setTimeout、setInterval、setLoop等。
emit：用于发送事件，可以携带数据和回调函数。例如：

    socket.emit('eventName', data, function (response) {
        // 处理回调函数的响应
    });

close：用于关闭连接。例如：

    socket.close();

on：用于监听事件，并用回调函数处理事件。例如：

    socket.on('eventName', function (data) {
        // 处理事件的数据
    });

setTimeout：等待指定的时间后执行函数。例如：

    socket.setTimeout(function () {
        console.log('Time out!');
    }, 5000);

setInterval：按照指定的时间间隔定期执行函数。例如：

    socket.setInterval(function () {
        console.log('Interval triggered!');
    }, 2000);

setLoop：循环执行函数直至连接关闭。例如：

    socket.setLoop(function () {
        socket.emit('loopEvent', { data: 'Loop data' });
    });

## 四、命名空间与房间

### （一）命名空间

命名空间是一种通信通道，允许通过单个共享连接拆分应用程序的逻辑。本质上，它就是指定不同的终点或路径，这一特性可以减少所需资源数目（如 TCP 连接数），同时通过隔离通信信道达到隔离应用的多个部分。
在 Socket.IO 中，默认命名空间是 /，客户端默认连接到这个命名空间，服务端也默认监听这个命名空间。例如：

    // the following two will emit to all the sockets connected to `/`
    io.sockets.emit('hi', 'everyone');
    io.emit('hi', 'everyone'); // short form

每个默认命名空间都会触发一个 connection 事件，并以 socket 作为参数传递到事件响应中。
如果要设置一个自定义命名空间，可以在服务端调用 of 函数。例如：

    const nsp = io.of('/my-namespace');
    nsp.on('connection', function(socket){
        console.log('someone connected');
    });
    nsp.emit('hi', 'everyone!');

在客户端，告知 socket.io 客户端连接到对应的自定义命名空间的方法如下：

    const socket = io('/my-namespace');

### （二）房间

房间是在每个命名空间内定义的专属通道，sockets 可以 join 和 leave 房间。
加入房间：通过调用 join 函数可以让 socket 订阅一个指定通道。例如：

    io.on('connection', function(socket){
        socket.join('some room');
    });

离开房间：调用 leave 可以像调用 join 一样离开房间，这两个方法都是异步的，接受 callback 作用参数。例如：

    socket.on('leaveRoom', function (data, fn) {
        socket.leave(data.roomName);
        fn({'code': 0, 'msg': '已退出房间', 'roomName': data.roomName});
    });

向房间广播消息：可以通过 to 或者 in（两者等同）在频道内广播或发送消息。例如：

    io.to('some room').emit('some event');

在不加入或指定房间的情况下，socket.io 会默认分配一个 default room。同一房间下的 socket 可以广播消息，例如：

    clientSocket.on('joinRoom', function (data, fn) {
        clientSocket.join(data.roomName);
        fn({'code': 0, 'msg': '加入房间成功', 'roomName': data.roomName});
    });

    clientSocket.on('sendMsg', function (data, fn) {
        clientSocket.broadcast.to(data.roomName).emit('receiveMsg', data);
        fn({'code': 0, 'msg': '消息发生成功'});
    });

## 五、Socket.IO 原理

### （一）基于 WebSocket 和降级策略
Socket.IO 底层使用 engine.io 封装了一层协议。在支持 WebSocket 的环境中，Socket.IO 会优先使用 WebSocket 进行通信，以实现高效的双向通信。但当浏览器不支持 WebSocket 时，Socket.IO 会自动采用降级策略，拥有多种轮询解决方案，确保在各种网络环境下都能实现实时通信。例如，它可以使用 XHR 轮询、JSONP 轮询等方式。这样的设计使得 Socket.IO 具有极高的兼容性，能够适应不同的浏览器和网络环境。

### （二）建立连接过程

WebSocket 建立连接的过程复用了 HTTP 的握手通道。客户端发送 HTTP 请求，并在请求头中带上特定的参数，如Connection: Upgrade、Upgrade: websocket，服务端识别该请求头之后，进行协议升级，使用 WebSocket 协议进行数据通信。

请求头参数说明如下：

Request URL：请求服务端地址。

Request Method：请求方式，支持get、post、option等。

Status Code 101 Switching Protocols：当收到 101 请求状态码时，表明服务端理解并同意客户端请求，更改Upgrade header字段。服务端也必须在响应中，生成对应的Upgrade值。

Connection：设置upgrade header，通知服务端，该request类型需要进行升级为 websocket。

upgrade_mechanism：规范。

Host：服务端 hostname。

Origin：客户端 hostname:port。

Sec-WebSocket-Extensions：客户端向服务端发起请求扩展列表，供服务端选择并在响应中返回。

Sec-WebSocket-Key：秘钥的值是通过规范中定义的算法进行计算得出，虽然不安全，但是可以阻止一些误操作的 websocket 请求。

Sec-WebSocket-Accept：计算公式为获取客户端请求 header 的值Sec-WebSocket-Key，使用魔数'258EAFA5-E914-47DA-95CA-C5AB0DC85B11'，通过 SHA1 进行加密计算（sha1(Sec-WebSocket-Key + magic)），将值转换为 base64。

Sec-WebSocket-Protocol：指定有限使用的 WebSocket 协议，可以是一个协议列表。服务端在响应中返回列表中支持的第一个值。

Sec-WebSocket-Version：指定通信时使用的 WebSocket 协议版本。最新版本为 13，历史版本也有其他值。

Upgrade：通知服务端，指定升级协议类型为 websocket。

响应头方面，服务端响应了Upgrade，此时，连接已经和 HTTP 没什么关系了，协议升级后双方建立的就是 WebSocket 连接。整个过程中，通过这样的握手方式，实现了从 HTTP 协议到 WebSocket 协议的转换，为客户端和服务端的双向通信奠定了基础。

## 六、应用与展望

### （一）应用场景
实时分析：将数据推送到客户端，客户端表现为实时计数器、图表或日志客户。例如在金融交易平台中，可以实时更新股票价格、交易量等数据，让用户能够及时了解市场动态。在工业监控系统中，传感器数据可以通过 Socket.IO 实时传输到客户端，实现对生产过程的实时监测和分析。

实时通讯：创建实时的、多用户聊天室，消息即时传递。无论是社交应用、在线客服系统还是内部通讯工具，Socket.IO 都能提供高效的实时通讯功能。例如在在线游戏中，玩家之间的交流可以通过 Socket.IO 实现实时同步，提升游戏体验。

二进制流传输：从 1.0 版本开始，Socket.IO 支持任何形式的二进制文件传输，例如图片、视频、音频等。这在多媒体应用中非常有用，比如视频会议系统可以通过 Socket.IO 实时传输视频流，实现高清、低延迟的视频通信。

文档合并：允许多个用户同时编辑一个文档，并能够看到每个用户做出的修改。类似于 Google Docs 的在线文档编辑工具可以利用 Socket.IO 实现实时同步，提高协作效率。
### （二）未来发展潜力
技术融合：随着技术的不断发展，Socket.IO 有望与其他新兴技术融合，如人工智能、区块链等。例如，结合人工智能技术，可以实现智能实时客服系统，通过分析用户的问题自动提供准确的回答。与区块链技术结合，可以实现安全、透明的实时数据传输和验证。

性能优化：随着用户对实时通信的要求越来越高，Socket.IO 将不断进行性能优化。这包括提高数据传输速度、降低延迟、优化资源占用等方面。例如，通过改进底层的 engine.io 协议，进一步提高在不同网络环境下的通信效率。

跨平台扩展：目前 Socket.IO 已经支持多种语言和平台，但未来有望进一步扩展到更多的领域。例如，在物联网领域，Socket.IO 可以实现设备之间的实时通信，为智能家居、智能交通等应用提供支持。

丰富的插件生态：Socket.IO 的插件生态将不断丰富，为开发者提供更多的功能扩展。例如，开发出更多的安全插件，加强实时通信的安全性；开发出更多的数据分析插件，帮助开发者更好地理解和利用实时数据。

总之，Socket.IO 在实时通信领域具有广阔的应用前景和发展潜力。随着技术的不断进步，它将继续为开发者提供强大的实时通信解决方案，推动实时应用的发展。


Socket.IO 由 Guillermo Rauch 开发，旨在解决 WebSocket 在不同浏览器和网络环境中的兼容性问题。它提供了统一的 API，让开发者无需担心底层传输协议的差异，轻松实现实时双向通信。

Socket.IO：实时通信的强大工具


本教程将带你了解如何使用3M工具（nvm, npm, nrm）来管理Node.js环境。这些工具将帮助你轻松切换Node.js版本，管理项目依赖，以及优化包的下载速度。

环境要求

•  一台可以访问互联网的计算机。
•  基本的命令行操作知识。

第一步：安装nvm（Node Version Manager）

nvm是一个Node.js版本管理器，允许你在同一台机器上安装和切换不同版本的Node.js。

安装nvm

对于不同的操作系统，安装nvm的方法有所不同：

在Linux或macOS上：

1.  打开终端。 
2.  运行以下命令来安装nvm：
    
        curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

或者使用wget：

        wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash

3.  安装完成后，关闭并重新打开终端，以便nvm生效。

在Windows上：

1.  你可以使用nvm-windows，这是一个为Windows设计的nvm版本。
2.  访问nvm-windows的GitHub页面 https://github.com/coreybutler/nvm-windows/releases，下载最新版本的安装程序并运行。
验证nvm安装
在终端中运行以下命令来检查nvm是否安装成功：

        nvm --version

第二步：使用nvm安装Node.js
1.  查看可用的Node.js版本：
    
        nvm list-remote

2.  安装最新版本的Node.js：
    
        nvm install node

或者安装特定版本，例如v14.17.0：

        nvm install 14.17.0

3.  列出已安装的Node.js版本：

        nvm list

4.  切换到特定版本的Node.js：

        nvm use 14.17.0

第三步：使用npm管理依赖
npm是Node.js的默认包管理器，用于安装和管理项目依赖。
1.  创建一个新的Node.js项目目录：

        mkdir my-node-project
        cd my-node-project

2.  初始化npm项目：

        npm init -y

这将创建一个package.json文件，记录项目的依赖和配置。
3.  安装一个包，例如express：
    
        npm install express

4.  运行你的Node.js应用：
    
        node your-app.js

第四步：使用nrm管理npm源
nrm允许你管理npm的下载源，优化下载速度。
1.  安装nrm：
    
        npm install -g nrm

2.  列出可用的npm源：
    
        nrm ls

3.  切换到淘宝npm源以加快下载速度：
    
        nrm use taobao

结语
通过本教程，你已经学会了如何使用3M工具来管理你的Node.js环境。这些工具将帮助你更高效地开发Node.js应用。

本教程将带你了解如何使用3M工具（nvm, npm, nrm）来管理Node.js环境。这些工具将帮助你轻松切换Node.js版本，管理项目依赖，以及优化包的下载速度。

Node.js新手教程：使用3M（nvm, npm, nrm）


昨天像发布一个npm的包，但是，npm login 和 npm publish 总是连接不上npm的网站，一直显示超时，但是我ping 一下，是可以ping通的，但是就是连接不上，然后我就去网上查了一下，总结一下连接不上npm网站的解决方法。

## 检查NPM源

终端运行：

    npm config get registry

如果返回的不是`https://registry.npmjs.org/`，或者是`https://registry.npmmirror.com/`请修改源。

    npm config set registry https://registry.npmjs.org/

确保npm源已经修改为官方的`https://registry.npmjs.org/`


然后再终端测试登录和publish，就可以了。

如果还提示有问题，一般就是网络问题，即便时用了代理也会有问题，还有是你的包的版本，如果忘了修改版本号，也会提示版本号重复，所以请确保你的包的版本号是正确的。

## 最后

国内的网络不太好，建议多尝试把，多提交几次就会成功了。




昨天像发布一个npm的包，但是，npm login 和 npm publish 总是连接不上npm的网站，一直显示超时，但是我ping 一下，是可以ping通的，但是就是连接不上，然后我就去网上查了一下，总结一下连接不上npm网站的解决方法。

npm login 和 npm publish 总是连接不上npm的网站的解决方法


## 一、简介

PrimaryOralMathPack是一个功能强大的NPM包，专门用于生成小学生口算题。它可以根据用户指定的各种参数，如运算类型（加法、减法、乘法、除法）的属性、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等，生成符合要求的口算题数组，为教育工作者或家长创建个性化的口算练习材料提供了便利。

## 二、使用帮助

### 安装

使用npm安装该包：

    npm install PrimaryOralMathPack

### 导入

在你的JavaScript项目中，可以通过以下方式导入：

    const { FormulasGenerator } = require('PrimaryOralMathPack');

### 使用示例

直接引用，默认参数即可生成10道100以内加减法口算题，默认参数如下：

    const { FormulasGenerator } = require('PrimaryOralMathPack');
    const f = new FormulasGenerator();
    console.log(f.generate());

打印结果：

    [
    '74-39=', '52-25=',
    '32+66=', '50-3=', 
    '54-19=', '67-13=',
    '47-32=', '74-52=',
    '79-35=', '62-22=' 
    ]

以下是一个使用PrimaryOralMathPack生成口算题的示例：

    // 创建一个FormulasGenerator实例
    const generator = new FormulasGenerator(
        // 加法属性，这里{"carry": 1}表示加法有进位（可根据需要修改）
        {"carry": 1}, 
        // 减法属性，{"abdication": 1}表示减法有退位（可根据需要修改）
        {"abdication": 1}, 
        // 乘法属性（根据具体需求设置）
        null, 
        // 除法属性，{"remainder":2}表示除法是整除（可根据需要修改）
        {"remainder":2}, 
        // 运算步数，这里设置为2步运算
        2, 
        // 生成的口算题数量，这里设置为10道题
        10, 
        // 0表示求运算结果，1表示求运算项（这里以求结果为例）
        0, 
        // 0表示不包含括号，1表示包含括号（这里设置为不包含括号）
        0, 
        // 多步运算的数值范围，这里是示例范围，可按需调整
        [[0, 99], [0, 99], [0, 99], [0, 99], [1, 99]], 
        // 运算符列表，这里示例包含加法和减法，可根据需求修改
        [[1,2],[1],[1]]
    );

    // 生成口算题
    const oralMathProblems = generator.generate();
    console.log(oralMathProblems); 


在上述示例中：

addattrs、subattrs、multattrs、divattrs分别用于设置加法、减法、乘法、除法的属性。例如，加法属性中的carry值可以是1（有进位）、2（无进位）、3（随机进位）。

step指定运算步数，目前仅支持1、2、3步运算，其他值会报错。

number确定要生成的口算题数量。

is_result为0时求运算结果，为1时求运算项。

is_bracket为0时生成的口算题不包含括号，为1时包含括号。

multistep是一个数组，用于定义多步运算中每一步运算数的取值范围。

symbols是一个二维数组，用于指定每一步允许的运算符，例如[1]表示加法，[2]表示减法，[3,4]表示乘法和除法。

通过调整这些参数，可以生成满足不同需求的口算题。

## 案例

小学数学口算题 | Primary School Mathematics https://github.com/bosichong/PrimarySchoolMathematics

[在线演示地址](https://www.suiyan.cc/demo/psm)

该项目是一个基于PrimaryOralMathPack的小学数学口算题生成器，旨在帮助学生和家长创建个性化的口算练习材料。它提供了一个交互式的Web应用程序，允许用户选择不同的口算题类型（加法、减法、乘法、除法）、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等参数，生成符合要求的口算题数组。

PrimaryOralMathPack是一个功能强大的NPM包，专门用于生成小学生口算题。它可以根据用户指定的各种参数，如运算类型（加法、减法、乘法、除法）的属性、运算步数、题目数量、是否求结果或运算项、是否包含括号以及数值范围和运算符列表等，生成符合要求的口算题数组，为教育工作者或家长创建个性化的口算练习材料提供了便利。

PrimaryOralMathPack 小学生口算题生成器


在 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/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 待办事项应用


![演示](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 助你一臂之力




在本文中，我们将介绍如何使用 Next.js（纯.js 文件，不使用.jsx）和 Tailwind CSS 搭建一个静态图片展示站点。该站点将具有首页以瀑布流模式展示图片，点击图片可跳转到图片展示页面，所有图片信息存储在一个 JSON 文件中，并且为每个图片生成单独的静态页面。最后，我们将把这个站点部署到 Vercel。

效果展示：

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

## 一、建站构思

### （一）功能需求

首页以瀑布流布局展示图片，让用户可以快速浏览多个图片。
点击图片能够跳转到对应的图片展示页面，显示图片的详细信息，包括标签和简介。
所有图片存储在特定目录下，方便管理和维护。
使用 JSON 文件存储图片的相关信息，便于动态读取和生成页面。

### （二）技术选择

Next.js：Next.js 是一个用于构建服务器端渲染和静态生成的 React 框架。它提供了很多强大的功能，如路由、代码分割、静态导出等，非常适合构建高性能的 Web 应用。
Tailwind CSS：Tailwind CSS 是一个实用工具类优先的 CSS 框架，可以快速构建美观的用户界面。它提供了丰富的预定义样式类，使得开发过程更加高效。
JSON 文件：用于存储图片的相关信息，方便读取和管理。
Vercel：一个优秀的云平台，用于部署 Next.js 应用，提供快速的部署、全球 CDN 加速和自动扩展等功能。


## 二、代码编写步骤


### （一）项目初始化

创建一个 Next.js 项目：
确保已经安装了npx（如果使用npm版本大于 5.2.0），然后运行以下命令创建项目：

    npx create-next-app picture-gallery-app

进入项目目录：

    cd picture-gallery-app

安装 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;

### （二）创建图片数据 JSON 文件

在项目根目录下创建一个images.json文件，示例结构如下：

    [
    {
        "imagePath": "/images/image1.jpg",
        "tags": ["nature", "landscape"],
        "description": "A beautiful landscape photo."
    },
    {
        "imagePath": "/images/image2.jpg",
        "tags": ["city", "architecture"],
        "description": "An amazing architecture in the city."
    }
    ]

### （三）创建首页组件（pages/index.js）


    import Link from 'next/link';
    import data from '../images.json';
    import Image from 'next/image';

    const HomePage = () => {
    return (
        <div className="container mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold mb-8">Picture Gallery</h1>
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {data.map((image, index) => (
            <Link key={index} href={`/image/${index}`}>
                <a className="block relative">
                <Image
                    src={image.imagePath}
                    alt={image.description}
                    width={300}
                    height={200}
                    layout="responsive"
                    className="object-cover w-full h-full rounded-lg"
                />
                </a>
            </Link>
            ))}
        </div>
        </div>
    );
    };

    export default HomePage;


### （四）创建单个图片展示页面组件（pages/image/[id].js）

    import data from '../../images.json';
    import Image from 'next/image';

    const ImagePage = ({ params }) => {
    const { id } = params;
    const image = data[id];
    return (
        <div className="container mx-auto px-4 py-8">
        <Link href="/">
            <a className="text-blue-500 mb-4">Back to Home</a>
        </Link>
        <Image
            src={image.imagePath}
            alt={image.description}
            width={600}
            height={400}
            layout="responsive"
            className="object-cover w-full h-full rounded-lg mb-4"
        />
        <h2 className="text-2xl font-bold mb-2">{image.description}</h2>
        <p className="text-gray-700">Tags: {image.tags.join(', ')}</p>
        </div>
    );
    };

    export default ImagePage;

## 三、部署到 Vercel

### （一）前期准备

确保你的 Next.js 项目已经开发完成并且在本地能够正常运行。项目结构应该包括 package.json 文件、页面组件、样式文件等。
如果你的项目使用了环境变量，确保将敏感的环境变量设置为在 Vercel 上可配置的变量，或者使用 .env.local 文件来存储本地开发环境变量，而在生产环境中使用 Vercel 的环境变量配置功能。

### （二）连接 Vercel

注册并登录 Vercel。
在 Vercel 控制台，点击 “New Project”（新建项目）按钮。
选择 “Import Git Repository”（导入 Git 仓库）选项。如果你的项目已经托管在 Git 平台（如 GitHub、GitLab、Bitbucket 等），Vercel 会自动检测到你的仓库并列出。选择你的 Next.js 项目仓库。

### （三）配置项目

Vercel 会自动检测项目的框架为 Next.js，并显示一些默认的配置选项。
在 “Project Settings”（项目设置）中，可以设置项目名称、环境变量、构建和输出目录等。
如果你的项目有特定的构建命令或环境变量需求，可以在 “Build & Development Settings”（构建和开发设置）中进行配置。例如，默认情况下，Vercel 会使用 npm install 和 npm run build 作为构建命令，但如果你的项目有不同的构建流程，可以在这里进行修改。

### （四）部署项目

完成配置后，点击 “Deploy”（部署）按钮。Vercel 会开始克隆你的 Git 仓库、安装依赖、构建项目，并将构建后的项目部署到 Vercel 的全球 CDN 网络上。
部署过程中，你可以在控制台查看构建日志和部署进度。一旦部署完成，Vercel 会提供一个项目的访问 URL，你可以通过这个 URL 访问你的 Next.js 项目。
通过以上步骤，我们成功地使用 Next.js 和 Tailwind CSS 搭建了一个静态图片展示站点，并将其部署到了 Vercel。这个站点具有良好的用户体验和性能，可以让用户轻松浏览和查看图片。以上就是一个简单的 Next.js 静态图片展示站点的搭建和部署过程，但着只是一个简单的示例，你可以根据自己的需求和项目特点进行更复杂的定制和扩展。

项目演示地址：https://suipian.suiyan.cc

项目源码地址：https://github.com/bosichong/suipian

在本文中，我们将介绍如何使用 Next.js（纯.js 文件，不使用.jsx）和 Tailwind CSS 搭建一个静态图片展示站点。该站点将具有首页以瀑布流模式展示图片，点击图片可跳转到图片展示页面，所有图片信息存储在一个 JSON 文件中，并且为每个图片生成单独的静态页面。最后，我们将把这个站点部署到 Vercel。

使用 Next.js 和 Tailwind CSS 搭建静态图片展示站点并部署到 Vercel



在当今的编程世界中，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 辅助编程：免费工具的优缺点及官网一览



## 烦人的 GitHub 443

国内的 GitHub 访问速度实在是太慢了，当你更新完代码，准备 push 到远程仓库的时候，总是会遇到如下错误：`Failed to connect to github.com port 443 after 21046 ms: Couldn't connect to server`,所以，你就会不断的 git push ，直到成功。

## 解决方法

在你的项目目录下，新建一个 python 文件，比如 `push.py`，然后在文件中写入如下代码：

```import subprocess
import time

def git_push():
    while True:
        try:
            subprocess.check_call(['git', 'push'])
            print("Git push successful!")
            break
        except subprocess.CalledProcessError:
            print("Git push failed. Retrying in 5 seconds...")
            time.sleep(5)

def main():
    subprocess.check_call(['git', 'add', '.'])
    subprocess.check_call(['git', 'commit', '-m', '更新'])
    git_push()

if __name__ == "__main__":
    main()

```

然后，在命令行中运行 `python push.py`，就可以自动 push 到远程仓库了。
至少不会在一遍一遍的敲命令行，或是点击按钮提交push了。

Failed to connect to github.com port 443  的解决方法

GitHub push更新总是失败，写个python脚本解决



## 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


## ComfyUI 

ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流.

## ComfyUI 安装的步骤

安装之前，请确认网络通常可以正常访问外围网络，不然升级和下载插件会失败。

ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流。以下是 ComfyUI 安装的步骤：

1. **下载 ComfyUI**：
   - 访问 GitHub 并搜索 `comfyanonymous/ComfyUI`，下载最新发布的版本。

2. **解压并运行**：
   - 解压下载的文件到你选择的目录。
   - 根据你的硬件配置，运行 `run_cpu.bat`（使用 CPU）或 `run_nvidia_gpu.bat`（使用 NVIDIA GPU）。

3. **安装节点管理器**（可选）：
   - 访问 GitHub 上的 `comfyui_manager` 项目，下载并安装管理器，以方便节点的安装与管理。

4. **界面汉化**（可选）：
   - 下载汉化节点 `AIGODLIKE-ComfyUI-Translation` 并放入 `custom_nodes` 目录，重启 ComfyUI 后即可切换至中文界面。

5. **安装模型**：
   - 下载所需的 Stable Diffusion 模型，并将其放置在 `models/checkpoints` 目录中。

6. **启动 ComfyUI**：
   - 运行相应的批处理文件启动 ComfyUI。

7. **进行第一次图片生成**：
   - 在 ComfyUI 界面中，设置好你的文本提示，然后点击生成。

如果你想要更详细的步骤，可以参考以下资源：
- [CSDN博客](https://blog.csdn.net/z19981/article/details/141181672) 提供了详细的 ComfyUI 安装教程，包括汉化和节点管理器的安装。
- [ComfyUI-Wiki](https://comfyui-wiki.com/zh-CN/install/install-comfyui/install-comfyui-on-windows) 提供了官方的 Windows 安装指南。

确保你的系统满足 ComfyUI 的硬件要求，特别是如果你计划使用 GPU 加速，需要有足够的显存。安装过程中如果遇到问题，可以查看官方文档或社区论坛获取帮助。

## Flux.1 模型安装
Flux.1 是由 Black Forest Labs 开发的最新文本到图像生成模型，提供了多种变体以适应不同的使用场景：

下载模型：

根据你的需要选择 FLUX.1 [pro]、FLUX.1 [dev] 或 FLUX.1 [schnell] 版本。访问 Hugging Face 或其他提供模型的平台，下载对应的模型文件 。
国内用户如果不方便下载，可以到 [哩布哩布](https://www.liblib.art/)进行搜索下载。

放置模型文件：

将下载的模型文件放置在 ComfyUI/models/unet/ 目录下 。
安装额外的模型和插件（可选）：
如需使用特定的 LoRA 或 VAE 模型，下载并放置在相应的目录下 。

3. 创建第一个图像生成你的第一张图像，遵循以下步骤：

加载模型：

在 ComfyUI 界面中，使用 Load Checkpoint 节点加载你放置的 Flux.1 模型。

配置文本提示：

使用 CLIP Text Encode（Prompt） 节点输入你想要生成的图像描述。

执行生成：

通过 KSampler 节点进行图像采样，然后使用 VAE Decode 节点解码生成图像。

预览和保存：

可选地使用 PreviewImage 节点预览图像，然后通过 Save Image 节点保存生成的图像。

4. 故障排除

确保模型路径正确：检查模型文件是否正确放置在指定目录。
检查硬件要求：确保你的系统满足运行 Flux.1 模型的最低硬件要求。
查看日志文件：如果遇到问题，查看 ComfyUI 的日志文件以获取错误信息。
通过上述步骤，你可以成功安装并使用 ComfyUI 和 Flux.1 模型生成高质量的图像。如果你遇到任何问题，可以查看官方文档或社区论坛获取帮助。

## 总结

comfyUI、Flux.1的安装过程中会出现很多奇怪的问题，大多是因为网络问题，所以建议大家在安装的时候，最好能科学上网，不然会出现很多问题。
还有就是python的版本问题，这个时候要在终端引用comfyUI的python环境，不然会出现很多问题。





ComfyUI 是一个基于 Stable Diffusion 的图形用户界面，它允许用户通过拖放节点来创建图像生成工作流.

ComfyUI 和 Flux.1 安装与使用教程


![flux](https://suiyan.cc/assets/images/2024/flux.png)

在当今的数字艺术领域，Flux.1 和 ComfyUI 已经成为了两个不可忽视的关键词。Flux.1 是由 Black Forest Labs 开发的一款先进的图像生成模型，以其出色的文本到图像的转换能力和高质量的图像输出而闻名。ComfyUI 则是一个基于节点的图形用户界面，专为 Stable Diffusion 设计，提供了高度的可定制性和模块化的工作流程。在本文及后续的文章中，我们将深入探讨 Flux.1 和 ComfyUI 的核心概念和功能，帮助您更好地理解这两个工具的强大之处。

## flux.1 是什么？

Flux.1 模型以其120亿的训练参数和在图像质量、提示词准确性、尺寸适应性及输出多样性方面的优势，确立了图像合成技术的新高度。它分为三个版本：Pro、Dev 和 Schnell，每个版本都有其特定的应用场景和许可要求。Pro 版本提供最顶级的性能，适合企业定制化服务；Dev 版本开源但不可商用，适合研究和开发；Schnell 版本开源且可商用，适合个人和本地部署使用。

## flux.1的硬件要求

确保您的计算机具备足够的显存，最低要求为 8-12GB，推荐 16-24GB。这是因为 Flux.1 模型在图像质量和细节方面表现出色，但同时也需要较高的计算资源。

## flux.1的软件环境

安装 Python 和 Git，这些是运行 ComfyUI 的基础。您还需要安装 Visual Studio（不是必须） 和 CUDA，以支持 GPU 加速。
另外，网络环境需要魔法，因为comfyUI的更新需要访问到一些国外的资源。

## flux.1的模型

1. FLUX.1 Pro：这是最高端的模型，专为专业和企业用户设计，提供顶尖的图像质量和细节表现。它具备先进的提示词跟随能力，确保输出的多样性，适合要求严格的视觉项目。这个版本是闭源的，需要通过官方 API 申请访问权限。

2. FLUX.1 Dev：这是一个开源模型，适合非商业用途，如研究和开发。它直接从 FLUX.1 Pro 蒸馏而来，具备相似的图像质量和提示词遵循能力，但更加高效。

3. FLUX.1 Schnell：这是为本地开发和个人项目优化的开源模型，特点是速度快，内存占用小，适合快速实验和个人创作。它遵循 Apache 2.0 许可证，可以商用。

具体使用哪个版本可以根据硬件、个人需求和使用场景来选择。可以参考官方文档了解更多信息。

[Flux.1 不同版本模型](https://comfyui-wiki.com/zh-CN/tutorial/advanced/flux1-comfyui-guide-workflow-and-examples)

上边的文档里包括模型，vae clip的下载地址

国内用户如果不方便下载，可以到 [哩布哩布](https://www.liblib.art/)进行搜索下载。

## 总结

如果您对 Flux.1 和 ComfyUI 有任何疑问或需要进一步的帮助，请随时在评论区留言。欢迎交流。



在当今的数字艺术领域，Flux.1 和 ComfyUI 已经成为了两个不可忽视的关键词。Flux.1 是由 Black Forest Labs 开发的一款先进的图像生成模型，以其出色的文本到图像的转换能力和高质量的图像输出而闻名。ComfyUI 则是一个基于节点的图形用户界面，专为 Stable Diffusion 设计，提供了高度的可定制性和模块化的工作流程。在本文及后续的文章中，我们将深入探讨 Flux.1 和 ComfyUI 的核心概念和功能，帮助您更好地理解这两个工具的强大之处。

Flux.1 入门必知：硬件、环境、模型


Git项目的子文件夹中的内容无法同步到远程仓库，无论则么更新，远程都是一个空文件夹。

## 解决方法

因为你的子文件夹大概率是一个git的仓库，你只要删除掉子文件夹的.git文件夹即可。就是这么简单。



Git项目的子文件夹中的内容无法同步到远程仓库的解决方法


blender版本为4.1X，window10.

## 流体没有水流的问题解决方法

选择域--流体，勾选子菜单：网格，即可解决没有水流的问题。

## 流体穿模的问题解决方法

1.选择效果器为碰撞的对象，在流体--设置--表面厚度设置更大的数值即可解决。
2.勾选是否为平面，即可解决。




blender流体Fluid使用中没有流体、流体穿模等一些问题的解决方法



## 早有感知

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

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

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


blender日常使用中的一些技巧,不定期更新。

## 建模

当通过动画产生的结果生成的几何物体，可以通过应用（ctrl+a）- 可视几何-网格，使其转变为一个固定的几何物体，这样就可以复制到其他的场景文件中使用了。

小del键   选择一个物体 按 . 后，当前物体最大化显示 

游标恢复到世界中心: Shift+c 吸附法：选择需要回到原点的模型，点击页面顶部的【物体】选项卡，在物体的下拉选项中打开【吸附】，选择【游标-选中项】，游标即可回到该模型的原点上显示


## 材质
blender 导入PBR材质：
选中原理化材质，快捷键 CTRL+shift+t

## 插件

https://www.blenderkit.com/get-blenderkit/
一个不错的资产插件，包括模型材质HDRI笔刷等，可以免费可以商用。

## 摄像机

1. 16-35mm 镜头：广角镜头，适合拍摄风光、建筑等大场景。
2. 24-70mm 镜头：标准变焦镜头，通用性较强，可满足多种场景需求。
3. 70-200mm 镜头：长焦变焦镜头，常用于体育、野生动物等拍摄。
4. 50mm 镜头：标准定焦镜头，与人眼视角相似，常用于人像、纪实等拍摄。

## 
渲染
世界环境-射线可见性-摄像机   去掉勾选，可以隐藏HDR的背景。

## 快捷键

01视角的控制

旋转视角:鼠标中健按住可旋转

平移视角: shift+鼠标中健

推进推远视角:滚动鼠标中健

在编辑-偏好设置-视图切换-缩放-选择 缩放至鼠标位置

02物体的控制

移动物体:G          旋转物体:R          缩放物体:S

恢复变换:Alt+G,Alt+R，Alt+S

新建物体:Shift+A

复制物体: Shift+D   (移动并复制）

删除物体:X或者Delete

隐藏物体:H （或点击小眼睛）          

显示隐藏物体:Alt+H

隐藏没有被选中的物体: Shift+H

选择物体刷选:C全选:A          

按住Shift可以加选或者减选

03视图的切换 （以下均为小键盘）

7-顶视图，1-前视图，3-右视图，9反转当前视图

0:切换摄像机的视角

5:切换透视投影和正交投影

2,4,6,8:前后左右角度微调（默认15°）

+，- : 缩放微调

调用游标Pie目录:Shift+s

游标恢复到世界中心: Shift+c 吸附法：选择需要回到原点的模型，点击页面顶部的【物体】选项卡，在物体的下拉选项中打开【吸附】，选择【游标-选中项】，游标即可回到该模型的原点上显示

移动游标:游标工具或者Shift+右键

最大化窗口:Ctrl+空格

G移动状态下，按住ctrl，可以以每个方格增量为单位进行吸附。

切换全局和局部坐标系:在G移动状态下按两次X，Y，Z，

编辑-偏好设置-视图切换-围绕选择物体旋转   

打开在变换轴心点选择选择方式

重要概念

1.窗口面板可拆分，可互换 （在每个窗口四角向内，外拖动）
2.游标可以用来定位和当轴心点
3.每个物体都有原点，在3D世界的计算机眼里，原点就是储存物体信息的数据点。（通过选项-“仅影响原点”移动

blender日常使用中的一些技巧,不定期更新。

blender日常使用中的一些技巧


## 更新了碎言博客的源代码

把自己许久没有更新的代码更新了一下，好久没有操作GitHub的命令了，好在都有结成环境，点点鼠标就搞定了仓库的版本更新推送。

不管怎么说，这个博客程序也是自己手工打造的，还是有些感情的，毕竟自己用着习惯了，就没在去研究使用其他框架了。

## 继续写下去的动力

之前也用过一些其他博客的程序，但是真的很讨厌服务器的部署，还有就是安防一类，什么CDN被刷账单爆了，想想就头疼，所以，索性生成静态文件，往GitHub一扔，就不会有这些烦恼了，生活本来就是一团糟，我可没时间去折腾这些。

读书和写作需要坚持才会有收获，如今这个信息快餐的时代，能安下心看看书敲几个字，也算是心灵的洗涤吧，AI生成的东西看着真的没啥味道，写个标题，给你一篇文章，人啊，以后都会编程傻子了。

愿各位博友安好，愿世界美好。

把自己许久没有更新的代码更新了一下，好久没有操作GitHub的命令了，好在都有结成环境，点点鼠标就搞定了仓库的版本更新推送。

虽然只有我自己在用，但还是更新了碎言博客的源代码，



## 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%多点，感觉出去考试的没几个人回来签字，我排在倒数第五个考试，开始的时候觉得过科率这么低，好可怕瑟瑟发抖，后来等的太无聊了，就和待考的学员聊天，聊一个，考试的时候挂一个，额滴娘，我是挂科之神？好在最后我考过去了，他们就好自为之吧

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

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

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

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

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

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

## 再次骨折

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

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

## 暂停更新

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

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

站内搜索