EDUSOHO踩坑笔记之七：主题开发之快速入门

EDUSOHO踩坑笔记之七：主题开发之快速入门

      通过主题机制，可以定制 EduSoho 网校的页面排版布局、外观风格以符合网校特定气质。开发主题，需要具备一定的 HTML、CSS、JavaScript 知识。前面已经有章节介绍了如何安装好edusoho的环境了。

一、创建主题

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

cd /var/www/edusoho
php app/console theme:create example 
主题编码的命名规范

将主题注册到系统中去:

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

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

TODO: 这张图片要换。

二、目录结构

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

block/ <=== 编辑区模板目录
carousel.html.twig <=== 首页轮播图模板
static-dist/ <=== 前端 CSS/Javascript 等编译打包后的文件目录
static-src/ <=== 前端源文件目录
js/
index/
index.js <=== 首页 JavaScript 文件
index.js <=== 全局载入的的 JavaScript 文件
less/ <=== 样式目录
index.less <=== 样式文件
img/ <=== 图片目录
font/ <=== 字体目录
views/ <=== 页面模板目录
default/
index.html.twig <=== 首页模板
CHANGELOG <=== 主题更新日志
block.json <=== 编辑区配置文件
theme.jpg <=== 主题宣传图
theme.json <=== 主题元信息

• block 目录下存放编辑区的模板文件，block.json 为编辑区的配置文件。
• static-src 的文件会打包编译到 static-dist。编译打包的过程会将 Less 文件编译成 CSS 文件；压缩 CSS、JavaScript 文件，减小文件体积；转换 ES6 语法的 JavaScript 文件，以使不支持ES6语法的浏览器也能运行。
• theme.jpg 文件的大小为500*320px，展示在后台主题列表及云应用中心。
• theme.json为主题的元信息描述，如下：

{
"code": "demo",
"name": "例子",
"author": "EduSoho官方",
"version": "1.0.0",
"support_version": "8.1.0+",
"date": "2017-08-09",
"thumb": "theme.png",
"protocol": 3
}

• code: 主题编码，需跟主题的目录名一致。
• name: 主题名称
• author: 作者
• version: 版本号
• support_version: 该主题支持的 EduSoho 版本，+表示该版本及其以上
• date: 最后更新日期
• thumb: 主题的缩略图地址
• protocol: 主题协议。3表示基于 EduSoho 8.0 的主题协议，2 表示基于 EduSoho 7.0 的版本协议。

三、定制首页

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

{% extends 'default/base-index.html.twig' %}
{% do script(['exampletheme/js/index/index.js']) %}

{% block content %}
  {{ block_show('example:top_banner') }}
 

   

最新课程

 

  {% set freeCourseSets = data('FreeCourseSets',{count:6}) %}
 

   

     

        {% for freeCourseSet in freeCourseSets %}
         

            {% include 'course/widgets/course-grid.html.twig' with {courseSet: freeCourseSet} %}
         

        {% endfor %}
     

   

 

 

   

最新老师

 

  {% set teachers = data('LatestTeachers',{count:6}) %}
 

   

     

        {% for teacher in teachers %}
         

           

             

               
                 
               
               

                  {{ teacher.nickname }}
               

               

                  {% if teacher.title %}
                    {{ teacher.title }}
                  {% else %}
                    {{'user.fields.no_title'|trans}}
                  {% endif %}
               

             

           

         

        {% endfor %}
     

   

 

{% endblock %}

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

四、接下去做什么

    主题开发，需要具备一定的 HTML、CSS、JavaScript、jQuery、Bootstrap、Less 等前端知识，熟悉 Twig 模板引擎，如果您在这些方面比较生疏要进行相关知识的学习。