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

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

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
对于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" /}。
其他回答
您可以尝试使用pandoc作为您的转换器。这里有一个jekyll插件来实现这一点。Pandoc将能够自动添加与您的alt属性相同的图形标题。
但你必须推送编译后的网站,因为github不允许在github页面中使用插件。
如果你不想使用任何插件(这意味着你可以直接将它推送到GitHub,而不需要先生成站点),你可以在_includes中创建一个名为image.html的新文件:
<figure class="image">
<img src="{{ include.url }}" alt="{{ include.description }}">
<figcaption>{{ include.description }}</figcaption>
</figure>
然后显示图像从您的markdown:
{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}
这个选项表面上看起来可能很复杂,但实际上一点也不复杂,它解决了Jekyll markdown渲染器(Kramdown)的其他问题。基本上,这个选项改变了一个用python制作的可扩展的渲染器,允许你安装扩展(有很多,例如markdown-字幕)和展开它(它有一个扩展API)。
第一步是定义一个自定义markdown处理器。你必须将markdown: CustomProcessor添加到_config.yml。 然后,我们必须创建CustomProcessor。创建一个名为_plugins的文件夹并添加一个名为MyConverter的文件。Rb与此内容:
class Jekyll::Converters::Markdown::CustomProcessor
def initialize(config)
end
def matches(ext)
ext =~ /^\.(md|markdown)$/i
end
def output_ext(ext)
".html"
end
def convert(content)
puts "EXECUTED"
md_path = "./_plugins/temp/temp.md"
html_path = "./_plugins/temp/temp.html"
File.write(md_path, content, mode: "w")
system("python ./_plugins/MyConverter.py")
content = File.read(html_path)
content
end
end
你还需要在插件中创建一个文件夹temp。
所有这些代码所做的就是将我们正在处理的文件的所有内容写入temp.md,调用一个python脚本,等待它完成,读取temp.html,并将其作为转换器的输出返回。
现在是时候用python创建转换器了。我选择使用Python-Markdown。它很容易使用,并且有大量的扩展。要使用转换器,我们必须在_plugins文件夹中创建一个名为MyConverter.py的文件,并将以下内容放在里面:
import markdown
markdown_extensions = [
'markdown_captions',
'def_list',
'nl2br',
'tables',
'codehilite',
'fenced_code',
'md_in_html',
'attr_list'
]
md_file = open("./_plugins/temp/temp.md", "r")
md_string = md_file.read()
md_file.close()
html_string = markdown.markdown(md_string, extensions=markdown_extensions, extension_configs =extension_configs)
html_file = open("./_plugins/temp/temp.html", "w")
html_file.write(html_string)
html_file.close()
这段代码只是加载扩展,读取temp.md文件,将其转换为html,并将其写入temp.html。使用所有这些扩展应该生成与默认的jekyll markdown renderere类似的输出。唯一没有与python-markdown捆绑在一起的扩展是markdown_captions,它发挥了神奇的作用。要安装python渲染器和扩展,你只需要运行pip install Markdown Markdown -captions。
这样就可以了,现在你的markdown被Python-Markdown翻译了。一些html元素我是不同的现在(在我的经验只有几个),所以也许你必须在css做一些小的改变。
这是我使用的css营地:
figure{
margin: 0px;
}
figcaption {
color: gray;
font-size: 0.8rem;
}
这个过程尽量简单,以便于理解和修改。我已经尽我所能描述了这个过程。如果任何人有问题,请留下评论,我会更新答案。
在投票结果最前面的答案中,我发现一个更明确的答案是使用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的使用方式。