鹈鹕 - 将图像添加到摘要

Question

我正在使用 pelican 创建网站。我正在尝试向摘要中添加图片，以便摘要始终以图片开头。

我尝试将图像添加到元数据的摘要中（使用 markdown），但它只显示在索引页面上，而不显示在其他页面上（在下面的示例中，图像未显示在帖子页面中） .我还必须将图像添加到与有时以奇怪的方式呈现的文本相同的行中（根据图像大小，某些文本位于图像的一侧）。

这是元数据的示例：

Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Summary: ![figure 1](images/fig1.png) and this is my post summary

我也尝试过使用摘要插件，但是那根本不起作用。

将图像添加到摘要的最简单方法是什么？我希望尽可能避免修改 html 代码。

Answer 1

在您的文章中将图像添加为字段元数据，如“Cover”，如下所示：

Title: this is my title
Slug: slug
Date: 2017-05-04 23:00
Category: Posts
Tags: pelican
Author: Eyal
Cover: images/fig1.png
Summary: and this is my post summary

所以你可以用这种方式在你的模板中使用它。

{% if article.cover %}<img src="{{ article.cover }}" alt="">{% endif %} {{ article.summary }}

此行在元数据中查找 Cover 键，如果有，则创建 img 标签。如果不是，则直接通过。

Answer 2

在 article.summary 已被使用的地方添加它。我使用 pelican-theme alchemy（使用 bootstrap）并且 article.summary 在 index.html 中。我将其扩展如下：

  <div class="col-sm-8">
    <h4 class="title"><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h4>
    <div class="content">
      {{ article.summary|striptags }}
      {% if article.cover %}           
         <div class="container"><div class="col-md-6" style="padding-left: 0px;  padding-right: 0px;">
           <img src="{{ article.cover }}" class="img-fluid">
           </div></div>   
      {% endif %} 
    </div>
  </div>

这适用于 images 文件夹中的图片。

但是我还有一个问题：帖子没有在同一个images文件夹中找到图片:-(

Answer 3

对于那些在 Pelican 中使用 AboutWilson 模板的人，我已经设法通过在 index.html 文件（在模板文件夹中）中添加以下代码来使其正常工作

{% if article.cover %}
Cover:
<span> 
    <img src="{{ article.cover }}" alt=""> 
</span>
{% endif %}

鹈鹕 - 将图像添加到摘要

Pelican - add image to summary

pelican