Making a plugin

2019-01-31 07:56:54

Create a new plugin module test-cmspluginhello here, pop-up prompt Hello world when the page is loaded.

Create a new plugin module

Plugin is essentially an EggBorn module.

Go to the project directory and create a new module by executing the scaffold provided by EggBorn.

$ cd /path/to/project
$ egg-born src/module/test-cmspluginhello --type=module

Modify package.json

test-cmspluginhello/package.json

{
  "name": "egg-born-module-test-cmspluginhello",
  "version": "1.0.0",
  "title": "cms:plugin:hello",
  "eggBornModule": {
    "cms": {
      "name": "hello",
      "plugin": true
    },
  },
  ...
}
  • name: Must follow the naming convention of the EggBorn module: egg-born-module-{providerId}-{moduleName}
    • providerId: Developer Id, strongly recommend Github’s Username to ensure that modules contributing to the community are not conflict
  • cms: CMS configuration information
    • name: Theme name
    • plugin: Declare this module is a plugin

Configure parameters

Plugins can provide custom parameters.

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

module.exports = appInfo => {
  const config = {};

  // plugin
  config.plugin = {
    _message: 'Hello World',
  };

  return config;
};

Create initial script

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

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

How to reference a script

Just declare the JS file in the rendering template.

Here, you can reference it in the homepage template of the test-cmsthemehello theme.

test-cmsthemehello/backend/cms/theme/main/index/index.ejs

<% js('plugins/test-cmspluginhello/init.js.ejs') %>
<html>
 <head></head>
 <body>
  <div><%=site._message%></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="_ _JS_ _"></script>
</body>
</html>

Other source code and resources

Add other source code and resources as needed, abbreviated here.

Build module

As an EggBorn module, if it is used inside a project, it does not need to be built and can be used directly. If you want to share it to the community for other users to install and use, you must build.

$ cd src/module/test-cmspluginhello   -- Enter the module directory
$ npm run build:front             -- Build frontend code
$ npm run build:backend           -- Build backend code

Release module

You can publish the module to the community.

$ npm publish

Comments: