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

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

MarsCode是什么？

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

## 安装MarsCode

安装方法：

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

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


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


也支持WebStorm等IDE。

## 总结

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

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

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


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

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

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

## 提示词

下边这些提示词：

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

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

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

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

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

## 总结

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

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




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

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


## 为什么选择Chatbox + Ollama

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

### Ollama的安装与配置

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

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


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

    ollama --version

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

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


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

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

    ollama run deepseek-r1:14b


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

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

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



## Ollama 常用命令

基本命令

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

常用命令

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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


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

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

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

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

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


测试与总结

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


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

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


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

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


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

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

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

DeepSeek官方暂时恢复了访问



官方公告原文：

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


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

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

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


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

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


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

## 对比豆包

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

## 对比Kimi

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

## DeepSeek-R1

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

## 总结

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

目前我的AI使用率排行：

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

国外: Gemini > chatGpt > 其他







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

DeepSeek的一些使用感受


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

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

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

## 解决方法

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


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

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

编辑系统的 Path 变量：

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

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

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

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

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

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


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


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


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


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

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

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

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

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

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

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

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


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

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

## 一、MarsCode 的卓越功能

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

```
from flask import jsonify

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

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

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

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

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

```
import unittest

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 二、便捷的安装教程

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

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

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

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


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

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



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

## 1. MarsCode

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

## 回忆

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

## 情怀

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

## 愿景与价值观

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

## 不足

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

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

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


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

## 硅谷钢铁侠

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

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


## 21天阅读挑战

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

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

## 天才与疯子

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


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

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


## 回忆

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

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

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

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

看了下APP使用时长：

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

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

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

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

## 改变

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

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

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

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

## 展望

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

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


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

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


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

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

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

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


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

阅读随感


## 你有遗憾吗？

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

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



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

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

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



## 写中年，中年咋写？

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



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

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


## 你孤独吗？

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


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

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


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

你有遗憾吗？


## 起因

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

## 基础方法

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

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

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

## 深挖

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


## 单一职责

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

## PDCA

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

## 写作模版

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

## 总结

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

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



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

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


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

## 分析

如果你事直接复制的代码

    data-theme="preferred_color_scheme"

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

## 编写代码

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

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

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




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

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

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

## giscus 安装与配置


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

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

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

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

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


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

## 一些回忆

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


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

## 对比Vue

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

## 随感

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

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



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

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


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

## 一、项目构建构思

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

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

## 二、项目创建过程

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

    然后进入项目目录：


        cd todo-app-with-edit


2. 安装 Tailwind CSS：

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


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


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


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


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



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


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

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

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

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

        export default TaskInput;


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

        import React, { useState } from 'react';

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

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

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

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

        export default TaskItem;


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

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

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

        export default TaskList;


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


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

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

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

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

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

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

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

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

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

    export default HomePage;



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

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

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

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

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

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

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

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

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

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

## 安装clipboard.js

    npm install clipboard --save

## react中使用

首先还是dom的绑定：

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

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

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

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

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

        e.clearSelection();
    });

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

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


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

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

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

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

## 问题重现

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

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

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

## 解决方法

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

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


    npm install dompurify

或者

    pnpm install dompurify

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


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

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

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


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

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

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

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

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

## 问题现场

安装引入：

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

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

## 解决问题

修改代码如下：


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

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

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



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

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

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

## 事故现场


    import { useState, useEffect } from "react";

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

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

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

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

    export default App;


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

## 解决方法

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

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

修改如下：


    <App />

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

## 相关链接

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

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


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

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

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

## create react

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

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

##  Material UI installation

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

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

也可以使用:

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


安装字体：

    npm install @fontsource/roboto

或：

    pnpm i @fontsource/roboto

安装icons:

    npm install @mui/icons-material

或:

    pnpm i @mui/icons-material

修改`src/index.jsx`:

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

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

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

    export default App


终端运行：

    pnpm i

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

    pnpm run dev


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

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

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

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

效果如下：

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

## 环境搭建

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

## 编写ToDo

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

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

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


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

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


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

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

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

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



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

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

    /**
    * 按回车添加待办事项
    * @param {input 键盘事件} e 
    */
    function keyReturn(e) {
        if (e.keyCode === 13) {
        addToDo();
        }
    }

    /**
    * 移除ToDo
    */
    function removeToDo(id) {
        setTodos(todos.filter((t) => t.id !== id));
    }

    /**
    * 更新ToDo
    */
    function renewToDo(id, ck) {
        let newTodos = todos.map((t) =>
        t.id === id ? { ...t, done: ck === true ? true : false } : t
        );
        setTodos(newTodos);
    }

    // 处理按钮点击事件
    const handleDisplayOption = (option) => {
        setDisplayOption(option);
    };

    // 根据选项过滤待办事项
    const filteredTodos = todos.filter((todo) => {
        if (displayOption === "completed") {
        return todo.done;
        } else if (displayOption === "incomplete") {
        return !todo.done;
        } else {
        return true; // 显示所有事项
        }
    });

    return (
        <div className="container mx-auto max-w-xl p-4">
        <h1 className="text-3xl">ToDos</h1>
        <div>
            本项目依赖:
            <a className="link" src="https://react.docschina.org/" target="_blank">
            React
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Vite
            </a>
            +
            <a className="link" src="https://cn.vitejs.dev/" target="_blank">
            Tailwind CSS
            </a>
            +
            <a
            className="link"
            src="https://daisyui.com/docs/install/"
            target="_blank"
            >
            daisyUI
            </a>
        </div>
        <div className="p-4">
            <input
            value={newtodo}
            onChange={(e) => setNewTodo(e.target.value)}
            onKeyDown={(e) => {
                keyReturn(e);
            }}
            type="text"
            placeholder="输入代办事项后，按回车添加。"
            className="input input-bordered w-full input-md max-w-xs"
            />
            <button className="btn mx-4" onClick={addToDo}>
            添加代办事项
            </button>
        </div>
        <ul>
            {filteredTodos.map((todo) => (
            <li key={todo.id} className="flex gap-2">
                <div>
                <input
                    onChange={(e) => renewToDo(todo.id, e.target.checked)}
                    type="checkbox"
                    checked={todo.done}
                    className="checkbox"
                    id={"todo" + todo.id}
                />
                <label
                    className={todo.done ? "line-through" : ""}
                    htmlFor={"todo" + todo.id}
                >
                    {todo.id} - {todo.content}{" "}
                </label>
                </div>

                <button onClick={() => removeToDo(todo.id)} className="btn btn-sm">
                X
                </button>
            </li>
            ))}
        </ul>

        <div className="flex gap-2 mt-2">
            <button onClick={() => handleDisplayOption("all")} className="btn">
            显示所有
            </button>
            <button
            onClick={() => handleDisplayOption("completed")}
            className="btn"
            >
            已完成
            </button>
            <button
            onClick={() => handleDisplayOption("incomplete")}
            className="btn"
            >
            未完成
            </button>
        </div>
        <footer class="footer items-center p-4 text-neutral-content">
            <div class="items-center grid-flow-col">
            <svg
                width="36"
                height="36"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
                fill-rule="evenodd"
                clip-rule="evenodd"
                class="fill-current"
            >
                <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
            </svg>
            <p>Copyright © 2023 - All right reserved</p> <a className="link link-accent" src="https://suiyan.cc">My blog</a>
            </div>
        </footer>
        </div>
    );
    }

    export default App;


