在 jekyll 站点中预览博客文章答案

【问题标题】：Previewing blog post in jekyll site在 jekyll 站点中预览博客文章
【发布时间】：2013-05-18 21:35:56
【问题描述】：

到目前为止，我有 index.html 页面使用 jekyll，这是引用：

---
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 天时间搜索无济于事。

感谢您的帮助。

【问题讨论】：

设置大小就足够了吗？即在带有width:200px; overflow:hidden 的div 中？还是您希望它是字数？
谢谢 Carrie，我相信一套尺寸就足够了。

标签： html css jekyll

【解决方案1】：

如果您只想显示一定数量的单词，那么您需要使用 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

这将整齐地预览宽度末尾带有省略号的文本。

【讨论】：

谢谢你，Carrie，我真的很感谢你的快速帮助 - 你今天是我的英雄，只是说！
在最新的 jekyll 版本中不再需要这个，详情请看我的回答。

【解决方案2】：

最新版本的 jekyll 1.0.x 为所有帖子提供了一个 post.excerpt 变量，其中包含帖子的第一段。它可以非常安全地用于预览帖子。

详情请见https://gist.github.com/benbalter/5555369。

【讨论】：

感谢 Polygnome，这是一个非常简洁的功能，感谢您在主题关闭后发帖 - 您确实很棒！