GitHub Pages + JEKYLL 支持页面内目录导航
目录 Contents
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项目下载代码研究。