Skip to content

Latest commit

 

History

History
1923 lines (1859 loc) · 43.7 KB

README.md

File metadata and controls

1923 lines (1859 loc) · 43.7 KB

mui032

安装

直接把源代码clone到metinfo的templates文件夹下,然后在后台系统里直接导入即可

应用工具下载

  • 在后台系统中 增值服务--官方商城--应用,右上角搜索处进行应用的搜索、下载和安装。

1.模板制作助手(可以不安装)

  • 修改模板的时候,如果需要自定义一些标签,借助模板制作助手,可以往我们的模板中增加一些变量,避免页面中的文字和图片等信息写死,后期不方便产品运营在后台修改,不方便维护。注:目前这套模板放弃通过模板制作助手添加变量的方式,而是通过修改ui.json文件方式配置参数。
  • 我们通过模板制作助手添加的一些分区、变量等数据信息会保存在我们模板中的install文件夹--template.json文件中。首次在模板制作助手添加,会自动生成一个install文件夹。

2.上传文件管理器(米拓暂时下架这个应用了,无需安装)

  • 方便管理那些我们已经上传的图片、视频、文本文件等。

栏目管理

  • 点击 栏目管理--添加新栏目,按照以下栏目添加。属于二级栏目的对应在其一级栏目的 更多--添加 即可。下面列出的分别按照 栏目等级--排序--栏目名称--导航栏显示--所属模块--目录名称 的顺序,对照设置。本项目最多用到二级栏目。
  • 下面表格中的 -仅仅是为了对照方便查看而插入的分割线,表格太长,设置项较多,分割线便于对照。
  • 另外,下面表格中的 ...是表示此处设置只是简单列出了部分项,没有全部列出,实际设置时按照产品要求同理设置即可。
栏目等级 排序 栏目名称 导航栏显示 所属模块 目录名称
一级 0 功能 头部主导航条 产品模块 function
二级 0 日程安排 不显示 产品模块 function
二级 1 计划管理 不显示 产品模块 function
二级 2 工作笔记 不显示 产品模块 function
二级 3 在线云盘 不显示 产品模块 function
二级 4 公司同事 不显示 产品模块 function
一级 1 价格 头部主导航条 产品模块 price
二级 0 中国铁塔 不显示 产品模块 price
二级 1 SYKES 不显示 产品模块 price
二级 2 亚洲保理 不显示 产品模块 price
二级 3 昌河汽车 不显示 产品模块 price
二级 4 中原物流 不显示 产品模块 price
二级 5 华生集团 不显示 产品模块 price
二级 6 通威太阳能 不显示 产品模块 price
二级 7 四达人才 不显示 产品模块 price
一级 2 下载 头部主导航条 下载模块 download
一级 3 解决方案 头部主导航条 文章模块 solution
二级 0 互联网 不显示 文章模块 solution
三级 0 互联网文章1 不显示 文章模块 solution
... ... ... ... ... ...
二级 1 建筑 不显示 文章模块 solution
三级 0 建筑文章1 不显示 文章模块 solution
... ... ... ... ... ...
二级 2 制造业 不显示 文章模块 solution
... ... ... ... ... ...
二级 3 电商 不显示 文章模块 solution
... ... ... ... ... ...
二级 4 法律 不显示 文章模块 solution
... ... ... ... ... ...
一级 4 使用方法 头部主导航条 文章模块 method
二级 0 使用方法1 不显示 文章模块 method
三级 0 使用方法文章1 不显示 文章模块 method
... ... ... ... ... ...
一级 5 企业微信 头部主导航条 产品模块 wechat
一级 6 支持 头部主导航条 简介模块 about
二级 0 帮助中心 不显示 图片模块 help
二级 1 产品手册 不显示 简介模块 about
三级 0 日事清概况 不显示 简介模块 about
三级 1 开始使用日事清 不显示 简介模块 about
三级 2 注册账号 不显示 简介模块 about
三级 3 登陆账号 不显示 简介模块 about
... ... ... ... ... ...
二级 2 培训课程 不显示 图片模块 img
二级 3 官方博客 不显示 文章模块 article
三级 0 官方公告 不显示 文章模块 article
三级 1 媒体报道 不显示 文章模块 article
三级 2 活动沙龙 不显示 文章模块 article
三级 3 用户故事 不显示 文章模块 article
... ... ... ... ... ...
二级 4 更新日志 不显示 文章模块 toplog
三级 0 Web 不显示 文章模块 toplog
三级 1 Android 不显示 文章模块 toplog
三级 2 iOS 不显示 文章模块 toplog
... ... ... ... ... ...
一级 7 底部导航 不显示 产品模块 product
二级 0 产品 不显示 产品模块 product
二级 1 使用 不显示 产品模块 product
二级 2 公司 不显示 产品模块 product
二级 3 其他 不显示 产品模块 product
一级 8 使用技巧 不显示 图片模块 skill
二级 0 日程 不显示 图片模块 skill
二级 1 计划 不显示 图片模块 skill
二级 2 笔记 不显示 图片模块 skill
二级 3 公司 不显示 简介模块 other
... ... ... ... ... ...
一级 9 关于我们 不显示 简介模块 company
二级 0 公司简介 不显示 简介模块 company
二级 1 联系我们 不显示 简介模块 company
二级 2 加入我们 不显示 招聘模块 job
一级 10 代理合作 不显示 产品模块 agency
二级 0 为什么选择成为日事清的代理商? 不显示 产品模块 agency
二级 1 日事清能为你提供什么? 不显示 产品模块 agency
二级 2 代理日事清您需要具备什么基础条件? 不显示 产品模块 agency
一级 11 服务条款 不显示 service
一级 102 使用用户 不显示 图片模块 use
一级 103 产品介绍 不显示 产品模块 introduce
一级 104 首页随时随地享受工作 不显示 产品模块 animate
一级 105 首页解决方案 不显示 图片模块 partial
一级 106 工作中遇到的问题 不显示 图片模块 settle
一级 107 帮助中心第一部分 不显示 图片模块 helpone
一级 108 帮助中心第二部分 不显示 图片模块 helptwo
一级 109 帮助中心第三部分 不显示 图片模块 helpthree
一级 110 常见问题 不显示 文章模块 faq
二级 0 日程 不显示 文章模块 faq
二级 1 计划 不显示 文章模块 faq
二级 2 笔记 不显示 文章模块 faq
二级 3 公司 不显示 文章模块 faq
二级 4 其它 不显示 文章模块 faq
一级 111 数据安全说明 不显示 简介模块 datasafe

