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:

$ cd /path/to/project
$ npm init cabloy src/module/test-cmsthemehello --type=module

2. Modify package.json

test-cmsthemehello/package.json

{
  "name": "egg-born-module-test-cmsthemehello",
  "version": "1.0.0",
  "title": "cms:theme:hello",
  "eggBornModule": {
    "cms": {
      "name": "hello",
      "theme": true,
      "extend": ""
    },
    ...
  },
  "dependencies": {
    ...
    "egg-born-module-cms-pluginbase": "^1.1.1",
    "egg-born-module-cms-pluginarticle": "^1.0.0",
    "egg-born-module-cms-pluginsidebar": "^1.0.0",
    "egg-born-module-cms-pluginmarkdowngithub": "^1.0.0",
    "egg-born-module-cms-plugintrack": "^1.0.1"
  }
}
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
dependencies if you are using some plugins, fill in the plugin modules here. if you inherit from a theme, also need to fill in the original theme module here

3. Configuration

The theme module can provide custom parameters

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

module.exports = appInfo => {
  const config = {};

  // theme
  config.theme = {
    _message: 'Hello World',
  };

  return config;
};

4. Create a home page template

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

<html>
 <head></head>
 <body><%=site._message%></body>
</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. Build Module

As an EggBornJS module, if it is used inside a project, it does not need to be built and can be used directly. If you want to share it to the community for other users to install and use, you must build it

$ cd src/module/test-cmsthemehello
$ npm run build:front
$ npm run build:backend

8. Publish Module

You can publish the module to the community after building

$ npm publish

9. 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