关于我从hexo迁移到Docusaurus的过程, 遇到的一些问题做一些总结.
Route 路由对应
在hexo 中我们的url基本都是日期开头, /2022/02/03/hexo迁移Docusaurus 这样的形式, 但是 docusaurus 默认就是 /hexo迁移Docusaurus 这样的, 也没有啥配置处理, 所以需要在每篇文章中的 slug 内手动设置一下.
如果不处理这个, 后续加载 gitalk 的时候就会出大问题
获取主题是白天还是黑夜
可以从这个 hook 中拿到当前的主题是白天还是黑夜, 可以用来控制不同的主题的样式
MDX 全局 Components (MDXComponents)
在 mdx 里面可以混写 React 但是在每个文章中都要声明对应的组件, 否则会报错. 所以需要一个可以申明全局组件的地方 执行这个命令, 生成 MDXComponents 的文件
在 ./src/theme/MDXComponents/index.js 的 MDXComponents 变量中添加自己的组件, 当然也可以替换已有组件, 比如我把原生的 img 标签替换成了 ant.design 的 Image 组件
顺便在这里也可以引入一些公共的CSS之类的, 在 mdx 文件里面就可以直接写对应的 Component 就不需要手动引入了
我在这里引用了大量的 antd 组件, 虽然现在样式有点不太兼容, 待后续调整
替换代码高亮 (CodeBlock)
首先生成可以替换的 CodeBlock 组件
npm run swizzle @docusaurus/theme-classic CodeBlock
这里的例子是替换为 AceEditor
Loading...
这里的 ReactAce 实属比较特殊, 必须在 Client 环境下才能正常使用 需要用到一个 BrowserOnly 的组件, 被包裹的组件不会在服务端渲染
当然 AceEditor 也需要使用 require 异步加载,
archives 归档页面年份 从大到小排序
默认从小到大有点不太方便, 需要调整顺序
Gitalk 评论
Loading...
按照 Gitalk 的文档引入非常简单
复制博客内容的组件
添加组件到 BlogPostPage 文件的 BlogLayout 组件最后面, 当然这个也是需要 BrowserOnly
推荐组件
这里会时长更新 可以 mark一下
Github Repo Card
用来引用Github仓库