模块`cms-themeblog`是官方提供的`博客`主题 ## 插件依赖 因为`主题`和`插件`都是独立的EggBornJS模块,因此也要声明模块的依赖关系。当安装`主题`模块时,相应的`插件`模块也会自动安装 `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" } } } ``` | 名称 | 说明 | |----|----| | “theme”: true | 声明是`主题`模块 | ## 渲染模版 ![15](https://portal.cabloy.com/api/a/file/file/download/251b8511fbb44ec08c26a69c832b3fcc.png) | 名称 | 说明 | 渲染时机 | 备注 | |----|----|----|----| | assets | 资源文件 | 整站构建 | | | layout | 布局目录 | 中间文件 | 可根据自己的需要规划和添加自己的页面元素 | | main | 主渲染模版目录 | 两个渲染时机 | | | main/article.ejs | 文章渲染模版 | | 当需要渲染`文章`时使用此模版文件 | | main/index | 首页渲染模版目录 | | 当需要渲染`首页`时使用此目录中的模版文件。为什么是目录?在一个复杂的站点中,根据场景需要可以有多个类似`首页`的模版文件 | | static | 静态文件目录 | 整站构建 | 如文件`articles.ejs`,通过ajax调用后端API获取文章清单,从而可以集中实现`目录`、`标签`、`搜索`等功能 | ::: alert-info * 主题`cms-themeblog`提供了三个主渲染模版: * `static/articles.ejs`:用于集中实现`目录`、`标签`、`搜索`等功能 * `main/article.ejs`:用于`文章`的渲染 * `main/index/index.ejs`:用于`首页`的渲染 * `assets`是资源目录:包含CSS、JS和Image等资源 * `layout`是布局目录:包含布局元素的渲染模版 ::: ::: alert-info 其实,`layout`中大多数渲染模版文件内容很精简,为何不合并成一个渲染文件,而要拆分这么细致? > 布局元素拆分细致,是为了在`主题`的实际使用当中,可以进行更灵活的自定义 ::: ### static/articles.ejs与main/index/index.ejs的区别 两个渲染模版的布局一致,为什么要分开实现? 为了兼顾`SEO优化`、`首页加载性能`、`文章单独渲染`性能,对不同场景的页面做了不同的渲染设计 * `首页`预先渲染第一页文章列表(默认为20篇),当向下滚动时,加载后续的文章列表 * `目录`、`标签`、`搜索`场景下,不需要预先渲染第一页文章列表 * 因此,`main/index/index.ejs`需要支持`两个渲染时机`,而`static/articles.ejs`只需要一次性的`整站构建` ## 布局渲染模版 这里着重介绍`header`和`footer`的渲染模版,其他内容请直接查看模块源码 ### 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'); %> ``` | 名称 | 说明 | |----|----| | include | 包含插件的模版文件,如`cms-pluginrss/rss.ejs` | | js | 声明使用的JS文件 | | css | 声明使用的CSS文件 | | \_ *CSS* \_ | CSS文件占位符 | | \_ *ENV* \_ | 前端环境对象占位符 | ### layout/footer.ejs ``` html
``` | 名称 | 说明 | |----|----| | \_ *JS* \_ | JS文件占位符 |