SNS进阶

主题开发

主题基础介绍

关键词：主题

简介：本文简单介绍了OS的主题机制，通过主题机制，可以让开发者的主题文件更加聚合，而不是散落在各个模块当中

在主题的开发当中，开发者需要先熟悉Thinkphp的模板开发，建议系统化学习Thinkphp模板开发章节，如果有时间的话，还可以考虑系统化学习Thinkphp开发。

传送门：Thinkphp模板机制 http://document.thinkphp.cn/manual_3_2.html#template

在OpenSNS的系统中，我们建立了另外一种集中的方式来开发主题。学习本章，可以明白如何去开发主题。

一、目录结构

在theme中创建一个类似blue的文件夹，里面的info.php必须填，然后再里面创建对应的模块文件夹，然后把Application/ucenter/view里面的文件拷贝过来，然后修改样式。

上图是默认模板与新模版对应关系。

下图为主题的目录结构

特别注意！！！主题的目录结构里没有 default 这个主题目录，所以构建目录的时候，拷贝模板进去，必须剥离掉default这层目录。大部分主题无效就是这个原因导致的。

View/Index/edit.html

而不是

View/default/Index/edit.html

二、主题信息的录入

标准的Info.php格式

<?php  return  array (      //模版名      'name'  =>  'T4' ,      //别名      'title'  =>  '仿TS4.0风格' ,      //版本号      'version'  =>  '1.0.0' ,      //是否商业模版,1是，0，否      'is_com'  => 0,      //模版描述      'summary'  =>  '简单模仿T4的设计风格。' ,      //开发者      'developer'  =>  '郑恒盛' ,      //开发者网站      'website'  =>  'http://www.ourstu.com' , );

上述代码中，就是一个标准的Theme的info.php文件，大家可以对应修改。这些信息将会被主题系统所导入。

主题开发步骤

关键词：主题开发 步骤 流程

简介：本小节主要介绍主题开发的基本流程，让开发者知道如何开始进行主题开发，引导开发者步入正确开发轨道。

        熟话说万事开头难，那么就让小编来降低开头的难度，帮你打开主题开发的大门。

        

        经过官方对主题机制的高超设计，对于OS前端开发者来说，主题开发其实是一件非常简单的事情。只要经过接下来我介绍的五个步骤，可能一个熟练的前端开发者只需要十几分钟就能做出一个全新的主题。

主题开发的五个步骤：本文以“zzl-specialty”为例

一、选择主题名称

        如果你打算把自己开发的主题上传的官方云市场，或者你打算在自己的网站上偶尔使用一下官方云市场中的主题，那么给你自己开发的主题选一个合适的名称就变得尤为重要了。那么什么是合适的名称呢？一个合适的名称，说的明确一点就是你开发的主题的名称不能和其他主题重名。要做到这一点，首先你要让你的主题名称不是通用型名称；其次要确保你的主题在现有系统中没有重名主题。当然，如果开发完成后发现有重名主题，也是可以修改一下主题名称的。（注意，主题名称不能是"default"）

二、初始化主题

        1、创建主题文件夹

                在/Theme文件夹下创建一个新的主题文件夹，命名为你选好的名称如下图。

                    

        2、创建主题信息文件及录入主题信息（注意：主题名必须和主题文件夹名相同）

                 如下图，在主题文件夹“zzl-specialty”下创建“info.php”文件，并录入如下信息：

return  array (                 //主题名     'name'  =>  'zzl-specialty' ,     //别名     'title'  =>  '主题开发介绍' ,     //版本号     'version'  =>  '1.0.3' ,     //是否商业主题,1是，0，否     'is_com'  => 1,     //主题描述     'summary'  =>  '介绍主题开发流程使用的主题。' ,     //开发者     'developer'  =>  '郑钟良' ,     //开发者网站     'website'  =>  'http://www.ourstu.com' , );

                    

           3、进入本地主题后台，检查更新主题，刷新出刚创建的主题，至此，主题的初始化已经完成了。如下图：

三、编辑主题

        编辑主题根据覆盖范围可以分为三个类型，分别是：1、编辑整站主题；2、编辑某一模块主题；3、编辑某一模板主题

        编辑主题的过程会在接下来的几个章节详细介绍。在这里小编要说的是，这三种类型在开发一个主题的过程中不一定要全部进行，开发者可以根据需要自行选择。

四、打包完成主题开发

        给主题选一个封面图，命名为“preview.jpg”,放在“info.php”文件的同级目录下。

        打包下载主题，如图：

            

五、上传到官方云市场出售或应用到其他网站

        上传到官方云市场：http://os.opensns.cn/appstore/theme

                    到官方云市场主题中发布主题，填写相关信息。

                    等待官方审核，审核通过后进入主题详情界面上传新版主题，如图。

            

            应用到其他网站：

                进入网站后台=》点击安装新主题=》上传打包下来的主题安装包=》执行安装使用

                

引用主题内部文件

OS为了开发者能引用到主题内部的文件（css、js、img等），专门写了一个配置文件“/Theme/config.php”，该文件定义了本主题下“/Public” 、 “/Common/Static” 及主题下当前模块中 “/Static” 、“/Static/css” 、“/Static/js” 、“/Static/images” 、“/View” 、“/View/Public”文件夹的路径。该文件内容如下：

$now_theme  = cookie( 'TO_LOOK_THEME' , '' , array ( 'prefix' => 'OSV2' )); if (! $now_theme ){      $now_theme =modC( 'NOW_THEME' , 'default' , 'Theme' ); } if ( $now_theme != 'default' ){      return  array (          /* 模板相关配置 */          'TMPL_PARSE_STRING'  =>  array (              '__THEME__' =>__ROOT__. '/Theme/' . $now_theme ,              '__THEME_COMMON_STATIC__' =>__ROOT__. '/Theme/' . $now_theme . '/Common/Static' ,              '__THEME_STATIC__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/Static' ,              '__THEME_CSS__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/Static/css' ,              '__THEME_JS__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/Static/js' ,              '__THEME_IMG__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/Static/images' ,              '__THEME_VIEW__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/View' ,              '__THEME_VIEW_PUBLIC__' =>__ROOT__. '/Theme/' . $now_theme . '/' .MODULE_NAME. '/View/Public' ,              '__THEME_PUBLIC__' =>__ROOT__. '/Theme/' . $now_theme . '/Public' ,          ),      ); }

下图是一个引用主题内部css文件的案例，里面就用到了“/Theme/config.php”文件中定义的“__THEME_PUBLIC__”模板文件常量，如图：

小编另外说一下，不只是可以引用css哦，你还可一引用js、img，甚至你还可以引用其他模板。

修改整站主题

        整站主题开发其实就是针对网站头部、底部、配色进行修改，使大部分界面看起来和原来的不一样。

首先，复制公共模块文件夹到主题文件夹下，如图：

        

其次，删除和模板无关的文件夹，如：Api、Behavior、Common、Conf、Controller等，如图：

        

然后，将default文件夹下的文件夹全部向上提升一级，即将文件夹移出来，去除default层级，如图：

        

接下来就是修改公共模板头部和尾部，以及整个模板的结构，如图：

        

最后，去除没有被修改的模板文件。（当然，你也可以不删除，不过为了让你的主题对别的开发者友善，推荐删除）

到这里相信懂前端开发的技术人员已经知道如何修改整个网站的头部和尾部布局和结构了。

那么如何修改网站的主要配色呢？那就要说到OS主题机制的另一个关键点了。也就是上一节我们介绍的“引用主题内部文件”。

修改单个模块或模板主题

修改某个模块的模板和修改整站主题的方式一样，也是把模块的目录文件复制到主题文件夹中，然后去除不相关的文件，修改对应的模板文件。

如图，是修改资讯模块下的编辑资讯界面的模板文件示例：

                    

如，原资讯编辑界面展示效果如图

经过我的修改，把元素的padding-top属性设为200px;得到的结果如下：(当然，广大开发者们，不要纠结我举例的美观性。这只是一个例子。相信专业人士能做出更美观更符合需求的修改)

主题特有广告位的添加

2.7.1版简易添加广告位教程

新版本支持一句代码增加广告位，调用方式如下

{:W( 'Common/Adv/render' , array ( array ( 'name' => '[参数1 广告位置英文名]' , 'title' => '[参数2 广告位中文名]' , 'type' =>[参数3 广告类型], 'width' => '[参数4 广告位宽度]' , 'height' => '[参数5 广告位高度]' , 'theme' => '[参数6 主题名]' , 'data' => array (xxx=>xxx))))}

此处请注意，后面是有两个array

参数1必须为英文

参数2必须为中文

参数3必须为数字  1代表单图广告  2代表多图广告 3代表文字广告 4代表代码广告

参数4可以为各种计量单位的数值，如100px  10% 1.2em 等

参数5同参数4

参数6为主题名，可选，只有部分主题中运用的广告位才需要填写此参数，如小清新风格，填Light，参数为主题的英文名，如果运用在全部主题，则写all,默认为all

参数7位额外参数，比如轮播图可填入style，轮播风格,1为slider，2为kinmax风格

'data' => array ( 'style' =>2)

例：

添加一个运用于Light主题的广告位，此广告位不会在其他主题中出现

{:W( 'Common/Adv/render' , array ( array ( 'pos' => 'weibo_filter_right' , 'title' => '微博过滤右方' , 'type' => '1' , 'width' => '200px' , 'height' => '200px' , 'theme' => 'Light' )))}

在模板页面添加代码之后，清空缓存，刷新当前页面，系统就会自动添加一个广告位。