快速入门

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

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

    将主题注册到系统中去:

    打开 EduSoho 首页,可以看到如下界面:

    TODO: 这张图片要换。

    • block 目录下存放编辑区的模板文件,block.json 为编辑区的配置文件,参见文档编辑区
    • static-src 的文件会打包编译到 static-dist。编译打包的过程会将 Less 文件编译成 CSS 文件;压缩 CSS、JavaScript 文件,减小文件体积;转换 ES6 语法的 JavaScript 文件,以使不支持ES6语法的浏览器也能运行。参见。
    • 为主题的元信息描述,如下:
    • code: 主题编码,需跟主题的目录名一致。
    • name: 主题名称
    • author: 作者
    • version: 版本号
    • support_version: 该主题支持的 EduSoho 版本,+表示该版本及其以上
    • : 最后更新日期
    • protocol: 主题协议。3表示基于 EduSoho 8.0 的主题协议,2 表示基于 EduSoho 7.0 的版本协议。

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

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

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

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