您现在的位置: 万盛学电脑网 >> 程序编程 >> 网络编程 >> 编程语言综合 >> 正文

WeCenter 2.x模板开发基础教程

作者:佚名    责任编辑:admin    更新时间:2022-06-22

  一、 模板目录作用说明(以默认模板为例)

  /views/default/

  /account – 账户相关模板,如登录,注册等

  /admin – 后台

  /block – 通用模块

  /config – 配置分页样式

  /favorite – 我的收藏

  /feature – 专题

  /global – 全局通用模块,如头部,底部

  /home – 首页,发现页

  /inbox – 私信

  /install – 安装

  /invitation – 邀请好友

  /m – 移动版本模板

  /migrate – 安装上传目录设置

  /notifications – 通知

  /people – 个人页面

  /publish – 发起

  /question – 问题

  /reader – 阅读器

  /search – 搜索

  /topic – 话题

  注意 : 目录下ajax目录下模板为数据模板

  二、Static目录下个别文件作用说明 :

  css(根据图片说明,以default为例)

  bootstrap.css – bootstrap框架

  glyphicons-halflings.png – bootstrap框架的icon图片

  glyphicons-halflings-white.png – 同上

  btn-sprite.css – 按钮css

  common.css – 模板主css文件

  ie7.css – ie7兼容性css

  link.css – 全站字体颜色

  login.css – 登录页面css

  register.css – 注册页面css

  user-setting.css – 用户设置页面css

  user.css – 用户主页css

  2.javascript(以图片说明)

  aw_template.js – 页面通用模板文件,如弹窗模板

  function.js – 全站基本功能函数

  app.js – 页面加载时调用的js

  /editor – 编辑器js

  /plug_module/plug-in_module.js – 全站基础框架js,内涵jQuery,bootstrap,附件上传,Hogan模板引擎

  三、模板继承机制

  四、创建新模板方法

  css创建 : 在static/css/目录下创建模板名字目录为newstyle,并在newstyle目录内创建相应名字的css文件,如果有相应模板的图片文件则再创建一个img目录,没有的话可以忽略,如下图所示

  创建新的css后,可在里面添加新模板的css和重写default原有的css进行覆盖。注意 : css文件名字必须跟模板名字相同 模板创建 : 在views目录下创建和模板名字相同的文件夹,如下图所示

  假设要为新的模板制作一个新的登陆页面,可以先将default目录下相应的目录和文件先拷贝到新的模板文件下再进行修改,下图所示 :

  要修改别的模板也是重复以上操作,创建了新模板文件后,登录后台就可以在界面设置里面选择新的模板

  注意 : 新模板的文件目录位置必须要跟default模板目录位置一样才能进行覆盖

  五、页面基本结构

  页面一般由头部,中间内容,底部组成,其中头部和底部是通用的, 有些页面会有侧边栏,这里举例一些通用模块调用方法

  头部调用 :

  底部调用 :

  侧边栏调用 : 由于页面的宽度为940px,我们有一个aw-wecenter的class来固定宽度 css命名都由aw-前缀为基础,可根据需求不同自行修改 页面布局参照bs2.3.2框架的布局方式,如下

  如有疑惑可以到bs中文官网去查看手册, http://www.bootcss.com/scaffolding.html

  六. 常用代码分析

  常用模块代码结构

  页面布局定义好容器后,都由上面两种模块代码嵌套组成,例如侧边栏

常用css代码分析

  .aw-wecenter 限制页面宽度

  .aw-main-content 限制主要内容宽度

  .aw-side-bar 限制侧边栏宽度

  .pull-left 左浮动

  .pull-right 右浮动

  .clearfix 清除浮动

  icon都以.aw-icon + icon名字命名,例如 .aw-icon . i-v (bs自带的除外)

  btn都以.aw-btn + btn名字命名,例如.aw-btn . b-new-user (bs自带的除外)

  btn都以.aw-btn + btn名字命名,例如.aw-btn . b-new-user (bs自带的除外)