使用Markdown Jekyll中的图像标题

Question

我在Github上主持一个Jekyll博客并用Markdown写我的帖子.当我添加图像时,我按以下方式执行:

![name of the image](http://link.com/image.jpg)

然后,这将显示文本中的图像.

但是,如何告诉Markdown添加图片下方或上方显示的标题？

Answer 1

我知道这是一个老问题,但我认为我仍然会分享我添加图片标题的方法.您将无法使用caption或figcaption标记,但这将是一个简单的替代方案,而不使用任何插件.

在降价时,您可以使用强调标记包装标题并将其直接放在图像下方,而不插入新行,如下所示:

![](path_to_image)
*image_caption*

这将生成以下HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

然后在CSS中,您可以使用以下选择器设置样式,而不会干扰em页面上的其他标记:

img + em { }

请注意,图像和标题之间不能有空行,因为这样会生成:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

你也可以使用你想要的任何标签em.只要确保有标签,否则你将无法设置标签.

Answer 2

如果你不希望使用任何插件(这意味着你可以把它推到GitHub上的情况下直接产生第一现场),你可以创建一个名为的新文件image.html中_includes:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

然后使用以下标记显示降价图像:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

Answer 3

您可以使用表格.它工作正常.

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

结果:

Answer 4

正确的HTML与字幕的图像使用,是<figure>有<figcaption>.

没有Markdown相当于此,所以如果你只是添加偶尔的标题,我建议你只需将这个html添加到你的Markdown文档中:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Markdown规范鼓励您在这种情况下嵌入HTML,因此它会显示得很好.它比搞乱插件要简单得多.

如果您正在尝试使用其他Markdown-y功能(如表格,星号等)来生成字幕,那么您只是在讨论如何使用Markdown.

Answer 5

我发现对最高投票答案的一个轻微重复，我发现它更明确一点是使用 jekyll 语法将类添加到某物，然后以这种方式对其进行样式化。

所以在帖子中你会有：

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

然后在您的 CSS 文件中，您可以执行以下操作：

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

出来好看！

Answer 6

这个问题有两个语义正确的解决方案：

1. 使用插件
2. 创建自定义包含

1. 使用插件

我已经尝试了几个插件来做到这一点，我最喜欢的是jekyll-figure.

1.1. 安装jekyll-figure

安装的一种方法jekyll-figure是添加gem "jekyll-figure"到您的插件组中的 Gemfile。

然后bundle install从终端窗口运行。

1.2. 用jekyll-figure

只需将您的降价包装在{% figure %}和{% endfigure %}标签中。

您的标题位于开始{% figure %}标签中，您甚至可以使用 Markdown 对其进行样式设置！

例子：

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. 风格化

现在您的图像和标题在语义上是正确的，您可以根据需要应用 CSS：

• figure （对于图像和标题）
• figure img （仅用于图像）
• figcaption （仅用于标题）

2. 创建自定义包含

您需要在文件夹中创建一个image.html文件_includes，并在 Markdown 中使用 Liquid 将其包含在内。

2.1. 创建 _includes/image.html

image.html在 _includes 文件夹中创建文档：

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. 在 Markdown 中，使用 Liquid 包含图像

/assets/images带有标题的图像：

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

使用绝对 URL 的（外部）图像：（更改src=""为srcabs=""）

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

可点击的图像：（添加url=""参数）

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

没有标题的图像：

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3. 风格化

现在您的图像和标题在语义上是正确的，您可以根据需要应用 CSS：

• figure （对于图像和标题）
• figure img （仅用于图像）
• figcaption （仅用于标题）

Answer 7

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

这是基本的字幕使用。无需使用额外的插件。