需要进一步进行设置的一级二级和三级栏目

  • 1.一级栏目--功能,是在 功能 这个列表页用到的,其下面的5个二级栏目,需要进一步设置描述以及栏目图片。
  • 2.一级栏目--价格,其下面的8个二级栏目,是在 价格 这个列表页的谁在用日事清部分用到的,需要进一步设置栏目图片。
  • 3.一级栏目--首页解决方案,需要设置栏目标题为为各行各业提供全方位的解决方案,以及简短描述为解决方案的链接地址,开发环境下为http://localhost/metinfo/solution/index.php?lang=cn&pageset=1,还有栏目修饰名称为了解更多
  • 4.一级栏目--工作中遇到的问题,同上面首页解决方案的设置,需要分别设置栏目标题/简短描述/栏目修饰名称。

风格--Banner管理

  • 点击 风格--Banner管理--添加Banner,按照以下banner信息添加。
  • 为空没填的项,代表清空此项的数据即可。
排序 图片标题 图片标题颜色 图片描述 图片描述颜色 图片文字位置 所属栏目
0 日事清  工作开始的地方 #5698db 企业微信战略合作伙伴,数十万家企业共同选择,打造高效企业 #97acc1 网站首页
1 覆盖工作方方面面 #5698db 高效之旅,远不止于此 #97acc1 居中 功能
2 永久免费,按需付费 #5698db 做最适合你的选择,用最低的价格 #97acc1 居中 价格
3 让工作超越距离 #5698db 全平台支持,只为时刻准备着的你 #97acc1 居中 下载
4 全方位企业管理解决方案 #5698db 让每个行业、每份工作都能运转自如 #97acc1 居中 解决方案及其下所有子栏目
5 深入场景,玩转日事清 #5698db 完美解决办公场景中的每一个问题 #97acc1 居中 使用方法及其下所有子栏目
6 日事清 X 企业微信 #5698db 保持高昂生产力 #97acc1 居中 企业微信
7 帮助中心 #5698db 获悉你想要的一切 #97acc1 居中 帮助中心
8 产品手册 #5698db 欢迎使用日事清! #97acc1 居中 产品手册及其下所有子栏目
9 培训课程 #5698db 走进企业 了解企业 服务企业 #97acc1 居中 培训课程
10 官方博客 #5698db 记录日事清的点滴 #97acc1 居中 官方博客及其下所有子栏目
11 更新日志 #5698db 变化之间,无不洞悉 #97acc1 居中 更新日志及其下所有子栏目
12 日事清,工作开始的地方 #5698db #97acc1 居中 关于我们及其下所有子栏目
13 日事清邀您一起 #5698db 开拓企业级SaaS市场这片蓝海 #97acc1 居中 代理合作
14 使用技巧 #5698db #97acc1 居中 使用技巧及其下所有子栏目
15 常见问题 #5698db #97acc1 居中 常见问题

