Question

我正在使用Jekyll在一个页面上收集博客摘录。一个问题是摘录中的特征图像通常从原始图像拉伸。我认为这是由于摘录中的特色图像的默认设置始终固定为300px * 100px大小。如何缩放特色图像而不是在摘录中使用固定大小，同时确保图像的大小不大于默认大小？

详细信息，我使用以下代码在我的post.html模板中生成博客摘录：

<header><h4><a href="{{ post.url }}">{{ post.title }}</a></h4></header>
<p><span>{{ post.subtitle }}</span></p>
<p style="font-style:italic"> {{ post.date | date_to_string }}</p>
{% if site.pageviews %}
<p style="font-style:italic"> pageviews: {{ post.pageviews }} </p>
{% endif %}
<article>
<div class="excerpt">
{{ post.content | strip_html | truncate:400  }}
</article>

此功能会自动将博客中的第一张图像作为特色图像抓取，并在摘录段落中显示。我无法找到特色图像的大小在Liquid中控制的位置...谢谢。

5月31日更新：回购是here。请参阅http://iciq.github.io上图片的最新帖子和图片摘录。我通过定义“scale”属性而不是post中图像的css样式的width属性来解决这个问题。但仍然愿意接受更优雅的解决方案。

Answer 1

让我们重构您撰写和展示帖子的方式。

使用Jekyll的摘录功能

{{ post.content | truncate: 200 }}，有时不准确。我们可以使用Jekyll's excerpt functionality为每个帖子定义更精确的摘录。

在 _config.yml ：

excerpt_separator: "<!--more-->"

在 _posts / yyyy-mm-dd-post-title.md ：

---
... front matter variables
---
Post excerpt here

<!--more-->

Post content here

您现在可以在帖子列表中准确打印您的需求：

示例文件 noteblog.html

[...]
---

{% include header.html %}
  <div class="row">
    <div class="col-sm-12">
      {% for post in site.posts limit:4 %}
        {% include postsummary.html %}
      {% endfor %}
[...]

_includes / postsummary.html

<div id="postsum">
  <time>{{ post.date | date_to_string }}</time>
  <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
  {% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
  {{ post.excerpt }}
  <a href="{{ post.url }}"><em>Read more</em></a>
</div>

关于我们的特色图片

有两种图像：

特征图像：用于文章显示中以进行一般说明。有时印刷或不印刷，尺寸不同，位于不同的地方。为了使用它们，我们需要将它们与内容分离。通常，我们会在前面的内容中引用它们。
主题图片：在您的文字中用于说明特定主题。他们需要在我们的文本中的特定位置。它们是内容的一部分。

您尝试做的事情是管理功能图片，并且您已经在前面提到了它：

_posts / 2016-05-27-group-study-on-advanced-topics-in-quantum-optics-II.md

image:
  feature: /assets/img/opticallypumpedatoms_featured.jpg

在 _includes / postsummary.html 中，使用twitter bootstrap类，您可以执行以下操作：

{% if post.image.feature and post.image.feature != "" %}
  {% assign hasImage = true %}
  {% assign excerptClass = "col-xs-10" %}
{% else %}
  {% assign hasImage = false %}
  {% assign excerptClass = "col-xs-12" %}
{% endif %}

<div class="row postsum">
  <div class="col-xs-12">
    <time>{{ post.date | date_to_string }}</time>
    <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
    {% if post.subtitle %}<h4><span>{{ post.subtitle }}</span></h4>{% endif %}
  </div>
  <div class="{{ excerptClass }}">
    {{ post.excerpt }}
    <a href="{{ post.url }}"><em>Read more</em></a>
  </div>
  {% if hasImage %}
  <div class="col-xs-2">
    <img src="{{ site.baseurl }}{{ post.image.feature }}" alt="{{ post.title }}" class="img-responsive">
  </div>
  {% endif %}
</div>

这将仅在特征图像存在时打印。

而且，由于您的样式表定位的#postsum有多次出现，您可以改为定位.postsum类。

在 assets / css / style.css 中，删除对#postsum的所有引用并添加：

.postsum{
    position: relative;
    padding: 10px;
    margin: 0 auto;
    margin-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(0, 0, 0, 0.1);
}
.postsum time {
    font-style: italic;
    text-align:right;
    float:right;
    line-height:1.8em;
}
.postsum h3 { line-height:1.2em; }
.postsum h4 { font-style: italic; }
.postsum img { float: right; }

你也可以用同样的方式重构 _includes / postexcerpt.html 。

Answer 2

仅供参考，你的问题实际上是一个CSS问题，而不是一个Jekyll问题。

您提供的代码甚至没有引用图像，因此无法帮助您。

但我怀疑您目前正在做的是将文章的图片导入您的博客列表，其中包含您用来在帖子的页面模板中显示图片的课程。

当帖子的图像以博客列表格式显示时，您需要创建并使用特殊类。

另外，在旁注：

如果内容只是一个h标签，则不需要使用标头标签;以及
开篇文章标签（如果您要使用的话）应该在标题之前。

以下是您可能想要使用的结构示例：

<!-- for each post in post loop, express something like: -->

<article>

<h4><a href="{{ post.url }}">{{ post.title }}</a></h4>

<p><span>{{ post.subtitle }}</span></p> 

<p style="font-style:italic"> {{ post.date | date_to_string }}</p> 

<img class="special-blog-image-class" src="{{ post.image.path }}" alt="{{ post.image.alt }}" title="{{ post.image.title }}"/>

{% if site.pageviews %}

<p style="font-style:italic"> pageviews: {{ post.pageviews }}</p>

{% endif %}

<p class="excerpt"> {{ post.content | strip_html | truncate:400  }}</p>

</article>

Answer 3

如上所述，问题很可能是一个问题。

您可以在降价文件中以多种方式设置图像样式。首先使用HTML语法或kramdown语法，可能还有更多......

如果您选择使用kramdown，则需要在_config.yml文件中进行配置。

markdown: kramdown

//然后在markdown文件上使用：

  Here is an inline ![smiley](smiley.png){:height="36px" width="36px"}

Answer 4

静态网站的一个非常酷的解决方案是使用CSS解决此问题，但使用像http://images.weserv.nl这样的图像调整大小服务。

如何在Jekyll博客摘录中正确缩放特色图片？

4 个答案:

使用Jekyll的摘录功能

关于我们的特色图片