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

  1. 1{
  2. 2  "name": "egg-born-module-cms-themeaws",
  3. 3  "version": "1.0.0",
  4. 4  "title": "cms:theme:aws",
  5. 5  "eggBornModule": {
  6. 6    "cms": {
  7. 7      "name": "aws",
  8. 8      "theme": true,
  9. 9      "extend": "cms-themeblog"
  10. 10    },
  11. 11    "dependencies": {
  12. 12      "a-instance": "1.0.0",
  13. 13      "cms-themeblog": "1.1.3"
  14. 14    }
  15. 15  }
  16. 16}
Name Description
“extend”: “cms-themeblog” inherite from theme cms-themeblog

2. Override Configuration

cms-themeaws/backend/src/config/config.js

  1. 1// theme
  2. 2config.theme = {
  3. 3  _theme: {
  4. 4    name: 'cms-themeaws',
  5. 5    url: 'https://github.com/zhennann/egg-born-module-cms-themeaws',
  6. 6  },
  7. 7};
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

  1. 1body {
  2. 2  font-size:14px;
  3. 3  color:#666;
  4. 4  background: #FAFAFA;
  5. 5}
  6. 6
  7. 7...
  8. 8
  9. 9a {
  10. 10  color: #007eb9;
  11. 11}
  12. 12a:visited{
  13. 13  color:#005b86;
  14. 14}
  15. 15a:hover,a:focus{
  16. 16  color:#e47911;
  17. 17}