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

trea支持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模式均可使用！

trea支持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://www.upscayl.net/](https://www.upscayl.net/)。
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：`trea.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下的版本还没有开放，需要排队预约，小小的失望了一下。但是还是默默的留下了邮箱等待后补成功。

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

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

昨天晚上在X上看到很多程序员大佬都在推荐一个全新的AI IDE：trea.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%多点，感觉出去考试的没几个人回来签字，我排在倒数第五个考试，开始的时候觉得过科率这么低，好可怕瑟瑟发抖，后来等的太无聊了，就和待考的学员聊天，聊一个，考试的时候挂一个，额滴娘，我是挂科之神？好在最后我考过去了，他们就好自为之吧

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

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

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

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

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

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

## 再次骨折

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

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

## 暂停更新

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

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

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

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

## 吐槽

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

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

好吧，不吐槽了，睡觉。

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

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

转眼又到了开学季，这一年也就要进入尾声了，今年的计划都实现了吗？

## 回忆

这一年过的稀里糊涂的，我这个人做事没什么计划，想到哪里就开始做，写代码也是没什么计划，想到哪里就写哪里。偶尔看到大佬们在写代码前的对于程序的构思和设计，觉得自己还是小白野路子。当然，在看过大佬们的一些博文或时教程的同时，也在逐渐修改自己学习和编码方式，虽然时业余时自学，但是模仿总是能有很大的收获的。

生活中的琐事还是断断续续的，但是在这浩瀚的互联网上说些琐事我觉得真是没什么必要，文笔表达不出来，干干巴巴的没有什么营养也没什么看点，毕竟普通人的一生都是这么的平淡。年初再次支起来的博客似乎现在也没有什么激情了，凡事不过百天，博客圈子也就那么回事吧。

博客圈子最大的缺点就是缺少共鸣，或许是这个圈子里的人确实不如平台人多，再有就是独立博客的自由更加突出的博主的个性，以自我为中心而追求他人的欣赏与关注，其优点就是更加自由。从博客聚合类抓取的文章来看，计算机信息技术文章及博客搭建部署类文章居多，当然也有一些文化素养极高的博主还在继续更新犀利个性的观点。有的时候看到这样的博主也是默默的关注。

## 年底计划

继续JavaScript全栈的实践与学习，同时深入的学习blender节点材质、几何节点、渲染。哦对了，还得考个驾照，后边这几个月看来还挺忙活人的。还要把之前买的好几本读了一半就扔那的书读完，读书、学习这事不能扔，否则断了在捡起来就会很麻烦，搞不好还得从头再来。

转眼又到了开学季，这一年也就要进入尾声了，今年的计划都实现了吗？

Hello, September!

有的时候我们需要在Ubuntu系统启动的时候自动启动一些服务，例如docker的容器，该如何操作呢？

## 大佬提示

rebron1900：docker的run命令加个参数 --restart=always 就好了呀。如果是docker-compose就加在yml文件里。这个确实是一个很方便的方法，受教了。

在Docker中，docker run命令用于创建并运行一个新的容器实例。--restart=always是一个用于docker run命令的参数，它用于指定容器在退出后应该自动重新启动的策略。


## systemctl

systemctl 是一个用于管理 Systemd 系统和服务的命令行工具。Systemd 是一种系统初始化和服务管理系统，用于现代 Linux 发行版中，它负责在系统引导过程中启动系统组件和服务，同时还能够在运行时对这些服务进行管理。

启动服务：sudo systemctl start <service-name>
停止服务：sudo systemctl stop <service-name>
重启服务：sudo systemctl restart <service-name>
杀死服务进程：sudo systemctl kill <service-name>

其中：

启用服务，使其在系统启动时自动运行：sudo systemctl enable <service-name>
禁用服务，使其在系统启动时不自动运行：sudo systemctl disable <service-name>

这二个命令就可以设置docker的容器以系统的服务形式在开机时自动加载。

## 编写配置文件

例如我的docker的脚本：`docker-compose -f /root/wp/dc.yml up -d `使用来在开机启动wordpress，那么我们在Ubuntu中先创建一个`/etc/systemd/system/wordpress.service`的配置文件，内容如下：

    [Unit]
    Description=WordPress

    [Service]
    Type=oneshot
    ExecStart=/usr/bin/docker-compose -f /root/wp/dc.yml up -d

    [Install]
    WantedBy=multi-user.target

终端运行命令启用服务：

    sudo systemctl enable wordpress

这样下次再次开机的是由就可以启动wordpress了。

如果要禁用这个启动服务：

    sudo systemctl disable wordpress

## 总结

总体来说systemctl添加服务启动项还是很简单方便的。





有的时候我们需要在Ubuntu系统启动的时候自动启动一些服务，例如docker的容器，该如何操作呢？

Ubuntu开机自动启动Docker容器运行WordPress

前几天在虚拟机Ubuntu里安装了Docker，其实就是打算使用Docker安装MySQL和WordPress,没想到安装部署的过程非常的简单，安装部署的过程记录如下。如果打算使用一个笔记，直接docker里部署一个wordpress就可以，功能对于日常笔记日记足够使用了。

## 准备工作

首先确定系统安装了Docker,关于Docker的安装可以参考这篇：[Ubuntu 22 安装Docker过程记录](https://suiyan.cc/2023/20230730133646.html)

安装完毕之后，在Ubuntu系统下创建3个目录：`/root/mysql` `/root/wp` `root/wp/html`,这三个目录分别用来绑定保存MySQL数据、Docker的配置文件、WordPress文件目录。

一般我们都是ssh登录到服务器，所以可以先用电脑中的vscode创建一个`dc.yml`的容器配置文件：

    version: '1'

    services:
    mysql:
        image: mysql:latest
        environment:
        MYSQL_DATABASE: wordpress
        MYSQL_ROOT_PASSWORD: 密码
        ports:
        - 3306:3306
        volumes:
        - /root/mysql:/var/lib/mysql

    wordpress:
        image: wordpress:latest
        environment:
        WORDPRESS_DB_HOST: mysql
        WORDPRESS_DB_USER: root
        WORDPRESS_DB_PASSWORD: 密码
        WORDPRESS_DB_NAME: wordpress
        ports:
        - 8080:80
        volumes:
        - /root/wp/html:/var/www/html

    volumes:
    db_data:
    wordpress_data:


这个配置文件设置了一些MySQL和WordPress的初始参数，包括MySQL root的密码，并且把两个容器链接到了一起，使用前请修改`密码`。

## 安装

    scp "D:\VirtualBox VMs\dc.yml" root@192.168.0.22:/root/wp/

拷贝文件到指定的目录，上边的IP以及目录请修改成你对应的目录。

    ssh root@192.168.0.22 # 连接主机
    cd /root/wp # 进入目录
    apt-get install docker-compose #安装docker-compose，如果你没有安装的话
    docker-compose -f dc.yml up # 启动容器

等待Docker安装MySQL和WordPress，安装完毕后，在地址栏里输入：`http://192.168.0.22:8080`，就会看到WordPress的安装界面了。

