You can make a new theme or inherit from other theme

Here, we will create a new theme module test-cmsthemehello, and render Hello world on the home page

1. Create a new theme module

The theme module is essentially an EggBornJS module

Go to the project directory and create a new module by executing the scaffold:

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :create:module test-cmsthemehello -- --template=module-business

2. Modify package.json

test-cmsthemehello/package.json

  1. 1{
  2. 2  "name": "egg-born-module-test-cmsthemehello",
  3. 3  "version": "1.0.0",
  4. 4  "title": "cms:theme:hello",
  5. 5  "eggBornModule": {
  6. 6    "cms": {
  7. 7      "name": "hello",
  8. 8      "theme": true,
  9. 9      "extend": ""
  10. 10    },
  11. 11    ...
  12. 12  }
  13. 13}
Name Description
name must follow the naming convention of the EggBornJS module: egg-born-module-{providerId}-{moduleName}
cms
cms.name theme’s name
cms.theme indicate this module is a theme
cms.extend this is the original theme which you want to inherit from

3. Configuration

The theme module can provide custom parameters

test-cmsthemehello/backend/src/config/config.js

  1. 1module.exports = appInfo => {
  2. 2  const config = {};
  3. 3
  4. 4  // theme
  5. 5  config.theme = {
  6. 6    _message: 'Hello World',
  7. 7  };
  8. 8
  9. 9  return config;
  10. 10};

4. Create a home page template

test-cmsthemehello/backend/cms/theme/main/index/index.ejs

  1. 1<html>
  2. 2 <head></head>
  3. 3 <body><%=site._message%></body>
  4. 4</html>

5. Other source code and resources

Add other source code and resources as needed, be omitted

6. Backend APIs, Frontend Vue Components

It needs to be emphasized again that the theme module is also the EggBornJS module in essence, so you can develop backend APIs and frontend vue components like general business modules, so as to provide richer features

7. Publish Module

You can publish the module to Cabloy Store

  1. 1$ cd /path/to/project
  2. 2$ npm run cli :store:publish test-cmsthemehello

8. Best Practices

As mentioned earlier, you can add page elements in the custom directory to overwrite the default resources in order to realize customization

Of course, the best way to customize is to create a new theme module through the inheritance mechanism