Ngoos嵌套模板 总体结构

来自极益平台知识库
跳转至: 导航搜索

整体文件结构

文件结构

网站系统模板路径在:/ fileadmin/templates/v2/目录下面。

  1. Dce:存储dec文件的目录。
  2. Plugin:模板插件目录。
  3. Private:系统配置目录。
  • configuration/typoscript:setup.ts系统核心文件,用于系统配置;constants.ts系统常量配置。
  • configuration/ layouts:Default.html 布局文件。
  • configuration/ partials:Header.html页面头部公共文件;Footer.html 页面底部公共文件。
  • configuration/ templates:home.html 首页主模板文件;onecolumn.html一列主模板文件。twocolumn.html两列主模板文件。
  • Public:相关js、css、images等目录。
  • 调用关系

Setup.ts中加载home.html文件; home.html中加载Default.html; Default.html中加载Header.html和Footer.html

Public目录

  1. 规范目录。css文件夹:样式目录;images文件夹:图片目录;script文件夹:js目录;fonts文件夹:字体目录。(注意:文件夹名称尽量统一;favicon.ico、banner.jpg、logo.png这三张图片名称及图片类型不能改变,并且放到images文件夹下)
  2. 配置css、js、images的路径。在/v2/private/configuration/typoscript/ constants.ts文件中。(文件中的#,表示注释)

嵌套模板1.png

  • logo和favicon文件路径。不用改动,如果不一致,以红色框中的为主。

嵌套模板2.png

  • css和js的路径

嵌套模板3.png

  • 红框中如果都修改为0,表示css和js没有被压缩(即:能看到css和js的路径),如果为1,表示已经被压缩。
  1. 加载css和js等配置。在/v2/private/configuration/typoscript/setup.ts文件中。(注意:该文件调用的是constants.ts文件中的配置)

嵌套模板4.png

  • 加载系统模板(模板在在configuration/templates/文件夹下),默认不用修改。

嵌套模板5.png

  • 小于ie9的配置。

嵌套模板6.png

  • Meta配置,基本不用动,如果需要,可以自己添加

嵌套模板7.png

  • {$page.includePath.css} 和{$page.includePath.javascript} 是在constants.ts文件里面配置的统一路径。

Header

header文件位置:/v2/private/partials/header.html。

1 header嵌套模板

静态页面header:

图片 嵌套模板9.png

嵌套后的header:

图片 嵌套模板10.png

1) logo部分:” f:link.page” 与a标签的用法是一致的。{f:uri.image(src: logoFile)}是logo图片的路径,不需要改动。width="388c" height="75c"需要限制logo的尺寸,因为后续logo用户可以自己上传。

2) 搜索:搜索部分后续会换成百度搜索,只需要在input中添加 id="bdcsMain",其他内容直接拷贝。

3) 菜单:在菜单位置加载<f:cObject typoscriptObjectPath="lib.navigation.main"/>。

2 主菜单

静态页面:

图片 嵌套模板11.png

嵌套后的菜单

图片 嵌套模板12.png

1) ul:最外层的ul直接写到header里面;

2) 标签说明

|:表示从数据库中加载出来的菜单变量。

ATagBeforeWrap = 1:给每个菜单添加a标签。

wrapItemAndSub wrapItemAndSub.insertData 这两句就是加载完成一级菜单

wrap = 添加二级菜单最外层的内容。

NO.wrapItemAndSub = 加载二级菜单

Banner分为首页banner和内页banner。/v2/dce/banner.html文件是dce,每个页面都有可能需要加载,所有区域首页和内页。首页banner的循环建议使用swiper,地址:http://www.swiper.com.cn/。

1. Banner嵌套模板

图片 嵌套模板13.png

静态页面(首页):

图片 嵌套模板14.png

嵌套后的banner:

图片 嵌套模板15.png

内页banner:

1) “f:image”和html中的 img标签一致,使用“f:image”的唯一区别就是图片特别大的时候,使用width="1480c" height="232c" 对图片进行裁剪(1480c图片大于1480进行裁剪,且图片放到缓存中);

2) “uploads/pics/{field.images.0.image}”banner的图片路径都是在uploads/pics/下面,” {field.images.0.image}”获取第一张图片。

首页banner:

1) ” <f:for each="{field.images}" as="vo" iteration="itemIteration"></f:for>”,多张图片的一个循环。”{field.images}”是存储多张图片的变量,不能改变。

2) “<dce:typolink parameter="{vo.link}"></dce:typolink>”与a标签一致,{vo.link}表示连接地址。

2. 内页banner:

/fileadmin/templates/v2/private/templates/twocolumn.html和onecolumn.html。

图片 嵌套模板16.png

1) twocolumn.html和onecolumn.html的banner部分是一致的。

2) <f:if condition="{f:cObject(typoscriptObjectPath:'lib.dynamicContent',data:'0')}"></f:if> 判断banner是否存在用户自己上传的图片,存在就调用(调用的的是v2/dce/banner.html),否则就加载默认的(上面已经规定内页banner的图片名称及格式不能改变)。

Footer

Footer的文件目录为/v2/private/partials/footer.html。

1. Footer嵌套模板

静态页面:

图片 嵌套模板17.png

嵌套后的footer:

图片 嵌套模板18.png

1) 系统将footer划分了三部分, 98是footer左边;100是footer中间;99是footer右边, 用户可以通过样式灵活配置。

2) 如果footer只有一行一列,就调用98;如果是一行左右结构,就调用98,99;如果是两行就全部调用(类似上面的)。

3) footer部分可以不需要写dce,全部以文本或纯html的方式,加载到系统中。