![wordpress](https://suiyan.cc/assets/images/2023/wp.png)

## 总结

    docker-compose -f dc.yml up -d # 后台启动
    docker-compose -f dc.yml down # 关闭当前的容器

程序的数据分别保存在对应的目录数据卷中，即使重新安装新建容器，只要指定之前的数据目录，就会数据持久化了不会丢失。





前几天在虚拟机Ubuntu里安装了Docker，其实就是打算使用Docker安装MySQL和WordPress,没想到安装部署的过程非常的简单，安装部署的过程记录如下。

Docker 简单快速安装部署WordPress


Docker下安装MySQL5.7过程记录。

## 安装及使用

1. 下载:

        docker pull mysql:5.7

2. 通过docker run 创建一个容器，并绑定端口及数据卷：

        docker run -d --name mysql -e MYSQL_ROOT_PASSWORD=my-secret-pw -p 3306:3306 -v /path/on/host:/var/lib/mysql mysql:5.7

`my-secret-pw`，改成你root的密码，然后绑定端口和数据卷即可。

3. 登录MySQL

        docker exec -it mysql mysql -uroot -p

此时，会让你输入MySQL的root密码进行登录。

4. 退出

在MySQL命令行下输入`quit`，即可退出MySQL的命令行模式。

5. 停止和删除docker的MySQL

        docker stop mysql
        docker rm mysql


## 总结

如果不是root账号请在命令前添加`sudo`。

Docker下安装MySQL

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

## 吃碘盐能防辐射？

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

## 人言可畏

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

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

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

今天，女儿看到我在浏览我的博客页面，她喵了一眼说到：你博客现在的界面没有之前的“老年跑马灯好看”，我愣了一下，好，那咱就换回去！

## shields.io

把之前的暗黑风格又拾到了一下又换上了，觉得底部还是优点不够板正，顺带这也收拾了，有两个文字的地址，呼的一下载想起有种小图标挺好看，是啥还想不起来了，后来翻了之前的一些页面终于在收藏夹里找到了：shields.io 一个简洁、一致、清晰的徽章。

## 安装及使用

登录shields.io，然后就能可以使用他的在线生成图标的功能了，目前现在市面上的长条方形的小图标都是出自这里了，这个网站提供很多类型的图表底图，可以根据需求设置背景颜色，而且他还准备了大量的模板，可以直接套用，非常方便，具体效果：

<a href="https://github.com/bosichong/suiyan" target="_blank">
          <img class="w-auto" alt="suiyan.cc" src="https://img.shields.io/badge/SuiYan-%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E7%94%9F%E6%88%90%E5%99%A8-green">
  </a>

## 总结

如果有软件制作需要一些图标来标明依赖和版本信息的时候，shields就可以出场了，看起来会更专业些。

今天，女儿看到我在浏览我的博客页面，她喵了一眼说到：你博客现在的界面没有之前的“老年跑马灯好看”，我愣了一下，好，那咱就换回去！

shields.io 一个简洁、一致、清晰的徽章

虚拟机中装了个Ubuntu，使用非root登录总是需要sudo,好麻烦的一说，查了一下如何启用root的ssh登录便修改了，这里记录一下操作过程。

## 修改root的密码

    bosi@kk:~$ sudo passwd root
    [sudo] password for bosi:
    New password:
    Retype new password:
    passwd: password updated successfully

先输入密码，后两次输入root的新密码。

## 修改配置文件时root可以ssh登录

    sudo vim /etc/ssh/sshd_config

Ubuntu 22 打开后可以直接添加：

    PermitRootLogin yes

保存退出

重启服务：

    sudo service ssh restart

OK！可以试试了，root应该可以登录ssh了.



虚拟机中装了个Ubuntu，使用非root登录总是需要sudo,好麻烦的一说，查了一下如何启用root的ssh登录便修改了，这里记录一下操作过程。

Ubuntu下使用root登录ssh的设置


国内连接GitHub的速度真是喜人，所以测试GitHub Actions总是再重复的push连接失败中煎熬，好在最后实践通过了，记录一下这里的坑。

## Actions代码

GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的 .github/workflows目录中，这里复制使用的一位前辈的代码，除了修改了pnpm的版本意外，其他基本上没有修改，代码如下：

    name: Actions CI - Next.js version 12 static site export, GitHub Actions Build and Deploy
    on:
    push:
        branches: [ master ]
    # 执行的一项或  多项任务
    jobs:
    build-and-deploy:
        # 运行在虚拟机环境ubuntu-latest
        # https://docs.github.com/zh/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idruns-on
        runs-on: ubuntu-latest
        steps:
        - name: 获取源码  🛎️
            uses: actions/checkout@v3
        - name: Node环境版本 🗜️
            uses: actions/setup-node@v3
            with:
            node-version: 18
        - name: 安装 Pnpm 🧬
            uses: pnpm/action-setup@v2
            id: pnpm-install
            with:
            version: 8
            run_install: true
        - name: 安装依赖 ⚙️
            run: pnpm install
        - name: 打包 🏗️
            run: |
            npm run build
            touch out/.nojekyll
        - name: 部署 🚀
            uses: JamesIves/github-pages-deploy-action@v4
            with:
            branch: gh-pages
            folder: out
            clean: true


目前来说，这段代码简洁而且过程清晰，如果有特别的要求可以按自己的需求修改。

## 一些坑

1. 权限问题

    Error: The deploy step encountered an error: The process '/usr/bin/git' failed with exit code "128"  ❌ Notice: Deployment failed! ❌

基本上都动作通过了，突然出现这个128，其实是权限问题，解决方法：

[点击查看](https://github.com/actions/checkout/issues/417#issuecomment-1427951779)

![博客名称](https://suiyan.cc/assets/images/2023/git128.webp)

2. Next项目的静态文件资源地址正确，却无法打开显示404，修改方法：静态文件的根目录添加`.nojekyll`的空文件即可。
3. 如果项目保存再域名的下一级目录，可以考虑在next的配置文件中添加：


        #next.config.js
        
        basePath: '/目录名称',


##  总结

其实很简单，但是测试的时候由于网速问题造成的很费时间，所以调试的时候尽量要看仔细哈。


相关连接：

[测试项目地址，包含所有代码](https://github.com/bosichong/githubactionstest)

[使用 GitHub Actions 构建、部署 Next.js 并将其托管到 GitHub Pages](https://juejin.cn/post/7220410343649624121)

国内连接GitHub的速度真是喜人，所以测试GitHub Actions总是再重复的push连接失败中煎熬，好在最后实践通过了，记录一下这里的坑。

GitHub Actions 构建、部署 Next.js项目

自从回归Windows之后，总感觉用着chrome不是很爽，偶然的一次试了edge发现打开的速度真是不错，日常的调试也是可以替代chrome，索性就换成edge了。

## 回忆

其实使用chrome和edge区别不大，他们内核一样但功能却各不相同，相比较safari就显得有些格格不入，safari唯一的优点可能就是移动设备用起来省电吧。

绕了半天，我想说啥来着？不管是chrome还是edge、火狐、OP，这些公司的浏览器，几乎都没有什么广告，这和国内的厂商再制作软件上的理念大不相同，老外再软件上的竞争是良性的，或许是我没看到吧，但是至少不想3Q大战那样惊心动魄你死我活的，还没脸的要用户二选一。

## 未来

国内开发者最近因为app需要备案反响很大意见很多，想起当年个人网站都需要ICP备案的时候，网站成批的倒下了，因噎废食表现的淋漓尽致。国内的开发者哪个没违法？去过GitHub吧？科学上网？那些其实都是违法的，呜呼悲哉！其实大部分网名都还是好人啊。

自从回归Windows之后，总感觉用着chrome不是很爽，偶然的一次试了edge发现打开的速度真是不错，日常的调试也是可以替代chrome，索性就换成edge了。

我又用回了"IE"--edge

之前使用VMware Workstation Pro 17 安装了Ubuntu 22 server版，但是每次启动Ubuntu都会很卡，遂更换成VirtualBox-7.0.10-158379-Win，启动一切正常了，这里记录一下设置Ubuntu server固定IP的方法。

## 设置方法

打开网卡的配置文件:

    sudo vim /etc/netplan/00-installer-config.yaml

如果在系统中没有 00-installer-config.yaml 文件，可能是因为网络配置文件的名称不同。在较新的 Ubuntu 版本中，Netplan 已成为网络配置的首选工具，因此文件名可能会有所不同。确保根据实际情况修改文件名。

编辑修改内容如下：

    network:
    ethernets:
        enp0s3:  # 网络接口的名称可能会有所不同
        dhcp4: false
        addresses: [192.168.1.10/24]  # 根据您的网络进行调整
        gateway4: 192.168.1.1
        nameservers:
            addresses: [8.8.8.8, 8.8.4.4]  # 可以使用谷歌的 DNS 服务器
    version: 2

保存退出，并刷新网络。

    sudo netplan apply

查看IP

    ip a

大功告成！






之前使用VMware Workstation Pro 17 安装了Ubuntu 22 server版，但是每次启动Ubuntu都会很卡，遂更换成VirtualBox-7.0.10-158379-Win，启动一切正常了，这里记录一下设置Ubuntu server固定IP的方法。的简介

ubuntu-22-live-server 设置固定IP

next项目部署GitHub pages有两个小坑，今天就来说到说到。

## 坑一 静态资源地址

当你build打包了静态资源之后，你会push到你的GitHub仓库中，这个时候你会发现只有index.html可以打开，其他的静态资源统统404找不到地址，查看代码发现静态资源的地址都是错误的，例如你线上的正确地址是：`<script defer="" nomodule="" src="/favorites/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script>`，因为你的仓库名称:`favorites`，所以只有添加了`/favorites`的前缀才会打开，但是实际上传之后地址是:`/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js`，少了`/favorites`,就会造成资源的404状态。

解决办法：

在next的配置文件中添加：

    # next.config.js
    basePath: '/favorites',

给你的静态资源添加一个前缀就好了，然后重新编译打包，再次push到仓库，结果你会发现你的地址已经完全正确了！甚至通过浏览器的工具查看了请求地址，绝对是没有问题的，但是......

## 坑二 _惹的祸

通过浏览器的工具查看了静态资源的请求地址，绝对是没有问题的，但是依然是404，你仰天长啸：卧槽，这是见鬼了么？

这世界没有鬼，如果看似正确的事情却出现了不正常的现象，那么就一定是有人在捣鬼！没错，是GitHub搞得鬼！GitHub的静态页面服务竟然不支持`_`这个符号，也就是说`/_next/static/chunks/XXXX`这个地址是无法识别的，所以才会出现404这个鬼！那么结局的办法是：

在你的 Next.js 项目中，你可以通过在构建脚本中添加一些自定义操作来实现在输出目录（例如 out 目录）中自动生成一个 `.nojekyll` 文件。这样做可以确保在部署到 GitHub Pages 时，静态资源能够正确地被访问，而不会受到 Jekyll 处理的影响。

你可以建一个脚本，每次打包的时候都自动生成一个`.nojekyll`的空文件在out目录中，这样就解决了！再次push GitHub仓库，一切正常了

##  总结

真是见鬼了！

next项目部署GitHub pages有两个小坑，今天就来说到说到。

Next项目部署GitHub pages的一些坑

终于开始拾到我的收藏夹了...从头到尾逐一测试筛查，去除了一些404和过时的内容，整理了两个小时左右终于搞定了！

## 很闲？

额，忘了截图了，原来的收藏夹乱的狠，点开收藏可以满屏而且杂乱无序，有的时候找个东西也是很不方便，而且很多网址失效打不开太影响效率了！前几天看到别人用了网址导航不错，自己也痒痒的要搞个玩，但是看了一下网址导航的程序都好专业，咱就一个自用型，也用不上那么多的功能呢，算了还是自己动手写吧。

要不先看看效果：

[我的收藏夹](https://suiyan.cc/favorites/)

## 网址导航的设计构思

这么多的网址不可能一个一个的复制然后加入到静态页面去，所以先模拟数据设计好前端的dom结构，然后导出自己的收藏夹为HTML，使用python写了一个脚本，将收藏夹的HTML解析并生成JavaScript的对象，这样就可以直接使用这个对象在next项目中加载数据了，然后打包编译，上传到GitHub，大功告成！

## 遇到的坑

再写python的脚本的时候差点放弃了，因为导出的收藏夹的HTML结构很特殊，与普通网页的HTML不一样，所以解析的时候总是出错，中间竟然放弃了，决定手动组装JavaScript对象，但是复制粘贴了半个小时就累的不行，回头继续写脚本，后来求助与AI，调试了半个多小时，终于解析出来了，生成了JavaScript的对象。

在上传GitHub pages时候也遇到了问题，由于GitHub pages 对静态文件目录识别的特别性，导致无法正确的加载静态资源，后来修改了next的配置文件，增加了一个静态资源前缀的配置项，还添加了一个空文件：`.nojekyll`才解决的了一些资源加载的问题，明天总结一下这些坑。

至此，终于搞定了这个网址导航......，看给我闲的！

终于开始拾到我的收藏夹了...从头到尾逐一测试筛查，去除了一些404和过时的内容，整理了两个小时左右终于搞定了！

整理了一个下午的收藏夹......

使用next撸了一个极简的网址导航，本打算是用来测试GitHub actions用的，但是build都成功了，部署到GitHub pages又卡住了，访问GitHub本来就是很慢，调试起来就麻烦，算了，GitHub actions又从入门到放弃了。

## 关于这个暑假

这个暑假很忙，开学孩子就上六年级了，提前陪孩子预习初中的英语和数学，哎呀数学和英语单词都忘了妥妥的还给了体育老师，还好现在只要你想学，互联网可以给你任何你想学的课程，买了些书和资料配合视频教程，孩子看着学习我在边上陪着，偶尔也跟着做些题，还好，孩子预习初中的数学和英语还是有很大的收获的。

## 关于编程的学习

前端的学习有了些进步，切换vue到react再到next，感觉我学习的进度时赶不上前端的发展速度的，又买了几本书有next和python的，继续深入的学习和实践，编程这东西还就是得多动手练习。

## 写了一个导航

写了一个简单的网址导航，打算把自己收藏的网址整理一下，实在的太多了收藏夹也是乱套，把没用的失效的剔除，把有用的归类整理，估计得整理几天，整完发布。

使用next撸了一个极简的网址导航，本打算是用来测试GitHub actions用的，但是build都成功了，部署到GitHub pages又卡住了