WeCenter二次开发教程(一):熟悉模板结构
<1>程序文件目录介绍:
app – 应用目录
models – 模型目录
plugins – 插件目录
static – 静态文件
system – 系统目录
views – 模板目录
我们简单的页面二次开发主要还是关注static和views这两个文件。 下面在介绍一下这个文件里面对应的目录功能
static里面文件分别是:
admin: 后台控制面板的css,js,图片这些文件;
common: 网站公用的图片,比如社区默认的头像图片;
css:主要介绍css/default里的css文件功能:
link.css – 全站字体颜色;
common.css – 模板主css文件;
login.css – 登录页面css
register.css – 注册页面css
user-setting.css – 用户设置页面css
user.css – 用户主页css
js: 模板的js文件,包含一些公用的js文件以及一些控制对应功能的js文件,
其中app文件里面就是包含的控制模板对应功能的js文件,
mobile.js是手机版的Js文件;
aw_template.js – 页面通用模板文件,如弹窗模板;
function.js – 全站基本功能函数;
app.js – 页面加载时调用的js;
/editor – 编辑器js;
/plug_module/plug-in_module.js – 全站基础框架js,内涵jQuery,bootstrap,附件上传,Hogan模板引擎。
接下来再看看views文件对应的内容:
其实views就是放对应的模板文件的,程序自带两个模板--默认的default和黑色的classblack,
其中大家可能会发现classblack文件内容为空,这里你要了解下wecenter的模板继承机制,wecenter系统的 default 为主模板, 用户的自定义模板只需要更改很少的文件即可实现程序界面的定制。
具体如下:
<2>再说一下如何创建新模板:
1. 在 views 下面建立模板目录。如果你不想对模板结构做调整的话,里面可以不放内容,如果你想调整程序的结构布局这些东西,你需要从default里把对应的文件拷贝过来放新的模板文件里然后在进行二次修改开发,不建议直接在default里修改。 下为default模板(views/default)里对应的文件功能:
/account – 账户相关模板,如登录,注册等
/admin – 后台
/article
/block – 通用模块
/config – 配置分页样式
/favorite – 我的收藏
/feature – 专题
/global – 全局通用模块,如头部,底部
/home – 首页,发现页
/inbox – 私信
/install – 安装
/invitation – 邀请好友
/m – 移动版本模板
/migrate – 安装上传目录设置
/notifications – 通知
/people – 个人页面
/publish – 发起
/question – 问题
/reader – 阅读器
/search – 搜索
/topic – 话题
注意 : 目录下ajax目录下模板为数据模板
2. 在 static/css/ 下建立与模板相同的目录(文件名字要相同,都取你的模板名字为文件名称), 然后在里面开始创建css文件,同样的css文件名也要是你的模板名,这里我们不建议直接修改默认模板的css文件,因为会继承默认common.css里的属性的,所以只需要把你需要改动的css地方全部写在你新建的css文件里.
<3> 介绍页面的基本结构:
页面一般都由头部,中间内容,底部,侧边栏组成。其中头部和底部包括一些侧边栏是通用的,都是通过调用模块来实现的:
头部调用 : <?php TPL::output('global/header.tpl.htm'); ?>
底部调用 : <?php TPL::output('global/footer.tpl.htm'); ?>
侧边栏调用 : <?php TPL::output('block/sidebar_menu.tpl.htm'); ?>
中间内容部分基本上都是通过ajax来获取数据内容,因为WeCenter采用了bootstrap框架,所以内容的整体框架布局都是在图中这样的代码框架里插入内容:
{{{
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
</div>
</div>
</div>
}}}
到了内容里面具体的代码结构,我们采用的是如下图这种模块结构:
{{{
<div class="aw-mod">
<div class="aw-mod-head">
</div>
<div class="aw-mod-body">
</div>
<div class="aw-mod-footer">
</div>
</div>
}}}
侧边栏结构的话我们则把.aw-mod换成.aw-side-bar-mod即可。 其中aw是程序前缀,新建的模板要是需要添加或更改结构可以另外去一个前缀,方便后期修改维护。
WeCenter二次开发教程(一):熟悉模板结构的更多相关文章
- 最好最实用的PHP二次开发教程
◆二次开发 1.什么是二次开发? 二次开发,简单的说就是在现有的软件上进行定制修改,功能的扩展,然后达到自己想要的功能和效果,一般来说都不会改变原有系统的内核. 2.为什么要二次开发? 随着信息化技术 ...
- 最好最实用的二次开发教程 cms
◆二次开发 什么是二次开发? 二次开发,简单的说就是在现有的软件上进行定制修改,功能的扩展,然后达到自己想要的功能和效果,一 般来说都不会改变原有系统的内核. 为什么要二次开发? 随着信息化技术的不断 ...
- PHPCMS二次开发教程(转)
转自:http://www.cnblogs.com/semcoding/p/3347600.html PHPCMS V9 结构设计 根目录 |–api 结构文件目录 |–caches 缓存文件目录 ...
- PHPCMS二次开发教程
PHPCMS V9 结构设计 根目录|–api 结构文件目录|–caches 缓存文件目录 |– configs 系统配置文件目录 |– caches_* 系统缓存目录|–phpcms p ...
- PHPCMS 使用图示和PHPCMS二次开发教程(转)
PHPCMS V9 核心文件说明 模块与控制器 模块: phpcms v9框架中的模块,位于phpcms/modules目录中 每一个目录称之为一个模块.即url访问中的m. 访问content模块示 ...
- Ecshop系统二次开发教程及流程演示
来源:互联网 作者:佚名 时间:03-01 16:05:31 [大 中 小] Ecshop想必大家不会觉得陌生吧,大部分的B2C独立网店系统都用的是Ecshop系统,很受用户的喜爱,但是由于Ecs ...
- Sketchup二次开发教程
Sketchup提供了两套API: C API,主要用于读写SU文件.我们的SU文件导入功能就是用这套API做的 Ruby API,用于开发SU插件 这次我们主要关注Ruby API,因为它是实现更丰 ...
- Odoo 二次开发教程(五)-新API的介绍与应用
[关于odoo新API的介绍,Internet上资料很少,或者不够完整详实,这会对初学者造成很大的困惑,本篇的目的就是希望能帮助新手了解新API的大概] odoo 新api的实现是借助于python装 ...
- Odoo 二次开发教程【一】 Odoo 的安装
一,安装的两种方式: 1) deb包安装: 此安装方式适用于简单不需要太多的人工干预,大多数插件都在deb中涵盖了.具体的步骤如下: 1.编辑 /etc/apt/source.list 文件,在末尾添 ...
随机推荐
- windows+caffe(五)——实例2MNIST图片
1. 数据集 MNIST手写体数据.bmp图片:训练集60K张28*28的,测试集10K张28*28的: 训练集: 测试集: 下载地址: 2. 读取图片名称与标签,保存到trainlist.txt与t ...
- 让 MySQL 在 Linux 下表名不区分大小写(实为表名全小写)
把 Windows 下的应用部署到 Linux 下,使用到了 Quartz 集群的特性,所以建了 MySql 的中间表,一启动看到报错: Invocation of init method faile ...
- DP专题训练之HDU 1506 Largest Rectangle in a Histogram
Description A histogram is a polygon composed of a sequence of rectangles aligned at a common base l ...
- LabVIEW如何调用C#Winform
界面交互并不是Labview的强项,使用Labview创建UI时候总会受制于VI有限的控件,有限的皮肤和有限的控件事件.而当需要实现UI的多文档的窗口,窗口的浮动停靠,动画等功能时还需要花很大的功夫. ...
- 一首诗,致亲爱的csdn
来自csdn的Rachel-Zhang姐姐 还记得--致亲爱的csdn 还记得你年轻时的摸样? 简单的文字,无瑕的脸庞. 现在的你,满脸风霜. 五粮液的广告,在我的文章中久久荡漾. 还记得当初的梦想? ...
- Reportng报告替代testng
1,工程导入jar包
- Shell脚本检测Tomcat是否正在运行
#!/bin/sh # configurations # computer 设备名称 # target 监控目标 # watcher 跟踪者(邮箱) computer="ehetong&qu ...
- 介绍一个可以将Expression表达式树解析成Transact-SQL的项目Expression2Sql
一.Expression2Sql介绍 Expression2Sql是一个可以将Expression表达式树解析成Transact-SQL的项目.简单易用,几分钟即可上手使用,因为博主在设计Expres ...
- IOS JSON
//请求数据 dispatch_async(dispatch_get_global_queue(, ), ^{ _dataArray=[NSMutableArray array]; NSString ...
- a标签的作用
a标签的hover,active,target,visited等伪类在所有浏览器中是兼容的,而其他元素的这些伪类并不全兼容: a标签本身是跳转页面的,把跳转的地址写在href这个属性中, (1)不 ...