如何使用 blogdown 居中图像？

Question

所以我正在使用 RStudio 和 Blogdown 构建我的第一个数据博客，我被一些小但令人气愤的东西严重困住了。

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

以上是我正在建设的网站。我为它做了一个标志，但我想让它居中。我将如何在我的降价 (.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

这会在降价文件中启用原始 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 的那一刻起，您就不需要短代码了。

如何使用 blogdown 居中图像？

How to center an image using blogdown?

html

markdown

hugo

blogdown

编辑您的配置以在 Markdown

原始 HTML 使用短代码

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