.js | 博客改用 Next.js + TailwindCSS + Shadcn.UI
💡
原文中文，约7000字，阅读约需17分钟。
📝
内容提要
本文讨论了作者将博客从Jekyll迁移到Next.js的原因和过程，介绍了Next.js的基本概念和使用方法，以及使用React.js和TailwindCSS进行开发。还提到了CSS和JavaScript的技术细节，以及使用Giscus和Google Analytics等工具的经验。最后，作者表示移除了谷歌广告，计划使用Shadcn的Drawer组件来展示赞赏二维码或友站链接。
🎯
关键要点
- 作者将博客从 Jekyll 迁移到 Next.js，因 Jekyll 未来活力堪忧。
- 选择 Next.js 是因为其基于 React.js，且作者有相关学习背景。
- Next.js 的学习资源和云服务由 Vercel 提供，但短期内不打算使用 app router。
- 使用 TailwindCSS 进行样式开发，因其是 Shadcn.ui 组件库的依赖项。
- Shadcn.ui 组件库允许直接复制粘贴代码，提供了丰富的交互组件。
- 网页开发中，HTML、CSS 和 JavaScript 的解耦方式被认为反人类，新的全栈框架采用组件化方式。
- JSX 是 JavaScript 的扩展，允许在内部写 JavaScript 代码。
- TailwindCSS 的属性支持在方括号中使用任意值，但有时会出现不生效的问题。
- 使用 Giscus 进行评论功能，但需自定义实现以支持黑夜模式。
- Next.js 构建静态网站需要在 next.config.js 中进行配置。
- RSS 和 sitemap 的生成分别使用 npm 包和手动编写字符串。
- 新博客撤掉了谷歌广告，计划使用 Shadcn 的 Drawer 组件展示赞赏二维码或友站链接。
- Next.js 提供 Google Analytics，但数据未能正常显示。
❓
延伸问答
为什么作者选择将博客从Jekyll迁移到Next.js？
作者认为Jekyll未来活力堪忧，因此选择迁移到Next.js以实现更复杂的功能。
Next.js的主要特点是什么？
Next.js是一个基于React.js的全栈框架，支持静态网站生成和组件化开发。
TailwindCSS在这个博客开发中有什么作用？
TailwindCSS是Shadcn.ui组件库的依赖项，用于样式开发，提供了丰富的样式选项。
作者如何实现评论功能？
作者使用Giscus进行评论功能，但需自定义实现以支持黑夜模式。
如何在Next.js中配置静态网站生成？
需要在next.config.js中配置basePath和output等参数，以支持静态网站生成。
作者对谷歌广告的看法是什么？
作者撤掉了谷歌广告，认为赚不到多少钱且广告会破坏原来的排版。
➡️
