我是如何搭建这个博客的

May-26, 2024 · 3min

信息

• MDX Playground (opens in a new tab)

组件

图片

可以直接在相对路径下引入图片，使用 remark-static-image 插件，自动导入图片，具体可以查看 Next.js 中使用 MDX 静态图片 (opens in a new tab) 。

GitHub Alert

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!TIP]  
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]  
> Negative potential consequences of an action.

PWA

• 为你的网站添加 PWA 和 Service Worker (opens in a new tab)

添加 OG 图片

• Next.js 中添加 Open Graph (opens in a new tab)

Changelog

升级 tailwindcss v4

#19 (opens in a new tab)

• https://tailwindcss.com/docs/upgrade-guide (opens in a new tab)

添加 OG 图片

#14 (opens in a new tab)

• https://og-playground.vercel.app/ (opens in a new tab)
• https://vercel.com/docs/functions/og-image-generation (opens in a new tab)
• https://orcascan.com/tools/open-graph-validator (opens in a new tab)
• 静态生成 OG 图片
  • 使用 [og/[slug]/route.tsx] 更改 slug 为 [post.pageName].png
  • generateStaticParams 生成 posts 的 OG 图片
  • remark-mdx-slug 获取 slug
  • remark-mdx-formatter 配置 openGraph 使用 [/og/${post.pageName}.png] 作为 OG 图片

添加 GitHub Alert

c9cb826 (opens in a new tab)

• https://github.com/chrisweb/rehype-github-alerts (opens in a new tab)

添加 NProgress

#12 (opens in a new tab)

• 当前网站路由切换时显示进度条
• https://github.com/Skyleen77/next-nprogress-bar (opens in a new tab)

refactor use mdx

#11 (opens in a new tab)

• 使用 mdx 重构了博客 nextjs文档 (opens in a new tab)
• 参考了 nextra (opens in a new tab) 的实现
• 使用 app router 作为 page 加载 mdx 文件
• remark-mdx-layout 全局的 Layout 组件
• remark-static-image 相对路径引入静态图片文件