在 markdown 中引用 bootstrap 组件答案

【问题标题】：reference bootstrap component in markdown在 markdown 中引用 bootstrap 组件
【发布时间】：2018-10-17 01:37:16
【问题描述】：

我们有一个包含 Liquid、Kramdown 和 Bootstrap 的 Jekyll 站点。我想开始在 Markdown 页面中使用 Bootstrap 导航选项卡。 https://getbootstrap.com/docs/4.0/components/navs/#tabs这里也有讨论https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior

问题是这会在我们的 Markdown 源代码中引入一堆 HTML 并降低它们的可读性。

过去我们在遇到这样的情况时，已经能够经常使用[link](url){:target="_blank"}这样的标签。这似乎是由于 Kramdown。我也明白可以以类似的方式引用 CSS，例如 {:.CSSClass}。同样，由于 Kramdown。

我的问题是，有没有办法用这些来自 Bootstrap 的导航做类似的事情？我希望能够做这样的事情：

{{< tabs >}}
{{% tab name="Choice A" %}}
Contents of Choice A tab
{{% /tab %}}
{{% tab name="Choice B" %}}
Contents of Choice B tab
{{% /tab %}}
{{< /tabs >}}

但这是我在 Hugo 网站上看到的。

【问题讨论】：

标签： twitter-bootstrap markdown jekyll liquid kramdown

【解决方案1】：

您可以使用包含，就像这样：

{% include tabstart.html title="choice a" %}

Content of your tab

{% include tabend.html %}

【讨论】：

如果您像我一样想知道它是如何工作的，请参阅文档 here。