
## 起因

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

## 基础方法

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

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

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

## 深挖

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


## 单一职责

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

## PDCA

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

## 写作模版

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

## 总结

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

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



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

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



## 起因

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

## 荒废

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


## 偶然

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

## 觉醒

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


## flag

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

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

## 自律，坚持，努力

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

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

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

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




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

放下抖音，重构我的2025


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

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

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

## 知识共享许可协议

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

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

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

## CC协议有何用途？

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


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

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

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


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

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

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

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


## 如何使用这些协议？

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


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

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

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

参考：

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

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




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

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


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

## 手动查询

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

## 使用工具分析

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

安装：

    npm install -g depcheck

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

显示：

    Unused dependencies
    * @giscus/react
    * dateformat


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

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


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

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


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

### 重构之路

### 需求与功能

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

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

#### 解决方案

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

### 框架的选择

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

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


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

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

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


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

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

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

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

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

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

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


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

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

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


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

## 核心代码

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

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

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


## 其他blog功能

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

## 关于SEO

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

## 关于评论系统

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

## 总结

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


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

博客程序重构回忆录


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

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


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

## Lucy

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


## 成长与陪伴

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


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


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


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


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


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


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


## 简单并快乐


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




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

Lucy是一只优秀的陪伴犬


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

## 安装

    npm i -D tailwindcss-motion


添加到你的tailwind.config.js：



        // tailwind.config.js

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

或者，要使用 ESM：

    import tailwindcssMotion from "tailwindcss-motion";

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


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

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

## 动画效果

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

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

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

## 总结

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


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

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


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

## Heroicons

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

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

## 总结

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


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

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




## 为啥要说这个？

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

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

## 一些想法

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


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

## 写在最后

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

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


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




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

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


## 简介

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

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


## 安装

### 创建项目

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

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

### 安装NextUI


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


### 配置 Tailwind CSS

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

### 设置 NextUIProvider

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

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


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


### 使用组件

修改`index.js`内容：


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


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


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

## 总结

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

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

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


## 期待一场鹅毛大雪

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

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

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


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

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

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

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

## 林姨的书

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

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

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

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

## 原神更新了5.3

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

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

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

对得起大家的期待，

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



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

久未见雪，满怀期待。


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

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


## 碎言博客

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

## 更新了碎言

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

## 2025年的目标

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

## 总结

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


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

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

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

其主要特点包括：

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

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

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

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

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

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

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

## 二、安装与创建

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

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

    npm install socket.io

### （二）客户端安装

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

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

### （三）创建服务器

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

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

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

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

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

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

### （四）建立连接

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

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

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

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

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

## 三、Socket 对象方法

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

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

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

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

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

### （二）断开连接

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

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

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

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

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

    socket.close();

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

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

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

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

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

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

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

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

## 四、命名空间与房间

### （一）命名空间

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

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

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

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

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

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

### （二）房间

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

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

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

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

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

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

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

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

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

## 五、Socket.IO 原理

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

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

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

请求头参数说明如下：

Request URL：请求服务端地址。

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

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

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

upgrade_mechanism：规范。

Host：服务端 hostname。

Origin：客户端 hostname:port。

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

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

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

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

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

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

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

## 六、应用与展望

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

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

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

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

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

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

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

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


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

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


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

环境要求

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

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

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

安装nvm

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

在Linux或macOS上：

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

或者使用wget：

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

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

在Windows上：

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

        nvm --version

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

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

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

        nvm install 14.17.0

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

        nvm list

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

        nvm use 14.17.0

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

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

2.  初始化npm项目：

        npm init -y

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

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

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

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

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

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

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

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


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

## 检查NPM源

终端运行：

    npm config get registry

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

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

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


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

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

## 最后

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




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

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


## 一、简介

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

## 二、使用帮助

### 安装

使用npm安装该包：

    npm install PrimaryOralMathPack

### 导入

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

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

### 使用示例

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

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

打印结果：

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

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

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

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


在上述示例中：

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

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

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

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

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

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

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

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

## 案例

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

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

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

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

PrimaryOralMathPack 小学生口算题生成器


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

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

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

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

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

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

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

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


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

## 一、项目构建构思

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

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

## 二、项目创建过程

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

    然后进入项目目录：


        cd todo-app-with-edit


2. 安装 Tailwind CSS：

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


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


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


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


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



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


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

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

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

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

        export default TaskInput;


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

        import React, { useState } from 'react';

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

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

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

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

        export default TaskItem;


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

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

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

        export default TaskList;


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


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

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

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

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

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

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

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

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

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

    export default HomePage;



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

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

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

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

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

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

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

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

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


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

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

## 一、MarsCode 的卓越功能

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

```
from flask import jsonify

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

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

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

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

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

```
import unittest

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

## 二、便捷的安装教程

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

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

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

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


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

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




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

效果展示：

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

## 一、建站构思

### （一）功能需求

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

### （二）技术选择

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


## 二、代码编写步骤


### （一）项目初始化

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

    npx create-next-app picture-gallery-app

进入项目目录：

    cd picture-gallery-app

安装 Tailwind CSS：

按照官方文档安装依赖：

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

在tailwind.config.js文件中，配置内容路径：

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

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


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

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

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

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

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


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

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

    export default HomePage;


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

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

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

    export default ImagePage;

## 三、部署到 Vercel

### （一）前期准备

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

### （二）连接 Vercel

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

### （三）配置项目

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

### （四）部署项目

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

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

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

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

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



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

## 1. MarsCode

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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



## 烦人的 GitHub 443

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

## 解决方法

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

