模块cms-pluginbase是官方提供的基础插件,建议其他主题引用此插件模块,在此插件提供的基础功能上灵活定制自己的逻辑

当然,也可以不使用此插件模块,完全实现自己的主题插件的组合

插件定义

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: 声明是插件模块

include.ejs

include.ejs自动包含模版文件。当进行文章渲染时,系统会自动include此文件

因此可以在include.ejs声明需要的CSS和JS资源

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/init.js.ejs

此模版定义页面加载时需要初始化的逻辑

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用于访问后端API接口,返回当前用户的登录信息

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);
  });
},

取得登录信息后,会触发一个JQuery事件echo-ready,便于其他脚本在echo-ready中执行初始化逻辑

图片延时加载

cms-pluginbase内置了延时加载的功能,同时通过combineImageUrl自动匹配设备像素比

需要延时加载的图片如下定义

<img class="img-delay" data-src="[url]" data-width="[width]" data-height="[height]">

工具对象:util

cms-pluginbase最核心的功能是提供了一个工具对象util,其结构如下

{
  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]
}
名称 类型 说明
ajax 方法 访问后端API接口
performAction 方法 访问后端API接口的统一入口
combineImageUrl 方法 组合图片URL,自动匹配设备像素比
echo 方法 用于访问后端API接口,返回当前用户的登录信息,并触发JQuery事件echo-ready
escapeHtml 方法 对Html字符串进行安全处理
escapeURL 方法 对URL字符串进行安全处理
formatDateTime 方法 根据当前站点配置格式化时间
loadMore 方法 实现无限滚动时加载更多的功能
parseUrlQuery 方法 解析Url的Query参数
promise 方法 如果没有window.Promise自动创建一个
rootUrl 方法 返回指定语言的URL根路径
time 属性 时间工具集
url 方法 返回url的绝对路径
user 属性 执行echo返回的当前用户信息