JQuery Content Directory

JQuery Content Directory 是一个 WordPress 插件，只能在 WordPress 2.7 或以上版本下工作。它是在 jquery-table-of-contents 插件基础上增强制作而成。

该插件可以为博客文章自动生成文章目录，并把目录放置在文章右上角。浏览者可以通过目录了解文章层次，也可以快速跳转到感兴趣的段落阅读。

插件使用效果预览

JQuery Content Directory 安装很简单：上传并激活插件即可，也可以直接在 WordPress 后台安装。需要注意的是，设置时最好具备一点 WordPress 主题结构和 CSS 基础。

安装之后，可以到 WordPress 后台的“设置”中找到“自动文章目录设置”进行配置。经过简单配置后，博客文章就可以拥有自动目录功能。

设置文章目录定位

JQuery Content Directory 需要知道主题中“文章正文”所在的标签位置，以及哪些标题标签用作分段标识。也就是说，需要告诉插件：

• 文章内容被限定在哪个 CSS 选择器中；
• 使用哪个 HTML 标题标签生成目录层级，例如 h2。

例如，我的博客文章内容被限定在 .jquerycd .entry 标签中，并且以 h2 标签作为分段标识，因此可以把内容区域选择器设置为：

.jquerycd .entry

分段标题标签设置为：

h2

如果你的主题结构不同，需要根据自己的 single.php 或浏览器开发者工具检查实际的文章容器。

如何查看标签

有的朋友不知道自己的文章位于主题中的哪个标签内，可以通过下面的步骤查找：

1. 进入 WordPress 后台。
2. 打开“外观” => “编辑”。
3. 找到 single.php。
4. 在模板文件中查找输出文章内容的代码，一般是：

<?php the_content(); ?>

1. 查看这段代码外层最近的 HTML 标签及其 class 名称。

例如，如果 the_content() 外层结构类似下面这样：

<div class="jquerycd">
  <div class="entry">
    <?php the_content(); ?>
  </div>
</div>

那么文章内容的限定标签就是：

.jquerycd .entry

文章目录生成样式设置

JQuery Content Directory 支持用户自定义目录样式。可以在后台设置目录标题，也可以通过修改 CSS 控制目录显示效果。

例如，把目录标题设置为“我是标题”，前台显示时就会使用这个标题作为目录区域的名称。

插件默认通过 jquery-toc.css 文件设置目录样式。当然，也可以在主题的 style.css 中定义新的 CSS 规则。只要选择器名称和后台设置的 CSS 名称对应即可。

例如，可以在 style.css 中新增一个 #newstyle 来设置目录样式：

/* 列表样式 */
#newstyle ul {
  padding: 5px 0 0 14px;
  margin: 0;
  border-top: 2px solid #050;
}

#newstyle ul a {
  color: #050;
}

/* 目录标题样式 */
#newstyle strong {
  font-size: 16px;
  line-height: 30px;
}

/* 显示/隐藏标签样式 */
#newstyle span {
  margin-left: 5px;
}

然后在插件后台把 CSS 名称设置为：

newstyle

保存后，文章目录就会使用这个新的样式规则显示。