不久前接触到了 mdx ，出于好玩把自己的 hexo blog 用 nextjs 重构了一下，博客对于我来说只有俩功能：一个是练习技术，另一个是当成记事本
项目地址
技术栈
- Next.js
- MDX
- TailwindCSS
特点
- 🎨 简约，丝滑，快速
- 🌚 支持黑暗模式，响应式设计适配移动端
- 🎮 支持 code 块的实时运行（原生 html 以及单个 react 组件），适合演示个小 demo ，参考 www.xiaojun1994.top/posts/2022-…，而这些只需要用 markdown 写入以下代码即可
```jsx live
function Count() {
const [count, setCount] = useState(0)
return (
<>
<p>count: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</>
)
}
- ⚡️ 由 Next.js + MDX + Tailwind CSS 强力驱动，方便二次开发，支持一键部署到 Vercel
- 🧩 集成不蒜子统计，预计阅读时长，文章标签分类
- 支持中英文配置（站点需要翻译的文案很少）
- 更多功能可以访问 www.xiaojun1994.top/posts/2022-…
TODO
- 支持 iframe 嵌入，支持 codesandbox ，stackblitz 集成
- 集成第三方评论？
- RSS
- 友链？
- 更多 SEO 优化
- 更多社交链接类型支持
- 文章分享
- 列表分页？（文章多了可以考虑支持，目前没太大必要）
- Code Playground 优化，目前比较简陋
- 目前只有桌面端才显示文章目录导航，考虑移动端后边也加上
如何为你所用
- fork 该项目
- 运行
npm run new:post 文章名称 [tag1] [tag2] ...快速创建模版文章 - 在 vercel 上关联此项目，每次 push 代码后 vercel 都会帮你自动部署，比 github.io 更快
- 可以的话，麻烦给个小小的 star ✨
如果有能力，特别是熟悉 react 开发的同学可以进行深度定制，因为它是基于 nextjs + mdx ，可以很方便的在 markdown 中嵌入自定义组件，阻碍自己的仅仅是创意，不用再拘泥于纯静态的 markdown ，这里给一个大佬的参考网站 www.joshwcomeau.com/animation/3…
更多功能还在磨磨蹭蹭的开发中，对自己的审美没啥自信，感觉很多地方看着怪怪的，各位也可以把自己认为好看的博客分享一下，我借鉴（ chaoxi ）一下 🤡，轻喷～
