在这里新建一个插件模块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