我在Github上主持一个Jekyll博客,用Markdown写我的帖子。当我添加图像时,我这样做:

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
我在Github上主持一个Jekyll博客,用Markdown写我的帖子。当我添加图像时,我这样做:

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
在投票结果最前面的答案中,我发现一个更明确的答案是使用jekyll语法向某个东西添加一个类,然后按这种方式设置它的样式。
所以在帖子中,你可以这样写:

{:.image-caption}
*The caption for my image*
然后在你的CSS文件中,你可以这样做:
.image-caption {
text-align: center;
font-size: .8rem;
color: lightgrey;
出来后看起来不错!
其他回答
对于带标题的图像,正确的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的使用方式。
您可以尝试使用pandoc作为您的转换器。这里有一个jekyll插件来实现这一点。Pandoc将能够自动添加与您的alt属性相同的图形标题。
但你必须推送编译后的网站,因为github不允许在github页面中使用插件。
对于Kramdown,你可以使用{:refdef: style="text-align: center;"对齐中心
{:refdef: style="text-align: center;"}
{: width="50%" .shadow}
{: refdef}
{:refdef: style="text-align: center;"}
*Fig.1: This is an example image. [Source](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg)*
{: refdef}
你需要在文章的开头添加{::options parse_block_html="true" /}。
在_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."
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
这是基本的标题用法。不需要使用额外的插件。