玉佛寺官网后台技术文档
1内容管理
1.1文章列表
文章列表中可以查看文章ID、标题、作者、分类、权重、创建时间,可进行编辑、复制、移动到回收站;
通过分类筛选和搜索功能可以快速搜索到相关文章;
1.2写文章
1.2.1文章模式
文章按照展示方式共分为3种模式:标准、音乐、视频,编辑不同板块的文章时需要先进行选择;

标准模式文章为常规文章,展示方式为图文形式,用例为新闻、伽蓝名物志等文章;
音乐模式文章用于上传MP3单曲,用例为讲经、梵呗、梵乐;
视频模式文章用于上传视频弹出文章,用例为玉佛问禅、梵乐团等板块视频;
1.2.2文章编辑器
文章编辑器为常规编辑器,需要注意的问题包括以下几点:
1.2.2.1添加图片
添加图片时需要使用添加图片按钮进行添加,不要用原生编辑器中的图片按钮进行添加

1.2.2.2添加视频
1.点击文本编辑器中的添加视频按钮

2.在视频添加弹窗中添加视频网络路径,视频路径来源为腾讯视频-分享-复制通用代码,需要注意的是复制的是第二行带有<iframe标签的通用代码;


1.2.2.3添加链接和PDF
点击添加链接按钮,弹出链接添加框:

在链接弹出框中URL字段粘贴链接,Text to display编辑显示的文字:

插入Pdf则是先在媒体库中上传pdf文件,然后url粘贴文件路径;
1.2.3文章分类
文章分类在右侧,需要进行候选后才能显示在对应的文章栏目中,文章可以选择多个类别,实现同一文章多个栏目的同时推送;
1.2.4标题文章前缀
此字段专门供三列文章列表组件和上图下文组件(寺院导览首页展示)使用,更改竖线前显示的文字;


1.2.5特色图片
文章的特色图片必须添加媒体库中的图片,添加后会作为缩略图显示在文章列表中

1.3分类管理
名称、描述、别名填写后便于后续查看,排序用于右侧菜单的排列显示顺序,重要的内容为父分类,用于建立目录结构;
ID由系统生成,是最为重要的参数,用途是将指定分类的文章关联到具体的栏目进行显示,用法:
文章发布时指定好分类,在页面组件"cateIds"后面填写分类ID,这样文章就会显示在页面的组件当中,用法举例:
1、玉佛资讯-新闻资讯的ID为26;

2、在玉佛 资讯对应文章列表组件中"cateIds"字段填写26,指定新闻资讯分类的相关文章就会自动填充过来;

2页面管理
2.1页面编辑
2.1.1新建页面
新建页面可以使用菜单中的新建页面或所有页面中的新建页面按钮进行新建,也可以通过所有页面中的复制按钮进行新增与原网站相近的页面;
新建页面分区:左侧为页面内容,右侧为组合页面的组件;

URL:只能输入英文,是页面访问时连接的后缀如填写“yfzx”,则该页面的链接为http://www.yufotemple.com/yfzx.html
语言:新建页面时需要进行语言选择,用来区别不同语言版本中部分填充的系统文字;
顶部区域:拖拽显示顶部轮播图和导航组件;
内容区域:放内容组件;
发布:发布后页面可以进行访问,但如果需要在其他页面跳转,需要在具体页面的组件中增加相关链接;
2.2组件功能
组件拖拽进入页面功能区域后,可点击设置按钮,进行调整组件中的参数,不同的组件可编辑的参数不同;
组件拖拽进页面后,用设置功能调整的参数,只在当前页面生效,在其他页面中添加该组件需要重新设置参数
2.2.1页面顶部图片轮播

支持多组视频配置,"src"后填写媒体库中的图片名,"video"后填写腾讯视频-分享-通用代码;不配置视频则默认为空;
2.2.2网站菜单
网站菜单需要注意英文/中文,有两个组件,配置不同语言版本页面时请注意使用对应组件
2.2.3分割标题
"title"后面填写标题内容

前端展示样式:

2.2.4分割线
不同内容模块间需要划分的,需要拖拽分割线,前端展示样式:

2.2.5文章列表
需要设置的字段:
cateIds:填写填充的文章分类ID,在内容管理-分类管理中,点击编辑分类查看分类ID;
pageSize:一页显示条文章,文章总数超出时进行轮播处理,建议参数为5;
total:轮播组件最多显示的数量;
如下图:pageSize 5,total 15,则页面中最多显示75条文章

前端样式:

