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

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

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

{:.image-caption}
*The caption for my image*
然后在你的CSS文件中,你可以这样做:
.image-caption {
text-align: center;
font-size: .8rem;
color: lightgrey;
出来后看起来不错!
您可以尝试使用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." %}
你可以使用这个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=“穿夹克的女孩”>
你可以用表格。它工作得很好。
|  |
|:--:|
| *Space* |
结果: