我在Github上主持一个Jekyll博客，用Markdown写我的帖子。当我添加图像时，我这样做:
然后显示文本中的图像。
然而，我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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" %}
{% endfigure %}
1.3. 风格,
现在，你的图像和标题在语义上是正确的，你可以应用CSS，如你所愿:
图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)
2. 创建自定义包含
你需要在你的_includes文件夹中创建一个image.html文件，并使用Markdown中的Liquid将其包含在内。
2.1. 创建_includes / image.html
在你的_includes文件夹中创建image.html文档:
<!-- _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=""更改为srcab ="")
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 -->
%}
一个可点击的图像:(add 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，如你所愿:
图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)
其他回答
Andrew的@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> markdown:
***Image:*** *description*
对于带标题的图像，正确的HTML是<figure> with <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特性(如表格、星号等)来生成标题，那么你只是在改变Markdown的使用方式。
我知道这是一个老问题，但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或figcaption标签，但这将是一个简单的替代方案，无需使用任何插件。
在你的标记中，你可以用强调标签包装标题，并将其直接放在图像的下面，而不需要插入新的行，如下所示:
*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，你也可以使用任何你想要的标签。只要确保有一个标签，否则你将无法设置它的样式。
在_config. conf文件中添加如下配置。yml文件
# prose.io config
prose:
rooturl: '_posts'
media: 'img'
ignore:
- 404.html
- LICENSE
- feed.xml
- _config.yml
- /_layouts
- /_includes
- /css
- /img
- /js
metadata:
_posts:
- name: "layout"
field:
element: "hidden"
value: "post"
- name: "title"
field:
element: "text"
label: "Post title"
placeholder: "Title"
alterable: true
- name: "subtitle"
field:
element: "textarea"
label: "Subtitle"
placeholder: "A description of your post."
alterable: true
- name: "date"
field:
element: "text"
label: "Date"
help: "Enter date of post."
placeholder: "yyyy-mm-dd"
alterable: true
- name: "image"
field:
element: "text"
label: "Image"
help: "Add a thumbnail image to your post."
placeholder: "Thumbnail"
alterable: true
- name: "published"
field:
element: "checkbox"
label: "Publish"
help: "Check to publish post, uncheck to hide."
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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" %}
{% endfigure %}
1.3. 风格,
现在，你的图像和标题在语义上是正确的，你可以应用CSS，如你所愿:
图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)
2. 创建自定义包含
你需要在你的_includes文件夹中创建一个image.html文件，并使用Markdown中的Liquid将其包含在内。
2.1. 创建_includes / image.html
在你的_includes文件夹中创建image.html文档:
<!-- _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=""更改为srcab ="")
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 -->
%}
一个可点击的图像:(add 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，如你所愿:
图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)
推荐文章
- 了解Git和GitHub的基础知识
- 在GitHub上有一个公共回购的私人分支?
- 只用GitHub动作在特定分支上运行作业
- Git合并与强制覆盖
- 是否有一个链接到GitHub下载文件的最新版本的存储库?
- GitHub -致命:无法读取用户名https://github.com':没有这样的文件或目录
- Github:我能看到回购的下载数量吗?
- 如何运行一个github-actions步骤，即使前一步失败，同时仍然失败的工作
- 当我试图推到原点时，为什么Git告诉我“没有这样的远程‘原点’”?
- 在GitHub repo上显示Jenkins构建的当前状态
- 如何取消在github上的拉请求?
- HEAD和master的区别
- 在另一个目录中运行操作
- GitHub克隆与OAuth访问令牌
- 我可以在GitHub上对要点进行拉请求吗?
