在jekyll网站上预览博客文章

时间:2013-05-17 20:37:05

标签: html css jekyll

到目前为止,我有使用jekyll的index.html页面,这里是引用:

---
layout: layout
title: "Posts"
---

<section class="content">
  <ul class="listing">
    {% for post in site.posts %}
    <li>
        <h1 align="center"><a href="{{ post.url }}">{{ post.title }}</a></h1>
    </li>
    {% endfor %}
  </ul>
</section>

我要做的是预览标题和链接下特定帖子的前25-30个单词。

最好的方法是什么?我实际上找到了解决方案,但我没有保存链接,现在花了2天时间搜索无济于事。

感谢您的帮助。

2 个答案:

答案 0 :(得分:2)

如果你只是要显示一定数量的单词,那么你需要使用Javascript来分隔内容并使用空格来计算单词(something like this)。

最有可能但是,您希望像预览一样展示帖子的一小部分内容。如果是这种情况,我建议您使用以下CSS将帖子正文插入<p>

.listing p{
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    width: 60%; /* or whatever you'd like */
}

DEMO

这将整齐地预览文本,并在宽度的末尾加上省略号。

答案 1 :(得分:1)

jekyll的最新版本1.0.x为所有帖子提供了一个post.excerpt变量,该变量由帖子的第一段组成。它可以非常安全地用于预览帖子。

有关详细信息,请参阅https://gist.github.com/benbalter/5555369