快速入门

通过主题机制，可以定制 EduSoho 网校的页面排版布局、外观风格以符合网校特定气质。开发主题，需要具备一定的 HTML、CSS、JavaScript 知识。在开发主题之前，需先安装好 EduSoho，推荐将 EduSoho 安装在/var/www/edusoho目录下，关于如何安装参见本文档的第一部门“安装配置”章节内容。下面通过制作一个简单的首页，来讲解主题开发的主要过程。

创建主题

EduSoho 自带主题的脚手架工具，可以通过命令创建一个基础的主题目录结构。

  1. cd /var/www/edusoho
  2. app/console theme:create example # example 为主题编码(Code)

主题编码的命名规范

主题编码只允许由英文字母、数字、下划线组成，需以英文字母开头，英文字母必须小写，最长不能超过16个字符。

将主题注册到系统中去:

  1. app/console theme:register example

注册之后，可以在 EduSoho 【后台->系统管理->站点设置->主题】中看到刚注册的主题。

打开 EduSoho 首页，可以看到如下界面：

首页

TODO: 这张图片要换。

目录结构

创建的主题位于web/themes/example目录下，目录结构如下。

  1. web/themes/example/
  2.   block/                 <=== 编辑区模板目录
  3.     carousel.html.twig   <=== 首页轮播图模板
  4.   static-dist/           <=== 前端 CSS/Javascript 等编译打包后的文件目录
  5.   static-src/            <=== 前端源文件目录
  6.       js/
  7.         index/
  8.           index.js       <=== 首页 JavaScript 文件
  9.         index.js         <=== 全局载入的的 JavaScript 文件
  10.       less/              <=== 样式目录
  11.         index.less       <=== 样式文件
  12.       img/               <=== 图片目录
  13.       font/              <=== 字体目录
  14.   views/                 <=== 页面模板目录
  15.     default/
  16.       index.html.twig    <=== 首页模板
  17.   CHANGELOG              <=== 主题更新日志
  18.   block.json             <=== 编辑区配置文件
  19.   theme.jpg              <=== 主题宣传图
  20.   theme.json             <=== 主题元信息
  • block 目录下存放编辑区的模板文件，block.json 为编辑区的配置文件，参见文档编辑区。
  • static-src 的文件会打包编译到 static-dist。编译打包的过程会将 Less 文件编译成 CSS 文件；压缩 CSS、JavaScript 文件，减小文件体积；转换 ES6 语法的 JavaScript 文件，以使不支持ES6语法的浏览器也能运行。参见前端的编译打包。
  • theme.jpg 文件的大小为500*320px，展示在后台主题列表及云应用中心。
  • theme.json为主题的元信息描述，如下：
  1. {
  2.   "code": "demo",
  3.   "name": "例子",
  4.   "author": "EduSoho官方",
  5.   "version": "1.0.0",
  6.   "support_version": "8.1.0+",
  7.   "date": "2017-08-09",
  8.   "thumb": "theme.png",
  9.   "protocol": 3
  10. }
  • code: 主题编码，需跟主题的目录名一致。
  • name: 主题名称
  • author: 作者
  • version: 版本号
  • support_version: 该主题支持的 EduSoho 版本，+表示该版本及其以上
  • date: 最后更新日期
  • thumb: 主题的缩略图地址
  • protocol: 主题协议。3表示基于 EduSoho 8.0 的主题协议，2 表示基于 EduSoho 7.0 的版本协议。

定制首页

通过脚手架会创建首页的模板文件views/default/index.html.twig，你可以在此基础上修改，制作自己的首页。请在编辑器中打开此文件，对照下述说明查看源码：

  • 第1行：使用了 extends 继承了基础模板 default/base-index.html.twig。 参见 extends 使用文档。
  • 第2行：通过 script 函数，引入了主题的首页需要用到的 JavaScrit。 参见函数、过滤器。
  • 第4行~第53行：向页面主内容区填充内容。 参见 block 使用文档。
  • 第5行：显示编辑区。参见编辑区。
  • 第6行~第20行：显示免费课程。
  • 第9行：通过 FreeCourseSets 的数据标签，获取6个最新的免费课程。参见数据标签
  • 第22行~第52行：显示最新老师。

接下去做什么

主题开发，需要具备一定的 HTML、CSS、JavaScript、jQuery、Bootstrap、Less 等前端知识，熟悉 Twig 模板引擎，如果您在这些方面比较生疏，可以学习开发参考资料中的相应教程。

您还需要仔细阅读主题开发这一章节的其他内容，才能全面的了解主题开发。