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

![图片名称](http://link.com/image.jpg)

然后显示文本中的图像。

然而,我怎么能告诉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."

其他回答

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

这是基本的标题用法。不需要使用额外的插件。

你可以用表格。它工作得很好。

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

结果:

这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题,这就是为什么我用HTML给出示例的原因,这样您就可以轻松地修改图像大小。这对我很管用。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

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:

![description](https://img.jpg "description")
***Image:*** *description*

如果你不想使用任何插件(这意味着你可以直接将它推送到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." %}