其它数据配置(可视化后台中的一些顶部选项配置信息)

  • 1.页面设置,地址栏图标---上传日事清.ico文件
  • 2.风格--风格设置,模板主色调---#5b5b5b;模板副色调---#8c8c8c;模板配色调---#5698db
  • 3.风格--水印/缩略图-缩略图,产品模块--200 X 200;图片模块--268 X 214;文章模块--230 X 152

下面的设置和内容均指在可视化后台中某个部分的设置/内容,只有设置的表示此部分只需要点击设置,不需要点击内容;只有内容的表示此部分只需要点击内容,不需要点击设置;

头部导航条设置(公共)

导航固定时下拉时logo (自己上传logo图片)
下拉展示
导航禁用下拉菜单 功能|价格|解决方案|使用方法|
一级导航文字颜色 #97acc1
导航固定时一级导航文字颜色 #4a4a4a
一级导航鼠标经过文字颜色 #5698db
区块背景色 #ffffff
二、三级菜单字体颜色 #4a4a4a
二、三级菜单背景色 #ffffff
二、三级菜单鼠标经过字体颜色 #5698db
二、三级菜单鼠标经过背景色 #ffffff
一级导航菜单禁止跳转 支持|

首页banner部分设置

  • 由于banner被头部导航条覆盖,所以对banner进行单独设置的时候,需先将鼠标置于头部导航条,右键--点击隐藏掉头部导航条
内页无banner时头部标语的位置
按钮2链接 http://res-front-cdn.rishiqing.com/common/video/%E6%97%A5%E4%BA%8B%E6%B8%85%EF%BC%8C%E4%BD%A0%E7%90%86%E6%83%B3%E7%9A%84%E5%B7%A5%E4%BD%9C%E6%96%B9%E5%BC%8F.mp4
按钮颜色 #0e6dce

首页第二部分partner_list

  • 1.设置
标题 深受数十万企业用户的喜爱
描述
大尺寸电脑显示列数 6
普通电脑显示列数 6
平板显示列数 3
手机显示列数 2
栏目选择 使用用户
调用条数 8
区块背景展示方式 背景色
区块背景色 #ffffff
缩略图宽 177
缩略图高 94
图片展示方式 灰度
区块标题颜色 #9c9c9c
区块描述颜色
列表图片是否有链接 纯展示
  • 2.内容

  • 可视化后台中点击内容--右上角选择使用用户--再点击添加内容,设置以下三项即可,按设计图上依次共需要设置八个,设置好之后,将这八个的排序按照排序值从大到小(可以是从8到1),对应设计图上的从前到后顺序(即排序数值越大越靠前)。

所属栏目 使用用户
标题 中国铁塔
展示图片 上传对应图片即可

首页第三部分service_list

  • 1.设置
标题 覆盖工作方方面面,释放每个人的潜力
描述
调用栏目 产品介绍
调用栏目数量 9
是否链接 纯展示
大尺寸电脑显示列数 3
普通电脑显示列数 3
平板显示列数 1
手机显示列数 1
区块背景方式 背景色
标题颜色 #5b5b5b
描述颜色
  • 2.内容
  • 点击添加内容,设置以下几项
  • 下面以日程安排为例,其它八项同理按设计图上一一设置添加即可
所属栏目 产品介绍
标题 日程安排
展示图片 上传对应图片即可
详细内容 工作任务分轻重缓急逐一破,日、周、月视图任意切换
其他设置--链接至 写入对应链接即可

首页第四部分custom_list

  • 1.设置
栏目选择 产品动画列表
是否链接 超链接
查看文字 开始使用
调用条数 1
区块背景展示方式 背景色
奇块背景色 #ffffff
偶块背景色 #f5f8fa
区块标题颜色 #ffffff
区块副描述 #ffffff
超链接颜色 #ffffff
  • 2.内容
  • 点击内容,右上角选择首页随时随地享受工作,添加内容,按照下面设置
所属栏目 首页随时随地享受工作
标题 随时随地享受工作
展示图片 上传大图
详细内容 我们的提供全平台的产品,触及每一个工作场景,只为时刻准备着的你
链接至 对应跳转链接

