在这里新建一个插件模块test-cmspluginhello，在页面加载完成时弹出提示Hello world

1. 新建插件模块

插件本质上也是EggBornJS模块

进入项目目录，执行CabloyJS提供的脚手架创建一个新模块

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :create:module test-cmspluginhello -- --template=module

2. 修改package.json

test-cmspluginhello/package.json

  1. 1{
  2. 2  "name": "egg-born-module-test-cmspluginhello",
  3. 3  "version": "1.0.0",
  4. 4  "title": "cms:plugin:hello",
  5. 5  "eggBornModule": {
  6. 6    "cms": {
  7. 7      "name": "hello",
  8. 8      "plugin": true
  9. 9    },
  10. 10  },
  11. 11  ...
  12. 12}
名称 说明
name 必须按照EggBornJS模块的命名规范: egg-born-module-{providerId}-{moduleName}
cms
cms.name 插件名称
cms.plugin 声明本模块是一个插件

3. 配置参数

插件可以提供自定义的参数

test-cmspluginhello/backend/src/config/config.js

  1. 1module.exports = appInfo => {
  2. 2  const config = {};
  3. 3
  4. 4  // plugin
  5. 5  config.plugin = {
  6. 6    _message: 'Hello World',
  7. 7  };
  8. 8
  9. 9  return config;
  10. 10};

4. include.ejs

添加自动包含模版文件

test-cmspluginhello/backend/cms/plugin/include.ejs

  1. 1<%
  2. 2  // js:init
  3. 3  js('./init.js.ejs');
  4. 4%>

5. plugin/init.js.ejs

在页面加载完成时弹出提示Hello world

test-cmspluginhello/backend/cms/plugin/init.js.ejs

  1. 1$(document).ready(function() {
  2. 2  // alert
  3. 3  const message='<%=site.plugins["test-cmspluginhello"]._message%>';
  4. 4  window.alert(message);
  5. 5});

6. 其他源码及资源

根据需要添加其他源码及资源，这里从略

7. 后端Api路由、前端组件

需要再次强调，插件模块本质上也是EggBornJS模块，因此完全可以像一般的业务模块一样，开发后端Api路由和前端组件，从而提供更丰富的功能

8. 发布模块

可以将制作好的模块发布到Cabloy商店

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :store:publish test-cmspluginhello