3.3前端手册

开发流程：先将设计图拆解为静态页面，然后再用五星云站模板语法替代。

3.3.1 拆解静态页面

多个页面可能重复使用的内容包括：

3.3.1.1 文本

h1

每个页面都有且只有一个h1标签，h1标签必须完整展示，不能被折叠或隐藏。

首页h1标签的位置在页面顶部的logo文件，内容为网站名称，标准写法如下：

<h1 class="logo">
    <a href="/" title="">
        <img src="logo.png" alt="#网站名称#">
    </a>
</h1>

模型列表页的h1标签为分类名称。

模型详情页的h1标签为详情内容标题。

其他普通页面的h1标签为页面名称。

其他文本

根据整体页面，设置统一的文本标签样式，减少后续重复编辑样式。

3.3.1.2 导航

顶部导航，一般展示网站完整结构。需确定内容文本长度和溢出效果，可设置统一样式。

底部导航，一般只展示网站重点结构或重点内容。需确定内容文本长度和溢出效果，可设置统一样式。

面包屑导航，除首页外，每个页面都有。需确定内容文本长度和溢出效果，可设置统一样式。

3.3.1.3 相关内容

是指可以在任何类型页面都可能出现的、链接至模型详情页的内容。

在拆解静态页面时，相同样式的内容可以复制扩充，比如相关产品下包含四个产品，可以使用相同的图片、标题。

需确定内容文本长度和溢出效果，可设置统一样式。

相关内容一般有如下几种类型，根据设计图还原。

封面图+详情标题

包括相关案例、相关解决方案、相关专题、相关配件、相关产品等。

相关图库：包含多个图片，需要和普通的封面图效果做区分。

相关视频：和普通封面图效果做区分，如展示播放按钮、视频时长等信息。

相关新闻：设计师可根据效果，采用有封面图和没有封面图两种形式。

只有详情标题

包括相关招聘、相关资料下载、相关问答等。其中

招聘的属性如：招聘人数、经验要求、截止时间等；

资料的属性如：资料格式、资料大小。

3.3.1.4 列表内容

在模型列表和搜索列表展示的、链接至详情页的内容。

一般包括分类和分类下的详情两部分。

分类

需确定文本长度和溢出效果，可设置统一样式。

分类下的详情

• 样式，一般和“相关内容”一样，也可能独立设计，可设置统一样式。根据设计图还原。

• 在拆解静态页面时，相同样式的详情内容可以通过复制扩充，比如新闻列表内包含8条新闻，可以使用相同的图片、标题。

• 需确定文本长度和溢出效果。

3.3.1.5 模型详情

详情首屏

包含详情大标题及详情主要字段。

可设置大标题统一样式。需确定文本长度和溢出效果。

详情正文及小标题

• 需完整还原，正文描述尽量使用文本、不用截图。

• 详情小标题可设置统一样式。

• 详情正文可设置统一样式。

3.3.1.6 表单

在拆解静态页时，不用考虑业务逻辑和前后端数据互通，只用实现主要样式效果即可。

表单名称及字段需确定文本长度和溢出效果。可设置统一样式。

不同表单都需要注意的交互及验证效果包括：必填项提示、输入格式错误提示、提交后反馈（成功/失败）、手机验证。

• 普通表单（询盘、留言） 主要内容包括：字段标题、字段输入框；

• 评论 主要内容包括：字段标题、字段输入框、已提交内容的展示；

• 问答 主要内容包括：字段标题、字段输入框、已提交内容的展示；

• 提交简历 主要内容包括：字段标题、字段输入框、上传附件、附件格式及大小错误的提示。

3.3.2 嵌套模板

资源

页面或模板代码中用到的css/js/图片等，在五星云站后台“模板-资源”处管理。

物料

模型内容中用到的图片、文档等，在五星云站后台“模板-物料”处管理。

变量

主题包中非固定的内容，如企业名称、企业地址等，可以设置为变量。查看变量用法

• 预置变量

五星云站的预置变量包括企业名称、企业logo，在后台“网站-设置-基础设置出管理”

• 自定义变量

也可在后台“网站-设置-变量管理”处，添加自定义变量。

静态片段

在不同页面中重复使用的内容，可以创建为静态片段，比如公共头部、公共底部。 对应后台功能“模板—物料—静态片段”

在编辑页面或模板代码时，选择插入片段即可使用。 

动态片段

