cms-pluginbase

The module cms-pluginbase is the official basic plugin. It is recommended that theme modules reference this plugin module, and flexibly customize your own features based on the basic features provided by this plugin

Plugin Definition

cms-pluginbase/package.json

{
  "name": "egg-born-module-cms-pluginbase",
  "version": "1.0.9",
  "title": "cms:plugin:base",
  "eggBornModule": {
    "cms": {
      "name": "base",
      "plugin": true
    },
    "dependencies": {
      "a-instance": "1.0.0"
    }
  },
}

Name	Description
“plugin”: true	indicate this is a plugin module

include.ejs

Therefore, you can declare CSS and JS resources in include.ejs

src/module/cms-pluginbase/backend/cms/plugin/include.ejs

<%
  // css
  css('./assets/css/extra.css');

  // js
  js('./assets/js/lib/json2.min.js');
  js('./assets/js/lib/bootbox.all.min.js');
  js('./assets/js/util.js.ejs');

  // js:init
  js('./assets/js/init.js.ejs');
%>

assets/js/init.js.ejs

This template file defines the logic to be initialized when page loaded

src/module/cms-pluginbase/backend/cms/plugin/assets/js/init.js.ejs

$(document).ready(function() {
  // echo
  util.echo();
  // img delay
  $.each($('.img-delay'), (index, item) => {
    const $item = $(item);
    const src = $item.data('src');
    const width = $item.data('width');
    const height = $item.data('height');
    $item.attr('src', util.combineImageUrl(src, width, height));
    $(item).removeClass('img-delay');
  });
});

echo

echo is used to perform the backend APIs and return the information of the current user

cms-pluginbase/backend/cms/plugin/assets/js/util.js.ejs

echo() {
  return util.ajax({
    url: '/a/base/auth/echo',
  }).then(data => {
    this.user = data.user;
    $(document).trigger('echo-ready', data);
  });
},

After retrieving the information of the current user, a JQuery event echo-ready is triggered, which makes it easy for other logic to be executed when echo-ready triggered

Image Delay Loading

cms-pluginbase has built-in delay loading feature, and automatically matches device pixel ratio in order to load the image of suitable size

The image that needs to be loaded with delay is defined as follows:

<img class="img-delay" data-src="{url}" data-width="{width}" data-height="{height}">

Util Object: util

The core feature of cms-pluginbase is to provide a util object util, whose structure is as follows:

{
  ajax: [Function],
  performAction: [Function],
  combineImageUrl: [Function],
  echo: [Function],
  escapeHtml: [Function],
  escapeURL: [Function],
  formatDateTime: [Function],
  loadMore: [Function],
  parseUrlQuery: [Function],
  promise: [Function],
  rootUrl: [Function],
  time: [Object],
  url: [Function],
  user: [Object]
}

Name	Type	Description
ajax	method	perform the backend APIs
performAction	method	perform the backend APIs via ajax
combineImageUrl	method	combine image URL, automatically matching device pixel ratio
echo	method	used to perform the backend API, retrieve the current user’s information, and trigger the JQuery event echo-ready
escapeHtml	method	create safe HTML
escapeURL	method	create safe URL
formatDateTime	method	format the date time according to the current site configuration
loadMore	method	load more when infinite scrolling
parseUrlQuery	method	parse URL’s query parameters
promise	method	If there is no window.Promise, create one automatically
rootUrl	method	return the root path URL of the specified language
time	property	Time Tools
url	method	return the absolute path of the url
user	property	the current user’s information returned by echo