```import subprocess
import time

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

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

if __name__ == "__main__":
    main()

```

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

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

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



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

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

## 静态相册

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

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

## 部署到vercel

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

## 总结

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

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


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

把博客从GitHub迁移到到了vercel


## ComfyUI 

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

## ComfyUI 安装的步骤

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

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

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

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

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

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

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

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

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

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

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

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

下载模型：

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

放置模型文件：

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

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

加载模型：

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

配置文本提示：

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

执行生成：

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

预览和保存：

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

4. 故障排除

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

## 总结

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





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

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


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

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

## flux.1 是什么？

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

## flux.1的硬件要求

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

## flux.1的软件环境

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

## flux.1的模型

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

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

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

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

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

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

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

## 总结

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



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

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


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

## 解决方法

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



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


blender版本为4.1X，window10.

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

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

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

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




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



## 早有感知

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

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

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


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

## 建模

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

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

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


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

## 插件

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

## 摄像机

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

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

## 快捷键

01视角的控制

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

平移视角: shift+鼠标中健

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

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

02物体的控制

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

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

新建物体:Shift+A

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

删除物体:X或者Delete

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

显示隐藏物体:Alt+H

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

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

按住Shift可以加选或者减选

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

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

0:切换摄像机的视角

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

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

+，- : 缩放微调

调用游标Pie目录:Shift+s

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

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

最大化窗口:Ctrl+空格

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

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

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

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

重要概念

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

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

blender日常使用中的一些技巧


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

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

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

## 继续写下去的动力

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

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

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

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

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



## AI是我迷茫

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

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

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

## 人生就是在做减法

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

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

## marscode

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


## 总结

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


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

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



### 琐事

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

### 编程

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

### blender

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

### 未来

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

### 最后

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

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

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


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

### 秧歌

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

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

### 博客

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

### AI

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


### 未来

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


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

秧歌、博客和AI


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

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

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


### 科目二

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

### 科目三

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

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

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

### 新手上路

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

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

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

终于熬到了新手上路


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

### 一切都将过去

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

### 报名考了驾照

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

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

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

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

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

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

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

## 再次骨折

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

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

## 暂停更新

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

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

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

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

## 吐槽

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

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

好吧，不吐槽了，睡觉。

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

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

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

## 回忆

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

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

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

## 年底计划

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

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

Hello, September!

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

## 大佬提示

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

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


## systemctl

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

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

其中：

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

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

## 编写配置文件

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

    [Unit]
    Description=WordPress

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

    [Install]
    WantedBy=multi-user.target

终端运行命令启用服务：

    sudo systemctl enable wordpress

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

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

    sudo systemctl disable wordpress

## 总结

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





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

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

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

## 准备工作

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

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

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

    version: '1'

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

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

    volumes:
    db_data:
    wordpress_data:


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

## 安装

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

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

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

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

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

## 总结

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

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





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

Docker 简单快速安装部署WordPress


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

## 安装及使用

1. 下载:

        docker pull mysql:5.7

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

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

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

3. 登录MySQL

        docker exec -it mysql mysql -uroot -p

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

4. 退出

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

5. 停止和删除docker的MySQL

        docker stop mysql
        docker rm mysql


## 总结

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

Docker下安装MySQL

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

## 吃碘盐能防辐射？

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

## 人言可畏

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

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

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

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

## shields.io

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

## 安装及使用

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

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

## 总结

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

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

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

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

## 修改root的密码

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

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

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

    sudo vim /etc/ssh/sshd_config

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

    PermitRootLogin yes

保存退出

重启服务：

    sudo service ssh restart

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



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

Ubuntu下使用root登录ssh的设置


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

## Actions代码

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

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


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

## 一些坑

1. 权限问题

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

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

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

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

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


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


##  总结

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


相关连接：

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

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

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

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

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

## 回忆

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

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

## 未来

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

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

我又用回了"IE"--edge

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

## 设置方法

打开网卡的配置文件:

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

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

编辑修改内容如下：

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

保存退出，并刷新网络。

    sudo netplan apply

查看IP

    ip a

大功告成！






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

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

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

## 坑一 静态资源地址

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

解决办法：

在next的配置文件中添加：

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

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

## 坑二 _惹的祸

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

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

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

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

##  总结

真是见鬼了！

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

Next项目部署GitHub pages的一些坑

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

## 很闲？

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

要不先看看效果：

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

## 网址导航的设计构思

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

## 遇到的坑

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

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

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

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

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

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

## 关于这个暑假

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

## 关于编程的学习

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

## 写了一个导航

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

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

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

自学编程很久了，对GitHub的使用熟练度自认为还是可以了，以前也看到过仓库导航上的GitHub Actions，当时由于没有相关的需求所以并没有去主动的了解，这几天总是想做一些自动化的脚本，所以才发现GitHub很早就做了这个自动化的功能。

## 什么是GitHub Actions？

GitHub Actions 是一项由 GitHub 提供的持续集成（Continuous Integration，CI）和持续部署（Continuous Deployment，CD）服务。它允许开发者在代码库中配置自动化的工作流程，以便在代码发生更改时执行各种任务，如构建、测试、部署和通知等。GitHub Actions 可以帮助开发团队更加高效地管理和维护他们的软件项目。

## GitHub Actions可以做什么？

GitHub Actions可以做的事情实在太多了，简单来说就是执行一些脚本命令，例如前端的打包编译，我们可以在本地进行，也可以使用GitHub Actions发布一个任务，在GitHub仓库出发一个事件的时候，自动执行打包和编译，这样的话，假如我们使用next开发了一个基于.md的博客，我们可以设定事件当我们push一个.md的博文到博客的仓库就会触发build事件，这样就不必再本地进行build了，而是GitHub帮我们打包发布了博客的静态页面，这就极大的简化了博客更新的步骤，只需一步push代码就可以了。

## GitHub Actions 部署 Next.js 项目：

对于一些常用的actios,我们不必自己去动手写，GitHub有一个actions的市场，大部分你能想到的动作脚本这里都有，譬如部署Next.js的项目：


    # .github/workflows/build.yml
    
    name: Build, Export and Publish Next.js App
    on:
    push:
        branches:
        - main
    pull_request:
        branches:
        - main
    workflow_dispatch:

    jobs:
    build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2
        - uses: actions/setup-node@v2
            with:
            node-version: 14.x
        - run: |
            npm i
            npm run build
        - name: Next Pages
            uses: anorcle/next-pages@v1.0
        - name: Commit and push changes
            run: |
            git config --global user.name "anorcle"
            git config --global user.email "next-pages@anorcle.com"
            git add -A
            git commit -m "New Build"
            git push

这段代码是一个 GitHub Actions 的工作流程配置文件，用于自动化构建、导出和发布 Next.js 应用程序，这是直接再市场了就能搜到的，具体代码的含义，复制到chatGPT里就会得到很好的解释。

## 总结

GitHub Actions 是一个不错的选择，实际的用途还有很多，熟练应用可以事半功倍，抽空我要试试哈。

自学编程很久了，对GitHub的使用熟练度自认为还是可以了，以前也看到过仓库导航上的GitHub Actions，当时由于没有相关的需求所以并没有去主动的了解，这几天总是想做一些自动化的脚本，所以才发现GitHub很早就做了这个自动化的功能。

GitHub Actions 是干什么用的？

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

## 放弃的原因

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

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

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

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

## 收获

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

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

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

持续了一个月的 LCP 问题：超过了 2.5 秒（桌面设备），经过了20多天的验证终于通过了，总结一下关于解决LCP问题的经验。

## 问题回顾

什么是 LCP？

最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。

怎样算是良好的 LCP 分数？ 

为了提供良好的用户体验，网站应该努力将最大内容绘制控制在2.5 秒或以内。为了确保您能够在大部分用户的访问期间达成建议目标值，一个良好的测量阈值为页面加载的第 75 个百分位数，且该阈值同时适用于移动和桌面设备。

LCP出现了问题，会有什么后果？

Google有个核心网页指标，如果你的网页出现了LCP问题，那么Google就把你的网页移除核心网页，虽然Google没有说明核心网页被移除后会降低搜索排名，但是非核心网页的展示量却会少的很多。另外LCP存在问题的时候是很影响用户打开网页的体验的，这个我是深有体会。

## 发现问题

大约20多天前Google给我发邮件：LCP 问题：超过了 2.5 秒（桌面设备）需要解决，存在此问题的网址需要改进其网页体验的邮件，我登陆了Google站长平台看了一下数据指标，我的核心网页都被删掉了，直接为零。

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

其中上图橙色的条子就是出现问题的网址，Google会将问题网页打好编组，Google还提供了一个在线的检测的网址，用来检测你的网页中的问题，很专业哈，我就拿来自己的网页去检测，好家伙这一检测就发向好多问题，具体如下图：

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

检测网址：[PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/),感兴趣的可以自己试试自己的网站。

我这个人有点强迫症，看到这样指标的图确实很不爽！所以决定对网页进行优化！

## 解决问题

使用网页速度测量工具测量后，检测工具会给出全方位指导意见，对于一些问题的发现和解决只要按着工具给出的指引就可以很好的修改和优化，我之前的问题就是因为网页上加载了一个很大的依赖文件，由于我的前端并没有优化打包，所以有些依赖的包就是一股脑都上了，造成页面加载缓慢，我清楚的记得当时我自己都觉得加载太慢了，打开页面都会烦躁！

后来我就删除了影响页面打开的依赖，当然也不能怪那个框架，因为人家也提示了，不建议直接CDN引用，建议在打包编译的环境中使用，我当时就是图个痛快，好吧只好忍痛弃之，顺便优化了前端，然后再次去测量的网站进行测量：

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

嘿，经过一阵折腾终于搞定了，然后就是提交Google对有问题的网页组进行审核，Google说明了需要大约30天的时间，因为他需要一个用户的体验数据，根据页面的加载速度的数据平均值来判断你是否通过了审核。

## 终于通过审核了

可能没啥人关注这个LCP问题吧？难道就我一个人在关注吗？来看看审核之后的数据图表，大约25天才审核过去，这个指标需要有人访问你的网站产生数据才会生成。