## 总结

程序并没有做数据的持久保存，可以使用浏览器API：localStorage来保存待办事项的数组，这样下次打开浏览器就会显示之前保存的数据了,代码中已经更新添加了使用localStorage存储待办事项的存储代码。

另外，通过ToDo这个小项目分别使用vue和react编写，也算是对两大框架有了入门级的体验，总体来说，vue在学习过程中上手更为简单，适合从未接触过这类框架的新手来学习，如果你有不错的JavaScript和前端项目的编写经验，我还是推荐使用react，react更接近原生的写法，虽然没有太多的语法糖，但是兼容更简单，react官方文档写的太死板了，对新手不太友好，总之，这二个都是非常不错的前端框架，都值得去学习去使用。

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

使用React+Vite+TailwindCSS+daisyUI打造一个简单的ToDos

TailWindCSS本质上是一个工具集，包含了大量类似 flex、 pt-4、 text-center 以及 rotate-90 等工具类，可以组合使用并直接在 HTML 代码上实现任何 UI 设计。Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。

daisyUI最流行的TailwindCSS组件库，包含了一些常见的web组件，使用方便，结合TailwindCSS使用更是丝滑流畅。

## 安装TailwindCSS

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

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

进入目录后：安装TailwindCSS并初始化：

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

初始化之后会发现`tailwind.config.js`，打开修改文件内容如下：

    /** @type {import('tailwindcss').Config} */
    export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    }

并在 `./src/index.css`中添加：

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

## 配置daisyUI

安装 daisyUI:

    npm i -D daisyui@latest

然后，在你的tailwind.config.js文件里追加 daisyUI 的设置:

    module.exports = {
    //...
    plugins: [require("daisyui")],
    }


## 运行调试


    npm run dev

修改`app.jsx`添加一些daisyUI的组件进行测试:

    <>
        <button className="btn">Button</button>
        <button className="btn btn-neutral">Neutral</button>
        <button className="btn btn-primary">Button</button>
        <button className="btn btn-secondary">Button</button>
        <button className="btn btn-accent">Button</button>
        <button className="btn btn-ghost">Button</button>
        <button className="btn btn-link">Button</button>

      <p className = "bt-4">
        tailwindCSS and daisyUI
      </p>
    </>

如果可以正常预览到daisyUI按钮，还有`bt-4`也实现了TailwindCSS，那么，恭喜你，React+TailwindCSS+daisyUI开发环境已经搭建好了。

一步一步的快速搭建前端React+TailwindCSS+daisyUI开发环境

前端React+TailwindCSS+daisyUI开发环境的快速搭建

今天闲来无事，打算创建一个react的项目玩玩，但是发现使用`npx create-react-app`无法创建react项目，如果添加sudo前缀，虽能创建，但是无法修改项目中的文件，这可奇了个怪了？！

## 问题现场

之前可是没有这个问题的，创建react项目没有遇到过任何问题，回忆造成这种情况的原因唯一的可能性就是因为升级了macOS系统的版本，难道升级系统版本还是造成某些目录的权限丢失？

`npx create-react-app`之后，若是没有使用`sudo`则会因为没有写入权限创建失败，若使用了`sudo npx create-react-app`,虽能创建项目并运行，但是运行后会报错，并且无法修改任何文件，提示没有权限，IDE会只能提示让你输入管理密码后可以修改，这个可就不爽了，而且程序自动执行写入文件，一定会报错。

## 解决方法

后来，看到有个错误提示中有段让运行：

    sudo chown -R 501:20 "/Users/J.sky/.npm"

然后我就运行了一下，问题就解决了。其原因是因为`.npm`目录没有写入权限，手动修改一下就好了，如果你也有这个问题，可以试试看：

    sudo chown -R 501:20 "/Users/「你的macOS用户名」/.npm"

把「你的macOS用户名」换成：J.sky(我的用户名，这里换成你的假如是Tom):

    sudo chown -R 501:20 "/Users/Tom/.npm"

运行，输入密码后，就可以解决了，之后使用`npx create-react-app`就和以前一样了。

今天闲来无事，打算创建一个react的项目玩玩，但是发现使用`npx create-react-app`无法创建react项目，如果添加sudo前缀，虽能创建，但是无法修改项目中的文件，这可奇了个怪了？！

macOS npx create-react-app 创建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% 安全的，因此我们建议您在分享敏感信息时始终小心。

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

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

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



## 起因

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

## 荒废

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


## 偶然

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

## 觉醒

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


## flag

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

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

## 自律，坚持，努力

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

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

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

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




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

放下抖音，重构我的2025


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

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


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

## Lucy

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


## 成长与陪伴

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


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


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


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


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


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


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


## 简单并快乐


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




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

Lucy是一只优秀的陪伴犬


## 期待一场鹅毛大雪

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

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

