utools插件开发的心路记录

    最近发现一个特别好玩的插件utools,其丰富的插件及功能都比较实用,于是就想着自己去捣鼓一下自己加一个插件(“ 一切皆插件” 的理念真的很不错)。
    由于自己最近在学习swoft开发,每次想看swoft的官方文档就必须打开chrome浏览器搜索,个人觉得有些麻烦,正好看到了utools可以自己开发定义,就想着是不是能自己把文档加上去。最开始想着用 ubrowser API ,直接打开网页就行。

window.exports = {
   "features.code": { // 注意:键对应的是 plugin.json 中的 features.code
      mode: "none",  // 用于无需 UI 显示,执行一些简单的代码
      args: {
         // 进入插件时调用
         enter: (action) => {
            window.utools.utools.ubrowser.goto('https://www.swoft.org/documents/v2/')
              .run({ width: 1000, height: 600 })
         }  
      } 
   }
}
utools.ubrowser.goto('https://www.swoft.org/documents/v2/')
  .run({ width: 1000, height: 600 })

    运行的效果并没有想象的那么好,确认能打开swoft文档,但是没有浏览器方便,并没有回退的功能,网页跳转之后就回不来了。
    摸索好一阵,还是决定放弃。黄天不负苦心人,感谢官方提供的Linux 命令文档实例 https://github.com/in3102/utools-linux-doc让我找到了希望。
    刚开始看到这个示例,并不明白到底是怎么运行的。打开文件package.json

{
  "name": "utools-linux-doc",
  "version": "1.0.0",
  "description": "Linux 文档",
  "scripts": {
    "start": "node generate.js"
  },
  "author": "beta",
  "license": "MIT",
  "dependencies": {
    "highlight.js": "^9.16.2",
    "marked": "^0.7.0"
  }
}

    看到文件内容"start": "node generate.js" 难道是nodejs运行的,顿时恍然大悟(本人之前没用过nodejs,故不了解,有大神在此勿喷,我是小白)。了解了package.jsongenerate.js的用途之后,就可以开动了,其实generate.js最主要的目的就是生成了utools文档插件所需的indexes.json和对应目录的html文件。随便感谢下swoft提供的文档https://github.com/swoft-cloud/swoft-doc,找到summary.md将目录重新整理了一下,改造了generate.js文件,生成indexes.json和对应目录的html文件。

const fs = require('fs')
const path = require('path')
const marked = require('marked')
const hljs = require('highlight.js')
marked.setOptions({
  highlight: function (code) {
    return hljs.highlightAuto(code).value
  }
})

const summary_file_name = 'swoft_summary.json'
const doc_base_dir = 'swoft-doc/zh-CN/'

const summary_json = JSON.parse(fs.readFileSync(path.join(__dirname, summary_file_name), { encoding: 'utf-8' }))
let indexes = []
for(let chapter_name in summary_json){
    sections = summary_json[chapter_name]
    for(let section_name in sections){
        section_path = sections[section_name]
        const markdownContent = fs.readFileSync(path.join(doc_base_dir, section_path), { encoding: 'utf-8' })
        const html = `<!DOCTYPE html><html lang="zh_CN"><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="doc.css" /></head>
        <body><div class="markdown-body">${marked(markdownContent)}</div></body></html>`
        fs.writeFileSync(path.join(__dirname, 'public', 'command', chapter_name.replace('/',' ') + ' - ' + section_name.replace('/',' ') + '.html'), html)
        indexes.push({
            "t":chapter_name+"/"+section_name,
            "d":markdownContent.replace(/#/g,''),
            "p":path.join('command', chapter_name.replace('/',' ') + ' - ' + section_name.replace('/',' ') + '.html')
        })
    }
}
fs.writeFileSync(path.join(__dirname, 'public', 'indexes.json'), JSON.stringify(indexes))

至此完成,以后再也不愁文档无处安放了,哈哈。(utools搜索swoft下载,还有hyperf文档也已上线发布...后续有更多文档及其他觉得有意思的功能也将继续开发...)

image.png

代码已上传gitee:https://gitee.com/jingsilsy/utools-swoft-doc
需安装nodejs运行npm updatenode generate.js

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容