当今大多数的团队都实现了前、后端分支。前端与后端的沟通都是通过接口来实现的(一般情况下都是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 < ) { 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.0
this.tokenizer = lunr.zhcn.tokenizer;
} else {
if (lunr.tokenizer) { // for lunr version 0.6.0
lunr.tokenizer = lunr.zhcn.tokenizer;
}
if (this.tokenizerFn) { // for lunr version 0.7.0 -> 1.0.0
this.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');
};
}))

Hi,给他介绍一款markdown的帮助文档生成器的更多相关文章

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

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

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

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

  3. 第三期分享:一款很好用的api文档生成器

    主要用途:生成API的文档 源码链接:https://github.com/tmcw/docbox 最近刚好在看:Trending in open source,在JS语言中,slate一直在周排行上 ...

  4. 介绍3款Markdown编辑器

    为什么写此篇  自从CSDN的博客有了Markdown后,慢慢的了解并学会了用Markdown语法写博客.但CSDN博客是在浏览器中使用,于是一直寻找离线的Markdown编辑器.  网上先是找到了M ...

  5. 基于 Markdown 编写接口文档

    最近公司开发项目需要前后端分离,这样话就设计到后端接口设计.复杂功能需要提供各种各样的接口供前端调用,因此编写API文档非常有必要了 网上查了很多资料,发现基于Markdown编写文档是一种比较流行而 ...

  6. 再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高!

    一般在使用 Spring Boot 开发前后端分离项目的时候,都会用到 Swagger.Swagger 是一个规范和完整的框架,用于生成.描述.调试和可视化 RESTful 风格的 Web API 服 ...

  7. 使用 VS Code + Markdown 编写 PDF 文档

    背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...

  8. 如何快速实现 markdown 转 HTML 文档?

    我想要在 Github 上开一个主题博客,我希望通过 Markdown 语法写作,然后生成 HTML 并附带自定义样式显示在网页上. 我找到了 gulp-markdown 这个库,看起来符合我的需求场 ...

  9. 一款APP的交互文档从撰写到交付

    我第一份工作的设计总监是前百度设计师,34岁,一线设计12年:今年聊天说转了产品总监,如今39岁还活跃在行业中…… 我第二份工作的部门总监是前腾讯工程师,38岁,一线开发14年:2年前在Q群里跟我们说 ...

随机推荐

  1. Quartz学习-- quartz基本介绍和 Cron表达式

    Quartz学习 一. Quartz 大致简介 Quartz 是完全由 java 开发的一个开源的任务日程管理系统 ​任务日程管理系统 换句话说就是: ​ 一个预先确定的日程时间到达时,负责执行任务的 ...

  2. meta 刷新

    <meta http-equiv="refresh" content="5;url=地址" /> 5秒后刷新至URL地址

  3. myEclipse 配置tomcat清除缓存

    -Xms256m -Xmx512m -XX:MaxNewSize=64m -XX:MaxPermSize=128m

  4. 拿到月薪30K,必选一些Python好书!

    论述: Python是所有编程语言中与人工智能最紧密相连的编程语言,阿尔法狗都在使用的 Python 语言. 教育部早在两个月前(自2018年3月起)就以及公布:大学生全国计算机二级考试中必考Pyth ...

  5. [转]关于python中带下划线的变量和函数的意义

    Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下,不同程序员编写的 Python 代码可以保持最大程度的相似风格.这样就易于阅读, ...

  6. 机器学习,流式IoT和医疗设备互联

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 让我们来看一下机器学习是如何应用于医护行业以及如何借助Apache Spark对患者的监控数据进行处理 现如今,IoT数据,实时流式数据分析 ...

  7. PHP之cookies小练习

    //5-1.php 1 <? error_reporting(E_ALL ^ E_NOTICE); if ($_COOKIE['username']!="") { echo ...

  8. Oracle-01:基础命令小结

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 记录一下我的Oracle学习之路,详细的安装教程忙完这俩天会认真总结一版 本次记录这次学习cmd基础命令 一, ...

  9. Ubuntu 18.04 on Windows 10 更改 Oh-My-Zsh agnoster 主题下的目录背景色

    题外话 我的 MacBook Pro 已经使用了6年多的时间,尽管作为一个 .NET 程序员绝大部分时间都是在 Windows 下工作,直到 .NET Core 的逐步成熟.要说 Mac OS,最满意 ...

  10. Clloection接口 与List接口

    collection接口: collection是单列集合接口的根接口,该接口中又包含了多个集合接口,collection接口提供了很多操作集合的方法,比如添加元素的方法,删除元素的方法,修改元素的方 ...