让Octopress为文章自动生成目录

最新推荐文章于 2024-05-25 09:47:30 发布

向晨宇

最新推荐文章于 2024-05-25 09:47:30 发布

阅读量1.1k

点赞数

分类专栏： IOS重新上路

IOS重新上路专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何为Octopress博客系统中的Markdown文章自动生成目录。通过编写Ruby插件，该插件能够识别Markdown文件中的标题并创建相应的目录链接，极大提升了长篇文章的阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让Octopress为文章自动生成目录

平时写Markdown的时候，已经养成了用不同个数的#来分级标题的习惯。对于一篇较长的文章，如果能有一个包含这些分级标题的目录，不仅可以较方便的概览文章内容，还可以快速定位到想要看的内容。之前的文章我曾经手动加过目录，实在是很麻烦，今天周末闲着没事就写了一个自动生成目录的插件。

Octopress的插件是用ruby写的，之前没有接触过ruby，好在不难，照葫芦画瓢也就写出来了，根据h标签生成目录然后在对应地方添加锚点就可以了。

安装

安装插件十分简单，只要在plugins文件夹中新建一个markdwon_dir.rb文件，并将以下代码拷进去，最后重新rake generate一下就可以了。

      
       # MardowndirFilter.rb
      
      
       # Add content for each post 
      
      
       # swm8023 c4fun.cn
      
      
       # 11.24.2013
      
      
       #
      
      
       require 
       './plugins/post_filters'
      
      
      
       module MarkdowndirFilter
      
              
       @@ind = 
       0
      
              
       def generatedir(post)
      
      
                       content = post.content;
      
      
                       dir_str = 
       "<div id='markdir'><p><strong>Contents</strong></p>";
      
      
                       pcontent = 
       ""
      
                      
       while md = 
       /<h(\d)>(.*?)<\/h\d>/.match(content) 
       do
      
                              
       # puts md[0];
      
      
                               content = md.post_match
      
      
                               pcontent += md.pre_match + 
       "<span id =\"markdir#{@@ind}\"></span>"+md[
       0]
      
      
                               hx = 
       Integer(md[
       1])
      
      
                               dir_name = md[
       2]
      
      
                               dir_name = md[
       1] 
       if md = 
       /<strong>(.*?)<\/strong>/.match(dir_name) 
      
      
                               dir_str += 
       "    " 
       while (hx = hx - 
       1) > 
       0
      
      
                               dir_str += 
       "<a href=\"#markdir#{@@ind}\">" + dir_name +
       "</a><br/>"
      
                              
       @@ind = 
       @@ind + 
       1
      
                      
       end
      
      
                       pcontent += content
      
      
                       dir_str += 
       "</div>"
      
                      
       #puts dir_str
      
      
                       dir_str + pcontent 
      
              
       end
      
      
       end
      
      
      
       module Jekyll
      
              
       class Markdowndir < PostFilter
      
                      
       include 
       MarkdowndirFilter
      
                      
       def post_render(post)
      
      
                               post.content = generatedir(post) 
       if post.is_post?
      
                      
       end
      
              
       end
      
      
       end
      
      
      
       Liquid::Template.register_filter 
       MarkdowndirFilter

然后为目录增加CSS效果，将下面的CSS代码添加/sass/custom/_style.scss中就可以了。我对前端的这些东西一直不擅长，随便写了一下，前端大牛们有兴趣的话可以帮着美化一下。

1 2	#markdir {background:#ebebeb;padding:10px;margin-bottom:10px;} #markdir p {font-size:18px;margin-bottom:3px;}

使用

我们在markdown中编写如下代码，在博客的最前面能看到生成的目录效果

      
       ##一、测试一级菜单
      
      
       ###1.1测试二级菜单
      
      
       ###1.2测试二级菜单
      
      
       ####1.2.1测试三级菜单
      
      
       ###1.3测试二级菜单
      
      
       ##二、测试一级菜单
      
      
       ###2.1测试二级菜单
      
      
       ###2.2测试二级菜单