技术栈
- Next.js
- Tailwindcss
- daisyui
- cloudflare pages(免费!)
模板主题
tailwind-nextjs-starter-blog
效果图
具体的建站过程 请看 Hugo博客迁移,使用Next.Js实现纯前端博客
暗黑模式
这次完成 Next.js 博客多主题切换功能,总共 5 个主题,包括暗黑模式
采用了技术
-
next-themes 实现主题状态切换
-
用了 daisyui 四个主题
-
暗黑 dark 模式是自己配的
-
兼容了原模板 themetailwindcss 的 dark:*** 各种样式
关于 next-themes
- 大概看了下 next-themes 原理是 使用 useState 来维护当前选定的主题
- 调用 next-themes 提供的 setTheme 函数时,它会更新内部的主题状态
- 这时就能切换到对应的 daisyui 样式
打算将 next-themes 配合 daisyui 切换主题功能,单独抽离出来做成一个单页面 next.js 示例
具体的建站过程 请看 Hugo博客迁移,使用Next.Js实现纯前端博客