动态片段是可以按照指定规则动态循环输出的模型详情内容。 

动态片段的内容，在后台“模板-物料-动态片段”处管理。 

动态片段的样式，由模板控制。 

查看动态片段模板语法

全站使用的顶部导航和底部导航

导航内容，在后台“页面—导航”处管理。

导航样式，由模板通知，在后台“模板—模板列表—导航模板”处管理

导航模板主要逻辑如下。

• "sub_item {% if v['url'] == Urlparam['currenturl'] or v['module'] == datatype or (v['module'] == moduletype and v['module'] is not empty) or (datatype == 'zt' and v['module'] == 'news') or (v['url'] == '/about/' and (datatype == 'album' or datatype == 'job')) or (v['url'] == '/service/' and (datatype == 'parts' or datatype == 'faq' or datatype == 'download')) %}active {%endif%}">

• a. 判断当前页面url是否与导航url一致 例：联系我们

v['url'] == Urlparam['currenturl']

• b. 当前导航是预置模型，v['module']与后台存储的模型标识datatype一致 例：新闻中心 v['module'] == datatype
• c. 当前导航是自定义模型，v['module']与后台存储的自定义模型标识moduletype一致（并且v['module']不为空） 例：客户案例 v['module'] == moduletype and v['module'] is not empty
• d. 属于模型下的二级导航 例：新闻中心下的二级导航----企业专题

datatype == 'zt' and v['module'] == 'news'

• e. 属于自定义页面下的二级导航 例：关于企业下的二级导航-----企业图库、人才招聘 v['url'] == '/about/' and (datatype == 'album' or datatype == 'job')

查看完整导航模板语法

面包屑导航

除了首页，每个页面都有面包屑导航。

普通页面，静态内容直接输出

模型列表，静态内容直接输出，当前分类用变量输出。 

模型详情。面包屑导航中，静态内容直接输出，当前内容所属分类及内容标题用变量输出。 

页面

对应后台功能“页面-页面管理-普通页面”

普通页面

普通页面支持可视化编辑、需在代码中添加可视化编辑的标记。

支持可视化的内容过包括：文本、图片、动态片段（整体）、静态片段（整体）、链接、关联内容。

查看可视化标记语法

模板页面

模板页面内容，在后台“页面-页面管理-模板页面”

模板页面样式，由模板控制。

查看模板页面模板语法

自定义列表页

自定义列表页的内容，在后台“页面-页面管理-自定义列表页”处管理

自定义列表页的样式，由模板控制。

查看自定义列表页模板语法

模型首页/模型列表

模型首页和模型列表的内容包括：分类名称、分类介绍、分类封面图。 模型首页和模型列表的内容分别由后台“模型管理-分类管理”中的全部分类和其他分类控制。

模型首页和模型列表的样式都由模型分类模板控制。对应后台功能： 模板列表-新增模板-模板类型-模型模板/模型名称/分类

模型分类模板的主要内容包含

• 分类信息：标题、链接、图片、描述
• 分类下详情信息-----标题、链接、图片、描述、发布时间

举例如图库模型列表

图库列表（输出图库内图片数量）

图片列表

举例只有详情标题的列表

展示详情标题等字段。如果预置字段不包含该内容，需要添加自定义字段。

对应后台功能：内容-添加模型-编辑字段-新增字段

举例特殊样式，列表第一个内容有图片，其他内容没图片**

可使用

{%if loop.first%}
{%else%}
{%endif%}

查看模型分类模板语法

模型详情

模型详情页的内容，可以用模型字段直接输出。 模型详情页的样式，通过模板控制。

举例： 

详情主要内容由模型字段输出，特别是详情正文，通过富文本编辑器字段输出。在拆解静态页面和嵌套模板时，不用定义详情正文内容，只需定义样式：小标题需要单独设置样式，整个正文部分样式需统一。模板嵌套完成后，在五星云站后台发布模型详情，需要注意的是：详情正文尽量使用文字，而不使用大段截图。

对应后台功能： 内容—模型管理—发布详情—详情内容—新增编辑内容 

查看模型详情完整模板语法

搜索列表

搜索列表通过搜索模板直接控制。对应后台功能“模板-模板列表-搜索模板”。

每个模型都需要单独写各自的搜索页模板，样式除内容区域不一样，其他整体框架一致。

在搜索列表中，只显示当前开启了搜索功能的模型。搜索功能开关位置：“内容—模型管理—模型设置”。

