在Markdown Jekyll中使用图像标题

149

我在Github上托管了Jekyll博客，并在Markdown上撰写我的帖子。添加图像时，请按以下方式进行操作：

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

然后在文本中显示图像。

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

github  markdown  jekyll 
— Orschiro
source

Answers:

115

如果你不希望使用任何插件（这意味着你可以把它推到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." %}
— 智商安德烈亚斯
source
1
这是一个好主意！但是，site_root不接受为有效变量。渲染后，结果为src="{{ site.url_root }}...。
— orschiro 2013年
2
嗯，对了，那是Octopress中添加的变量。我对其进行了编辑，因此示例代码仅使用了图像的相对URL。
— IQAndreas
3
Jekyll现在包括一个site.url变量。
— 罗伊·廷克
20
更好的标记是：<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
— edmundo
我需要更多信息...可以放置多个图像而无需重复include image.html？我正在尝试类似{% for image in page.images %}但没有成功的事情。你能帮助我吗？
— edmundo
286

我知道这是一个老问题，但我想我仍然会分享添加图像标题的方法。您将无法使用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。只要确保有一个标签，否则您将无法设置其样式。

— 魏安德
source
3
太棒了！无需记住一些愚蠢的
— jekyll
2
我对此非常
— Alex Williams
谢谢！只是在寻找
— Michal Gruca '04
1
嗨，您好！我不确定在哪里以及如何放置CSS部件...如果有人可以帮助的话，那真的很棒。
— ChriiSchee
2
@ChriiSchee可以将其放置在主CSS文件中，也可以创建自己的文件并将其链接到默认布局。例如，我的默认布局链接到main.css文件，<link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">因此我仅在此文件的底部添加了自定义CSS定义： // My custom css img + em { display: block; text-align: center; } //image captions
— Jan Zavrel
93

您可以为此使用表格。工作正常。

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

结果：

在此处输入图片说明

— 比拉尔·古尔特金
source
8
这个答案是最好的答案。使用纯净降价促销并获得所需的东西。谢谢！
— Kadam Parikh
有点离题，但这在Jupyter Notebooks中也适用。
— paulochf
对我来说，宽度从100％减少了。如何加宽？
— Abhay Hegde
50

用于带标题图像的正确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的预期用途。

— 布莱恩布劳恩
source
4
令人遗憾的是，这个答案没有得到任何关注-我真的认为这是最简单，最语义上正确的。我对所有建议使用表格进行格式化的答案感到特别沮丧，这简直就是1990年代的混乱。;-)
— sudo make install
我同意。但是，Bitbucket似乎还不支持它。可怜的。
— Boriel
我喜欢@Andrew提供的聪明而简单的答案，但是我必须遵循这个答案，因为它是显式的，可以使用适当的HTML标记，并且不需要太多的输入。
— 西恩巴
1
非常感谢，我是jekyll的新手，并且不知道markdown可以用于html。
— Sambo Kim
6

我发现最热门的答案有些细微之处，就是使用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;

出来看起来不错！

— 科里
source
4

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

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

1.使用插件

我已经尝试了几个插件来执行此操作，而我最喜欢的是jekyll-figure。

1.1。安装jekyll-figure

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

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

1.2。用jekyll-figure

只需将您的markdown包装在{% 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 -->
%}

使用绝对网址的（外部）图片：（更改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 （仅用于字幕）
— 罗宾·梅特拉
source
1
仅出于完整性考虑，如果要使用jekyll-figure，则必须在_config.yml中的插件中添加jekyll-figure。
— Aleix Sanchis
3

您可以尝试pandoc用作转换器。这是一个实现此目的的jekyll插件。Pandoc将能够自动添加与您的alt属性相同的图形标题。

但是您必须推送已编译的站点，因为github不允许Github页面中的插件用于安全性。

— 崇旭人
source
谢谢。因此，仅Markdown不能创建字幕吗？
— orschiro
我相信这取决于您使用的转换器，但是markdown标准不支持添加字幕。
— 崇旭人
3

安德鲁的@ andrew-wei答案很好用。您还可以将一些链接在一起，具体取决于您要执行的操作。例如，这使您获得具有alt，标题和标题的图像，并在标题的不同部分使用换行符以及粗体和斜体：

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

带有以下<img>标记：

![description](https://img.jpg "description")
***Image:*** *description*
— 马修·贝内特
source
1 
<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

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

— 哈桑·特兹坎（Hasan Tezcan）
source
0

这是最简单（但不是最漂亮）的解决方案：围绕整个表创建一个表。显然存在缩放问题，这就是为什么我以HTML给出示例，以便您可以轻松修改图像大小的原因。这对我有用。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
— ndhyhypervol
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.