在杰基尔，我如何获得一个帖子的第一张照片？
在杰基尔，我如何获得一个帖子的第一张照片？
提问于 2014-08-23 16:11:07
在我的博客文章索引中，我想从文章中获取第一张图片，在索引中显示它，使用的是流动性，这样它就可以在github页面上工作。
我觉得分裂是一条路，但我对液体不太在行。
我希望能够获得图像url，并将其放入一个变量中以进行样式设置。
理想的解决办法是：
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{post.content | first_image}}</a>
</li>
{% endfor %}有什么想法吗？
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-08-23 20:53:46
开始工作了。不确定它将如何缩放，但是这个液体代码循环遍历所有的帖子，从post中抓取第一张图片的源，并显示该帖子。我用多个图像测试了它，它的工作原理和预期一样。
<ul>
{% for post in site.posts %}
<li>
{% assign foundImage = 0 %}
{% assign images = post.content | split:"<img " %}
{% for image in images %}
{% if image contains 'src' %}
{% if foundImage == 0 %}
{% assign html = image | split:"/>" | first %}
<img {{ html }} />
{% assign foundImage = 1 %}
{% endif %}
{% endif %}
{% endfor %}
<a href="{{ post.url }}">{{ post.title }}</a>
</li>
{% endfor %}
</ul>Stack Overflow用户
发布于 2015-12-25 15:57:36
您可以为您的前端事项定义一个名为"image“的自定义变量，因此它将像Wordpress的文章功能图像一样工作：
---
image: featured-image.jpg
---注意，请记住您的图像保存在哪里。在我的例子中，我创建了一个名为"imagens“的目录(这里是PT-BR)。然后，转到您的index.html并将图像添加到您想要的模板中。在我的网站上，看起来是这样的：
<ul class="post-list">
{% for post in site.posts %}
<li>
<h2>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
</h2>
<span class="post-meta">{{ post.date | date: "%b %-d, %Y" }},</span>
<span class="post-meta">por</span>
<span class="post-meta">{{ post.author }}</span>
</li>
//IMAGE
<img src="{{ site.baseurl }}/imagens/{{ post.image }}">
//IMAGE
{{ post.excerpt }}
<a class="btn btn-default" href="{{ post.url | prepend: site.baseurl }}">Continuar lendo</a>
{% endfor %}
</ul>就这样。
Stack Overflow用户
发布于 2014-08-23 20:07:35
对您的问题的一些解决方案：
1-使用后摘录标签Documentation is here
你的职位：
---
layout: post
title: Testing images
---
## Title
Intro Text
More intro text
Some more text blah !你的模板：
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>当您的图像标记出现在excerpt_separator (\n\n =两个换行符)之前时，它将出现在文章摘录中。
2-使用你的帖子的Yaml前端存储你的图像的数据
员额：
---
layout: post
title: Testing images
images:
- url: /assets/img/cypripedium-calceolum.jpg
alt: Cypripedium Calceolum
title: Cypripedium Calceolum
- url: /assets/img/hello-bumblebee.jpg
alt: Hello bumblebee !
title: Hello bumblebee !
---
Intro here yo ! <-- THIS IS THE EXCERPT
Post body begin, and first image not in excerpt
{% assign image = page.images[0] %} <-- first element of the array is zero
{% include image.html image=image %}
Some more text blah !
{% assign image = page.images[1] %}
{% include image.html image=image %}_includes/image.html (集中在一个用于标准化的包含中，但可以在模板中)：
<img src="{{ site.baseurl }}{{ include.image.url }}" alt="{{ include.image.alt }}" title="{{ include.image.title }}">索引页：
<ul class="posts">
{% for post in site.posts %}
<li>
<span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
<a class="post-link" href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
{{ post.excerpt }}
{% assign image = post.images[0] %}
{% include image.html image=image %}
</li>
{% endfor %}
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25463865
复制相关文章
相似问题
腾讯云开发者
