Cabloy-CMS provides the theme inheritance
mechanism that makes it easy to modify individual files based on the original theme so as to quickly create a new theme
For example, cms-themeaws
is a new theme based on the basis of cms-themeblog
How to Inheritance
Inheriting theme
generally takes only three steps:
1. Declare Inheritance Relationship
cms-themeaws/package.json
{
"name": "egg-born-module-cms-themeaws",
"version": "1.0.0",
"title": "cms:theme:aws",
"eggBornModule": {
"cms": {
"name": "aws",
"theme": true,
"extend": "cms-themeblog"
},
"dependencies": {
"a-instance": "1.0.0"
}
},
...
"dependencies": {
...
"egg-born-module-cms-themeblog": "^1.1.3"
}
}
Name | Description |
---|---|
“extend”: “cms-themeblog” | inherite from theme cms-themeblog |
“egg-born-module-cms-themeblog”: “^1.1.3” | module dependencies in order to automatically install the original theme |
2. Override Configuration
cms-themeaws/backend/src/config/config.js
// theme
config.theme = {
_theme: {
name: 'cms-themeaws',
url: 'https://github.com/zhennann/egg-born-module-cms-themeaws',
},
};
Name | Description |
---|---|
_theme | this parameter is provided by the theme cms-themeblog , and is overrided here |
3. Override Source code and Resources
Override the source code and resources of the original theme as needed, here we just override one CSS
style file
cms-themeaws/backend/cms/theme/assets/css/site.css.ejs
body {
font-size:14px;
color:#666;
background: #FAFAFA;
}
...
a {
color: #007eb9;
}
a:visited{
color:#005b86;
}
a:hover,a:focus{
color:#e47911;
}
Comments: