莱因电博

Li-e.cn

Li Internet Electronic Blog
@rss

在Docusaurus中居中显示超链接或图像

Display hyperlinks or images centered in Docusaurus

————————————————————

在Docusaurus中居中显示超链接或图像

文本与超链接

export const Center = ({children}) => (
   <div
      style={{
         "textAlign": "center"
      }}>
      {children}
   </div>
)

<Center>LEEE.TECH</Center>
<Center>[How-to-build-my-own-system](https://doc.etek.top/embeded/How-to-build-my-own-system)</Center>

PS:直接在markdown中插入即可

图像

最简单的方法是完全避免使用Markdown。我将概述各种方法:

使用纯HTML和CSS

这是最基本的解决方案,而且肯定有效。

<div style={{textAlign: 'center'}}>
  <img src="..." />
</div>

使用Infima utlity类

Docusaurus经典模板附带了Infima,它有一个有用的类来居中。这类似于方法#1,但需要出现Infima样式。

<div class="text--center">
  <img src="..." />
</div>

使用带Markdown的纯HTML

您似乎使用了错误的图像语法,并且使用了链接语法。在[]之前需要一个感叹号。

还要注意image的Markdown语法前后的空行。由于我们使用的是MDX,在块块周围放置空行将允许MDX引擎将它们解析为Markdown,而不是将其视为HTML。

<div style={{textAlign: 'center'}}>

![image](/path/to/image.jpg)

</div>
(C) 2019 - 2024 Li-e.cn莱因电博(立网电子博客) | Powered by Vercel , based on Hugo with Gists theme.