WordPress中的Markdown文本目录

学习笔记越写越多，发现这类记录和以前发的（摄影习作这种图文杂志或者《心爱的童话》这类纯文字的文学作品）是不同的，很多的标题在里面，又有各种代码的嵌入，还会有字典、脚注这些东西，所以在学习笔记这类文章中，有个目录还是比较直观的，会为阅读和复习提供很多便捷。

所以，今天折腾了一通目录，想要实现，在VS Code中写完Markdown之后，通过复制渲染的预览HTML页面，将Markdown中用[TOC]^[1]生成的目录一并带入WordPress中去。当然，前提依然是尽量少给WordPress添麻烦。

首先尝试无插件解决

因为现在的WP采用区块式的文章编辑器，其本身是不支持Markdown的，所以，经过多次尝试，无论是Markdown源码、渲染后的HTML预览页面，都无法通过简单的复制/粘贴就把目录带进去。至于渲染后的页面HTML源码倒是可以，但是会在CSS部分有不同的标签、类等，导致和WP网站本身的样式产生冲突，输出效果不好，手动修改又工程量太大（总不能没发一篇就折腾一次HTML源码）。遂，放弃该尝试。

WP Editor.md插件

既然躲不过插件，那不如干脆让WordPress支持Markdown好了。所以，测试了最一开始就想要使用的WP插件：WP Editor.md。

安装这个插件之后，可以让WP后台的文件编辑器直接就变成类似VS Code这样的Markdown编辑器，并且也是带有右侧同步预览的，Markdown的各种语法都能支持。也就是说，不仅仅实现了对Markdown的支持，还可以直接在WP中写Markdown，本来是挺方便的。

不过，在测试到本次折腾的主要目标——目录时，发现单独这个插件还解决不了问题，还需要另一个插件的配合：Table of Contents Plus。

于是去看看这个Table of Contents Plus究竟是干啥的。

Table of Contents Plus插件

经过查阅官方说明，原来这个插件是一个独立插件，其工作原理是：根据WP文章中的标题，自动在输出后的HTML页面上添加文章目录。

也就是说，无需在写文章的时候加入目录，连[TOC]也不需要加。

既然如此，我原本已经解决了Markdown到WordPress的其他问题，仅仅为了一个目录（虽然这挺重要）而增加两个插件，似乎有些负担过重了。而且这个插件的目录是在前台输出时自动生成，后台编辑文章没有任何障碍。同时，它还有比较实用的设置选项。那不如直接装这一个插件就好了。

Table of Contents Plus插件的安装和设置

安装

安装没啥可说的，直接WP后台去搜索Table of Contents Plus然后点个安装，稍等片刻就行了。跟安装其他插件一样。

设置

• Table of Contents Plus插件的设置还是比较全面的，目录相关的基础功能：显示位置、何时显示、是否隐藏、目录层级、目录自动编号等该有的都有。
• 它还提供了有关CSS样式方面的设置，可以选择默认自带的5种之一，也可以自定义颜色，甚至还可以禁用插件本身的CSS通过WP自己的css来控制，已达到大一统风格。
• 考虑到兼容性，还提供了关于锚点、连字符的设置；排除功能还可以将不想出现在目录中的标题通过关键字和通配符筛选来屏蔽。
• 甚至可以禁用其自动前台输出目录，而采用后台文章中添加[ t o c ]短代码（所有字母小写 不含空格），将目录添加到任何想要添加的地方。
• 仔细看看其他设置，该插件还可以根据选项生成站点地图Simtmap。

总结

综合这些功能，这插件做的还是比较靠谱的。目前只要安装这一个插件，就可以实现我最初的目标——在WordPress中给Markdown显示目录。

实际上，使用Table of Contents Plus之后，已经与Markdown无关了，其他所有文章都一样，只要文中的标题数量≥设置中的标题数量，就会自动显示目录，很方便。等于是在Markdown to WorePress的过程中又简化了一个步骤。原来还需要给要输出到WordPress的Markdown增加[TOC]，现在连这个都省了。

对于我的小站来说，最后要做的就是禁用插件自己的css，然后调整WP的css，让目录和网站风格统一就行了。

---

1. 在Markdown中生成文内标题目录的源码，显然是用了Table Of Contents的简称。属于Markdown的扩展，原生Markdown并不支持该功能。 ↩︎