CMS：Xibo代码结构 - zhonglong/TPV GitHub Wiki

源代码

Xibo Content Management System
https://github.com/xibosignage/xibo-cms
https://xibo.org.uk/

客户端和服务端分工

Xibo源代码分为客户端执行和服务端执行两部分， 客户端指浏览器，执行HTML，CSS和JavaScript代码， 服务端指Apache/MySQL/PHP环境（如phpStudy），执行PHP代码，其中TWIG是PHP的模板引擎，由服务端解析最终生成HTML文档（有些含JavaScript）。

Twig: The flexible, fast, and secure template engine for PHP
https://twig.symfony.com/

主要目录和文件

HTML

对应views和modules两个目录下的twig文件，由PHP执行生成HTML文档。 其中view目录下是页面，module目录下是控件（add和edit）。

CSS

使用bootstrap框架的样式。

JavaScript

对应web\theme\default\js目录下的js文件，尤其是xibo-cms.js，以及厦门添加的xibo-cms-tpv.js。

前端框架

对应web\theme\default\libraries目录，Xibo引入了很多前端框架，如bootstrap（如：对话框，栅格布局）和jquery（如：AJAX，列表插件DataTables）两个UI框架。

PHP

对应lib目录，可能会改动的是Controller和Widget这几个子目录下的PHP文件。 lib目录下的routes.php和routes-web.php两个文件也很重要，负责将HTML超链接和PHP接口建立映射关系，因为HTML是以超链接的方式调用接口（一般写法是href="{{ urlFor）。

后端框架

对应vendor目录，如twig，slim等。

布局组织结构

Xibo

Xibo布局（layout）可以添加任意个（零个，一个或多个）区域。 每个区域（region）可单独调整大小和位置，并关联一个播放列表（其实支持多个播放列表，但只使用一个）。 每个播放列表（playlist）可以添加任意个控件，控件类型不限。但媒体类的控件（图文声像）内容不能为空，否则无法加入。 每个控件（widget）可以单独设置属性，但大小和位置只能与所属区域一致，不能调整。每个媒体类的控件只能对应一个媒体文件。

CLEAR

CLEAR分节目模板和频道管理两部分，其中节目模板只排列控件（大小和位置），频道管理才设置内容。 CLEAR没有区域的概念，可以直接在控件上调整大小和位置，并且媒体类的控件可以关联一组媒体文件，层级上比Xibo简单。

流程举例

以双击区域打开时间轴为例：

客户端

布局对应的页面是layout-designer-page.twig，找到<div id="layout"，可知双击（ondblclick）区域调用XiboFormRender方法（JavaScript），传入的超链接（region.timeline.form）通过href指定。

打开XiboFormRender方法，主要是AJAX调用，从参数中找到超链接地址formUrl发给服务端，接收到返回的数据response.html，显示在dialog。此处引入了一个三方框架bootstrap（bootbox）。

服务端

根据客户端的超链接URL（region.timeline.form），找到对应的PHP接口Region:timelineForm，主要功能是给模板region-form-timeline.twig（或region-form-grid.twig）填充数据setData，将生成的HTML传给客户端显示。

客制化

Xibo官方文档给出客制化主题，新增接口和控件的方式，见：

Themes
https://xibo.org.uk/manual/en/advanced_theme.html
Extending the CMS
https://xibo.org.uk/manual/en/advanced_extending.html
Modules and Widgets
https://xibo.org.uk/manual/en/advanced_modules.html

日志

Xibo日志保存在数据库的log表中，使用phpMyAdmin工具查看。 Xibo默认只记录Error级别的日志，若要记录debug日志，打开数据库的setting表，将SERVER_MODE字段的值，从Production改为Test。 若要将日志记录到文件中，打开web目录下的settings.php文件，修改logHandlers的值：

$logHandlers = [new \Monolog\Handler\StreamHandler(PROJECT_ROOT . 'log.txt')];

参考资料

HTML 5移动Web开发实战详解
清花大学出版社，林珑 编著

这本书讲前端，没有提到PHP和TWIG：

Twig模版语言入门
http://pengbotao.cn/twig-template-language.html
PHP 教程
http://www.runoob.com/php/php-tutorial.html

三方框架教程：

Bootstrap 教程
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
jQuery AJAX 方法
http://www.runoob.com/jquery/ajax-ajax.html
DataTables
https://datatables.net/examples/index