[日经贴] blog time

[xiaojun1994]

不久前接触到了 mdx ，出于好玩把自己的 hexo blog 用 nextjs 重构了一下，博客对于我来说只有俩功能：一个是练习技术，另一个是当成记事本

技术栈

• Next.js
• MDX
• TailwindCSS

特点

• 🎨 简约，丝滑，快速
• 🌚 支持黑暗模式，响应式设计适配移动端
• 🎮 支持 code 块的实时运行（原生 html 以及单个 react 组件），适合演示个小 demo ，参考 https://www.xiaojun1994.top/posts/2022-08-05-mdx-test#react-%E7%BB%84%E4%BB%B6%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88，而这些只需要用 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
• 🧩 集成不蒜子统计，预计阅读时长，文章标签分类
• 支持中英文配置（站点需要翻译的文案很少）
• 更多功能可以访问 https://www.xiaojun1994.top/posts/2022-08-05-mdx-test

TODO

• 支持 iframe 嵌入，支持 codesandbox ，stackblitz 集成
• 集成第三方评论？
• RSS
• 友链？
• 更多 SEO 优化
• 更多社交链接类型支持
• 文章分享
• 列表分页？（文章多了可以考虑支持，目前没太大必要）
• Code Playground 优化，目前比较简陋
• 目前只有桌面端才显示文章目录导航，考虑移动端后边也加上

---

如何为你所用

• fork 该项目
• 在 vercel 上关联此项目，每次 push 代码后 vercel 都会帮你自动部署，比 github.io 更快
• 可以的话，麻烦给个小小的 star ✨

如果有能力，特别是熟悉 react 开发的同学可以进行深度定制，因为它是基于 nextjs + mdx ，可以很方便的在 markdown 中嵌入自定义组件，阻碍自己的仅仅是创意，不用再拘泥于纯静态的 markdown ，这里给一个大佬的参考网站 https://www.joshwcomeau.com/animation/3d-button

更多功能还在磨磨蹭蹭的开发中，对自己的审美没啥自信，感觉很多地方看着怪怪的，各位也可以把自己认为好看的博客分享一下，我借鉴（ chaoxi ）一下 🤡，轻喷～

---

最关键的项目地址忘了

https://github.com/xiaojun1994/xiaojun1994.top

[MLeo]

hugo
https://chichi.com

[MLeo]

Hugo
https://ichochy.com