最近在捣鼓Astro博客的时候,意外发现了几个特别好用的工具网站.
因为动态博客的使用和静态博客的差异,这些工具对我来说非常有帮助。但是不管你使用的是不是静态博客,这些工具依然可以为你提供一些思路,希望能帮到同样在折腾博客的朋友们。
Tailwind CSS
博客刚搭建好的时候,最头疼的就是调样式,原生主题虽然已经非常棒了,但是还是想进行调整,用来满足自己的审美需求。
最开始我对于静态博客的CSS规则一点都不懂,还是按照以前的方式使用F12去调整,发现完全没有作用。慢慢摸索之后才发现是CSS样式是调用的,也就认识了什么Unocss、WindiCSS等等。
现在主题调用的是Tailwind CSS,而且Tailwind CSS也提供了专门为Astro准备的版本,上手特别容易。
你不用写那些复杂的CSS规则,直接在HTML标签上加几个简单的类名就行。比如:想让文字变成蓝色,就加个class="text-blue-500"
,想让内容居中,就用class="flex justify-center"
。
其中记忆深刻的就类似于以前使用margin和padding时候的四个方向,比如margin就变成了mb-8
、mt-4
等等。用它来排版特别顺手,只需要记住几个关键的类名就可以完成多数需求。
而且它的牛逼之处就是,它会自动把没用到的样式给清理掉,这样网站打开速度就快多了。跟Astro很适配,基本上不用额外学习什么就能上手。
BootCSS Icons
我是在构建我Footer里面的SVG图标的时候发现这个网站的,我自己不会画,又想统一SVG的样式,就发现了BootCSS这个图标库。它里面收集了很多各种各样的图标,用起来特别方便。
如果图标库里面有你需要的图标,直接复制svg或者下载都可以,如果没有也可以结合AI进行修改绘画,统一的样式也好、大小也好,个人觉得真的会增强网站的视觉感受。
Oklch颜色工具
选颜色一直是我最头疼的事,以前都是凭感觉瞎试,经常配出一些很奇怪的颜色组合。直到遇见了Oklch颜色工具,它教会了我怎么科学地搭配颜色。
它把颜色分成亮度、饱和度、色相三个维度来调节,理解起来特别直观。比如我想调个舒服的蓝色背景,它会告诉我怎么调才能既不刺眼又有层次感。
而且可以进行颜色格式的转化,无论是RGB、十六进制还是HSL,都能转换,还能输出更多样式的代码,让你写CSS的时候简单又美观。
智谱AI
智谱是我最近才开始使用的一个Ai工具,功能很多也很实用,用起来特别顺手。模型非常多,大概二十多个,涵盖的范围很广,从编程到写作都有,可以完成不少的事情。
最主要是速度很快,因为最近使用过很多工具,比如Deepseek、Trae、CodeBuddy等等。相比之下智谱的响应时间都是最快的。至于准确性和效果,因为我使用还不太多,不能给出评价。
目前使用的工具,我感觉在不考虑询问精确度的情况下,输出答案最让我满意的是DeepSeek,就单纯代码改造和补全。其它的Ai工具,只是属于一个小补充,有些问题可以使用它们进行调试。但是Deepseek的问题还是在于生成速度,如果代码的改动比较大的话,还是会卡很久。
智谱使用了几次,感觉效果都非常不错。它的模型还在进行升级,输出速度和准确率都还是比较满足我的要求的,而且现在应官方可以使用体验版的,可以自由使用,工具也都比较齐全,想用哪个都可以。
总结
这些工具其实都不复杂,就像日常生活中的小工具一样,能让我们做事更轻松。我挑工具的标准很简单,上手容易,不用学太多专业知识,跟Astro配合得好,能解决实际问题,不会让网站变得复杂臃肿。