JEKYLL 支持页面内目录导航

在网上搜索到一个解决方案,可以在GitHub Pages 下使用:

GitHub项目:Jekyll Pure Liquid Table of Contents

  • 下载 toc.html 文件
  • 放到 _includes 目录
  • 在 _layouts 下用到的 html 里面,在 content 前面加上一行
{% include toc.html html=content %}

我的实践

下载 toc.html

我下载了最新版本的 toc.html https://github.com/allejo/jekyll-toc/releases/latest

复制一个模板

我的做法是新增一个模板,复制 _layouts/post.html 为 _layouts/post-toc.html

增加了两次,用于做移动的适配。

  <div class="toc">
    <div class="title">目录 Contents</div>
    <div class="content">{% include toc.html html=content %}</div>
  </div>
  <div class="toc-mobile">
      <nav class="title" onclick="javascript:document.getElementById('toc_mobile_content').classList.toggle('show');">目录 Contents</nav>
      <div class="content" id="toc_mobile_content" onclick="javascript:document.getElementById('toc_mobile_content').classList.toggle('show');">{% include toc.html html=content %}</div>
  </div>

调用模板

新增POST时,指定使用的layout模板

---
layout: post-toc
category : code
title: GitHub Pages + JEKYLL 支持页面内目录导航
description: 使用jekyll-toc定制页面内目录
---

可以在我网站上的这个页面看到这个目录的效果。如果需要可以来我的Github项目下载代码研究。

引用

  1. linking to Jekyll Pure Liquid Table of Contents
  2. linking to stackoverflow:jekyll-code-in-jekyll