The module `cms-themeblog` is the official `blog` theme ## Plugin Dependencies the `theme` module needs to explicitly specify which `plugin` modules are dependent. By specifying the dependencies of the `plugin` modules, when the `theme` module is installed, the corresponding `plugin` modules are also automatically installed `cms-themeblog/package.json` ``` javascript { "name": "egg-born-module-cms-themeblog", "version": "1.1.3", "title": "cms:theme:blog", "eggBornModule": { "cms": { "name": "blog", "theme": true }, "dependencies": { "a-instance": "1.0.0" } } } ``` | Name | Description | |----|----| | “theme”: true | indicate this is a `theme` module | ## Install Theme ``` bash $ npm run cli :store:sync cms-themeblog ``` ## Rendering Templates ![15](https://portal.cabloy.com/api/a/file/file/download/251b8511fbb44ec08c26a69c832b3fcc.png) | Name | Description | Rendering Timing | Remark | |----|----|----|----| | assets | resource files | 1 | | | layout | layout directory | intermediate files | you can plan and add page elements according to your own needs | | main | main rendering template directory | 1 & 2 | | | main/article.ejs | article rendering template | | use this template file when you need to render an `article` | | main/index | home page rendering template directory | | use the template file in this directory when you need to render the `home page`. Why is directory? In a complex site, you can have multiple `home page` templates depending on the scenario | | static | static file directory | 1 | for example, the file `articles.html`, load articles by performing the backend API with ajax, thereby implements `category`, `tag`, `search` and other features concentratedly | ::: alert-info * 1: site wholly building * 2: article separately rendering ::: ::: alert-info * The theme `cms-themeblog` provides three main rendering templates: * `static/articles.ejs`: used to concentratedly implement features like `category`, `tag`, `search`, etc. * `main/article.ejs`: used for article rendering * `main/index/index.ejs`: used for home page rendering * `assets` is the resource directory: contains resources such as `CSS, `JS`, and `Image\` * `layout` is the layout directory: contains rendering template of layout elements ::: ::: alert-info In fact, most of the rendering template files in the `layout` directory are very simple, why not merge into one rendering template file? > The layout elements are divided in detail so that they can be customized more flexibly in the actual use of the `theme` ::: ## Layout Templates This section focuses on the rendering templates of `header` and `footer`. For other contents, please refer to the module source code directly ### layout/header.ejs ``` html
<%- await include('./header/head.ejs') %>