如何使用 blogdown 使图像居中？

Question

所以我正在使用 RStudio 和 Blogdown 构建我的第一个数据博客，但我严重卡在了一些小而令人愤怒的事情上。

https://data-issues.netlify.app/

上面是我正在建设的网站。我为它做了一个标志，但我想让它居中。我将如何在我的 markdown (.md) 文件中这样做。

代码在这里：

---
# Homepage
type: widget_page

# Homepage is headless, other widget pages are not.
headless: true

weight: 1

design:
  columns: "1"
---

{{< figure src=/datavision.png theme="light" class="center">}}

编辑：添加这个也无济于事

<p align="center">
![datavision](datavision.png)
</p>

我正在使用 .md 文件，如果不在这里，我应该在哪里定义 p 的简码？

Answer 1

正如 @YihuiXie 在下面的评论部分中所说，您实际上不需要为原始 HTML 使用简码，您可以使用多种解决方案。

---

编辑您的配置以在 Markdown 中使用原始 HTML

在您的config.toml 中输入：

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

如果您的项目中有config.yaml，请使用：

markup:
  goldmark:
    renderer:
      unsafe: true

这会在 markdown 文件中启用原始 html 支持，这样您就不需要使用短代码。

https://gohugo.io/news/0.60.0-relnotes/

---

使用简码的原始 HTML

根据您的项目结构，应该有某种layouts 文件夹。我有一个用 Hugo 制作的项目，我有一个类似 ../layouts/shortcodes/rawhtml.html 的代码：

{{.Inner}}

例如，在您的代码中，您已经在使用Hugo’s Built-in shortcode。创建文件后，您只需在 Markdown 中以这种方式插入短代码：

{{< rawhtml >}}
  <img src=/datavision.png class="center">
{{< /rawhtml >}}

自定义CSS代码应该定义在../static/css/，在你的config.toml中，只要检查是否有变量来设置你的自定义CSS代码，例如：

# Custom CSS
customCSS = ["/css/custom.css"]

我使用此配置是因为主题需要它，但在您的项目中可能会有所不同，因此请记住这一点。如果您不想使用其他文件来保存您的 CSS 代码，您可以像我对 HTML 所做的那样简单地将其插入到您的短代码中，例如：

{{< rawhtml >}}
<style>
    .center{
        /* your code here */
    }
</style>

{{< /rawhtml >}}

---

对内容页面使用 HTML 而不是 Markdown

使用 Hugo，您还可以在项目中使用 HTML 而不是 md 文件。它只是遵循相同的语法，但您必须使用 HTML 而不是 Markdown 语法，例如：

---
title: "Contact me"
---

<p>
    Some text here
</p>

在这种情况下，您从已经使用 HTML 的那一刻起就不需要短代码。