这不，带着孩子跑了一天的医院，连续咳嗽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混混沌沌的一年

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

## 关于这个暑假

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

## 关于编程的学习

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

## 写了一个导航

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

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

短暂而忙碌的暑假即将谢幕

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

## 博客圈子其实很小

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

## 坚持写博客的收获

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

## 发现宝藏

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

强烈推荐一下博客：

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

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

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

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

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

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


## 还有点时间

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

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

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


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

![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引用模式导致很多功能无法继续开发，所以长痛不如短痛，我决定进行重构！

博客程序重构回忆录


## 简介

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




在本文中，我们将介绍如何使用 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


国内连接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项目

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的一些坑

断断续续花了几个小时的时间，我成功地使用了 Next.js 复刻了我的博客的全部功能，真是事半功倍啊！

## 效率至上

我之前尝试过使用不同的编程语言和框架编写过几个版本的博客，但从未有过像使用 Next.js 这样的体验！首先，依赖减少了，整个程序的代码量大幅减少，打包和编译过程自动化，大大减少了错误的发生。后续还能充分利用丰富的 JavaScript 相关库，添加新功能比以往更加简单。

之前采用的是 Python + Jinja2 处理后端输出的格式化数据，与 Jinja2 模板引擎协作输出静态页面。但由于需要将 Python 转成 JSON，有时需要编写繁琐的算法。再加上前后端静态化没有分离，前端的打包和编译没有机会参与，导致前端开发仍然采用老旧的方式，感觉受限。而这次使用 Next.js 后，重构博客的感觉就像是在使用原生的 JavaScript + React 编写静态 HTML，而且基于 React 的框架和库非常丰富，未来进行扩展会更加方便。

## 持续编写

在功能复刻完成后，接下来是样式的复刻。虽然可能会进行一些小小的改动，但变动不会太大。我计划将友联和关于页面单独拎出来重新设计，幸运的是，现在使用 Tailwind 修改样式非常便捷。对于友联页面，我考虑添加友联博客的 RSS 文章列表，这样就不必一个个去点开，直接查看友联的最新博文会更加方便。

## 展望未来

通过这次使用 Next.js 的编写经验，我有信心未来会继续开发一些有趣的小项目。之前一直希望能够利用 React 开发一些东西，而现在有了 Next.js，我的思路更加开阔了。毫无疑问，从 Vue 转向 React 是一个明智的选择。

断断续续花了几个小时的时间，我成功地使用了 Next.js 复刻了我的博客的全部功能，真是事半功倍啊！

仅用了几个小时就使用next.js重构博客的所有功能

手痒，又想重构博客了。博客的1.0使用的是Django，2.0使用的是JavaScript。3.0使用的python生成的静态页面，目前正在考虑使用Next.js重构现有博客。

## 为什么是Next.js

之前一直使用python作为主要的编程语言，编写了第一个版本的博客，大约使用了三年，缺点：部署和更新起来比较麻烦。后来使用python生成静态的HTML，但是前端修改起来还是不太方便，后来考虑使用react写成SPA+Ajax加载模式，可以解决前端打包编译优化的痛点，但是Ajax的缺点是不利于SEO，随着最近JavaScript的学习和技术推进，终于摸到了Next.js，原来Next.js这么强大和简单，从vue过渡到react，一直想有一种可以直接静态化站点的框架，这次Next.js终于可以入手了。

## 搭建Next.js博客的框架

创建博客项目，终端运行`pnpm create next-app 项目名称`：

    D:\code\next> pnpm create next-app suiyan
    ../../.pnpm-store/v3/tmp/dlx-3784        |   +1 +
    Packages are hard linked from the content-addressable store to the virtual store.
    Content-addressable store is at: D:\.pnpm-store\v3
    Virtual store is at:             ../../.pnpm-store/v3/tmp/dlx-3784/node_modules/.pnpm
    ../../.pnpm-store/v3/tmp/dlx-3784        | Progress: resolved 1, reused 1, downloaded 0, added 1, done
    √ Would you like to use TypeScript? ... No / Yes
    √ Would you like to use ESLint? ... No / Yes
    √ Would you like to use Tailwind CSS? ... No / Yes
    √ Would you like to use `src/` directory? ... No / Yes
    √ Would you like to use App Router? (recommended) ... No / Yes
    √ Would you like to customize the default import alias? ... No / Yes
    Creating a new Next.js app in D:\code\next\suiyan.

    Using pnpm.

    Initializing project with template: default-tw


    Installing dependencies:
    - react
    - react-dom
    - next
    - tailwindcss
    - postcss
    - autoprefixer
    - eslint
    - eslint-config-next

    Packages: +303
    ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    Packages are hard linked from the content-addressable store to the virtual store.
    Content-addressable store is at: D:\.pnpm-store\v3
    Virtual store is at:             node_modules/.pnpm
    Progress: resolved 312, reused 303, downloaded 0, added 303, done

    dependencies:
    + autoprefixer 10.4.14
    + eslint 8.46.0
    + eslint-config-next 13.4.13
    + next 13.4.13
    + postcss 8.4.27
    + react 18.2.0
    + react-dom 18.2.0
    + tailwindcss 3.3.3

    Done in 16.5s
    Initialized a git repository.

    Success! Created suiyan at D:\code\next\suiyan

pnpm的好处这里就不再详细解释了，简单来说就是节省时间和硬盘空间，和rarn差不多一样吧，搞前端应该都知道。

进入suiyan目录，运行：

    PS D:\code\next> cd suiyan
    PS D:\code\next\suiyan> npm run dev
    > suiyan@0.1.0 dev
    > next dev

打开http://localhost:3000就会看到站点的首页了。我们修改`suiyan\pages\index.js`中的内容，保存后就会发现预览的首页也跟着变化了。至此，基于next.js博客项目就搭建完成了。

## 博客页面的生成

1. 博客的博文页面，这个可以根据articles目录下.md文档自动生成相关的博文页面，`npm install gray-matter`,用来解析.md文档中的元数据。
2. 博客的首页、标签、归档、页面的数据来源于所有.md文档的数据统计。
3. layout中添加页面中的导航页尾等一些固定的元素，使用react的上下文固定一些常用的信息避免重复计算。
4. 关于博文导航的分页（正在研究）
5. 修改"build": "next build && next export",可以生成静态的HTML页面，是全站静态化。


## 使用next.js搭建博客的优点

1. 前端调试极为方便，可以引入自己喜欢的前端UI库，打包压缩等都已经自动化了，不用再去考虑这些。
2. 精简压缩了页面的JavaScript代码，打开页面速度快，seo友好。
3. 各种依赖的插件和库很多，方便添加更多的功能。


## 总结

是否要会更换最新的博客，取决与代码编写的进度和功能的实现，我个人还是很期待的，但是next.js的编写经验还是很少，几乎为零，另外也不知道静态页面的生成速度如何，据说编译器是rust编写的速度很快，看样子可以一战。先试试再说了。


手痒，又想重构博客了。博客的1.0使用的是Django，2.0使用的是JavaScript。3.0使用的python生成的静态页面，目前正在考虑使用Next.js重构现有博客。

关于使用Next.js重构博客构思的记录



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


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

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

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

## 继续写下去的动力

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

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

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

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

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


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

## 自己挖坑自己填

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

## 性能优化的细节

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

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

## 一些取舍

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

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

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

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

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

昨天晚上登录了google Search Console，就看到站内留言，内容大致是：展开合作 展开合作 我们正在验证您对核心网页指标问题。额？我犯了什么错误？

## 起因

google核心网页指标是什么？简单来说，你的网站被收录后，google会对你的核心页面进行一个评估，这个分数是100分，当你的页面分数不足90分的时候，就会提示你改进和欠佳。这次我的问题：需要改进LCP 问题：超过了 2.5 秒（桌面设备）。至于这个LCP：Largest Contentful Paint 最大内容绘制 (LCP)，显然，我的页面绘制时间超过了google的要求。

这玩意有什么用？LCP时间过长就是打开页面加载的时间太长了！这会影响用户的首次打开体验，很有可能用户不厌其烦了，太慢了，然后就会直接关掉这个页面，google就会搜集这个信息，因为他不希望把这种页面展示给搜索结果，所以核心网页如果出现分数值偏低，google通知你修改或是欠佳，那么你的网页展现在搜索的次数会大大降低的。

那么这个数据的搜集是通过一个月的时间的平均值，这阵子我也发现了一些弊端，比如页面打开加载时间过长，跳出率太高等问题，自己对页面的打开速度都明显的不满意，这个加载打开页面慢的问题不能简简单单的怪罪于网络或是服务器，这里有很多细节需要修改，还好google提供了一些工具方便站长查找并修改问题。

## 解决

其实对现在的主题也不是很满意，主要是觉得不流畅，我一直是以为把静态页面托管于Github pages造成的，直到这次我大刀阔斧的删减很多以来之后，这页面的打开速度终于可以接受了。首先精简JavaScript的相关库类，把jQuery和其相关的库类都删除了，jq的功能实在换不掉的就用JavaScript重构了，反正必须删掉jQuery。删掉了一些效果库，删掉了图标字体库，精简了HTML、JavaScript、css的一些代码，然后发布页面，拿工具进行测试，请看结果：

![测试结果](https://suiyan.cc/assets/images/2023/pagespeed.jpg)

再这之前，我的博客页面测试分数可是很低的，感兴趣的可以拿自己的页面去测试一下，我随机挑选了友情链接里的博客，基本上都是不合格的。当然这个大家也不要看的太重，随意就好。

## 总结

对于LCP的分值如果讨论起立会有很多内容，影响分值的因素也很多，当然流畅的网络和高水平的库和框架都是非常重要的，还有就是K值太高的图片也会影响的。

可能每个博主都折腾过博客的主题，但是大多数最终都会走向一个极简畅快的主题风格，对博客主题做减法就像人生一样，抛去包袱轻装上阵或许只有经历过的人才会懂。

## 相关链接

[移动设备适合性测试](https://search.google.com/test/mobile-friendly?hl=zh_CN)

[PageSpeed Insights](https://pagespeed.web.dev/)

昨天晚上登录了google Search Console，就看到站内留言，内容大致是：展开合作 展开合作 我们正在验证您对核心网页指标问题。额？我犯了什么错误？

久了，博客主题就会一直做减法

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

## 完美主义者的痛苦

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

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

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

## 断离舍

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

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

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

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

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

## 一些收获

    只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。----Tailwind CSS
    
Tailwind CSS确实好用，如果你是那种对css有点一知半解，但又不是很深入研究的人，那么你使用Tailwind CSS会极大的提高你的开发效率，减少开发中对css编写的错误。之前没有使用是因为没有找到一个纯粹的CSS框架，大部分都是结余react和Vue封装的前端框架，而我只想使用一个Tailwind CSS封装的CSS组件框架，官方推荐的收费，免费的没有几个组件，而且都是模板，使用起来不太方便。

daisyUI正好满足了我的需求，daisyUI的有点就是，主题很多，一键切换，这点太方便了！还可以自定义主题。自带的组件，对于一个blog来说，足够用了。

## 缺点和不足

daisyUI的组件兼容性还是不行，有些组件还有明显的BUG，比如抽屉组件就有个很明显的BUG，不会自动展开抽屉，只能点击按钮打开，虽然官方自己用的解决了，但是文档里提供的代码却是有问题的，我怀疑官方使用的打包编译版，我复制了他们网站上的代码使用，发现没有问题的。还有就是弹出菜单在Apple手机的iOS浏览器上可以弹出，但不能收缩回去。这些bug也不知道什么时候能修复。

## 总结

虽然问题是有的，但是总体来说，使用这些组件和编写好的CSS样式，真是极大的提高了开发效率，感兴趣的朋友可以试试。

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

基于daisyUI Tailwind CSS做了一个博客主题

[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 生成博文页面

博客文章页面的数量可多可少，如果坚持写作，一个博客文章数目可达数百数千，对于静态博客来说，页面上的结构、css等一旦更新，所属的文章页面也需要相应的更新，所以对于页面的批量生成和更新需要更快才是最佳，这里推荐Python的异步协程文件处理方法，可以达到很不错的速度！

## 技术选择

在大批量生成页面的时候，我做了一些测试，单线程和多线程、线程池、还有异步协程，最终的测试速度在生成和保存HTML页面的操作上还是异步协程快了很多，因为IO密集型的操作异步有很大的优势。那么既然确定，就开始吧：

    import asyncio
    import aiofiles

引入依赖，aiofiles是异步的文件操作。

## 编写代码

    ct = [create_blog_html(blogdata, tagsdata, tmp, blog) for blog in blogdata]  # 列表生成式
        loop = asyncio.new_event_loop()
        loop.run_until_complete(asyncio.wait(ct))

create_blog_html()方法负责根据数据生成博文的HTML页面，创建一个列表生成式，包含了所有准备生成文章页面，调用asyncio.get_event_loop()获取事件循环对象，loop.run_until_complete(asyncio.wait(ct))用来运行事件循环，直到所有任务都完成。

create_blog_html()方法中的代码就不贴了，具体可以查看GitHub的代码仓库，地址在页面最下边哪里有。同样首页和列表页面一是采用相同的方法生成的。

## 总结

使用Python的异步大大提高了页面的生成速度，几百上千的页面瞬间就可以生成，如果不习惯异步的方式，多线程也可以的，但是速度先对来说会慢那么一丢丢的。

对于静态博客来说，对于页面的批量生成和更新需要更快的速度才是最佳，这里推荐Python的异步协程文件处理方法，可以达到很不错的速度！

使用Python编写并部署个人静态博客:(五)Python异步输出博文页面

[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 啰嗦几句

使用Python编写并部署个人静态博客这个系列写第一篇的时候这是信心满满，以为会有很多同道中人，但是发现独立博客都挺少了，自己编写并部署博客的更是少的可怜。这就好比用电饭锅做饭，难道还要自己研究怎么做电饭锅？直接使用WordPress或一些静态站点生成器不好吗？嗯，挺好的，但是我还是选择自己编写并部署自己的博客。啰嗦完毕，继续讨论技术。

## 确定博客的相关页面

首先要确定博客的相关页面，例如：首页、标签页、归档、友联等页面，确定页面的结构也就是页面上该有的元素，可以用笔在纸上画画草图，大概有个框架，然后在逐一筛选和确定，对于自己编写代码，在功能上应劲量简约实用，要考虑到静态页面的输出需要哪些方法来实现，边构思边设计，切忌盲目好大喜功或是追求极致和完美，如果这样的话，估计没等你开始编写就会失去动力了，力求极简，实现主要功能为主，并为后续留下优化和补充的路子。

## 编写相关页面的输出方法

当你确定好所需的页面和功能后，就可以开始编写输出静态页面的方法了，生成器主要负责页面的数据整理，然后发送给jinja2模板引擎负责渲染，前端配合一些CSS、avaScript库或框架来进行页面的布局和美化，不要在生成器那里输出任何页面相关的HTML代码，不然后期修改会很麻烦，只有分清工作程序，之后出现问题才会知道去哪里解决。

## 具体实现

这里以实现归档页面的生成为例，首先组织页面的数据，归档页面的数据无非就是一个数组，这个数组包含了按着年月份分组的数据，每一个数组里包含着当月的博客文章数据，以时间为归类，分别展示当月份的博文，这里只是把数据整理出发送给jinja2模板，模板才负责组织HTML。

下边是完整代码：

    def create_archives_html():
        """生成archives.html"""
        blog_data = load_blogdata_json(BLOGDATAJSON)
        config = load_configjson(CONFIGJSON)
        # 设置jinja模板
        env = Environment(loader=FileSystemLoader(os.path.join(THEME, config["theme"])))
        context = create_context()
        tmp = env.get_template("archives.html")  # 模板
        archives_html_path = os.path.join(BLOGPAGES, 'archives.html')  # 首页HTML
        # 组装archives页面的上下文数据。
        data = formatdata(blog_data)
        for k in data:
            k["num"] = len(k["data"])
        context["pages_num"] = len(blog_data)
        context["update"] = blog_data[0]["time"]
        context["archives"] = data
        context["title"] = "Archives"
        with open(archives_html_path, mode='w', encoding='utf-8') as f:
            f.write(tmp.render(**context))
        logger.info('生成archives.html成功！')

首先获得所有的博文数据，然后获取jinja2模板和博客的上下文，`data = formatdata(blog_data)`这里是根据所有博客的数据进行了一个时间排序和分组返回了一个归档数据。最后组织其他相关的上下文，结合模板输出到静态页面。

## 总结

大体上每个单独的页面都是这样生成的，而有些页面则是需要批量生成，这个留到下节再说吧，这里涉及到了Python的多线程和异步编程，之后好好聊聊。

使用Python编写并部署个人静态博客这个系列写第一篇的时候这是信心满满，以为会有很多同道中人，但是发现独立博客都挺少了，自己编写并部署博客的更是少的可怜。这就好比用电饭锅做饭，难道还要自己研究怎么做电饭锅？直接使用WordPress或一些静态站点生成器不好吗？嗯，挺好的，但是我还是选择自己编写并部署自己的博客。

使用Python编写并部署个人静态博客:(四)逐步输出静态页面


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 搜集博客数据

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b01.png)

博客的静态页面的生成都是由博客的基础数据支撑的，搜集博客的基本信息和博客文章数据，是生成博客静态文件的核心功能。

## 博客的基础配置

每个博客都会有一些最基础的配置，例如博客的名称、简介、站长的昵称头像等，我们可以把这些基础的数据设置为一个配置文件，这里我使用了JSON格式的配置文件。可以在站点的根目录下创建一个config.json，其内容格式大概如下，可以根据自己的需要添加修改。

    {
        "dev": 0,
        "blog_name": "碎言博客",
        "blog_name_en": "SuiYan",
        "blog_author": "J.sky",
        "blog_description_en": "You see see you , This one day day di.",
        "blog_typed": [
            "Life is short, you need Python",
            "人生苦短，我用Python.",
            "Beautiful is better than ugly.",
            "美丽优于丑陋.",
            "Explicit is better than implicit.",
            "直白优于含蓄.",
            "Simple is better than complex.",
            "简单优于复杂.",
            "Complex is better than complicated.",
            "复杂优于繁琐.",
            "Readability counts.",
            "可读性很重要."
        ],
        "meta_description": " Python Django JavaScript 学习讨论,我们是一群热爱Python的程序员，人生苦短，我用JavaScript！一个不会JavaScript的Python开发者不是一个好网管。",
        "meta_keywords":"Python,Django,JavaScript,程序员,人生苦短,我用Python",
        "profile_image":"assets/images/avatar.jpg",
        "blog_bg": "assets/images/bg.jpg",
        "theme": "my_blog",
        "build": "blog",
        "md_dir": "articles",
        "blog_page_num":8,
        "blog_test_url":"http://127.0.0.1:5501/",
        "blog_url":"https://suiyan.cc/",
        "blog_sns": [
            {
                "ico": "github",
                "url": "https://github.com/bosichong/suiyan"
            },
            {
                "ico": "git",
                "url": "https://gitee.com/J_Sky/suiyan"
            },
            {
                "ico": "envelope",
                "url": "mailto:285911@gmail.com"
            },
            {
                "ico": "book",
                "url": "https://www.zhihu.com/people/J_sky/activities"
            },
            {
                "ico": "rss-square",
                "url": "https://suiyan.cc/rss.xml"
            }
        ],
        "nav": [
            {
                "ico": "home",
                "text": "Home",
                "url": ""
            },
            {
                "ico": "archive",
                "text": "Archive",
                "url": "archives.html"
            },
            {
                "ico": "tags",
                "text": "Tags",
                "url": "tags.html"
            },
            {
                "ico": "user-md",
                "text": "About Me",
                "url": "aboutme.html"
            },
            {
                "ico": "link",
                "text": "Links",
                "url": "links.html"
            }
        ]

    }

然后就可以在程序的文件中组织这些最基础的配置，例如提取文件地址和内容，分配静态文件生成发布的目录等，使用一些常量来定他们，放到代码的最顶部。

    APP_CONFIG = "config_my.json"
    BASE_DIR = os.path.dirname(os.path.abspath(__file__))  # 当前目录地址
    CONFIG = load_configjson(os.path.join(BASE_DIR, APP_CONFIG))  # 获取当前配置
    BLOGPAGES = os.path.join(BASE_DIR, CONFIG["build"])  # 所有静态资源存放目录
    ARTICLES_DIR = os.path.join(BASE_DIR, CONFIG["md_dir"])  # 博文目录
    THEME = os.path.join(BASE_DIR, "theme")  # 主题目录
    CONFIGJSON = os.path.join(BASE_DIR, APP_CONFIG)
    BLOGCONFIG = os.path.join(BLOGPAGES, 'config.json')
    BLOGDATAJSON = os.path.join(BLOGPAGES, 'blog_data.json')
    SUIYANVERSION = "3.1.0"  # 程序版本

通过Python读写文件的操作，定义一个方法从磁盘上来获取config.json的内容并转化为Python的字典：

    def load_configjson(jsonpath):
        """载入blog配置文件config.json"""
        config_code = loadcode(jsonpath)
        config = json.loads(config_code)
        return config

具体的代码可以查看碎言静态博客的代码仓库，这里只介绍一些项目的架构技巧。

## 博客文章以及其他相关数据的搜集

博客的静态文件除了基础的博客信息外，还有博客的归档、分类(标签)、博客页面的数据等，这些都需要从博客文章的Markdown文件数据集中计算得出。
这里我采用了从文章目录中搜集博客文章，读取文章头部的定义内容，组织这些数据创建一个blog.json的索引，这个索引可以用来生成归档和标签页面的内容，也可以用来作为搜索的依据。

具体通过递归扫描文章目录来生成：

    def create_blogdata_json(adir):
        """
        递归获得当前目录及其子目录中所有的.md文件列表。
        并创建blog的data索引JSON
        :param adir: 文章日志所在目录
        :param bdir: 站点根目录
        :return: json字符串
        """
        data_json = []
        # 当前目录下所有的文件、子目录、子目录下的文件。
        for root, dirs, files in os.walk(adir):
            for file in files:
                # 值读取.md
                if file.endswith('.md'):
                    url = os.path.join(root, file).replace(
                        adir + os.sep, '').replace('.md', '')  # 最后需要组装的相对目录
                    furl = os.path.join(root, file)  # 当前文件的绝对目录
                    f_data = extract_md_header(furl)  # 获取.md的文章信息转成字典
                    f_data["url"] = url
                    f_data["uptime"] = get_file_modification_time(os.path.join(root, file))
                    data_json.append(f_data)  # 添加到需要返回的数据数组中

        data_json.sort(key=lambda x: x["time"], reverse=True)  # 对数组进行降序排序
        data_json_str = json.dumps(data_json, ensure_ascii=False)  # 转化为json字符串
        return data_json_str

有了这个文章数据之后，基本上就是解决了所有的静态博客文件生成依赖了。之后我们就可以编写代码，依次或是批量生成相关的页面了。

博客的静态页面的生成都是由博客的基础数据支撑的，搜集博客的基本信息和博客文章数据，是生成博客静态文件的核心功能。

使用Python编写并部署个人静态博客:(三)搜集博客数据


这是一款适合程序员的简约blog。
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![](https://suiyan.cc/assets/images/2023/coding-blog.png)


### 技术框架

主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "coding_blog",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。

本主题下载地址：

[https://github.com/bosichong/coding_blog](https://github.com/bosichong/coding_blog)

coding_blog一款适合程序员的简约博客主题。主题模板采用了jinja2的模板引擎，使用了Bootstrap 5.3 等框架，模板设计移动优先。

coding_blog 碎言静态博客主题


simple_blog是一款侧重与内容的博客主题并适配移动端。
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。
主题支持亮色和黑暗主题在线切换。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/0423-011.jpg)

### 技术框架

主题模板采用了jinja2的模板引擎，使用了pico.css样式制作。
图标：[FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)
响应式适配移动端。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "主题目录",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。



simple_blog是一款侧重与内容的博客主题并适配移动端。主题支持亮色和黑暗主题在线切换。

simple_blog 碎言静态博客主题


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

## 最简单的静态文件输出

如果您想要向HTML文件添加字符串模板，您可以使用Python的字符串格式化功能。例如，如果您想要向HTML文件添加标题：

    title = "My Title"
    html_template = "<html><head><title>{0}</title></head><body>{1}</body></html>"
    body = "<h1>hello world</h1>"
    with open("file.html", "w") as f:
        f.write(html_template.format(title, body))

在此代码中，我们定义一个名为title的变量，其值为“My Title”，以及一个名为html_template的变量，其值为"{1}"。{0}和{1}是title和body变量的占位符，分别。然后，我们定义一个名为body的变量，其值为"hello world"。最后，我们以写入模式打开文件“file.html”，并使用format()方法将格式化的字符串写入其中。运行这段脚本后会在当前目录下生成一个`file.html`文件，内容如下：

    <html><head><title>My Title</title></head><body><h1>hello world</h1></body></html>

至此，我们实现了一个简单的模板系统。

## 使用jinja2模板引擎

但是我们的站点不可能就只有一两个模板的变量，他会是由一系列的数据组成的，而且渲染的出来的HTML页面我们还需要进行布局和前端的美化，所以我们需要一个健壮的模板引擎。

> Jinja 是一个快速、富有表现力、可扩展的模板引擎。模板中的特殊占位符允许编写类似于 Python 语法的代码。然后向模板传递数据以呈现最终文档。

### 安装

    $ pip install Jinja2

通过上边的命令行，我们很容易就能安装jinja2的依赖文件。关于使用jinja2生成HTML有两个重要的步骤：
1. 组织jinja2的模板变量，也就是站点的上下文。
2. 编写jinja2的模板，这里包括模板的继承和模板的渲染，以及最后的保存输出。

### jinja2的配置

    # 设置jinja模板的所在目录
    env = Environment(loader=FileSystemLoader(os.path.join("theme")))
    context = {
        "title" : "hello",
        "body" : "world"
    }
    tmp = env.get_template("index.html")  # 获取对应的模板
    sitemap_path = os.path.join('index.html')  # 输出静态文件
    with open(sitemap_path, mode='w', encoding='utf-8') as f:
        f.write(tmp.render(**context))

这是一个最简单的jinja2模板的配置，我们所有的静态文件的输出都会使用这段代码。

### 编写jinja2模板

编写jinja2模板首先需要布局你的网站页面，先规划好博客需要的页面，因为博客的页面布局大体相同，所以要先写`layout.html`，通过模板的继承与引用来实现页面制作的分工，应避免把重复的内容写到多个页面。

### jinja2语法

jinja2的语法很简单：

1. 语句结构 {% %}
2. 变量取值 {{ }}
3.  注释 {# #}
   
输出页面的标题：

    <h1>{{ title }}</h1>

循环输出标签：

    {% for tag in tags %}
    <samll>{{ tag }}</samll>
    {% endfor %}

对于复杂的页面我们应该建立多个继承，对于固定的内容应当使用引用。

建立继承块：

    <title>{{ blog_name_en }}-{{ blog_name }}{% block title %}{% endblock %}</title>

通过继承进行修改：

    {% extends "layout.html" %}
    {% block title %}-{{ title }}{% endblock %}
    {# 此处省略了一些代码 #}

[jinja2官方文档](https://jinja.palletsprojects.com/en/3.1.x/)，这里可以查询到更多有关jinja2模板引擎的使用帮助。


## 组合到一起

通过一些列的操作，我们可以生成一些简单的HTML页面了，接下来我们来看看在Python中如何具体组织这些功能并实现他们。





实现静态页面的输出其实很简单，按着顺序来就行：搜集Markdown文件和站点配置文件->组织数据并渲染模板(jinja2)->输出HTML并保存到静态目录中。

使用Python编写并部署个人静态博客:(二)实现静态页面的输出


[使用Python编写并部署个人静态博客:(一)分析与设计](https://suiyan.cc/2023/20230410075954.html)

[使用Python编写并部署个人静态博客:(二)实现静态页面的输出](https://suiyan.cc/2023/20230420101527.html)

[使用Python编写并部署个人静态博客:(三)搜集博客数据](https://suiyan.cc/2023/20230517084718.html)

[使用Python编写并部署个人静态博客:(四)逐步输出静态页面](https://suiyan.cc/2023/20230609081842.html)

[使用Python编写并部署个人静态博客:(五)Python异步输出博文页面](https://suiyan.cc/2023/20230613193700.html)

## 什么是独立博客？

独立博客是指个人独立运营的博客，通常是由个人自己设计、开发、维护和更新的。相比于其他博客，独立博客可以自由定制，自制主题，自由评论不受平台限制等优点。

## 独立博客的特点

建立个人品牌：一个独立的博客可以帮助你建立个人品牌，展示你的专业知识和技能，增强你在技术领域的影响力和声誉。

分享知识和经验：编写技术博客可以帮助你分享自己的知识和经验，并向读者传达你的思考和观点。这不仅可以帮助他人解决问题，还可以帮助你深化自己的理解和思考。

提升写作能力：博客是一个很好的写作平台，编写技术博客可以帮助你提升写作能力，锻炼表达能力和逻辑思维能力。同时，博客的文章需要经过反复推敲和修改，也可以锻炼自己的耐心和细心。

留下成长记录：技术博客可以记录你的成长历程，留下你的学习和思考的痕迹，也可以帮助你回顾和总结过去的经验和成果。

扩大交流圈：通过技术博客，可以扩大自己的交流圈，结识更多的同行和志同道合的朋友，开拓自己的视野和思路。

## 为什么要编写并维护自己的博客？

首先，我们要明确自己的写博客的目的！我觉得写博客最大的目的就是：提升写作能力、建立自己的知识体系以及个人品牌。编写一个博客系统只是一个开端，是学习与实践的开始，而后则是漫长的博客维护创作的历程。

独立博客的实现有很多方法，目前现成的开原博客数不胜数，为什么要自己动手编写并设计博客呢？这是一次技术的实践，如果正在学习Python的路上，动手实践一个博客可以提高你的Python技术，了解对程序软件设计的流程，最主要的是你可以获得一份自由的感觉。

## 如何使用Python编写静态博客生成器？
首先我们分析需求：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b01.png)


1. 一行简单的命令生成更新所有静态文件。
2. git push github master 

通过两行命令解决博客的更新，这样做的目的可以使博主专注于写作，而不必为生成博客文章、维护服务器、维护程序而费心。

## 静态文件的生成

综上所述可以看出，处理静态文件的输出是项目的核心，我们再次细分：

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/b02.png)

到目前为止，我们的项目构建的思路基本明朗了，下一节我们就开始着手编写具体的代码来实现我们的博客生成器。

独立博客是指个人独立运营的博客，通常是由个人自己设计、开发、维护和更新的。相比于其他博客，独立博客可以自由定制，自制主题，自由评论不受平台限制等优点。

使用Python编写并部署个人静态博客:(一)分析与设计


大道至简，返璞归之，这是一款侧重与内容的博客主题
本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。
主题支持亮色和黑暗主题在线切换。

[碎言静态博客Gitee](https://gitee.com/J_Sky/suiyan)
[碎言静态博客GitHub](https://github.com/bosichong/suiyan.git)

### 效果展示

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/free_blog/001.png)

![在这里插入图片描述](https://suiyan.cc/assets/images/2023/free_blog/002.png)

### 技术框架

主题模板采用了jinja2的模板引擎，使用了pico.css样式制作。
图标：[FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)
响应式适配移动端。


### 安装教程

1. 首先克隆下载本主题到碎言静态博客程序`theme`目录下。
2. 修改配置文件 `config.json`中的"theme": "主题目录",即可启用。


### 运行预览

本地主题开发编写，推荐使用`Live Server`这个vscode得插件，非常方便。
在配置文件里修改：
"dev": 1,  # 调试模式，如果改为1，则使用"blog_test_url"来添加静态资源地址前缀，方便本地调试。

### 修改主题样式

主题采用jinja2模板引擎，在主题或是模板目录修改样式，一键生成页面，直接同步页面。
在jinja2 模板中使用`{{ 属性名称 }}`来调用。

### github pages

如何部署GitHub pages 搭建自己的博客，这里就不在详细介绍了，请参考下文。

[GitHub Pages 快速入门](https://docs.github.com/zh/pages/quickstart)

除了部署GitHub，也可以将静态文件部署到虚拟主机云服务器上，复制静态文件目录下的所有文件到你的站点目录下即可。


### 仓库地址

[GitHub](https://github.com/bosichong/suiyan_free_blog)
[Gitee](https://gitee.com/J_Sky/suiyan_free_blog)


大道至简，返璞归之，这是一款侧重与内容的博客主题,本项目为[碎言静态博客](https://github.com/bosichong/suiyan.git)主题。

free_blog 碎言静态博客主题



<a href='https://gitee.com/J_Sky/suiyan/stargazers'><img src='https://gitee.com/J_Sky/suiyan/badge/star.svg?theme=dark' alt='star'></img></a>

## 介绍
碎言这个名称取自与"碎言片语"，码兄累了吗？累了就休息一下，为未来的自己留下一些碎言片语吧。
演示： [碎言博客](http://j_sky.gitee.io/suiyan)

![](https://suiyan.cc/assets/images/fabu.png)

## 安装

首先克隆下载碎言静态博客

* [Gitee](https://gitee.com/J_Sky/suiyan.git)
* [GitHub](https://github.com/bosichong/suiyan.git)

可以通过`git clone https://gitee.com/J_Sky/suiyan.git`下载，也可以通过下载.zip压缩包下载后解压缩即可。

## 创建码云代码仓库

登录码云注册账号，然后开始创建自己的代码仓库用来存放博客的页面。

### 1. 创建

![](https://suiyan.cc/assets/images/blog/Snip20200108_1.png)

填写相关选项创建一个新的代码仓库

![](https://suiyan.cc/assets/images/blog/Snip20200108_3.png)


### 2.关联本地代码仓库

如果你对`Git`操作非常了解，可以跳过此步骤。

进入你本地博客的根目录：
先配置`Git`的基本信息

    $ git config --global user.name "你的名字或昵称"
    $ git config --global user.email "你的邮箱"

然后绑定远程代码仓库下边的仓库地址换成你刚刚建好的代码仓库的远程地址

    $ git init 
    $ git remote add origin https://gitee.com/用户个性地址/HelloGitee.git

### 3.创建你的第一篇博客

在终端进入你的本地博客目录运行

    python z.py

这个时候会打印一些关于`z.py`命令行的一些帮助信息，仔细看看可以了解一些基本操作。

未完待续



使用碎言静态博客依托码云Pages搭建自己的免费博客


## 发布了碎言静态博客的功能完整第一个版本

经过这段时间的努力，终于把博客成功的更换成了自己开发的碎言静态博客，也算是对这段时间学习JavaScript的一个总结。
后续还要继续开发维护，添加一些使用的功能，目前来说，对这个版本最大的满意就是界面的美化和网站的加载速度。
后续还会继续优化。

## 未来需要添加的功能

* 支持在线一件换肤。
* 更好的拓展功能。
* 更实用的功能。
* 吸引更多的程序员兄弟前来提交代码。

加油2020！！

经过这段时间的努力，终于把博客成功的更换成了自己开发的碎言静态博客，也算是对这段时间学习JavaScript的一个总结。

今天是个好日子发行了碎言静态博客的功能完整版


今天盯着博客的页面，就觉的少点什么？对，就是动画，一动不动的太死板了，得搞些动画，但是如果手动编写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年开心快乐每一天。




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

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



## 早有感知

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

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

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



## AI是我迷茫

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

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

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

## 人生就是在做减法

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

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

## marscode

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


## 总结

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


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

TAGS