当今大多数的团队都实现了前、后端分支。前端与后端的沟通都是通过接口来实现的(一般情况下都是webapi接口)。这种情况你肯定需要一个接口查询的帮助文档,这个当然用swagger都可以实现。但做为前端开发的我们是否也应该考虑把自己写的组件以帮助文档的方式公开都团队其他人员使用。就像iview,easyui等UI组件都有自己的帮助文档。今天我们都介绍一套工具(其中某些组件经过本人的改造)

一、需要的组件

1. Hexo:静态博客生成器

2. Hexo-theme-doc:基于Hexo实现的帮助文档类型的皮肤,并对其中的某些逻辑进行完善

3. lunr-languages:实现lunr搜索对多语言的支持

二、实现的效果

上述演示效果为本人开发的ko-easyui插件的帮助文档。你可以访问此地址查看https://ko-plugins.gitee.io/koeasyui/index.html

效果看上去是简单了点,但却能达到对一套UI组件的说明,也是不错的。

三、对插件的改造

3.1 Hexo-them-doc的改造

对components.jsx中触发搜索的参数进行调整如下(使用其更快的触发搜索):

class SearchForm extends React.Component {constructor (props) {super(props);}handleKeyUp (e) {if (query.length < 2) { return; }}}

主要就是把query.length < 3改为query.length < 2。

然后,引入修改后的lunr-languages(支持中文搜索的控件),修正代码如下(search/build.js):

