主题
既可以全新制作,也可以继承
自其他主题
在这里新建一个主题模块test-cmsthemehello
,在首页渲染一行Hello world
1. 新建主题模块
主题
模块本质上也是EggBornJS模块
进入项目目录,执行CabloyJS提供的脚手架创建一个新模块
- 1$ cd /path/to/project
- 2$ npm run cli :create:module test-cmsthemehello -- --template=module
2. 修改package.json
test-cmsthemehello/package.json
- 1{
- 2 "name": "egg-born-module-test-cmsthemehello",
- 3 "version": "1.0.0",
- 4 "title": "cms:theme:hello",
- 5 "eggBornModule": {
- 6 "cms": {
- 7 "name": "hello",
- 8 "theme": true,
- 9 "extend": ""
- 10 },
- 11 ...
- 12 }
- 13}
名称 | 说明 |
---|---|
name | 必须按照EggBornJS模块的命名规范: egg-born-module-{providerId}-{moduleName} |
cms | |
cms.name | 主题名称 |
cms.theme | 声明本模块是一个主题 |
cms.extend | 如果要继承主题,填入原主题的模块名,如cms-themeblog |
3. 配置参数
主题
可以提供自定义的参数
test-cmsthemehello/backend/src/config/config.js
- 1module.exports = appInfo => {
- 2 const config = {};
- 3
- 4 // theme
- 5 config.theme = {
- 6 _message: 'Hello World',
- 7 };
- 8
- 9 return config;
- 10};
4. 创建首页渲染模版
test-cmsthemehello/backend/cms/theme/main/index/index.ejs
- 1<html>
- 2 <head></head>
- 3 <body><%=site._message%></body>
- 4</html>
5. 其他源码及资源
根据需要添加其他源码及资源,这里从略
6. 后端Api路由、前端组件
需要再次强调,主题
模块本质上也是EggBornJS模块,因此完全可以像一般的业务模块一样,开发后端Api路由和前端组件,从而提供更丰富的功能
7. 发布模块
可以将制作好的模块发布到Cabloy商店
- 1$ cd /path/to/project
- 2$ npm run cli :store:publish test-cmsthemehello
8. 最佳实践
前面提到,可以在custom
目录添加页面元素,从而覆盖默认资源,实现自定义
当然,最好的自定义方式就是通过继承
的机制新建主题模块
评论: