我的博客¶
新建 Nextra 项目
Nextra 是一个基于 Next.js 的静态站点生成器,专注于文档和博客。它提供了一个简单的界面来创建和管理内容,同时利用 Next.js 的强大功能来构建高性能的网站。
我一直使用 Mkdocs-Material 来搭建自己的个人博客站点,但近期学习 NextJS 框架,决定研究下 Nextra 部署自己的文档站点。另外一个原因就是,Mkdocs-Material 有一部分功能并不开源,而 nextra 完全开源,且采用 MDX 语法,支持在文档中引用 React 组件,从而大大提高了交互性(如果文档需要展示一些交互内容的话,那么强烈推荐这个框架)。
注意
Mkdocs-Material 已经处于维护状态,原作者基于 Mkdocs-Material 开发了一个新的项目 Zensical,有兴趣的同学可以去研究下 Zensical 的使用。
1. 初始化项目
首先我们先使用 Next.JS 初始化一个项目,
接着安装 Nextra 及其相关依赖:
执行完成后,可以执行 npm run dev 来启动开发服务,浏览器访问 http://localhost:3000 就可以看到页面了。
使用 turbopack
如果你使用的是 Next.js 13.4 版本以上,建议使用 turbopack 来提升开发体验。可以在 package.json 中将 dev 脚本修改为:
2. 配置 Nextra
| next.config.ts | |
|---|---|
3. 添加 mdx-components 文件
在项目根目录下创建一个 mdx-components.tsx 文件,用于定义 MDX 组件:
4. 设置搜索
- 安装
pagefind依赖
- 添加
pagefind配置
Pagefind 索引 .html 文件,因此索引必须在构建应用程序后进行。
| package.json | |
|---|---|
-
将
_pagefind/添加到您的.gitignore文件以避免提交生成的索引文件。 -
验证输出索引:构建并运行
postbuild脚本后,检查public/或out/中是否存在_pagefind/目录。启动您的应用程序并测试搜索栏以确认一切正常。
5. 创建根布局
接下来,我们在 app 目录下创建一个 layout.tsx 文件,用于定义根布局:
6. 渲染 MDX 文件
有 2 种方式可以渲染 MDX 文件:
- 使用
.mdx后缀的文件,Nextra 默认支持这种文件格式,可以直接渲染。 - 使用
content目录,并将.mdx文件放在content目录下。
这里推荐第 2 种方式,更方便对文档进行维护和管理。此外,我后续希望给站点添加一个登录功能,所有这里我们新建一个 docs 专门用于 MDX 文档渲染,而 content 目录专门用于存放文档内容。
7. 运行项目
最后,我们再次执行 npm run dev 来启动开发服务,浏览器访问 http://localhost:3000 就可以看到 Nextra 框架搭建的文档站点了。
8. 文档界面优化
启动后界面有 6 处地方显示需要进行优化,可在 Layout 组件中通过参数进行调整:
- 编辑此页
- 更新此页
- 反馈信息
- 复制本页面
- 搜索框信息
- 暗黑模式的选项
9. 添加登录功能
安装 shadcn/ui 组件库:
npm install tailwindcss @tailwindcss/postcss postcss
npm install react-hook-form next-auth tailwind-merge @hookform/resolvers zod class-variance-authority @radix-ui/react-slot
npm install lucide-react
npx shadcn@latest add sonner input button label field card input-group
错误
Something went wrong. Please check the error below for more details. If the problem persists, please open an issue on GitHub.
Command failed with exit code 1: npm install sonner next-themes clsx tailwind-merge 'shadcn@latest' class-variance-authority tw-animate-css radix-ui lucide-react
npm error code EEXIST npm error syscall rename npm error path ~/.npm/_cacache/tmp/602eb3c2 npm error dest ~/.npm/_cacache/content-v2/sha512/4c/7e/4e3e6489ec4444e98e0f979fef269e8889b0a4c0de4f072b4a1cd97106736e703be161e09d4be63a22124cb551d92997665b992200ae8bc49f808b2002a7 npm error errno EEXIST npm error Invalid response body while trying to fetch https://registry.npmjs.org/@radix-ui%2freact-toggle-group: EACCES: permission denied, rename '~/.npm/_cacache/tmp/602eb3c2' -> '~/.npm/_cacache/content-v2/sha512/4c/7e/4e3e6489ec4444e98e0f979fef269e8889b0a4c0de4f072b4a1cd97106736e703be161e09d4be63a22124cb551d92997665b992200ae8bc49f808b2002a7' npm error File exists: ~/.npm/_cacache/content-v2/sha512/4c/7e/4e3e6489ec4444e98e0f979fef269e8889b0a4c0de4f072b4a1cd97106736e703be161e09d4be63a22124cb551d92997665b992200ae8bc49f808b2002a7 npm error Remove the existing file and try again, or run npm npm error with --force to overwrite files recklessly. npm error A complete log of this run can be found in: ~/.npm/_logs/2026-03-17T07_40_13_141Z-debug-0.log
这是因为电脑上的 npm 缓存文件权限冲突 导致的,执行 sudo npm cache clean --force。
参考文档:
7个提高FastAPI开发效率的扩展
1. FastAPI Users
每次在 Flask 中自己实现身份验证,都感觉像是在用方轮子重新发明轮子。直到我遇到了 FastAPI Users——一个即插即用的身份验证和用户管理库。
它开箱即用地支持 JWT、OAuth2,甚至社交登录。再也不用面对那些样板代码的疯狂了。
2. FastAPI Mail
在 Flask 中发送邮件总感觉像是在拆炸弹——一个配置错误就会导致全盘皆输。FastAPI-Mail 让这一切变得轻松愉快。
3. FastAPI SocketIO
以前我把 SocketIO 硬塞进 Flask 时,总感觉像是在自行车上绑火箭。有了 FastAPI-SocketIO,实时功能变得如此自然。
4. FastAPI Limiter
我构建的每个公共 API 最终都会遇到滥用问题。在 Flask 中,我只能凑合着写中间件。在 FastAPI 中,我只需添加 FastAPI-Limiter。
5. FastAPI Cache
Flask 中的缓存……只能说很有“创意”。有了 FastAPI-Cache,我根本不需要考虑它。
6. FastAPI CrudRouter
在 Flask 中,我总是需要手动编写 CRUD 端点。有了 FastAPI-CrudRouter,我确实能节省数小时。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | |
7. FastAPI Plugins
最后,FastAPI-Plugins 感觉像是把所有工具打包进了一个箱子里。它为你提供了 Redis、调度器、缓存和日志记录,全部开箱即用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | |