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

  1. 1{
  2. 2  "name": "egg-born-module-cms-themeblog",
  3. 3  "version": "1.1.3",
  4. 4  "title": "cms:theme:blog",
  5. 5  "eggBornModule": {
  6. 6    "cms": {
  7. 7      "name": "blog",
  8. 8      "theme": true
  9. 9    },
  10. 10    "dependencies": {
  11. 11      "a-instance": "1.0.0"
  12. 12    }
  13. 13  }
  14. 14}
Name Description
“theme”: true indicate this is a theme module

Install Theme

  1. 1$ npm run cli :store:sync cms-themeblog

Rendering Templates

15

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
  • 1: site wholly building
  • 2: article separately rendering
  • 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

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

  1. 1<!DOCTYPE html>
  2. 2<html>
  3. 3<head>
  4. 4  <%- await include('./header/head.ejs') %>
  5. 5</head>
  6. 6<body>
  7. 7  <header>
  8. 8    <div class="container">
  9. 9      <%- await include('./header/title.ejs') %>
  10. 10      <%- await include('./header/menu.ejs') %>
  11. 11    </div>
  12. 12  </header>
  13. 13  <div class="container container-site">

layout/header/head.ejs

  1. 1<meta charset="utf-8">
  2. 2<meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. 3<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  4. 4<meta name="generator" content="Cabloy-CMS" />
  5. 5<link rel="shortcut icon" href="<%=url('assets/images/favicon.ico')%>" type="image/x-icon">
  6. 6
  7. 7<%- await include('../../plugins/cms-pluginarticle/header/meta.ejs') %>
  8. 8<%- await include('../../plugins/cms-pluginrss/rss.ejs') %>
  9. 9
  10. 10<link rel="stylesheet" href="<%=url('assets/lib/bootstrap/bootstrap.min.css')%>">
  11. 11<link rel="stylesheet" href="_ _CSS_ _">
  12. 12_ _ENV_ _
  13. 13
  14. 14<!--[if lt IE 9]>
  15. 15  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  16. 16  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  17. 17<![endif]-->
  18. 18
  19. 19<%
  20. 20  // css
  21. 21  css('../../assets/css/site.css.ejs');
  22. 22  // js
  23. 23  js('../../assets/js/site.js.ejs');
  24. 24%>
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

  1. 1  </div> <!-- container -->
  2. 2  <footer>
  3. 3      <span class="small">Powered by <a target="_blank" href="https://cms.cabloy.com">Cabloy-CMS</a> | Theme - <a target="_blank" href="<%=site._theme.url%>"><%=site._theme.name%></a></span>
  4. 4  </footer>
  5. 5  <script src="<%=url('assets/lib/jquery.min.js')%>"></script>
  6. 6  <script src="<%=url('assets/lib/bootstrap/bootstrap.min.js')%>"></script>
  7. 7  <script src="_ _JS_ _"></script>
  8. 8</body>
  9. 9</html>
Name Description
_ JS _ JS placeholder