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') %>
<%- await include('./header/title.ejs') %> <%- await include('./header/menu.ejs') %>
``` ### layout/header/head.ejs ``` html <%- await include('../../plugins/cms-pluginarticle/header/meta.ejs') %> <%- await include('../../plugins/cms-pluginrss/rss.ejs') %> _ _ENV_ _ <% // css css('../../assets/css/site.css.ejs'); // js js('../../assets/js/site.js.ejs'); %> ``` | Name | Description | |----|----| | include | include other templates, such as `cms-pluginrss/rss.ejs` | | js | declare JS file | | css | declare CSS file | | \_ *CSS* \_ | CSS placeholder | | \_ *ENV* \_ | env placeholder | ### layout/footer.ejs ``` html
``` | Name | Description | |----|----| | \_ *JS* \_ | JS placeholder |