Gitdown-cn：支持Markdown中文TOC的Gulp插

昨天写了一篇文章，介绍了如何进行模块化文档编写与自动化打包成单个HTML文件的方法。但是还有一点遗憾，就是不支持中文标题，这个是由于我使用的两个插件本身的问题，今天花了点时间，把这个问题解决了一下，记录如下。

我的计划是把这两个插件合并为一个，并新起一个名字，上传到npmjs上去，这样就可以把原来的工程中的引用直接替换为这个新的插件，方便随时调用。

思路确定了，下面介绍一下工作步骤。

新建了一个工程 gitdown-cn，将原先的gitdown和markdown-contents代码都复制过来，目录结构如下所示。

工程目录

把原来gitdown中引用markdown-contents插件的地方都修改为引用当前目录下的mardown-contents.js文件

const MarkdownContents = require('./markdown-contents.js');

修改package.json文件，精简一下，变成我自己的打包文件

{
  "bundleDependencies": false,
  "dependencies": {
    "bluebird": "^3.5.3",
    "contents": "^5.0.0",
    "deadlink": "^1.1.3",
    "diacritics-map": "^0.1.0",
    "eslint": "^5.13.0",
    "filesize": "^4.0.0",
    "gitinfo": "^2.2.0",
    "glob": "^7.1.3",
    "jsonfile": "^5.0.0",
    "lodash": "^4.17.11",
    "marked": "^0.6.0",
    "moment": "^2.24.0",
    "stack-trace": "^0.0.10",
    "url-extractor": "^2.0.2",
    "yargs": "^12.0.5"
  },
  "keywords": [
    "github",
    "markdown",
    "table of contents",
    "toc",
    "chinese",
    "include",
    "variable",
    "transclusion"
  ],
  "license": "BSD-3-Clause",
  "main": "./dist/index.js",
  "name": "gitdown-cn",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/SagittariusZhu/gitdown-cn.git"
  },
  "version": "2.5.7"
}

然后到原来的项目目录下执行以下命令，从本地添加这个插件

npm install ../gitdown-cn

修改gulpfile.js中的引用，从gitdown修改为gitdonw-cn

const Gitdown = require('gitdown-cn');

这时候就可以尝试执行以下gulp命令，看看是否能够正常工作。
OK，接下了就是修改gitdown-cn中相关代码，使其能够支持中文标题自动生成对应的ID。

这里用了 querystring插件来对中文标题进行编码，用生成的编码值来作为标题的ID

var querystring = require('querystring');
... ...
MarkdownContents.slugify = function(str) {

  str = str.toLowerCase();
  str = str.split(' ').join('-');
  str = str.split(/\t/).join('--');
  str = str.split(/[|$&`~=\\\/@+*!?({[\]})<>=.,;:'"^]/).join('');
  str = str.split(/[。？！，、；：“”【】（）〔〕［］﹃﹄“ ”‘’﹁﹂—…－～《》〈〉「」]/).join('');
  str = replaceDiacritics(str);
  str = querystring.escape(str);

  return str;
};

其它还有一些修改，这里就不一一列举了，修改完毕后，回到原来的项目目录下，把标题修改为中文，然后再执行gulp，就可以看到如下的页面，是不是很爽啊！

效果图

一切都OK了，就可以把插件发布到npmjs上，这样大家都可以用啦，好东西要共享嘛！

npm publish

这是插件gitdown-cn，欢迎使用！