2.2.6视频列表
视频列表中文章在内容编辑中需要选择文章类型为视频,并在文章编辑时复制腾讯视频通用代码
需要设置的字段:
cateIds:填写填充的文章分类ID,在内容管理-分类管理中,点击编辑分类查看分类ID;
pageSize:一页显示条文章,文章总数超出时进行轮播处理,建议参数为2;
total:轮播组件最多显示的数量;
前端展示样式:

2.2.7人物列表
需要设置的字段:
cateIds:填写填充的文章分类ID,在内容管理-分类管理中,点击编辑分类查看分类ID;
pageSize:一页显示条文章,文章总数超出时进行轮播处理,建议参数为2;
total:轮播组件最多显示的数量;
前端展示样式:

2.2.8轮播-上图下文
需要设置的字段:
cateIds:填写填充的文章分类ID,在内容管理-分类管理中,点击编辑分类查看分类ID;
total:轮播组件最多显示的数量;
前端展示样式:

标题竖线“建筑”两个字需要在文章编辑中的“标题文章前缀”中进行设置;
2.2.9单篇文章(左图右字 | 左字右图)
需要设置的字段:
reverse:“0”为图在左,文在右,“1”为图在右,文在左;
title:标题;
excerpt:摘要
thumbnail:缩略图
to:标题和图片链接地址;
buttonText:按钮文字;
buttonLink:按钮链接;
tabs:有子标签的需要进行编辑,无子标签的将[]中内容删除;
展示样式:

有子标签的:
id:系统生成,一般不需要处理;
"title": 子标签标题;
"excerpt": 子标签对应的摘要;
"buttonLink": 子标签按钮链接;
"buttonText": 子标签按钮;
展示样式:

关于链接的配置方法,常用链接分为三种情况:
1.链接为文章:配置为view/文章ID,举例:"buttonLink": "view/25",
2.链接为玉佛寺其他页面:配置为指定页面的url+".html",举例:"buttonLink": "fjyjzx.html",
3.链接为外链:配置为链接,举例:"buttonLink": "https://www.baidu.com/",
2.2.10图集
label:图集分类;
images:分类下的图片,配置媒体库中的图片名,配置时注意格式,可以先参照其他配置过的页面,如梵乐团页面;
展示样式:

2.2.11页脚
有中英文两个组件,配置时注意中英文页面,配置对应的页脚
2.2.12自定义HTML
用于插入html代码;
2.2.13其他功能组件
其他组件大多为应用在指定页面中,作为特定内容的显示,页面中没有配置参数,如果调整需要在组件中进行编辑,编辑后会全局页面生效,也就是用到这个组件的地方都会改编,请谨慎使用。
2.3小组件
小组件是构成网站结构的基础要素,可以理解为是HTML代码编写出的一个模块,支持新增和编辑,但请在技术的指导或协助下进行,原则上只能进行新增,不要删除原有组件,会应向网站其他页面。
编辑组件时,请先复制组件,用复制出的组件进行编辑,编辑后在测试页面中添加组件,确认无误后替换原用的组件。
3媒体库
3.1资源上传
媒体库支持上传10M以下的文件,如果超出限制,则需要在服务器路径下直接进行添加,直接添加的操作由IT进行操作,其他编辑只能进行常规上传;
需要注意的是,为了方便后续文章中插入多张图片顺序不错乱,图片在上传之前需要进行文件名处理,请使用同前缀+数字编号,数字编号按照01、02进行排列命名;
3.2图片插入
文章中插入图片时支持使用文件名前缀进行图片搜索,按照名称进行排序,多选可以多张图片插;
3.3资源限制
媒体库支持上传10M以下的文件,如果超出限制,则需要在服务器路径下直接进行添加,直接添加的操作由IT进行操作,其他编辑只能进行常规上传;
4预约列表
预约表单信息记录了用户名、电话、邮箱、留言等信息用于后续跟踪反馈;
5应用实例
以新增一套专题页面为例,讲解具体的后台工具使用方法:
1.新建页面
参照2.1.1新建页面;
2.设置组件
用到文章列表、视频、音乐、人物、三列文章列表等自动填充内容组件的,需要将文章分类ID填写到cateIds后面,
其他组件配置规则参照2.2组件功能进行配置;
3.发布链接并进行测试
直接访问路径,中文版路径为“http://www.yufotemple.com/”+url.html,英文版路径为“http://www.yufotemple.com/en/”+url.html;
4.在网站中增加链接
页面测试无误后增加链接,此操作由IT完成。