在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>