我在Github上主持一个Jekyll博客，用Markdown写我的帖子。当我添加图像时，我这样做:
然后显示文本中的图像。
然而，我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
你可以使用这个javascript从图像的alt自动生成一个图标题。
您可以添加一些css使底部文本看起来更真实。
这同样适用于降价。[HERE]()会出现在图像下方。
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute("alt");
var figcaption = document.createElement("figcaption");
figcaption.innerHTML = altText;
images[i].insertAdjacentElement("afterend", figcaption);
}
var images = document.getElementsByTagName（“img”）; for （var i = 0; i < images.length; i++） { var altText = images[i].getAttribute（“alt”）; var figcaption = document.createElement（“figcaption”）; figcaption.innerHTML = altText; images[i].insertAdjacentElement（“afterend”， figcaption）; } <img src=“https://www.w3schools.com/tags/img_girl.jpg” alt=“穿夹克的女孩”>
其他回答
这个选项表面上看起来可能很复杂，但实际上一点也不复杂，它解决了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;
}
这个过程尽量简单，以便于理解和修改。我已经尽我所能描述了这个过程。如果任何人有问题，请留下评论，我会更新答案。
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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(仅供图片使用) 图标题(仅供标题使用)
你可以使用这个javascript从图像的alt自动生成一个图标题。
您可以添加一些css使底部文本看起来更真实。
这同样适用于降价。[HERE]()会出现在图像下方。
var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var altText = images[i].getAttribute("alt");
var figcaption = document.createElement("figcaption");
figcaption.innerHTML = altText;
images[i].insertAdjacentElement("afterend", figcaption);
}
var images = document.getElementsByTagName（“img”）; for （var i = 0; i < images.length; i++） { var altText = images[i].getAttribute（“alt”）; var figcaption = document.createElement（“figcaption”）; figcaption.innerHTML = altText; images[i].insertAdjacentElement（“afterend”， figcaption）; } <img src=“https://www.w3schools.com/tags/img_girl.jpg” alt=“穿夹克的女孩”>
我知道这是一个老问题，但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或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."
推荐文章
- GitHub上的分叉和克隆有什么区别?
- 如何将现有的解决方案从Visual Studio 2013添加到GitHub
- 是否可以在GitHub上搜索特定的文件名?
- 如何将LaTeX与Markdown混合?
- GitHub -未能连接到GitHub 443 windows/连接到GitHub失败-无错误
- 我怎么能让詹金斯CI与Git触发器推到主人?
- 如何从拉请求中删除提交
- 如何用分发文件发布npm包?
- 如何同步项目到GitHub与Android工作室?
- 跟踪在GitHub上创建的一个新的远程分支
- 如何将一个特定的提交从一个分支合并到Git中的另一个分支?
- 从pull请求中删除一个修改过的文件
- 下载GitHub项目的最快方式
- 乳胶渲染在README。md在Github上
- 在Markdown Jekyll中使用图像说明
