1. 搜索
搜索模版名称必须为 search.htm
且只能在对应模版的根目录下,不能在模板目录的子目录下,对应的固定地址是/mcms/search.do
[!tip] 搜索模板是动态生成,不需要静态化即可看到效果
默认模版参考:
[!tip]
serach.htm
必须在当前模版的第一级目录,不能将search.htm
放到images
css
或者其他的子目录
1.1. 搜索参数
参数 | 必填 | |
---|---|---|
tmpl | 可选 | 模版文件名,默认search.htm |
content_title | 必填 | 搜索标题,也可以搜索文章内容的其他字段例如:content_keyword 等 |
categoryIds | 可选 | 可搜索的栏目范围,多个栏目id直接逗号隔开且必须逗号结尾, 例如:单个栏目搜索,1, 多个栏目搜索 1,2,3,4, 如需要搜索 自定义模型 的表数据,只能设置一个栏目编号 |
content_type | 可选 | 文章属性,多个以逗号分开,例如:c,f |
style | 必填(政企) | 企业版本、政府版本为必填,对应具体的模版文件夹名称,可以根据不同的皮肤效果制作不同的搜索页面结果页 |
[!tip]
categoryIds
指定的栏目必须为最终子栏目
(具体到某一个栏目) ,不能指定某一个父级栏目来搜索。如需要搜索自定义模型
的表数据,只能设置一个栏目编号。
2. 范例
搜索表单
...
<form action="/mcms/search.do" method="post">
<input type="text" name="style" value="{ms:global.template/}">
<input type="text" name="content_title" placeholder="请输入关键字">
<input type="text" name="content_type" placeholder="文章属性,多个以,分隔">
<input type="text" name="categoryIds" placeholder="请输入栏目id,多个以,分隔">
<input type="hidden" name="tmpl" value="search.htm" />
<input type="submit" value="搜索">
</form>
...
搜索结果页 search.htm
<div class="ms-content-main-div-prompt">您搜索的关键字
<span>${search.content_title}</span>
</div>
<!-- 搜索结果列表 -->
{ms:arclist size=10 ispaging=true}
<a href="{ms:global.html/}${field.link}">
${field.title}
</a>
{/ms:arclist}
<div class="ms-content-main-page">
<a href="{ms:page.index/}">首页</a>
<a href="{ms:page.pre/}">上一页</a>
<a href="{ms:page.next/}">下一页</a>
<a href="{ms:page.last/}">末页</a>
</div>
[!tip] 这里的分页不需要拼接
{ms:global.html/}
; 通过${search.content_title}
可以动态获取搜索的内容 ;
采用 element-ui
的分页 效果
<!--网络请求框架-->
<script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
<script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
<script src="/static/plugins/ms/1.0.0/ms.js"></script>
<script src="/static/plugins/ms/1.0.0/ms.http.js"></script>
<script src="/static/plugins/ms/1.0.0/ms.util.js"></script>
<!--引入库-->
<script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
<script src="/static/plugins/element-ui/2.12.0/index.js"></script>
<link rel="stylesheet" href="/static/plugins/element-ui/2.12.0/index.css">
<div id="app">
<!-- 搜索结果列表 -->
<#assign isEmpty=true>
{ms:arclist size=10 ispaging=true}
<!--标记搜索记录不为空-->
<#assign isEmpty=false>
<a href="{ms:global.html/}${field.link}">
${field.title}
</a>
{/ms:arclist}
<!-- 搜索结果为空时候展示 -->
<#if isEmpty>
没有找到 "${search.content_title}" 相关记录
</#if>
<el-pagination
background
@current-change="handleCurrentChange"
:page-size="pageSize"
:current-page.sync="pageCur"
layout="prev, pager, next, jumper"
:total="contentCount">
</el-pagination>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
//当前页数
pageCur: ${(page.cur)!1},
//每页文章条数
pageSize: ${(page.size)!20},
//页数总数
pageTotal: ${(page.total)!0},
//内容总数
contentCount: ${(page.rcount)!0},
keyword: "{ms:search.content_title/}",
categoryIds: "{ms:search.categoryIds/}"
},
methods: {
handleCurrentChange:function(val) {
var form = document.createElement("form");
form.setAttribute("method", "post");
var input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'size');
input.setAttribute('value', this.pageSize);
form.append(input);
input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'pageNo');
input.setAttribute('value', val);
form.append(input);
input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'content_title');
input.setAttribute('value', this.keyword);
form.append(input);
input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'categoryIds');
input.setAttribute('value', this.categoryIds);
form.append(input);
input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', 'style');
input.setAttribute('value', '{ms:global.template/}');
form.append(input);
form.setAttribute("action","/mcms/search.do");
document.body.appendChild(form);
form.submit();
form.remove();
},
}
})
</script>
[!tip] 这里采用的是动态创建表单的方式搜索,具体参考默认模版的
search.htm
模版