egg-yuque-viewer

功能特性

只需要简单的配置就能够在 web 站点展示语雀文档

配置

| 配置项 | 类型 | 示例 | 说明 | |---|--- |--- |--- | |search|String|/api/v1/search|search route| |noHeader|bool|true|隐藏 header| |onlyDoc|bool|true|只展示文件内容，隐藏侧边栏和header| |view|String|'/help.html'| 文档页面路由 | |prefix|String|'/documents'| 文档接口路由 | |title|String|帮助文档| 文档页面 title | |logo|String|https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*OwZWQ68zSTMAAAAAAAAAAABkARQnAQ |文档页面 logo | |showSearch|String|true| 是否显示搜索框 | |lazyLoad|bool|false| 文档页面是否懒加载 | |showEditor|bool|false|是否显示跳转到语雀编辑的 icon | |token|String|''|语雀 token | |darkMode|bool|true|header 的 dark/light 模式| |lightColor|String|'#ffffff00'|header 的 light 模式 的颜色| |blackColor|String|'black'|header 的 dark 模式 的颜色|

Examples

plugin.js

exports.yuqueViewer = {
  enable: true,
  package: '@ablula/egg-yuque-viewer',
};

config.default.js

config.yuqueViewer = {
  npm: '@ablula/[email protected]',
  namespace: 'ant-design/course',
  search: '/documents/search',
  title: 'Ant Design 实战教程',
  prefix: '/documents',
  onlyDoc: false,
  noHeader: false,
  showSearch: true,
  showEditor: false,
  view: '/documents',
  token: '',
  darkMode: true,
  lightColor: '#ffffff00',
  blackColor: 'black',
  logo: 'https://gw.alipayobjects.com/mdn/prod_resou/afts/img/A*OwZWQ68zSTMAAAAAAAAAAABkARQnAQ',
};

使用

直接访问

根据上述配置中的 view 可以直接访问对应页面，例如服务启动的地址为：http://localhost:3333 ，view 配置为 /documents，则文档访问 url 为：http://localhost:3333/documents

方法调用

app.yuqueViewer

await app.yuqueViewer.search('let');

// return 
{
    data: [
        {
            category: "站点文档",
            content: "<p>asdf</p>",
            locator: "/design/doc/7",
            siteId: 1,
            title: "写一个文档"
        },
        {
            category: "站点文档",
            content: "<pre><code>let a=b;</code></pre>",
            locator: "/component/doc/12",
            siteId: 1,
            title: "newdocs"
        }
    ],
    total: 2
}