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
include.ejs
is the auto-include
template file. When rendering, the system automatically includes this template file
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 whenecho-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 |
Comments: