.js | 博客改用 Next.js + TailwindCSS + Shadcn.UI

.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,但数据未能正常显示。

➡️

继续阅读