1. 模板制作

新人推荐步骤:

  1. 创建模版结构:根据静态文件目录结构先创建对应的文件,主要是为了栏目可以绑定时可以选择对应的模版名称;
  2. 上传模版:模版结构创建好后,打包成zip(存储模式),通过 系统设置 -> 模版管理 进行上传;
  3. 应用设置绑定模版:通过系统设置 -> 应用设置 绑定上传的模版,应用设置的信息通过 ms:global 标签获取;
  4. 创建网站栏目:创建栏目时后绑定对应的模版,栏目数据通过 ms:channel 标签获取;
  5. 添加测试文章数据:方便模版里面使用标签获取数据进行开发,栏目数据通过 ms:arclist 标签获取;
  6. 静态化:通过内容管理 -> 静态化预览页面,首页模有修改就静态化首页,栏目列表模版有修改就静态化栏目,栏目内容模版有修改就静态化文章;

    [!tip]熟练之后可以灵活开发,不必按照上面的步骤操作,模版修改之后必须要重新静态化才能看到修改后的效果,

[!tip]系统提供的默认皮肤是很好的参考的案例模板,演示了几乎所有的标签使用,请仔细阅读默认皮肤!!!

2. 标签

ms标签基于freemark,所以两者语法是一样

[!tip]在使用标签之前,必须了解栏目类型:列表、内容 模版的概念,
列表:通常指带有分页的文章模版,例如:新闻列表、产品列表,栏目类型应该选这列表
内容:具体的文章详情模版,例如:新闻详情、产品详情,如果栏目下面只有一篇内容,例如:关于我们、联系我们,这种情况栏目类型应该选内容
如果当栏目只是一个显示,栏目下不会产生内容,推荐栏目类型选择链接

特别说明

[!warning]标签不能用在js\css文件中,标签不会被解析。 标签上的参数设置,不能加空格 例如:错误写法 size = 10 ,等号两边必须不能存在空格 size=10 标签参数值如果是字符串必须使用引号,如:flag='h'

特别说明

[!note]如果栏目为内容类型时,如果没有编辑栏目的内容时,静态化不会生成该栏目页面且静态化会异常

特别说明

[!note]如果文章数据比较多,如十几万的文章数据,建议带分页文章列表数据采用接口方式获取,这样就可以减少栏目列表页面的生成,

2.1. 开发环境

下载MCms源码或下载最新的JTM一键运行版,下载地址

2.2. 静态文件目录

在没有嵌入MCms标签之前为静态页面,静态页面结构如下图。

[!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标签或创建搜索模板

Copyright © mingsoft.net 2021 all right reserved,powered by Gitbook该文件修订时间: 2022-03-31 15:18:25

results matching ""

    No results matching ""

    results matching ""

      No results matching ""