Hi,给他介绍一款markdown的帮助文档生成器
当今大多数的团队都实现了前、后端分支。前端与后端的沟通都是通过接口来实现的(一般情况下都是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的帮助文档生成器的更多相关文章
- Sandcastle帮助文档生成器使用介绍
一.软件介绍 Sandcastle是一个管理类库的文档编译器,是用于编译发布组件(Assembly)信息的一个工具,这个工具通过反射和Xslt技术,可以从dll文件及其xml注释(命令行编 ...
- Markdown写接口文档,自动添加TOC
上回说到,用Impress.js代替PPT来做项目展示.这回换Markdown来做接口文档好了.(不敢说代替Word,只能说个人感觉更为方便)当然,还要辅之以Git,来方便版本管理. Markdown ...
- 第三期分享:一款很好用的api文档生成器
主要用途:生成API的文档 源码链接:https://github.com/tmcw/docbox 最近刚好在看:Trending in open source,在JS语言中,slate一直在周排行上 ...
- 介绍3款Markdown编辑器
为什么写此篇 自从CSDN的博客有了Markdown后,慢慢的了解并学会了用Markdown语法写博客.但CSDN博客是在浏览器中使用,于是一直寻找离线的Markdown编辑器. 网上先是找到了M ...
- 基于 Markdown 编写接口文档
最近公司开发项目需要前后端分离,这样话就设计到后端接口设计.复杂功能需要提供各种各样的接口供前端调用,因此编写API文档非常有必要了 网上查了很多资料,发现基于Markdown编写文档是一种比较流行而 ...
- 再见丑陋的 SwaggerUI,这款开源的API文档生成神器界面更炫酷,逼格更高!
一般在使用 Spring Boot 开发前后端分离项目的时候,都会用到 Swagger.Swagger 是一个规范和完整的框架,用于生成.描述.调试和可视化 RESTful 风格的 Web API 服 ...
- 使用 VS Code + Markdown 编写 PDF 文档
背景介绍 作为一个技术人员,基本都需要编写技术相关文档,而且大部分技术人员都应该掌握 markdown 这个技能,使用 markdown 来编写并生成 PDF 文档将会是一个不错的体验,以下就介绍下如 ...
- 如何快速实现 markdown 转 HTML 文档?
我想要在 Github 上开一个主题博客,我希望通过 Markdown 语法写作,然后生成 HTML 并附带自定义样式显示在网页上. 我找到了 gulp-markdown 这个库,看起来符合我的需求场 ...
- 一款APP的交互文档从撰写到交付
我第一份工作的设计总监是前百度设计师,34岁,一线设计12年:今年聊天说转了产品总监,如今39岁还活跃在行业中…… 我第二份工作的部门总监是前腾讯工程师,38岁,一线开发14年:2年前在Q群里跟我们说 ...
随机推荐
- C++负数取模
预习: r=余数 a=被除数 b=除数 c=商 a/b=c........r r=a-(a/b)*b 一.下面的题目你能全做对吗?1.7/4=?2.7/(-4)=?3.7%4=?4.7%(-4)=?5 ...
- YOLO_Online 将深度学习最火的目标检测做成在线服务实战经验分享
YOLO_Online 将深度学习最火的目标检测做成在线服务 第一次接触 YOLO 这个目标检测项目的时候,我就在想,怎么样能够封装一下让普通人也能够体验深度学习最火的目标检测项目,不需要关注技术细节 ...
- [ Java面试题 ]基础篇之二
1.String s = new String("xyz");创建了几个StringObject?是否可以继承String类? 两个或一个都有可能,"xyz"对 ...
- 基于Kafka Connect框架DataPipeline在实时数据集成上做了哪些提升?
在不断满足当前企业客户数据集成需求的同时,DataPipeline也基于Kafka Connect 框架做了很多非常重要的提升. 1. 系统架构层面. DataPipeline引入DataPipeli ...
- Python Web(Django)与SQL SERVER的连接处理
(开开心心每一天~ ---虫瘾师) Python Web(Django) 与SQL SERVRE的连接----Come QQ群:607021567(里面有很多开源代码和资料,并且python的游戏也有 ...
- Centos7 环境下 tty 终端 中文乱码 问题
最近有同学问我 Centos 方面的一些操作, 由于我已经好多年不用Centos了所以比较生疏,这些年来一直都是用Ubuntu的,不得不说Ubuntu是我用过的这么多Linux系统中操作最舒服的了, ...
- Windows上设置Mozilla Thunderbird邮件客户端后台运行
作者:荒原之梦 操作系统: Windows 10 Thunderbird版本: 52.6.0(32-bit) Thunderbird官网页面:https://www.mozilla.org/zh-CN ...
- spring.resources
@EnableWebMvcNormally you would add @EnableWebMvc for a Spring MVC app, but Spring Boot adds it auto ...
- JSONUtils.toJSONString的一个坑
JSONUtils.toJSONString(null); //返回一个为"null"的字符串 这样会导致一个结果就是StringUtils.isBlank判断后,会为false ...
- python3的文件读取问题
今天在调python程序时,遇到了一个报错:illegal multibyte sequence. 后来在网上查资料,是文件读取的编码问题. py3读取文件的时候是可以指定编码的:open('file ...