查看搜索列表模板完整语法

业务表单

查看完整业务表单模板语法

询盘

和产品模型、配件模型关联。内容在后台“业务-询盘管理”处管理。

样式通过模型模板控制。模板中需要设置开启询盘后才显示询盘表单。询盘开关在后台“内容—模型管理—模型设置—业务”处。

前台询盘表单提交内容后，可以在后台“业务-询盘管理-模型询盘”处查看。 

留言

和文章模型关联。内容在后台“业务-留言管理”处管理。

样式通过模型模板控制。模板中需要设置开启留言后才显示询盘表单。留言开关在后台“内容—模型管理—模型设置—业务”处。

前台留言表单提交内容后，可以在后台“业务-留言管理-模型留言”处查看。 

评论

和新闻模型、图库模型、视频模型、专题模型关联。评论表单的字段内容不能自定义。

样式通过模型模板控制。模板中需要设置开启评论后才显示询盘表单。评论开关在后台“内容—模型管理—模型设置—业务”处。

前台评论表单提交内容后，可以在后台“业务-评论管理”处查看。 

简历

和招聘模型关联。内容在后台“业务-简历管理-表单设置”处管理。

样式通过模型模板控制。模板中需要设置开启投递简历后、才显示简历管理表单。投递简历开关在后台“内容—招聘管理—模型设置—业务”处。

前台简历表单提交内容后，可以在后台“业务-简历管理”处查看。 

自定义表单

自定义表单和模型没有关联，可以在任意页面中使用。自定义表单的内容和样式，都在后台“业务—表单管理—表单设置”处管理。

页面中使用自定义表单时，需要在后台“业务—表单管理—表单设置”处，找到对应的表单，点击复制代码，然后在页面中粘贴即可。

前台表单提交内容后，可以在后台“业务-表单管理-提交记录”处查看。 

其他要点说明

链接打开方式

中文站

• 一般链接，和当前页面内容关系不大，新窗口打开；
• 表示内容结构的的，当前窗口打开。如顶部导航、面包屑导航、列表页侧导航；

英文站

• 内容链接，统一当前窗口打开；非内容链接，如在线客服，使用新窗口。

命名规范

静态片段：终端类型（pc/m） - 内容类别 - 所属页面

动态片段：终端类型（pc/m） - 内容类别 - 规则（排序及数量） - 所属页面/位置

多颜色风格实现

样式表分为多份，不同主题颜色各有一份样式表，最后在调用样式表时，使用变量调取相应颜色的css文件。

输出物及要求

页面代码，符合前端要点说明；

内容实现方式灵活，且符合五星云站实现要求；

页面中不出现无意义内容或明显测试内容，如“测试产品标题”

PC版兼容IE9+、Chrome、Firefox、360等主流浏览器，移动版兼容主流品牌手机浏览器。

html、css编码基础规范

• html文件采用utf-8编码，无附加bom形式存储。
• 用tab键缩进。
• 引用wsc模块时，需在代码前后加上编号注释。
• html中不允许有站外资源链接，包括：imges、css、js、视频等。
• css、js文件里面的资源（背景图）必须是相对路径，参考项目的默认目录路径。

重点html标签编码规范：

• a标签及链接值规范

• 静态页中，所有模型相关需要用变量替换的链接，直接用变量替换好。

• 静态页中，所有指向模型首页、普通页面的链接，写上最终的链接，参考具体项目的URL规范。

• 静态页中，所有未知链接值用“#”

• 所有涉及模型的变量链接，a标签需要有title，如：内容标题、分类名称。

• 所有关于“more"，“更多"，“全部”，“查看详情”的a标签，需要有title，title值等于目标页的h1内容。

• img标签使用及实现规范

• 所有关于模型调取的图片需要使用src，且必须有alt属性，如：新闻封面图、产品图；

• 页面中有意义（语义）的配图可使用src；

• src本身不允许设置宽度高度，需要在外层容器设置宽度高度，img只需要设置max-width;max-height(可选);

• 模型调取的图片需要让img在外层容器中绝对居中，如：模型列表、动态片段；且需要控制图片的长边和短边不能超过容器值。

• 非模型调取的图片，设计图若无边框，执行顶部对齐；设计图上若有边框，执行绝对居中

• 静态页中，模型相关的img src地址固定指向 model.png;其它链接正常的图片；