我博客中的各种小组件

Travis2023/08/25

996 字， 阅读需要 5 分钟

为了更好的利用好 mdx 的特性，我在博客中添加了各种各样的小组件，在这里做一个记录，方便自己未来查看，也能快乐的水一期博客。

我将各种小组件的源码写在了该文件夹下，感兴趣的小伙伴可以看看TravisRoad/blog-travis

小组件

MyImage

对 Next.js 的 Image 组件的一个包装，在将 mdx 文件通过 remark 和 rehype 获得一些元信息后，输入 MyImage 组件获得一个固定大小并且有在加载前显示模糊占位图的图片组件。 具体方法在我的这篇博客中有介绍过。

PhotoProvider && PhotoView

这儿的代码写的十分丑陋，直接使用了 react-photo-view 库，完全没做抽象（又不是不能用）。事实上看起来也不错。

Quote 引用组件

如题，一个引用小组件

<Quote cite="——道格拉斯·亚当斯" normal="{true}">
  <ol className="ml-4">
    <li className="list-decimal pl-2">
      任何在我出生时已经有的科技都是稀松平常的世界本来秩序的一部分
    </li>
    <li className="list-decimal pl-2">
      任何在我 15-35 岁之间诞生的科技都是将会改变世界的革命性产物。
    </li>
    <li className="list-decimal pl-2">
      任何在我 35 岁之后诞生的科技都是违反自然规律要遭天谴的
    </li>
  </ol>
</Quote>

Admonition 小组件

<Admonition type="warn">
  这是一个警告，但是程序员从来不看这个，不要折叠这个警告
</Admonition>
<Admonition type="quote">
  我想：希望本是无所谓有，无所谓无的。这正如地上的路；其实地上本没有路，走的人多了，也便成了路。
  <div className="w-full pr-2 text-right">——鲁迅</div>
</Admonition>
<Admonition type="info">一点有用的信息，或许没用，反正我写在这儿了</Admonition>

GptBlock

<GptBlock>
  GptBlock 是一个用于在博客中展示 GPT 生成信息的小组件。它可以帮助你将 GPT-3
  生成的文本嵌入到博客中，...
</GptBlock>

对话框

<dialog>生活的意义是什么呢？</dialog>
<dialog reverse="true">整点薯条🍟🍟🍟</dialog>

Border

<Border>
  <ol>
    <li>我也不知道这有啥用</li>
    <li>就是个虚线边框罢了</li>
  </ol>
</Border>