首页第五部分img_list_page

  • 1.设置

  • 调用栏目--首页解决方案

  • 2.内容

  • 右上角选择首页解决方案,然后添加内容,依次按照下面设置添加对应的5个解决方案即可

所属栏目 首页解决方案
标题 互联网解决方案
展示图片 上传对应图片即可
链接至 解决方案页面中的对应子分类地址

首页第六部分img_list_page

  • 1.设置

  • 调用栏目--工作中遇到的问题

  • 2.内容

  • 右上角选择工作中遇到的问题,然后添加内容,同上面首页第五部分解决方案的设置,依次添加对应内容即可

首页第七部分contact

  • 设置
标题 从此,拥有更好的前程
描述
展示内容 按钮链接
按钮文字 立即体验
区块背景展示方式 背景图
区块背景色 #f9fcff
区块标题颜色 #5b5b5b
区块背景图 上传背景图即可
区块描述颜色 #ffffff
按钮颜色 #0e6dce
按钮文字颜色 #ffffff

首页第八部分友链link

  • 1.设置
友情链接标题 合作伙伴
背景色
标题颜色 #333333
描述颜色
鼠标经过颜色
线框颜色

底部导航栏设置(在首页设置)

  • 1.设置
调用栏目 底部导航
服务热线
描述文字
微信 关闭
微信二维码
QQ 关闭
新浪 关闭
邮箱 关闭
显示栏目数量 4
鼠标经过颜色
当前栏目颜色 #3d3d3d
区块背景色
子栏目字体颜色 #8c8c8c
边框线条颜色 #ffffff
  • 2.内容
  • 点击内容--右上角选择 底部导航--产品,然后添加内容,按照以下设置,依次给底部导航的四个子栏目添加对应内容即可
所属栏目 产品
标题 产品功能
链接至 设置为头部功能页的练级即可

功能页product_list_page设置

  • 设置
区块背景色 #ffffff
标题颜色 #3d3d3d
描述颜色 #8c8c8c
区块背景展示方式 背景色
奇块背景色 #ffffff
偶块背景色 #f9fcff

价格页product_list_page内容

  • 内容
  • 点击添加内容,设置以下几项
所属栏目 价格
标题(名称) 免费版
展示图片
参数管理 按下面表格新增参数
  • 然后是 参数管理 选项,参照下面表格
名称 字段类型 所属栏目 访问权限 排序
价格 简短 价格 不限制 0
储存空间 简短 价格 不限制 1
文件大小 简短 价格 不限制 2
功能1 简短 价格 不限制 3
功能2 简短 价格 不限制 4
功能3 简短 价格 不限制 5
功能4 简短 价格 不限制 6
功能5 简短 价格 不限制 7
功能6 简短 价格 不限制 8
功能7 简短 价格 不限制 9
功能8 简短 价格 不限制 10
功能9 简短 价格 不限制 11
功能10 简短 价格 不限制 12
功能11 简短 价格 不限制 13
  • 接着 返回到 内容设置页面,点击参数管理后面的 刷新 按钮,就可以看到刚才添加的参数了,依次按设计图上文字设置,注意价格一栏由于下角标的特殊显示,其参数需要填充为html形式,如免费版中是0<sub>元/年</sub>
  • 按照以上设置,依次设置免费版,专业版,企业版,旗舰版参数
  • 其中专业版,企业版,旗舰版的存储空间和文件大小一栏,同样由于一些文字的特殊样式显示,其参数也需要填充为html形式,如专业版中存储空间为<span>50G</span>储存空间,文件大小为上传单个文件最大支持<span>1G</span>。企业版和旗舰版同理。

价格页img_list_page

  • 这部分的设置显示比较特殊,需从 栏目管理--价格--设置--栏目标题,设置为'谁在用日事清?',就是此部分展示的标题;所以修改也需要到这里修改。图片的展示按照设计图上,在可视化后台中这部分的对应图片点击上传即可。

价格页news_list_page

  • 同样,这部分的标题也需要从 栏目管理--价格--设置--栏目修饰名称,设置为'常见问题';
  • 然后点击 内容,右上角选择 产品--价格--三级栏目,再添加内容,只需要设置标题(名称)和详细信息即可,这两个分别对应页面中的问题标题和答案。
  • 注意:点击 内容,选择 产品--价格--三级栏目 后,能看到四个已经存在的 免费版,专业版,企业版,旗舰版 列表,继续添加内容即可,只不过最后添加完问题以后,将列表排序更新正确即可。即前四个是价格详情中展示需要的,从第5个开始,是展示在此部分中的。

