当前位置:首页文档主题开发手册3.3前端手册

3.3前端手册

更新时间:2020-04-21

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

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 导航

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

image

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

image

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

image

3.3.1.3 相关内容

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

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

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

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

封面图+详情标题

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

image

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

image

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

image

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

image

只有详情标题

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

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

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

image

3.3.1.4 列表内容

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

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

image

分类

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

分类下的详情
  • 样式,一般和“相关内容”一样,也可能独立设计,可设置统一样式。根据设计图还原。

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

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

3.3.1.5 模型详情

详情首屏

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

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

image

详情正文及小标题
  • 需完整还原,正文描述尽量使用文本、不用截图。
  • 详情小标题可设置统一样式。

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

image

3.3.1.6 表单

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

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

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

image

image

image

  • 普通表单(询盘、留言) 主要内容包括:字段标题、字段输入框;

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

image

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

image

3.3.2 嵌套模板

资源

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

物料

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

变量

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

  • 预置变量

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

  • 自定义变量

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

静态片段

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

image

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

动态片段

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

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

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

查看动态片段模板语法

 

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

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

image

image

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

image

image

导航模板主要逻辑如下。

  • "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')

查看完整导航模板语法

面包屑导航

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

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

image

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

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

页面

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

普通页面

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

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

查看可视化标记语法

模板页面

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

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

查看模板页面模板语法

自定义列表页

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

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

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

模型首页/模型列表

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

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

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

  • 分类信息:标题、链接、图片、描述
  • 分类下详情信息-----标题、链接、图片、描述、发布时间
举例如图库模型列表

图库列表(输出图库内图片数量)

image

图片列表

image

举例只有详情标题的列表

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

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

image

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

可使用

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

查看模型分类模板语法

模型详情

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

举例: image

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

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

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

搜索列表

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

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

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

image

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

业务表单

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

询盘

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

image

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

image

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

留言

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

image

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

image

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

评论

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

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

image

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

简历

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

image

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

image

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

自定义表单

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

image

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

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

其他要点说明

链接打开方式

中文站

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

英文站

  • 内容链接,统一当前窗口打开;非内容链接,如在线客服,使用新窗口。
命名规范

静态片段:终端类型(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;其它链接正常的图片;