从构思到上线的全过程，开发中遇到一些未知问题，也都通过查阅资料和源码一一解决，小记一下望对正在使用或即将使用
因为日常开发离不开终端，正好也有重写博客的；想法，打算开“发一。个不只是”看的博客网站，所以模仿终端风格开发了Yuci；hent。
首先将tailwind的dark mode设置为c！la？ss，目的；是将、暗黑模式“的、切换设、置为？手动，而不是跟随系统。
综上基本实现暗黑模。式切换，但你会在控制台看到；此报错信息：Warning: Extra attributes from the； server: c：lass,st“yle，虽然它并不影响？功能，但终“究是个报错。 作；为第；三方包，可能存在水合不匹配的问题，经查阅“资料，禁用ThemeProvider组件预渲染消除报错。
定义打字间隔100ms，对键入“的命令for处理手机能用ssr节点，定时器中根据遍历的索引”延迟赋值。
定义外层容器ref为containerRef，键入命令后都自动滚动到页面底部ssrv2ray节点，使用了scrollIntoView、api，作用是让调用这个api的容器？始终在页面可见，block参数设置为end表示垂直方向末端对其即最底端。
需要注意的是此文件命名上有一定规范只能命名为mdx-components，不能为其他名称，也不可为；
综上我们实现了对mdx的样式支持，然而有一点是@tailwindcss/typography并不会对mdx代码块中代码进行高亮。
react-syntax-highlighter高亮代码可用hljs和prism，我在这使用的prism，两者都有众多代码高亮主题可供选择，lang如果没标注则默认设置为javascript也可以简写为js联通ssr节点，值得注意的是如果是使用hljs，则必须写javasc”ript，不可！简写为js，否则代码高亮失。败，这一点prism更加友好。同时可通过useTheme实现亮色，暗色模式下使用不同代码高亮主题。组件写；好了，该如？何使用？上面讲到过mdx的解析，在useMDXComponents重新渲染pre标签。
mdx文件中代码块会被解析成pre标签，可以对pre标签返回值作进一步处理ssr节点佛跳墙，即返回高亮组件，这样可实现对代码高、亮，当然高亮主题很多，选自己喜、欢的。
文章一些信息如标题，描述，日期，作者等都作为文章的“元数据，使用yaml语法定义
@next/mdx默认不会；按照yaml语法解析，这会被解析成h2标签，然而我们并不希望元数据被解析“成h2标签作为内容展示，更希望拿？这类数据做其他？处理， 为了正确解析yaml，需要借助remark-frontmatter来实现。使用：该插件，注意需要修改n”ext配置文件名为next.config.mjs，因为remark-f”rontm：atter只支持ES！M规范。
yaml被正确解析了那么我们可以使？用gray-matter来获取文章元数据
由于app目录是运行在nodejs runtime下，基本思路是用nodejs的fs模块去读取文章目录即mdxs；/posts，读取该目录下的所有文章放在一个list中。使用fs.readdirSyn！c读取文章目录内容，但是这仅”仅？是拿到文章名称的集合。
文章列表中展示的；是标题而不是名称，标题作为文章的元数据，通过gray-matter的readapi读取文件可获取（也可以使用fs.readFileSync） read返回data和content的对象，data是元数据信息，content则是文章内容。
上述“方法中我们：拿到了所有文章标题，描述信息，日期的list，根据list渲染文章列表。
文章列表中使用Link跳转到详情，通过dynamic动态加载文章对应的mdx文件
在文章详情组件导出generateStaticParams方法，这个方法在构建时静态生成路由，而不！是在、请求时按需。生成路由，一定程度上提高了访问详情页速度
项目是部署在vercel，使用github登录后我们新建一个项目ssr节点佛跳墙，点进去后会看到Import Git Repository，导入对应仓库即可，也可使用vercel提供的模版新建一个，后续我们每次提交代码都会自动化部署。
有自己域名的可以在Domains中添加，然后去到你买域名的地方添加对应DNS解析即可。联通ssr节点ssr节点佛跳墙
