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

## 对比豆包

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

## 对比Kimi

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

## DeepSeek-R1

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

## 总结

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

目前我的AI使用率排行：

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

国外: Gemini > chatGpt > 其他







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

DeepSeek的一些使用感受


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

## 分析

如果你事直接复制的代码

    data-theme="preferred_color_scheme"

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

## 编写代码

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

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

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




之前一直在使用`giscus`作为blog的评论系统，个人评价`giscus`接入方便、使用简便，依托全世界最大的代码平台Github，其在评论系统商的功能可以说是非常的丰富和完善的，而且稳定可靠，不用操心。之前的blog只有一个主题，所以`giscus`也选择了对应的主题，后来blog增加明暗主题...

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


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


## trae.ai

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

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

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

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

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

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

trae.ai 字节出品的AI IDE


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

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

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

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


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

阅读随感


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

## 一些回忆

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


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

## 对比Vue

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

## 随感

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

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



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

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


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


## 排查

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

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


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

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

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

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

## 网站安全在线检测

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

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

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

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

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

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

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

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


## 你有遗憾吗？

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

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



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

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

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



## 写中年，中年咋写？

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



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

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


## 你孤独吗？

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


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

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


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

你有遗憾吗？


## 起因

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

## 基础方法

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

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

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

## 深挖

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


## 单一职责

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

## PDCA

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

## 写作模版

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

## 总结

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

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



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

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



## 起因

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

## 荒废

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


## 偶然

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

## 觉醒

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


## flag

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

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

## 自律，坚持，努力

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

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

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

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




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

放下抖音，重构我的2025


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

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

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

## 知识共享许可协议

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

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

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

## CC协议有何用途？

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


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

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

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


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

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

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

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


## 如何使用这些协议？

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


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

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

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

参考：

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

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




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

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


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

## 手动查询

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

## 使用工具分析

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

安装：

    npm install -g depcheck

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

显示：

    Unused dependencies
    * @giscus/react
    * dateformat


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

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


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

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


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

### 重构之路

### 需求与功能

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

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

#### 解决方案

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

### 框架的选择

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

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


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

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

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


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

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

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

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

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

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

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


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

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

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


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

## 核心代码

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

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

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


## 其他blog功能

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

## 关于SEO

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

## 关于评论系统

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

## 总结

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


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

博客程序重构回忆录


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

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


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

## Lucy

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


## 成长与陪伴

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


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


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


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


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


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


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


## 简单并快乐


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




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

Lucy是一只优秀的陪伴犬


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

## 安装

    npm i -D tailwindcss-motion


添加到你的tailwind.config.js：



        // tailwind.config.js

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

或者，要使用 ESM：

    import tailwindcssMotion from "tailwindcss-motion";

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


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

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

## 动画效果

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

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

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

## 总结

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


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

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


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

## Heroicons

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

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

## 总结

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


Heroicons 是一个免费的开源图标库，由Tailwind CSS的创始人开发。它提供了大量精美的 SVG 图标，旨在与 Tailwind CSS 无缝配合使用，但也可以在任何项目中使用。图标分为三种风格：Outline（轮廓）、Solid（实心）和 Mini（迷你），以满足不同的设计需求。网站...

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




## 为啥要说这个？

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

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

## 一些想法

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


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

## 写在最后

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

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


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




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