![博客名称](https://suiyan.cc/assets/images/2023/lcp4.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp3.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp2.png)
![博客名称](https://suiyan.cc/assets/images/2023/lcp1.png)

还别说，我喜欢100分，虽然不是什么比赛和考试，但是这个指标说明浏览你的网页的用户体验良好！对于一个时用GitHub pages 存放网页的站长，我把页面优化成这个分值我很满足了，博客内容咱不敢说写的如何，但是这个页面的打开和加载的体验感，至少通过了专业的审核哈！最后，来试试你的网站，看看桌面版的得了多少分？

检测网址：[PageSpeed Insights 网页速度测量工具](https://pagespeed.web.dev/),感兴趣的可以自己试试自己的网站。


持续了一个月的 LCP 问题：超过了 2.5 秒（桌面设备），经过了20多天的验证终于通过了，总结一下关于解决LCP问题的经验。

关于Google LCP 问题：超过了2.5秒 验证已通过

断断续续花了几个小时的时间，我成功地使用了 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重构博客构思的记录

博客的页面需要一个返回顶部的功能，之前都是使用的jQuery的插件来实现的，但是一个及其简单的功能就需要引入jQuery和一个相关插件总觉得有些多余，所以只好自己动手实现一个返回顶部的功能。


## 需求分析

1. 有一个按钮，固定在页面的右下角的。
2. 当HTML页面视口不在顶部的时候，点击返回顶部按钮就会实现返回页面顶部的功能，且返回时有动画效果，不是直接立即返回。
3. 当滚动条的位置高度小于500的时候，返回按钮隐藏，当大于500的时候显示。

很简单就这二个功能。

## 具体实现

首先实现按钮的定位，这里可以使用纯CSS来实现也可以使用tailwind，由于我引用了tailwind，这里我使用tailwind css来实现：

    <div class="rightside fixed bottom-20 right-2 w-10">
        <button>Top</button>
    </div>

添加一个fixed的页面绝对定位，然后通过bottom-20 right-2 等属性来定义他的具体位置。

接下来就是实现按钮点击返回顶部的功能：

    /**
    * 按钮点击后，滚动将以平滑的动画方式进行。
    */
    function scrollToTop() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
    }

只要为`<button>`绑定鼠标点击事件scrollToTop()，就可以实现点击返回页面顶部。

最后来实现按钮的隐藏和显示，JavaScript代码如下：

    // 获取返回顶部按钮的元素
    const topButton = document.getElementById("topButton");

    // 监听页面滚动事件
    window.onscroll = function () {
    // 获取页面滚动距离
    const scrollY = window.scrollY;


    // 如果页面没有滚动或者滚动条还在页面的顶端，隐藏按钮
    if (scrollY < 500) {
        topButton.classList.remove("block");
        topButton.classList.add("hidden");
    } else {
        topButton.classList.remove("hidden");
        topButton.classList.add("block");
    }
    };

这里使用滚动条时间来监听滚动条的位置，`const scrollY = window.scrollY;`获得了滚动条的实时位置，然后判断位置，为按钮添加class,使之隐藏和显示，进而实现了本次需求的所有功能。

博客的页面需要一个返回顶部的功能，之前都是使用的jQuery的插件来实现的，但是一个及其简单的功能就需要引入jQuery和一个相关插件总觉得有些多余，所以只好自己动手实现一个返回顶部的功能。

使用Tailwind css和JavaScript实现一个简单的返回顶部功能

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下：

1. 下载罗技K380的键盘驱动：

下载地址：https://www.logitech.com/zh-cn/software/logi-options-plus.html#supported-keyboards

2. 安装后打开驱动设置，找到F1-12功能键设置的位置，锁定默认功能键即可。

然后就可以按F5快乐的刷新了。

原来的罗技K380键盘给老婆用了，但是键盘的F1-F2默认是一些功能键，用起来非常不习惯，所以需要恢复到原来Windows默认的功能，解决方法如下

罗技K380 F1-F12 功能键锁定

原来用的罗技K480是2019年买的，用起来已经感觉很“费劲”了，打字的话需要使劲按键盘的键子，手指头都觉得很累！最近实在是受不了了，某东直接入手了一个PHILIPS机械键盘。

## 上手体验

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

我买的是红轴的机械盘哈，老婆说了不能买按键声音比较大，不然就给我扔了。。。要不然我非得买青轴的机械键盘，论敲击声音的排行：从小到大分别是红轴、黑轴、茶轴、青轴，红轴是几种轴体中声音最小的机械键盘。但是声音还是不小的，但是可以接受。红轴键盘的手感比较轻盈，虽然没用过青轴的键盘，但是从网上的文章中可以了解到青轴的打击感更强，敲起来应该是啪啪啪的更有段落和打击感。

飞利浦这款键盘样式还是很多的，比较中规中矩，买104建是为方便使用各种软件的快捷键，键子的手感很细腻，键子的布局和距离很符合人体工学，自带了18种跑马灯效果很不错！

## 很满意

其实买东西还真得看品牌，机械键盘的牌子太多了，咱也不会挑选，所以无脑选择知名品牌吧，飞利浦的工业水准还是很高的，产品的品控把握的很好，一些小细节都拉得很满！比如连接线、说明书等，设计和用料都很用心了，130元的这个价位买到这样的键盘算是一次超值的购物体验。我问了客服有没有好评返现，客服说没有，我就懒得去写好评，这样吧，我就写在我的博客里吧。

原来用的罗技K480是2019年买的，用起来已经感觉很“费劲”了，打字的话需要使劲按键盘的键子，手指头都觉得很累！最近实在是受不了了，某东直接入手了一个PHILIPS机械键盘。

PHILIPS猛禽SPK8404机械键盘手感真是超赞！


虽然上网这么多年了而且也是个半吊子程序员，但是我从来没去了解过DNS这么设置的区别与作用，不过从实际操作上来说，设置公共DNS在访问一些网站上确实有优势，解决了一些但不开或是打开缓慢的问题。

## 区别

192.168.0.1是路由器的IP地址，它是局域网中所有设备的默认DNS服务器。8.8.8.8和114.114.114.114是谷歌和中国电信提供的公共DNS服务器。

以下是它们的区别：

1. 速度：8.8.8.8和114.114.114.114通常比192.168.0.1更快，因为它们具有更大的缓存和更高的可用性。
2. 安全性：8.8.8.8和114.114.114.114比192.168.0.1更安全，因为它们不支持DNS劫持。
3. 可用性：8.8.8.8和114.114.114.114在全球范围内比192.168.0.1更可用。


因此，如果您希望获得更快、更安全和更可用的DNS服务，您可以使用8.8.8.8或114.114.114.114。但是，如果您在使用局域网中的设备，您需要使用192.168.0.1

## 另外一种设置方式

设备的DNS设置成网关,例如：192.168.0.1，而路由器里的DNS设置成8.8.8.8和114.114.114.114。

优点：

1. 加快网页打开速度：谷歌的DNS服务器具有更大的缓存，可以更快地响应用户的查询，从而加快网页打开速度。
2. 提高网络安全性：谷歌的DNS服务器不支持DNS劫持，可以保护您的网络安全。
3. 防止DNS劫持：DNS劫持是一种攻击方式，攻击者可以修改DNS服务器的记录，将用户的查询重定向到恶意网站。谷歌的DNS服务器不支持DNS劫持，可以保护您的网络安全。
4. 更精准地解析域名：谷歌的DNS服务器具有更大的域名数据库，可以更精准地解析域名。这可以帮助您更快地找到您要访问的网站。

这下都明白吧？嘿嘿。

虽然上网这么多年了而且也是个半吊子程序员，但是我从来没去了解过DNS这么设置的区别与作用，不过从实际操作上来说，设置公共DNS在访问一些网站上确实有优势，解决了一些但不开或是打开缓慢的问题。

局域网的DNS设置192.168.0.1与8.8.8.8,114.114.114.114有什么区别？

这个暑假匆匆忙忙的就过去了大半，孩子说不喜欢假期，因为假期要比上学还累。直到今天，孩子终于忙完了假期中所有艺术类的课程，我赶紧带她一起去看了那场长达三个小时的史诗级的动画片《长安三万里》。

## 不同的感受

起初，我带孩子去看这个影片是希望能通过影片来了解一下盛唐历史和那些文人墨客跌宕起伏的人生，但是这部动画片的内容与对白的诗词远远盖过这部动画片的美术效果，以至于我中间一直在关注剧情和诗词而忘了是在看一部动画片，孩子的反应还好，坚持到看完最后的字幕，说是要等彩蛋。

不同的年龄和文化程度以及对历史和文学的了解程度是会影响到对这篇动画的观影感受的，我最大的感受就是影片是一种映射，那些文人墨客对封建社会的科举制度的不满但又无法抵制和反抗的那种无奈，自由的写诗板，大篇幅的宿醉都不能消除的万古愁，若不是中间掺加了一些幽默的动作和对白，我是没法从那种低落的情绪中恢复过来的。

## 诗与酒

喝酒作诗，一种类似于用呐喊来释放内心的无奈吧，胸有大志雄才却无法报效国家，只因为你是个商人世家，两次赘婿晚年投错阵营，诗仙的一生不羁放纵却又充满着无奈，你说他重情义却因贪杯忘掉自己的初衷，这期间并不是三两句就能说的明白，也不是一部三小时的动画片就能解释的清楚的历史。

## 末了

这是一部看完会很累的动画片，看完也许会有一些压抑沉闷，尔等不是才子也不是剑客，祈祷世界和平吧。

这个暑假匆匆忙忙的就过去了大半，孩子说不喜欢假期，因为假期要比上学还累。直到今天，孩子终于忙完了假期中所有艺术类的课程，我赶紧带她一起去看了那场长达三个小时的史诗级的动画片《长安三万里》。

史诗结合的浪漫：《长安三万里》

在浏览一个博客时，除了关注关于我的页面，友情链接页面也是吸引人注意的重要部分。如果说关于我是一个博主主观的自我介绍，那么友情链接则是一个博主个人喜好的侧写。

## 什么是友情链接？

友情链接指的是网友之间通过交流产生的共鸣之情，这种情感不同于现实生活中的朋友之间的友情。当然，也有一些博主之间的友情是通过友情链接发展而来的，虽然这种情况比较少见，但不能绝对地说没有。

链接可以理解为以该博主为中心而产生的网络关系网，无论是主动申请还是被动的添加，这些动作都包含着博主的主观意愿。

## 为什么需要友情链接？

友情链接可以提升博客的权重，提高网站的排名。同时，友情链接也可以提高博客的知名度，增加流量。通过与其他博主的友情链接，可以吸引更多的访客来到你的博客，增加曝光度和流量。此外，友情链接还可以促进与其他博主之间的交流和互动，建立良好的博客社交圈子。

## 如何进行友情链接？

1. 首先把自己的博客做起来，物以类聚，人以群分。一个内容丰满、主题鲜明、个性突出的的博客，一定会受到其他博主的喜欢，这是交换友情链接的基础。
2. 博文需要原创优先，博客页面导航分类清楚简约，这些则容易使人更容易了解你，是交换链接的加分项。
3. 主动出击，发现自己喜欢的博客和博主就要主动去申请交换链接。有很多博主都要求先友后链，其实没必要。如果你长的好看或是博客内容一流，基本都是一把成。
4. 去各类独立博客汇聚的网站申请加入，增加曝光的机会。
5. 脸皮要厚，不要怕被拒绝，嘴要甜，好话说多了都会动心的。

## 总结

总的来说，友情链接对于博客的推广和交流有着重要的作用。通过友情链接，博主可以扩大自己的影响力，吸引更多的访客，建立良好的博客社交圈子。同时，友情链接也可以促进博主之间的交流和互动，增强彼此的影响力和知名度。


在浏览一个博客时，除了关注关于我的页面，友情链接页面也是吸引人注意的重要部分。如果说关于我是一个博主主观的自我介绍，那么友情链接则是一个博主个人喜好的侧写。

聊 聊 友 情 链 接 

前几天有个网友给了我一个API的接口，这个接口返回了大量的中文博客数据，通过这个数据我做了一些简单的分析，如果你正巧也对中文博客感兴趣，不妨进来随便看看。

## 数据来源

首先这个数据来源的接口是[https://zhblogs.ohyee.cc/](https://zhblogs.ohyee.cc/)中文博客列表导航项目，号称：尝试链接几乎所有的中文博客，如果搞过个人博客的应该都听说过，这里差不多每天都会有新的博客申请添加。

当天我通过API共采集到1767个博客的地址，1374个RSS订阅地址，当然这些博客和rss订阅多少会有打不开的问题，而且在采集RSS订阅的文章时，应为有些站长的RSS并不规范，所以文章的采集也只是其中的一部分了，采集了最近一个月内的RSS文章1001条。

![博客连接](https://suiyan.cc/assets/images/2023/Figure_0.jpg)

## 简单的分析

通过标题、博客简介、博客标签、最近一个月发布的文章进行了jieba分词，生成柱状图、饼状图，这二个图只提取了排名前15个词语，词云图提取了前200个词，具体如下：

## 博客名称


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

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

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

## 博客简介

![博客简介](https://suiyan.cc/assets/images/2023/f_4.jpg)

![博客简介](https://suiyan.cc/assets/images/2023/f_5.jpg)

![博客简介](https://suiyan.cc/assets/images/2023/f_6.jpg)

## 博客标签

![博客标签](https://suiyan.cc/assets/images/2023/f_7.jpg)

![博客标签](https://suiyan.cc/assets/images/2023/f_8.jpg)

![博客标签](https://suiyan.cc/assets/images/2023/f_9.jpg)

## 博客最近1000条博文

![博客最近1000条博文](https://suiyan.cc/assets/images/2023/f_10.jpg)

![博客最近1000条博文](https://suiyan.cc/assets/images/2023/f_11.jpg)

![博客最近1000条博文](https://suiyan.cc/assets/images/2023/f_12.jpg)


## 总结

总体上来说，中文独立博客大部分都是一些技术人员和一些博客狂热分子，如果不热衷于独立博客肯定是不会搞得了，博文总体上也是以技术学习笔记为主，生活记录也是不少的，好吧今天就搞到这里了，就当复习了一下数据采集。

前几天有个网友给了我一个API的接口，这个接口返回了大量的中文博客数据，通过这个数据我做了一些简单的分析，如果你正巧也对中文博客感兴趣，不妨进来随便看看。

1767个中文博客的数据洞察：中文博主都喜欢干啥？

python中的requests库极大的方便了采集中的网络请求，但是在采集中会遇到一种比较极端的情况：请求的读取超时。这种情况呀怎么解决？

## 问题现场

多线程批量采集的过程中，会有一些线程长时间卡死，也不抛出错误也不停止，后来发现是读取内容很慢时间很长，本来想通过结束线程来断开这个连接，但是终止一个python的线程并不那么简单，我搜遍了全网询问了AI,并没有什么满意的结果。所以只好从requests.get()下手了，看是只发现了一个连接超时的设置方法：

    response = requests.get(feed_url, timeout=5)

这段代码的意思是连接超时就会抛出错误，我们使用try就可以捕获进行相关的操作，但是我需要的读取超时！

## 问题解决

后来在网上搜到timeout还可以设置一个元组，例如：

    response = requests.get(feed_url, timeout=(5,5))

切记，后边的那个5，就是读取超时！至此，连接后读取时间过长的问题就可以抛出了。

python中的requests库极大的方便了采集中的网络请求，但是在采集中会遇到一种比较极端的情况：请求的读取超时。这种情况呀怎么解决？

python requests 设置读取超时时间

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

## 博客圈子其实很小

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

## 坚持写博客的收获

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

## 发现宝藏

写博客同时也会通过一些博客汇总的网站了解到其他博客和博主，挖掘其中的宝藏收藏并订阅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已过大半，留下的时间不多了，除了复习巩固之前的编程知识，还需要接触一些新的技能和框架。加油！奥利给！

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

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

这是一篇Docker的学习笔记，记录了Docker一些日常操作。

## Docker 安装

[Ubuntu 22 安装Docker过程记录](https://suiyan.cc/2023/20230730133646.html)

## Docker常用命令


    docker version        # 显示docker的版本信息
    docker info              # 显示docker的系统信息，包括镜像和容器的数量
    docker 命令 --help         # 帮助命令

    docker search  # 搜索镜像
    docker pull #下载镜像
    docker rmi image #删除镜像

    docker ps # 列出正在运行的容器
    docker ps -a #如果你想查看所有包括已经停止的容器，可以使用 -a 参数
    docker inspect <container_id_or_name> #查看容器的详细信息

    删除容器：

    删除单个已停止的容器：
    bash
    Copy code
    docker rm <container_name_or_id>
    如果你想在删除容器时同时删除关联的卷（volumes），可以添加 -v 参数：

    bash
    Copy code
    docker rm -v <container_name_or_id>
    批量删除多个容器（注意：这将删除所有指定的容器，无论它们是否在运行状态）：

    bash
    Copy code
    docker rm <container_name_or_id> <container_name_or_id> ...
    删除所有已停止的容器（慎用，这将删除所有处于停止状态的容器）：

    bash
    Copy code
    docker container prune

    docker run image #启动容器
    docker run -d image #后台启动容器

    1. 交互式模式运行 Ubuntu 容器： 
    docker run -it --name my_ubuntu ubuntu:latest
    
    2.  后台运行一个 Web 应用容器，将容器内部的 80 端口映射到主机的 8080 端口： 
    docker run -d -p 8080:80 --name web_app nginx:latest
    
    3.  将主机上的目录挂载到容器内部，以便实现数据持久化： 
    docker run -v /host/path:/container/path -d --name data_container ubuntu:latest
    
    4.  设置环境变量并运行容器： 
    docker run -e ENV_VAR=value --name env_container ubuntu:latest
    
    5.  指定容器的重启策略为始终重启： 
    docker run --restart always --name restart_container ubuntu:latest
 
    docker exec -it 容器id /bin/bash #进入当前容器
    docker start 容器id        # 启动容器
    docker restart 容器id    # 重启容器
    docker stop 容器id        # 停止当前正在运行的容器
    docker kill 容器id        # 强制停止当前容器

    
    docker logs -tf --tail 容器id # 查看日志
    docker inspect 容器id #查看容器内容

    docker run [可选参数] image
    # 参数说明
    --name="name"        容器名字：用来区分容器
    -d                    后台方式运行：相当于nohup
    -it                    使用交互式运行：进入容器查看内容
    -p                    指定容器的端口（四种方式）小写字母p
        -p ip:主机端口：容器端口
        -p 主机端口：容器端口
        -p 容器端口
        容器端口
    -P                     随机指定端口（大写字母P）

    
    


## 安装mysql 

    # docker 中下载 mysql
    docker pull mysql

    #启动
    docker run --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=Lzslov123! -d mysql

    #进入容器
    docker exec -it mysql bash

    #登录mysql
    mysql -u root -p
    ALTER USER 'root'@'localhost' IDENTIFIED BY 'suiyan';

    #添加远程登录用户
    CREATE USER 'suiyan'@'%' IDENTIFIED WITH mysql_native_password BY 'suiyan.cc';
    GRANT ALL PRIVILEGES ON *.* TO 'liaozesong'@'%';

## 安装Ubuntu

    sudo docker pull ubuntu

    sudo docker images

    sudo docker run -itd --name tu ubuntu:latest

    sudo docker exec -it 52b9 /bin/bash # 进入容器Ubuntu

    exit #推出

    sudo docker stop 容器ID #停止Ubuntu容器


总体来说，docker的安装和使用还是很简单的，上手操作一下，半小时就能入手了。








这是一篇Docker的学习笔记，记录了Docker一些日常操作。

Docker基础学习笔记和常用命令汇总

最近要经常和终端打交道了，所以整理了一下vim的常用命令用来参考。

## 一般模式下移动光标

    h或者(向左方向键)    //光标向左移动一个字符
    j或者(向下方向键)    //光标向下移动一个字符
    k或者(向上方向键)    //光标向上移动一个字符
    l或者(向右方向健)    //光标向右移动一个字符
    Ctrl+f              //屏幕向文件尾移动一页
    Ctrl+b              //屏幕向文件头移动一页
    n空格(n是数字)       //按下数字n然后按空格，则光标向右移动n个字符，如果该行字符数小于n，则光标继续 
                        从下行开始向右移动，一直到n
    
    0(数字0)或者Home     //移动到本行行首
    $或者End             //移动到本行行尾
    H                   //光标移动到当前屏幕的最顶行
    M                   //光标移动到当前屏幕的中央那一行
    L                   //光标移动到当前屏幕的最底行
    G                   //光标移动到文本的最末行
    nG(n是数字)         //光标移动到文本的第n行
    gg                  //光标移动到文本的首行
    n回车(n是数字)       //光标向下移动n行

## 一般模式下删除、复制和粘贴 

    x,X    // x为向后删除一个字符，X为向前删除一个字符
    nx(n是数字)    //向后删除n个字符
    dd            //删除光标所在的那一行
    ndd(n是数字)   // 删除光标所在的向下n行
    d1G       //删除光标所在行到第1行的所有数据
    dG        //删除光标所在行到末行的所有数据
    yy        //复制光标所在的那一行
    nyy       //复制从光标所在行开始的向下n行
    p,P       //p将复制的数据从光标下一行粘贴，P则从光标上一行粘贴
    y1G      //复制光标所在行到第1行的所有数据
    yG        //复制光标所在行到末行的所有数据
    J         //将光标所在行与下一行的数据结合成一行
    u         //还原过去的操作
    Ctrl+r    //重做上一个操作
    .         //重复前一个操作


## 一般模式下查找与替换 

    /word      //向光标之后寻找名为word的字符串,当找到第一个word后,按下"n"继续查找后一个，按下"N",反方向查找下一个
    
    ?word      //向光标之前寻找名为word的字符串,当找到第一个word后,按下"n"继续查找后一个,按下"N",反方向查找下一个
    
    :n1,n2s/word1/word2/g     //在n1和n2行之间查找wordl字符串并替换为word2
    
    :1,$s/word1/word2/g       //从第一行到最末行,查找word1并替换成word2
    
    :1,$s/word1/word2/gc      //在第一行和最末行之间查找word1,替换为word2之前需要用户确认
    

## 从一般模式进入编辑模式 

    i     //在光标前插入字符
    I     //在光标所在行的行首插入字符
    a     //在光标后插入字符
    A     //在光标所在行末插入字符
    o     //在光标所在行下插入新的一行
    O     //在光标所在行上插入新的一行
    r     //替换光标所在的字符,只替换一次
    R     //一直替换光标所在的字符,直到按下Esc键

## 命令行模式下常用命令 

    :w    //保存文本
    :w!   //如果文件属性为只读时，强制保存
    :q    //退出vim
    :q!   //强制退出vim，不管编辑还是未编辑都不保存退出
    :wq   //保存之后退出
    :e!   //将文档还原成最原始状态
    :ZZ    //等价:wq
    :w [filename]     //将文档另存为filename
    :r [filename]     //在光标所在行的下面读入filename文档的内容
    :set nu           //在每行的行首设置行号
    :set nonu         //取消行号
    :n1,n2 w [filename]   //将n1到n2行的内容另存为filename文件中
    :!command     //暂时离开vim，执行某个Linux命令，例如：:ls/home 暂时列出/home下的文件，然后会提示按回车返回vim
 

最近要经常和终端打交道了，所以整理了一下vim的常用命令用来参考。

vim常用命令整理

今天突然想把docker在Windows10下安装上，结果被坑的一塌糊涂，后来没办法了，只好在虚拟机的ubuntu下边安装了docker。

## Windows下安装Docker

本以为像macos下边一样，下载了Docker的桌面版直接暗转就好了，结果Windows下边的安装又是启用虚拟化，又是添加Hyper-V服务，虽然麻烦但是最后都安装上了，但是有个巨大坑：主机的网络异常了，只要打开Docker，过一小会就会无法上网打不开任何网页，不死心，各种搜索各种办法，折腾了一上午，竟然没有搞定，最后果断放弃！改为虚拟机Ubuntu下吧安装吧。

## VMware Workstation 下安装 Ubuntu

官网下载最新版即可，然后咋虚拟机里开始安装Ubuntu，这些都是很简单的，一路回车就可以了。全部安装完毕后，为Ubuntu设置静态的局域网IP，方便以后访问。

点击：编辑Ubuntu虚拟机，找到网络设置那里，修改成桥接模式即可，然后到Ubuntu里设置一下固定IP、子网掩码、DNS就好了。

## Docker的安装


这里我就不再重复了，参考大神的博文，一路安装到底即可。

[如何在 Ubuntu 22.04 LTS 中安装 Docker 和 Docker Compose](https://linux.cn/article-14871-1.html)

也可以试试这个方法：

1. 更新软件包列表： 首先，确保你的软件包列表是最新的。运行以下命令来更新软件包列表：

    $ sudo apt update # 更新本地软件包的列表信息
    $ sudo apt upgrade #升级系统中已安装的软件包到它们的最新可用版本
    $ sudo apt full-upgrade # 这个命令与 sudo apt upgrade 类似，但在升级软件包时会更加细致。

2. 安装 Docker： Docker 软件包名称可能会随时间变化，取决于仓库中的版本。你可以尝试使用 docker.io 作为软件包名称来安装 Docker：

    sudo apt install docker.io

亲测可以安装成功！很简单的。



## Docker 镜像

    Docker中国区官方镜像
    https://registry.docker-cn.com

    网易
    http://hub-mirror.c.163.com

    ustc 中国科技大学
    https://docker.mirrors.ustc.edu.cn

    阿里云容器  服务（阿里云得到的是一个专属的加速链接）
    https://cr.console.aliyun.com/

进入 /etc/docker/daemon.json 文件(没有使用vim则自动创建)，修改如下：

    # vi /etc/docker/daemon.json
    {
        "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn"]
    }

## 总结

至此 docker的安装就完成，可以下载hello world 的镜像测试，一般都不会有问题的。

## 相关参考

[如何在 Ubuntu 22.04 LTS 中安装 Docker 和 Docker Compose](https://linux.cn/article-14871-1.html)

[ubuntu下docker的安装及更换镜像源](https://blog.csdn.net/cristianoxm/article/details/104923157)

[40个最常用的Linux命令行大全](https://zhuanlan.zhihu.com/p/420247468)

[vim常用命令](https://suiyan.cc/2023/20230730144709.html)

今天突然想把docker在Windows10下安装上，结果被坑的一塌糊涂，后来没办法了，只好在虚拟机的ubuntu下边安装了docker。

Ubuntu 22 安装Docker过程记录

前几天使用JavaScript编写了一个简单的私人RSS订阅终端程序，但是是自己对JavaScript的并不是很熟悉，今天有用python重构了一下，感觉python的代码看起来更简单直观。

## feedparser

feedparser模块是一个RSS订阅的解析模块，可以通过RSS的地址方便的提取出RSS的具体内容。

    pip install feedparser

先安装，然后我们来测试一下：


    import feedparser

    d = feedparser.parse('https://suiyan.cc/rss')
    # print(d.feed)
    print(d.feed.title)
    print(d.feed.link)
    print(d.entries)
    for data in d.entries:
        print("title:"+data.title)
        print("description:" + data.description)
        print("link:" + data.link)

可以很方便的解析出博客RSS中的内容。根据需求，我们重构之前的JavaScript编写的订阅程序的代码。

## 继续编写

私人RSS订阅程序完整的python代码:

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


这个简单的脚本思路是：准备一个RSS列表，使用线程池技术多线程采集列表中rss一周内的最新博文，终端打印展示，选中编号，回车后通过浏览器打开该篇博客。简单吧，复制代码试试吧。

前几天使用JavaScript编写了一个简单的私人RSS订阅终端程序，但是是自己对JavaScript的并不是很熟悉，今天有用python重构了一下，感觉python的代码看起来更简单直观。