下载页download_list_page内容

  • 1.设置
标题颜色 #000000
鼠标经过颜色和按钮颜色及当前页的颜色 #5698db
所属栏目 标题 下载地址 详细内容
下载 Windows 下载 void(0) 上传图片对应要展示的图片即可
下载 MAC 下载 https://rishiqing-client.oss-cn-shenzhen.aliyuncs.com/pc-autoupdate/mac/release/rishiqing-mac-release-3.1.4.dmg
下载 网页版 上传图片对应要展示的图片即可
下载 Android 下载 void(0) 上传图片对应要展示的图片即可
下载 iOS 下载 void(0) 上传图片对应要展示的图片即可
下载 微信公众号 void(0) 上传图片对应要展示的图片即可

解决方案页news_list_page

  • 1.内容
  • 点击内容,右上角选择解决方案--互联网--相应三级栏目,添加内容,设置文章标题/详细内容即可。

使用方法页news_list_page

  • 1.内容
  • 点击内容,右上角选择使用方法--使用方法1--相应三级栏目,添加内容,设置文章标题/详细内容即可。

企业微信页news_list_page

  • 1.内容
  • 点击内容,右上角选择企业微信,添加内容,设置标题--轻应用,轻办公/展示图片/详细内容--任务实时分配、随时发起讨论;标题--安装到企业微信/展示图片/详细内容--立即安装日事清到企业微信/链接至--安装链接;标题--注册企业微信/展示图片/详细内容--还没有企业微信?立即注册企业微信和日事清/链接至--注册地址,依次添加三条内容,回到内容页面,将三个排序按照3-2-1进行排序,即第一个添加的排序在最前面。

支持--帮助中心页第一部分

  • 1.设置

  • 调用栏目,选择 帮助中心第一部分

  • 2.内容

  • 点击内容,右上角选择 帮助中心第一部分,添加内容,分别设置标题--使用手册,展示图片--上传对应图片,详细内容--探索每个功能来了解日事清的基础用法。链接至--对应产品手册的链接地址。

  • 添加完之后,回到内容页面,按照大号排序在前,自定义排序即可。

支持--帮助中心页第二部分/第三部分

  • 同上面帮助中心第一部分的设置,进行同理设置。

支持--产品手册

  • 左侧标题是在栏目中进行设置的,添加栏目时,按照标题顺序添加即可,需要特殊设置的是子级标题部分栏目标识设置为1
  • 内容部分,就点击左侧标题,右侧对应点击内容,添加文章内容即可。

支持--培训课程

  • 1.设置

  • 点击设置,按钮文字--报名,区块背景色--#ffffff

  • 2.内容

  • 点击内容,右上角选择培训课程,同上一样,添加内容

支持--官方博客页news_list_page

1.设置

列表展示 图文
新闻头条 关闭
区块背景色 #ffffff
标题字体颜色 #3d3d3d
描述字体颜色 #8c8c8c
点缀颜色 #b1b1b1

2.内容

  • 点击 内容,右上角选择 官方博客--官方公告,然后点击 添加内容,按照文章标题--详细内容--封面图上传设置即可
  • 依次按上面操作给几个部分添加文章

3.点击任何一篇博客,进入博客详情页也可进行单独具体设置和内容

支持--更新日志页news_list_page

  • 同上面 官方博客 操作

自定义ui组件

  • 自定义ui组件,有几个需要关注的点

    1. ui.json文件,这个文件非常重要,记录着哪些页面用到了哪些ui组件,对应的配置信息,每次在安装模板的时候,系统都会解析这个文件,把ui组件的默认配置信息给写的到数据库
    2. id, 这个id是指一个页面里,使用的一个组件,对应的id
    3. page, 是页面的名称,如./agency.php这个文件,里面有个page属性,这个值需要和php文件名一样,这样才能正常读取和解析页面下面的ui组件和配置
    4. config.json文件,这个文件在ui组件的文件夹下,如ui/contact/met_16_3/config.json,这个文件目前我了解到的是和组件的css和js代码的打包有很大关系
    5. met_开头的一个值,它和组件名一起决定组件的唯一性
  • 在使用自定义组件的时候,需要确定id,需要根据ui.json里用到的id来确定一个还没有用到的id,保证这个新id在ui.json里的唯一性

  • 确定组件需要哪些参数的时候,可以参考ui.json里已有的一些参数,来写新的参数