cms-pluginbase

2019-01-21 05:31:00

The module cms-pluginbase is the official basic plugin. It is recommended that other themes to refer this plugin module and to flexibly customize your own logic function on the basic functions provided by this plugin.

Of course, you could also do not use the plugin module, and fully implement your own theme and 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"
    }
  },
}
  • “plugin”: true: To declare it is a plugin module

Initial script

cms-pluginbase provides an initial script that is automatically executed when the page is loaded

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 access the backend service API and return the login 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 getting the login information, a JQuery event echo-ready is triggered, which makes it easy for other scripts to execute code logic in echo-ready.

Image delay loading

cms-pluginbase has built-in delay loading function, and automatically matches device pixel ratio by combineImageUrl.

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]">

Tool object: util

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

{
  ajax: [Function],
  performAction: [Function],
  combineImageUrl: [Function],
  echo: [Function],
  formatDateTime: [Function],
  loadMore: [Function],
  parseUrlQuery: [Function],
  promise: [Function],
  rootUrl: [Function],
  time: [Object],
  url: [Function],
  user: [Object]
}
Name Type Instruction
ajax method Access the backend service API interface
performAction method Access the unified entrance of the backend service API interface
combineImageUrl method Combine image URLs, automatically matching device pixel ratio
echo method Used to access the backend service API, return the current user’s login information, and trigger the JQuery event echo-ready
formatDateTime method Format the time according to the current site configuration
loadMore method “load more” function when implementing infinite scrolling
parseUrlQuery method Parsing Url’s Query parameter
promise method If there is no window.Promise, create one automatically
rootUrl method Return the URL root path of the specified language
time property Time toolset
url method Return the absolute path of the url
user property The current user’s information returned by executing echo


Comments: