Making a theme

2019-01-31 06:44:44

You can make a new theme or inherit from other themes.

Create a new theme module test-cmsthemehello here, and render a Hello world line on the home page.

Create a new theme module

Theme is essentially an EggBorn module.

Go to the project directory and create a new module by executing the scaffold provided by EggBorn.

$ cd /path/to/project
$ egg-born src/module/test-cmsthemehello --type=module

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: Must follow the naming convention of the EggBorn module: egg-born-module-{providerId}-{moduleName}
    • providerId: Developer Id, strongly recommend Github’s Username to ensure that modules contributing to the community are not conflict
  • cms: CMS configuration information
    • name: Theme name
    • theme: Declare this module is a theme
    • extend: If you want to inherit a theme, fill in the original theme module name such as cms-themeblog
  • dependencies: If you are using a plugin, fill in the plugin module information here. If you inherit a theme, you also need to fill in the original theme module information here.

Configure parameters

Themes can provide custom parameters.

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

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

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

  return config;
};

Create a home page rendering template

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

<html>
 <head></head>
 <body><%=site._message%></body>
</html>

Other source code and resources

Add other source code and resources as needed, abbreviated here.

Build module

As an EggBorn 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.

$ cd src/module/test-cmsthemehello   -- Enter the module directory
$ npm run build:front             -- Build frontend code
$ npm run build:backend           -- Build backend code

Release module

You can publish the module to the community.

$ npm publish



Comments: