Skip to content

MMS-CMS 标签手册

【全局】系统配置标签:global

html
{cms:global  name='字段名' /}

主要是获取,数据库表:system_setting 数据

使用方法

参数说明
name字段名
  1. 将name的[字段名]换成数据库内的字段即可全局页面调用渲染。
  2. 目前支持的字段。
名称字段值示例
网站地址website{cms:global name='website' /}
网站名称title{cms:global name='title' /}
网站副标题subhead{cms:global name='subhead' /}
网站LOGOlogo{cms:global name='logo' /}
网站关键字keywords{cms:global name='keywords' /}
网站描述describe{cms:global name='describe' /}
网站备案号icp{cms:global name='icp' /}
网站版权copyright{cms:global name='copyright' /}
网站上传目录uploaddir{cms:global name='uploaddir' /}

【全局】自定义变量标签:variable

html
{cms:variable  name='变量名' /}

主要是获取,数据库表:system_variable 数据

使用方法

参数说明
name变量名
  1. 将name的[变量名]换成数据库内的字段即可全局页面调用渲染。
  2. 具体的[变量名]可以在后台系统-变量管理,栏目获取。

【全局】模板路径标签:template

html
{cms:template /}

主要是获取系统模版所在的根目录

例如:<link href="{cms:template /}src/app.css" rel="stylesheet">

使用方法

参数说明
  1. 将网页中使用的一些本地资源进行路径代替。
  2. 静态资源有,css,js,字体等。
  3. 备注:资源应该放在模板根路径下。

【全局】引入标签:include

html
{cms:include file='header.html'/}

用于引入其它模板的内容,以方便拆分头部、尾部等公共部分

例如:{cms:include file='header.html'/}

使用方法

参数说明
file模版路径
  1. 如果有一些共用的代码,重复复用,例如网页的头部导航,网页底部的信息可以提取到一个html中,用以上标签引入即可。
  2. 新建一个html文件,例如:header.html
  3. 将需要分离的代码剪切到header.html
  4. 再将剪切代码的位置用{cms:include file='header.html'/}代替,即可完成。

【全局】单分类标签:type

html
{cms:type typeid="栏目编码"}
<p>[field:字段名/]</p>
{/cms:type}

主要是获取系统模版所在的根目录

例如:

html
{cms:type typeid="62858i4i"}
    <a href="[field:typeurl/]">查看更多</a>
{/cms:type}

使用方法

参数说明
typeid栏目编码(网站后台分类栏目获取)
  • 支持的字段名
字段名说明
typeid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
typecode栏目编码(8位唯一)
typeseq栏目的层级
typeimg栏目图片
description栏目描述
linktarget链接目标
pagesize分页大小(该属性控制列表页面默认的分页大小)
visiturl访问URL(浏览器地址栏中将以该url显示,如果为空,则为栏目中文名称的拼音)
linkurl链接URL
editor编辑器(md或ue)
mdcontentmarkdown内容
htmlcontent生成的html内容
parentname上级栏目名称
isshow是否显示
level栏目层级
sort排序(默认为50)
createby创建人
createtime创建时间
updateby更新人
updatetime更新时间
typeurl栏目URL
ext01扩展字段1
ext02扩展字段2
ext03扩展字段3
ext04扩展字段4
ext05扩展字段5

【全局】多分类标签:channel

html
{cms:channel typeid="栏目编码" showall="true" type="son" }
<p>[field:字段名/]</p>
{/cms:channel}

主要是获取系统模版所在的根目录

例如:

html
<ul>
    <li>
        <a href="/" >首页</a>
    </li>
    {cms:channel typeid="62858i4i" type="son" }
    <li>
        <a href="[field:typeurl /]" title="[field:typenamecn /]">[field:typenamecn /]</a>
    </li>
    {/cms:channel}
</ul>

使用方法

参数说明
typeid栏目编码(网站后台分类栏目获取)
start从第几个开始获取
length获取个数
type显示类型(top为顶级栏目,son在设置typeid时起作用,获取指定栏目的下级栏目)
showall是否显示隐藏栏目(true或false)
  • 支持的字段名
字段名说明
typeid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
typecode栏目编码(8位唯一)
typeseq栏目的层级
typeimg栏目图片
description栏目描述
linktarget链接目标
pagesize分页大小(该属性控制列表页面默认的分页大小)
visiturl访问URL(浏览器地址栏中将以该url显示,如果为空,则为栏目中文名称的拼音)
linkurl链接URL
editor编辑器(md或ue)
mdcontentmarkdown内容
htmlcontent生成的html内容
parentname上级栏目名称
isshow是否显示
level栏目层级
sort排序(默认为50)
createby创建人
createtime创建时间
updateby更新人
updatetime更新时间
typeurl栏目URL
ext01扩展字段1
ext02扩展字段2
ext03扩展字段3
ext04扩展字段4
ext05扩展字段5
haschildren是否有下级栏目

【全局】分类Plus标签:categoryartlist

此标签支持嵌套

html
{cms:categoryartlist length="1"}
    {cms:if test="('true' eq [field:haschildren/])"}
    <li><a href="[field:typeurl/]">[field:typenamecn /]</a>
        <ul>
            {cms:channel}
            <li><a href="[field:typeurl/]">[field:typenamecn /]</a></li>
            {/cms:channel}
        </ul>
    </li>
    {/cms:if}
{/cms:categoryartlist}
参数名描述
typeid后台栏目管理列表页面中的编码,通过唯一编码,获取指定栏目
length获取个数
showall是否获取全部栏目(包括隐藏栏目)showall="1"

【全局】文章列表:list

html
{cms:list typeid="栏目编码" pagenum="当前页面" pagesize="每页数量" flag="文章属性"}
<a href="[field:arcurl/]">[field:title /]</a>
{/cms:list}

获取指定分类栏目下的文章列表

例如:

html
{cms:list typeid="A54547W2" pagenum="0" pagesize="8" flag="p"}
    <a href="[field:arcurl/]">[field:title /]</a>
{/cms:list}

使用方法

