码匠笔记

用心雕琢

Octopress 添加 扩展相关阅读

访问

前言

原生的 Octopress 没有更丰富的阅读体验,只有上一篇下一篇,每次需要为当前文章添加相关文章的时候都需要在 Markdown 里面手动填写,这样非常浪费时间又不全面,于是笔者使用 Category 作为相关性的依据,修改了 Liqiud 代码,使得每一个 post 里面有具有相关的文章。

实现

实现起来也是很简单的,直接把如下代码添加到 includes/article.html 里面,跟在下面代码之后即可。

1
<div class="entry-content">{{ content }}

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h2>扩展阅读</h2>
{% if page %}
    <ol>
      {% for category in page.categories %}
        {% for post in site.categories[category] %}
        {% if  page.url == post.url %}
          {% continue %}
        {% endif %}
        <li>
          <a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a>
        </li>
        {% endfor %}
      {% endfor %}
    </ol>
{% endif %}

原理就比较简单了,取到当前页面的 categories,然后循环遍历得到每一个category下面的 post 展示即可。

参照

实际中的应用可以参照如下地址
参考地址

扩展阅读

  1. 修复 Octopress Table 样式
  2. Commenthub —— 多说、网易云跟帖的替代品
  3. 给博客添加目录
  4. Octopress 添加标签云
  5. Octopress 首页添加‘更多’功能
  6. Octopress 博客搜索优化

作者

本文作者麻酱,欢迎讨论,指正和转载,转载请注明出处。
原文地址:Octopress 添加 扩展相关阅读
如果兴趣可以关注作者微信订阅号:码匠笔记
majiangbiji

评论