let support = require('lunr-languages/lunr.stemmer.support');
let zhcn = require('lunr-languages/lunr.zhcn');
support(lunr);
zhcn(lunr);
module.exports = function build (ctx) {const index = lunr(function () {//添加对中文的支持this.use(lunr.zhcn);this.ref('id');this.field('title');this.field('body');}
}

上述是缩减之后的代码,其中主要是对lunr.zhcn的使用。

3.2 lunr-languages的改造

对lunr-languages的改造,增加了lunr.zhcn.js文件,增加对中文搜索的支持,代码如下:

/*** lunr对中文分词的支持*/
;
(function(root, factory) {if (typeof define === 'function' && define.amd) {// AMD. Register as an anonymous module.
    define(factory)} else if (typeof exports === 'object') {/*** Node. Does not work with strict CommonJS, but* only CommonJS-like environments that support module.exports,* like Node.*/module.exports = factory()} else {// Browser globals (root is window)
    factory()(root.lunr);}
}(this, function() {/*** Just return a value to define the module export.* This example returns an object, but the module* can return a function as the exported value.*/return function(lunr) { /* throw error if lunr is not yet included */if ('undefined' === typeof lunr) {throw new Error('Lunr is not present. Please include / require Lunr before this script.');}/* throw error if lunr stemmer support is not yet included */if ('undefined' === typeof lunr.stemmerSupport) {throw new Error('Lunr stemmer support is not present. Please include / require Lunr stemmer support before this script.');}/*Thai tokenization is the same to Japanense, which does not take into account spaces.So, it uses the same logic to assign tokenization function due to different Lunr versions.*/var isLunr2 = lunr.version[0] == "2";/* register specific locale function */lunr.zhcn = function() {this.pipeline.reset();this.pipeline.add(lunr.zhcn.trimmer,lunr.zhcn.stopWordFilter,lunr.zhcn.stemmer);if (isLunr2) { // for lunr version 2.0.0this.tokenizer = lunr.zhcn.tokenizer;} else {if (lunr.tokenizer) { // for lunr version 0.6.0lunr.tokenizer = lunr.zhcn.tokenizer;}if (this.tokenizerFn) { // for lunr version 0.7.0 -> 1.0.0this.tokenizerFn = lunr.zhcn.tokenizer;}}};var segmenter = new lunr.TinySegmenter(); lunr.zhcn.tokenizer = function(obj) {var i;var str;var len;var segs;var tokens;var char;var sliceLength;var sliceStart;var sliceEnd;var segStart;if (!arguments.length || obj == null || obj == undefined)return [];if (Array.isArray(obj)) {return obj.map(function(t) {return isLunr2 ? new lunr.Token(t.toLowerCase()) : t.toLowerCase();});}str = obj.toString().toLowerCase().replace(/^\s+/, '');for (i = str.length - 1; i >= 0; i--) {if (/\S/.test(str.charAt(i))) {str = str.substring(0, i + 1);break;}}tokens = [];len = str.length;for (sliceEnd = 0, sliceStart = 0; sliceEnd <= len; sliceEnd++) {char = str.charAt(sliceEnd);sliceLength = sliceEnd - sliceStart;if ((char.match(/\s/) || sliceEnd == len)) {if (sliceLength > 0) {segs = segmenter.segment(str.slice(sliceStart, sliceEnd)).filter(function(token) {return !!token;});segStart = sliceStart;for (i = 0; i < segs.length; i++) {if (isLunr2) {tokens.push(new lunr.Token(segs[i], {position: [segStart, segs[i].length],index: tokens.length}));} else {tokens.push(segs[i]);}segStart += segs[i].length;}}sliceStart = sliceEnd + 1;}}return tokens;}lunr.zhcn.stemmer = (function(){return function(word) {return word;}})();lunr.Pipeline.registerFunction(lunr.zhcn.stemmer, 'stemmer-zhcn');/* lunr trimmer function */lunr.zhcn.wordCharacters = "一二三四五六七八九十百千万億兆一-龠々〆ヵヶぁ-んァ-ヴーア-ン゙a-zA-Za-zA-Z0-90-9";lunr.zhcn.trimmer = lunr.trimmerSupport.generateTrimmer(lunr.zhcn.wordCharacters);lunr.Pipeline.registerFunction(lunr.zhcn.trimmer, 'trimmer-zhcn');/* lunr stop word filter. see https://www.ranks.nl/stopwords/chinese-stopwords */lunr.zhcn.stopWordFilter = lunr.generateStopWordFilter('的 一 不 在 人 有 是 为 以 于 上 他 而 后 之 来 及 了 因 下 可 到 由 这 与 也 此 但 并 个 其 已 无 小 我 们 起 最 再 今 去 好 只 又 或 很 亦 某 把 那 你 乃 它 吧 被 比 别 趁 当 从 到 得 打 凡 儿 尔 该 各 给 跟 和 何 还 即 几 既 看 据 距 靠 啦 了 另 么 每 们 嘛 拿 哪 那 您 凭 且 却 让 仍 啥 如 若 使 谁 虽 随 同 所 她 哇 嗡 往 哪 些 向 沿 哟 用 于 咱 则 怎 曾 至 致 着 诸 自'.split(' '));lunr.Pipeline.registerFunction(lunr.zhcn.stopWordFilter, 'stopWordFilter-zhcn');};
}))

转载于:https://www.cnblogs.com/cqhaibin/p/9337009.html

Hi,给他介绍一款markdown的帮助文档生成器相关推荐

  1. Sandcastle帮助文档生成器使用介绍

    一.软件介绍 Sandcastle是一个管理类库的文档编译器,是用于编译发布组件(Assembly)信息的一个工具,这个工具通过反射和 Xslt技术,可以从dll文件及其xml注释(命令行编译时加/d ...

  2. 如何使用Markdown语言编写文档

    目录 Markdown 语言简介 Markdown基础语法 一.标题 二.段落格式 1. 字体 2. 分隔线 3. 删除线 4. 下划线 5. 脚注 三.列表 1. 无序列表 2. 有序列表 3. 列 ...

  3. Markdown写接口文档,自动添加TOC

    上回说到,用Impress.js代替PPT来做项目展示.这回换Markdown来做接口文档好了.(不敢说代替Word,只能说个人感觉更为方便)当然,还要辅之以Git,来方便版本管理. Markdown ...

  4. apiDoc 一款很不错api文档生成工具

    apiDoc 一款很不错api文档生成工具,在开发接口的时候,需要给同事看相应的接口文档.给大家推荐一个生成文档的工具--apiDoc,最后生成的文档以网页的形式发布,方便快捷,便于阅读. 创建项目目 ...

  5. 推荐 6 款还不错的文档协作工具~

    你们团队是否正在寻找便捷丰富功能的文档协作软件? 文件协作软件帮助你和你的团队更有效地工作,并进行实时协作,为创新创造更多的空间. 但是,今天有数百种文档协作工具,你应该选择哪一种呢? 为了帮助你,我 ...

  6. .md markdown typora 富文档(markdown语法)的快捷键使用

    .md markdown typora 富文档 (markdown语法)的快捷键使用 1.标题快捷键 ctrl+1 一级标题标题 ctrl+2 二级标题 ctrl+i(i为数值最高为6) 或者 #+空 ...

  7. 学习笔记:利用markdown写readme文档 (Udacity学城)

    周末逛知乎等资讯平台的时候,无意间了解到Udacity学城有一期关于利用markdown撰写readme文档的教程,想到CSDN博客也提供了markdown编辑功能,而自己到现在还不会用,看着自己写的 ...

  8. 介绍一款Markdown格式写作神器Typora

    Typora 是一款强大且功能完善的 Markdown 编辑器,免费且可跨平台使用,可以在 Windows,MacOS 和 Linux 系统上安装使用,它拥有友好的用户界面,支持实时预览,能够更加高效 ...

  9. Markdown转Word文档在线工具

    C语言自学完备手册(33篇) Android多分辨率适配框架 JavaWeb核心技术系列教程 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View ...

最新文章

  1. 太神奇的 SQL 查询经历,group by 慢查询优化!
  2. 算法学习:AC自动机
  3. 热烈庆贺清明小长假的到来
  4. matlab 涡轮流量计_秦皇岛卫生级流量计定制
  5. 一条mysql分组查询的问题分析
  6. C.【转】C语言字符串与数字相互转换
  7. 【Linux基础 11】vi和vim编辑器的使用
  8. python函数做n_简单Python函数的O(N)时间复杂性
  9. Blazor编辑表单状态控件
  10. python 从地址获取数据失败怎么解决_python面试题大全
  11. 【渝粤教育】国家开放大学2018年秋季 0169-22T工程制图基础 参考试题
  12. cssText 和 this
  13. c语言系统主函数流程图,c语言流程图【调解方式】
  14. the JDBC Driver has been forcibly unregistered.
  15. Java 生成数字证书系列(三)生成数字证书
  16. 如何屏蔽百度搜索推广
  17. 云计算基础(二)—— 虚拟化
  18. 详细解说笔记本电脑怎么录视频
  19. android studio虚拟机无法启动 The system requirements are not satisfied、vmx enabled no、vmx supported no
  20. 2018苹果开发者技术支持新规

热门文章

  1. jQuery面试题-2017年7月1日
  2. 1086: ASCII码排序(多实例测试)
  3. linux通过pid查看进程信息
  4. linux 系统下通过 pid 查看相关进程信息的方法
  5. 小米盒子3代码公布了,你要刷机吗?
  6. 检错纠错理论——海明码与海明距离
  7. LaTeX快速入门:一文浅谈TeX排版语法
  8. android 1.6手机,更快的“甜甜圈” Android 1.6体验
  9. 神经网络相似性测量原理,神经网络相似性测量法
  10. mysql数据库压测_MySQL数据库压测有哪些注意事项和FAQ