参数说明
typeid后台栏目管理列表页面中的编码,通过唯一编码,获取指定栏目
pagenum页数
pagesize获取数量
flag文章属性(p图片)
cascade是否显示该栏目的下级栏目的文章
addfields附加字段,多个字段间用英文逗号分隔
formkey表单模型的编码(可以在后台表单管理列表中获取)
sortWay排序方式(asc或desc)
sortBy排序字段(数据库中字段名)
lastSql最后where条件的一个sql条件拼接例如: and title=[文章名称] ( 前面加个and,单引号'[]代替 )
  • 支持的字段名:
字段名说明
autoindex序号(从1开始)
id文章ID
title标题
properties文章属性(头条h加粗b幻灯f图片b)
litpic缩略图
hasthumbnail是否有缩略图(有输出yes-thumbnail;无输出no-thumbnail)可用于Css的class名,从而实现动态的输出列表样式
tag文章标签
remark文章描述
categoryid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
comment是否允许评论
subscribe是否允许订阅
clicks点击数
weight权重(可以利用该字段来排序)
status状态
createby发布人
createtime发布时间
updateby更新人
updatetime更新时间
arcurl文章访问URL

【全局】Tag标签:label

此标签用于获取数据库表 system_labels 数据

html
{cms:label start="0" length="8"}
<a href="#">
    [field:tagname /]
</a>
{/cms:label}
参数名描述
start从第几个开始获取
length获取个数

【全局】附件标签:attachment

此标签用于获取数据库表 system_attachment 数据。

用于在页面中展示指定的附件,可用于下载功能。

html
{cms:attachment key="ez159g51"}
<a href="[field:dlurl /]" target="_blank">下载</a>
{/cms:attachment}
参数名描述
key后台附件管理中的编码,通过唯一编码,获取指定附件
  • 支持字段
字段名描述
id附件ID
filename附件名称
filetype附件类型(为MultipartFile类的ContentType)
filesize附件大小
dlurl下载连接
createby创建人
createtime创建时间

【全局】Sql标签:sql

简单的sql查询,仅支持 select 查询模式。

注:Sql中的单引号须转义成[]来实现。

html
{cms:sql sql="select * from system_article where id=[1]"}
<div>[field:author /]</div>
{/cms:sql}

【全局】判断标签:if

简单的判断,目前只支持eq和neq,且只用于在categoryartlist标签内使用

html
{cms:if test="('false' eq [field:haschildren/])"}
<li>
    <a ref="[field:typeurl /]" title="[field:typenamecn /]">[field:typenamecn /]</a>
</li>
{/cms:if}

【分类】分类标签:category

该标签可以在封面页面,列表页面,文章页面,调用当前分类信息。

html
{cms:category field="typenamecn" /}

使用方法

参数名描述
field字段名
  • 支持的字段名
字段名说明
typeid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
typecode栏目编码(8位唯一)
typeseq栏目的层级
typeimg栏目图片
description栏目描述
linktarget链接目标
pagesize分页大小(该属性控制列表页面默认的分页大小)
visiturl访问URL(浏览器地址栏中将以该url显示,如果为空,则为栏目中文名称的拼音)
linkurl链接URL
editor编辑器(md或ue)
mdcontentmarkdown内容
htmlcontent生成的html内容
parentname上级栏目名称
isshow是否显示
level栏目层级
sort排序(默认为50)
createby创建人
createtime创建时间
updateby更新人
updatetime更新时间
typeurl栏目URL
ext01扩展字段1
ext02扩展字段2
ext03扩展字段3
ext04扩展字段4
ext05扩展字段5
haschildren是否有下级栏目

【分类】顶级分类标签:category

该标签可以在封面页面,列表页面,文章页面,调用当前分类所属顶级分类信息

html
{cms:topcategory field="typenamecn" /}

使用方法

参数名描述
field字段名
  • 支持的字段名
字段名说明
typeid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
typecode栏目编码(8位唯一)
typeseq栏目的层级
typeimg栏目图片
description栏目描述
linktarget链接目标
pagesize分页大小(该属性控制列表页面默认的分页大小)
visiturl访问URL(浏览器地址栏中将以该url显示,如果为空,则为栏目中文名称的拼音)
linkurl链接URL
editor编辑器(md或ue)
mdcontentmarkdown内容
htmlcontent生成的html内容
parentname上级栏目名称
isshow是否显示
level栏目层级
sort排序(默认为50)
createby创建人
createtime创建时间
updateby更新人
updatetime更新时间
typeurl栏目URL
ext01扩展字段1
ext02扩展字段2
ext03扩展字段3
ext04扩展字段4
ext05扩展字段5
haschildren是否有下级栏目

【分类】分类当前位置标签:location

该标签可以在封面页面,列表页面,文章页面,调用当前分类所属顶级分类信息

html
{cms:location lang="cn" /}

使用方法

参数名描述
lang语言(cn或en)用于展示中文名称或英文名称

会返回当前位置html片段,样式可自行控制,如

html
<ul class="cms-location">
    <li>
        <a href="/" title="首页">首页</a>
    </li>
    <li>
        <a href="/doc" title="更新记录">文档</a>
    </li>
</ul>

【列表】分类文章列表分页标签:pagelist

该标签是用于在列表页面调用文章列表并显示分页信息。

html
{cms:pagelist}
<li>
    <a href="#"><i class="ion ion-calendar"></i>[field:createtime/]</a>
</li>
{/cms:pagelist}
<!-- 可选,显示分页 -->
{cms:pagination /}
html
<div class="layui-box layui-laypage layui-laypage-default">
    <a class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
    <span class="layui-laypage-curr">
        <em class="layui-laypage-em"></em>
        <em>1</em>
    </span>
    <a data-page="2">2</a><a data-page="3">3</a>
    <a data-page="4">4</a><a data-page="5">5</a>
    <a class="layui-laypage-next" data-page="2">下一页</a>
</div>
css
/*
 # 引入layui.css
 <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet"> 
*/

.layui-page{
    display: flex;
    align-items: center;
    justify-content: center;
    zoom: 1;
    margin-top: 20px;
}

使用方法

参数名描述
formkey表单模型的编码
addfields附加字段(该字段须设置了formkey后生效)
cascade是否显示该栏目的下级栏目的文章
sortWay排序方式(asc或desc)
sortBy排序字段(数据库中字段名)
  • 支持字段
字段名说明
autoindex序号(从1开始)
id文章ID
title标题
properties文章属性(头条h加粗b幻灯f图片b)
litpic缩略图
hasthumbnail是否有缩略图(有输出yes-thumbnail;无输出no-thumbnail)可用于Css的class名,从而实现动态的输出列表样式
tag文章标签
remark文章描述
categoryid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
comment是否允许评论
subscribe是否允许订阅
clicks点击数
weight权重(可以利用该字段来排序)
status状态
createby发布人
createtime发布时间
updateby更新人
updatetime更新时间
arcurl文章访问URL

【内容】文章内容页标签:article

该标签是用于在文章内容页显示当前文章信息。

html
{cms:article field="title" /}

使用方法

参数名描述
field字段名
  • 支持字段
字段名说明
id文章ID
title标题
properties文章属性(头条h加粗b幻灯f图片b)
litpic缩略图
tag文章标签
remark文章描述
categoryid栏目ID
typenamecn栏目中文名称
typenameen栏目英文名称
comment是否允许评论
subscribe是否允许订阅
clicks点击数
weight权重(可以利用该字段来排序)
status状态
createby发布人
realname发布人真实姓名
username发布人用户名
createtime发布时间
updateby更新人
updatetime更新时间
arcurl文章访问URL
*其它附加字段(需要配合自定义表单)

【内容】PrevNext上一篇、下一篇标签

用于在文章详情页面展示上一篇、下一篇

html
{cms:prevnext layout="prev,next" /}

使用方法

参数名描述
layout要展示上一篇、下一篇的布局,可选项[prev/next/prev,next]
html
<ul class="pnt-prevnext">
    <li class="pnt-prev"><span class="pnt-prevnext-label">上一篇:</span><a href="/article/8b4faeebafa0461eaf45e2f08eea0d4b" title="XXXXX">XXXXX</a></li>
    <li class="pnt-next"><span class="pnt-prevnext-label">下一篇:没有了</span></li>
</ul>
css

【内容】当前位置标签

该标签用于在分页(封面页面和列表页面和文章页面)页面中展示当前位置

html
{cms:location lang="cn" /}

使用方法

参数名描述
lang语言(cn或en)用于展示中文名称或英文名称
html
<ul class="location">
    <li>
        <a href="/" title="首页">首页</a>
    </li>
    <li>
        <a href="/" title="更新记录">更新记录</a>
    </li>
</ul>
css
.location{
    display: flex;
}
.location li:after{
    content: " > ";
    margin: 0 5px;
}
.location li:last-child:after{
    content: "";
}

【其它】字段函数使用

html
使用示例:
[field:title function="substring(0,50,'...')" /]

[field:createtime function="format('yyyy-MM-dd')" /]

[field:autoindex function="steps(5,1)" /]

1. function="substring(参数1,参数2,参数3)"
    函数说明:截取字段为指定长度,function="",必须为双引号包裹。
    参数1:开始截取的位置
    参数2:截取长度
    参数3:替换字符,如...。注:参数3需要用英文单引号包裹,例:'...'
2. function="format(参数)"
    函数说明:格式化日期数据为指定格式
    参数:格式化字符串,参照SimpleDateFormat类,注:参数需要用英文单引号包裹,例:'yyyy-MM-dd'
3. function="steps(参数1, 参数2)"
    函数说明:指定autoindex的起始序号以及步长
    参数1:起始序号
    参数2:步长

【其它】表单投稿

模版:default/list_message.html

使用方法

  1. 后端的分类,开启允许投稿
  2. 前端表单
  3. 验证码(防止恶意留言)
js
var captchaURL = "/getKaptcha?t=" + new Date().getTime();
// 建议每次切换都加上时间戳作为参数,避免缓存
  1. 注意:
  • 提交地址必须为/input,方式必须为POST。
  • captcha: 验证码字段名,不可改变。
  • typeid:使用隐藏域来定义该留言提交后,要提交到后台的哪一个栏目中,不可改变。
  • formkey:该栏目所使用的表单模型,指定后可使用表单模型中定义的字段名,不可改变。
  • title:公共字段,文章标题,不可改变。
  • telephone|content:表单模型中定义的字段。

前端表单:

html
<form action="/input" method="post">
 <input type="hidden" name="typeid" value="wqz18j7q" />
 <input type="hidden" name="formkey" value="8t2lkr8d" />
 <div class="item">
     <input type="text" id="title" placeholder="填写您的姓名" name="title">
 </div>
 <div class="item">
     <input type="text" id="telephone" placeholder="填写您的联系电话" name="telephone">
 </div>
 <div class="item">
     <textarea id="content" name="content" class="form-control" placeholder="填写您的需求"></textarea>
 </div>
 <div class="captcha">
     <div class="login-form-vcode"><img alt="图片验证码" width="120" height="46" src="" id="vcode"></div>
     <div class="login-form-vcode-input"><input type="text" name="captcha" placeholder="验证码" required="required" class="form-control" /></div>
     <div class="clearFix"></div>
 </div>
 <div class="form-btn-group-left">
     <div class="submission set_5_button" id="essentialInformation">提交</div>
 </div>
</form>

后端接收: FrontController.java返回JSON数据,格式如下:

js
{
    "success": true,
    "state": "200",
    "data": null,
    "info": "操作成功"
}
// 前台只需要判断response.state === "200"即可,其它结果均为失败。

【其它】网站搜索

模版:default/search.html

使用方法

  1. 后端的分类,开启允许投稿
  2. 前端表单
  3. 注意:
  • 提交地址必须为/search,方式必须为POST。
  • keywords: 搜索关键词,不可改变。
  • typeid:栏目编码,可以多个,多个使用英文逗号分隔(搜索范围:该字段可有可无,无默认为全站搜索)。
  • 字段都要包在entity对象中,如entity['typeid']

前端表单:

html
<form class="navbar-left nav-search" role="search" action="/search" method="post">
    <input class="form-control" placeholder="输入关键字进行搜索..." type="text" name="entity['keywords']">
    <input type="submit" value="搜索" />
</form>

后端接收: FrontController.java 在该类中的search方法,为后端接收前台留言的控制器。返回HTML模板。

【进阶】导航高亮

给网站底部导航添加背景跟随效果

原理

利用标签category 在页面标记当前栏目的:typeidparentid,然后在导航列表中设置ref,然后利用js,获取所有元素,对比,添加选中的样式,on (可自定义)

注意

由于首页不进行变量,造成首页高亮无法实现,解决方案是,后台添加一个首页栏目,模版设置 index.html 封面类型

html
<header class="header" typeid="{cms:category field='typeid' /}" parentId="{cms:category field='parentid' /}">
    <div class="nav">
        <ul class="navigation">
            {cms:categoryartlist  length="7"}
            <li class="" ref="[field:typeid /]">
                {cms:if test="('true' eq [field:haschildren/])"}
                <div class="y_j">
                    <a href="javascript:;">[field:typenamecn /] </a>
                    <i class="iconfont icon-xiasanjiao1"></i>
                </div>
                <div class="e_j">
                    {cms:channel}
                    <a href="[field:typeurl/]#[field:typecode/]">[field:typenamecn /]</a>
                    {/cms:channel}
                </div>
                {/cms:if}
                {cms:if test="('true' neq [field:haschildren/])"}
                <div class="y_j">
                    <a href="[field:typeurl/]">[field:typenamecn /] </a>
                    <i class="iconfont icon-xiasanjiao1"></i>
                </div>
                {/cms:if}
            </li>
            {/cms:categoryartlist}
        </ul>
    </div>
</header>
css
.on{
/*   
 * 选中样式 
 */
}
js
$(document).ready(function () {
    var header = $("header");
    var typeId = header.attr("typeid");
    var parentId = header.attr("parentid");
    var navigation = $(".navigation>li");
    for(var i = 0;i < navigation.length;i++){
        var ref = $(navigation[i]).attr("ref");
        if(ref === typeId || ref === parentId){
            isHome = false
            $(navigation[i]).addClass("on")
        }
    }
})
  1. 页面公共位置添加:typeid="{cms:category field='typeid' /}" parentId="{cms:category field='parentid' /}"
  2. 导航遍历内部添加:ref="[field:typeid /]"
  3. 添加JS代码
  4. 检查Css样式.on{}

【扩展】定义标签

在实际开发中,可能系统自带的标签满足不了复杂需求,这时需要用户来自定义标签,前面的介绍,我们已经知道标签有统一的接口,就是:IParse.java

  1. 这里自定义标签为:custom
  2. 实现该IParse.java接口,重写两个parse方法即可,然后在统一入口中来调用就可以了。
  3. 并且自定义标签类,还需要添加@Tag注解,如有属性还需要添加@Attribute注解,最后需要将该类纳入Spring管理,添加@Component注解

示范:

java
@Component
@Tag(beginTag="{cms:custom}",endTag="{/cms:custom}",regexp="\\{cms:custom[ \\t]*.*\\}([\\s\\S]+?)\\{/cms:custom\\}", attributes={
        @Attribute(name = "attr1",regex = "[ \t]+attr1=\".*?\""),
    })
public class CustomTag implements IParse {

    @Override
    public String parse(String html) {
        // 解析代码
        return null;
    }

    @Override
    public String parse(String html, String params) {
        // 解析代码
        return null;
    }

}

获取Html中的标签:

java
//获取html中的标签
List<String> tags = RegexUtil.parseAll(html, channelAnnotation.regexp(), 0);
//获取html中的标签中的内容
List<String> contents = RegexUtil.parseAll(html, channelAnnotation.regexp(), 1);

【进阶】网页地图

用于网页展示一个地图,这里使用的是百度API

地址:百度基础地图

html
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap {height: 533px;width:100%;overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
    margin:0;
    padding:0;
    list-style:none;
}
dt{
    font-size:14px;
    font-family:"微软雅黑";
    font-weight:bold;
    border-bottom:1px dotted #000;
    padding:5px 0 5px 5px;
    margin:5px 0;
}
dd{
    padding:5px 0 0 5px;
}
li{
    line-height:28px;
}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=5bdeu0uWvsZYtasS4ZzGGQKTiTMCuD72"></script>
<div id="allmap">
</div>
<script type="text/javascript">
    // 百度地图API功能  https://lbsyun.baidu.com/index.php?title=jspopularGL
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point({cms:variable  name='longitude' /}, {cms:variable  name='dimensionality' /});
    map.centerAndZoom(point, 15);
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    var opts = {
        width: 250,     // 信息窗口宽度
        height: 100,    // 信息窗口高度
        title: ""  // 信息窗口标题
    }
    var infoWindow = new BMapGL.InfoWindow("{cms:variable  name='address' /}<br>电话:{cms:variable  name='pc-phone' /}", opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
</script>

Released under the MIT License.