1. 模板制作
新人推荐步骤:
- 创建模版结构:根据静态文件目录结构先创建对应的文件,主要是为了栏目可以绑定时可以选择对应的模版名称;
- 上传模版:模版结构创建好后,打包成zip(存储模式),通过
系统设置
->模版管理
进行上传; - 应用设置绑定模版:通过
系统设置
->应用设置
绑定上传的模版,应用设置的信息通过ms:global
标签获取; - 创建网站栏目:创建栏目时后绑定对应的模版,栏目数据通过
ms:channel
标签获取; - 添加测试文章数据:方便模版里面使用标签获取数据进行开发,栏目数据通过
ms:arclist
标签获取; - 静态化:通过
内容管理
->静态化
预览页面,首页模有修改就静态化首页,栏目列表模版有修改就静态化栏目,栏目内容模版有修改就静态化文章;[!tip]熟练之后可以灵活开发,不必按照上面的步骤操作,模版修改之后必须要重新静态化才能看到修改后的效果,
[!tip]系统提供的默认皮肤是很好的参考的案例模板,演示了几乎所有的标签使用,请仔细阅读默认皮肤!!!
2. 标签
ms标签基于freemark,所以两者语法是一样
[!tip]在使用标签之前,必须了解栏目类型:列表、内容 模版的概念,
列表:通常指带有分页的文章模版,例如:新闻列表、产品列表,栏目类型
应该选这列表
内容:具体的文章详情模版,例如:新闻详情、产品详情,如果栏目下面只有一篇内容,例如:关于我们、联系我们,这种情况栏目类型
应该选内容
如果当栏目只是一个显示,栏目下不会产生内容,推荐栏目类型
选择链接
特别说明
[!warning]标签不能用在js\css文件中,标签不会被解析。 标签上的参数设置,不能加空格 例如:错误写法
size = 10
,等号两边必须不能存在空格size=10
标签参数值如果是字符串必须使用引号,如:flag='h'
特别说明
[!note]如果栏目为
内容
类型时,如果没有编辑栏目的内容时,静态化不会生成该栏目页面且静态化会异常
特别说明
[!note]如果文章数据比较多,如十几万的文章数据,建议带
分页
的文章列表
数据采用接口方式获取,这样就可以减少栏目列表
页面的生成,
2.1. 开发环境
下载MCms源码或下载最新的JTM一键运行版,下载地址
2.2. 静态文件目录
[!tip]模版文件推荐.htm后缀,具体的模版文件夹与文件明白根据实际所需情况来创建 设计人员与前端人员可以通过在线设计器制作模版,快速实现html\css的代码生成;
静态文件命名推荐英文或拼音形式,单词之间用横杆隔开“-”,不推荐英文+拼音混合的命名方式;
注释与代码缩进;
2.3. 模版文件(嵌入MCms标签)
嵌入了MCms之后才算是模版文件,模版常见规范如下:
公共模版:模版文件中出现频率较高的,可以抽成公共模版文件,例如常见的头部、底部;
尽量不要写死标签属性值,例如顶部导航,可以通过标签动态获取;
[!tip]也可以快速通过模版设计器辅助生成MCms标签
提取出公用的模版文件
2.4. 上传模版
将制作好的模版使用压缩工具ZIP格式,存储方式压缩,将压缩包上传到后台就可以使用。
[!tip]本地开发模版建议直接在模版文件夹template/中直接修改模版,可以提供开发效率,
如果需要部署线上可以直接上传到对应的模版文件夹
3. 快速仿站
需要使用仿站小工具,下载地址:https://cloud.189.cn/t/FnURnmBFFfai
[!tip]采集网页的工具有很多,开发者自行选择自己熟练的工具来使用,只要到能快速将目标网站的静态页面采集下来就可以
3.1. 网站采集
第一步:查看网站的每个页面,进行采集,采集后检查静态页面效果是否与原网站一样,各种浏览器兼容性是否没问题。
第二步:首先替换首页的标签,先将网站头部底部和其他公共部分抽出来用新的单独文件保存,并用标签对应在页面上引用。再对首页的其他模块进行一块一块标签替换,不要一次性全部替换。
第三步:替换列表与详情显示页及其他页面的标签
[!tip]仿的网站中包含一些线上的JS或CSS等其他文件,需要将其下载到模板里面引用;
模板中注意不要出现原网站的信息、链接;
确保模板的页面效果与原网站效果保持一致;
3.2. 仿站工具
打开工具后点开“系统设置”进行如下设置:
新建网站,输入网址、文件名称,点“添加”将把本条信息存放到下面列表,把需要采集的页面地址与文件名对应填入后添加(一次性将需要的页面全部采集),点“转下一步”
[!tip]在
系统设置
中 设置好目录结构的命名,名称统一小写;
[!tip]模版文件名称后缀推荐htm,不要使用html,这样的好处是可以与静态化之后的文件区分开
设置采集文件路径及保存位置,开始下载
下载完成后,打开目录可以看到指定目录下的采集到的站点文件。
4. 常见业务场景实现
4.1. 幻灯
4.1.1. 顶部幻灯
顶部大图,不与具体的文章关联的图片,通过创建一个独立的栏目来维护这些图片
4.1.2. 文章幻灯、推荐文章、热门文章、头条文章
使用
文章属性
实现,通过 ms:artlist 标签增加flag属性
实现获取
5. 老模版升级
MStore里面的有些模版存在一些标签的差异,如果遇到生成失败,可以参考按下面的步骤进行标签修改
修改一、将所有的[]标签格式替换为${}
例:
[field.title/] 替换为${field.title}
修改二、将{ms:field.*/}或${field:*}替换为${field.*}
例:
{ms:field.content/}替换为${field.content}
修改三、将图片[field.litpic/]修改为{@ms:file field.litpic/}
<img src="{ms:global.host/}{@ms:file field.litpic/}">
修改四、将channel标签和arclist里的typeid替换为自己的栏目id
[!tip]老模板没有逻辑标签,如果需要可自行添加。有些老模板使用include标签引入了搜索模板,但搜索模板并没有创建,静态化可能会报错,这时可以删除引入搜索模板的include标签或创建搜索模板