如何制作搜索结果页
方式1：系统内置动态模板
1. 配置搜索结果页动态模板
进入内容管理》站点管理菜单，编辑站点，切换到默认模版标签页，配置发布通道的搜索结果页模版。
2. 搜索结果页模板制作
使用模板标签实现搜索
使用模板标签再模板渲染阶段直接查询接口输出在页面中。以演示站“绿色清新科互联网企业主题”搜索结果页代码为例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>搜索结果_${Site.name}</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="${Prefix}assets/css/bootstrap/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="${Prefix}assets/css/bootstrap/bootstrap-theme.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="${Prefix}assets/css/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="${Prefix}assets/css/font-awesome.min.css">
<link rel="stylesheet" href="${Prefix}assets/css/ionicons.min.css">
<!-- Flexslider -->
<link rel="stylesheet" href="${Prefix}assets/css/flexslider.css">
<!-- Owl -->
<link rel="stylesheet" href="${Prefix}assets/css/owl.carousel.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="${Prefix}assets/css/magnific-popup.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="${Prefix}assets/js/jquery.min.js"></script>
<script src="${Prefix}js/common.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.pagination {
padding: 30px 0;
}
.pagination .page_link {
padding: 8px 10px;
border: 1px solid;
margin: 0 5px;
}
.pagination .page_link.page_active {
background-color: #90A94D;
color: #FFF;
}
.form-wrap {
padding: 30px 10px;
}
.form-wrap .form-input {
width: 100%;
height: 40px;
line-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.form-wrap input {
width: 100%;
max-width: 500px;
height: 40px;
border: 1px solid #999;
padding: 0 10px;
}
.form-wrap button {
background-color: #90A94D;
color: #fff;
height: 40px;
width: 100px;
}
</style>
</head>
<body>
<!-- Header Wrap -->
<@cms_include file="header.template.html"></@cms_include>
<!-- Main Wrap -->
<div id="main-wrap">
<!-- Page Content -->
<div id="page-content" class="header-static">
<!-- Page Header -->
<div id="page-header" class="secondary-background">
<div class="container">
<div class="row no-margin">
<div class="text">
<h1 class="white">搜索结果</h1>
</div>
</div>
</div>
</div>
<!-- END Page Header -->
<div id="home-wrap" class="content-section fullpage-wrap">
<div class="form-wrap container">
<form class="search-form">
<div class="form-input">
<input type="text" id="query" name="query" placeholder="search..." value="${Request.q!''}" />
<span class="form-button">
<button type="button" id="btn-search">搜索</button>
</span>
</div>
</form>
</div>
<@cms_search_content query="${Request.q!''}" page="true" size="10">
<#list DataList as content>
<#if (content?index % 2) == 0 >
<div class="light-background">
</#if>
<div class="container">
<!-- Service -->
<div class="row no-margin padding-lg">
<div class="col-md-4 padding-leftright-null">
<div class="text padding-topbottom-null newstitle">
<h2 class="margin-bottom-null left">${dateFormat(content.publishDateInstance,'yyyy/MM/dd')}</h2>
</div>
</div>
<div class="col-md-8 padding-leftright-null">
<div class="text padding-topbottom-null">
<h3><a href="${iurl(content.link!'')}">${content.title}</a></h3>
<p class="margin-bottom-null">
${content.fullText!''}
</p>
</div>
</div>
</div>
<!-- END Service -->
</div>
<#if (content?index % 2) == 0 >
</div>
</#if>
</#list>
</@cms_search_content>
<!-- PAGE BAR -->
<div class="container text-center">
<@page_bar type="Simple"></@page_bar>
</div>
<!-- PAGE BAR END-->
</div>
</div>
<!-- END Page Content -->
</div>
<!-- Main Wrap -->
<!-- Footer -->
<@cms_include file="footer.template.html"></@cms_include>
<!-- END Footer. Class fixed for fixed footer -->
<!-- All js library -->
<script src="${Prefix}assets/js/bootstrap/bootstrap.min.js"></script>
<script src="${Prefix}assets/js/jquery.flexslider-min.js"></script>
<script src="${Prefix}assets/js/owl.carousel.min.js"></script>
<script src="${Prefix}assets/js/isotope.min.js"></script>
<script src="${Prefix}assets/js/jquery.magnific-popup.min.js"></script>
<!---<script src="http://ditu.google.cn/maps/api/js?v=3.exp&signed_in=false"></script>--->
<script src="${Prefix}assets/js/jquery.scrollTo.min.js"></script>
<script src="${Prefix}assets/js/smooth.scroll.min.js"></script>
<script src="${Prefix}assets/js/jquery.appear.js"></script>
<script src="${Prefix}assets/js/jquery.countTo.js"></script>
<script src="${Prefix}assets/js/jquery.scrolly.js"></script>
<script src="${Prefix}assets/js/plugins-scroll.js"></script>
<script src="${Prefix}assets/js/imagesloaded.min.js"></script>
<script src="${Prefix}assets/js/pace.min.js"></script>
<script src="${Prefix}assets/js/main.js"></script>
<script type="text/javascript">
(function() {
$(document).on("keyup", "#query", function(evt) {
var keyCode = evt.keyCode || evt.which;
if (keyCode == 13) {
doSearch();
}
}).on("click", "#btn-search", function() {
doSearch();
})
function doSearch() {
var link = "${IsPreview?then(ApiPrefix, Prefix)}${dynamicPageLink('Search',false)}";
if (link.indexOf('?') > -1) {
link += "&q=" + $('.form-wrap #query').val();
} else {
link += "?q=" + $('.form-wrap #query').val();
}
window.location.href = link;
}
})()
</script>
</body>
</html>
使用API接口实现搜索
模板使用javascript请求api接口获取搜索结果数据后渲染到页面中显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>搜索结果页</title>
<!-- Bootstrap core CSS -->
<link href="${Prefix}css/bootstrap.min.css" rel="stylesheet">
<link href="${Prefix}css/theme.css" rel="stylesheet">
<link href="${Prefix}css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="${Prefix}assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="${Prefix}css/flexslider.css"/>
<link href="${Prefix}assets/bxslider/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" href="${Prefix}css/animate.css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="${Prefix}css/style.css" rel="stylesheet">
<link href="${Prefix}css/style-responsive.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
<!--[if lt IE 9]>
<script src="${Prefix}js/html5shiv.js"></script>
<script src="${Prefix}js/respond.min.js"></script>
<![endif]-->
<style>
.pagebar { height: 50px; }
.pagebar a { border: 1px solid #48cfad; padding: 3px 8px; margin: 0 2px; }
.pagebar a.current { background-color: #48cfad; color: #fff; }
</style>
</head>
<body>
<!-- 页头公共区块 -->
<@cms_include file="header.template.html"></@cms_include>
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div>
<input class="form-control" id="_query" placeholder=" Search" type="text" style="float: left;width: 295px;margin-right: 5px;">
<input class="form-control" type="button" onclick="queryResult()" value="搜索" style="width: 60px;color: #666;float: left;">
</div>
<div class="col-lg-8 col-sm-8" style="text-align:right;padding-top: 5px;">
<a class="position" href="${Site.link}">首页</a> > <a class="position" href="#">搜索</a>
</div>
</div>
</div>
</div>
<div class="container">
<div style="margin-bottom: 20px;">
为您找到 <span style="color:red;">${htmlUnescape(Request.q!'')}</span> 相关结果 <span id="span-total" style="color:red;">0</span> 个
</div>
<div class="row">
<div class="col-lg-9 " id="div-result">
<!-- 搜索结果列表 -->
</div>
<div class="col-lg-9 ">
<div class="text-center pagebar">
<!-- 搜索结果分页条 -->
</div>
</div>
</div>
</div>
<!--footer start-->
<@cms_include file="footer.template.html"></@cms_include>
<!--small footer end-->
<script src="${Prefix}js/jquery.js"></script>
<script src="${Prefix}js/jquery.cookie.min.js"></script>
<script src="${Prefix}js/bootstrap.min.js"></script>
<script type="text/javascript" src="${Prefix}js/hover-dropdown.js"></script>
<script defer src="${Prefix}js/jquery.flexslider.js"></script>
<script type="text/javascript" src="${Prefix}assets/bxslider/jquery.bxslider.js"></script>
<script src="${Prefix}js/jquery.easing.min.js"></script>
<script src="${Prefix}js/link-hover.js"></script>
<script src="${Prefix}js/common-scripts.js"></script>
<script src="${Prefix}js/wow.min.js"></script>
<script>
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
</script>
<script>
var _chestnutcms = {
isPreview: ${IsPreview?c},
prefix: "${IsPreview?then(ApiPrefix, Prefix)}",
siteId: "${Site.siteId}",
pp: "${PublishPipeCode}",
query: "${htmlUnescape(Request.q!'')}",
page: "${Reuqest.page!'1'}",
pageSize: 10,
}
// 使用jquery.ajax调用后台接口返回搜索结果
function queryResult() {
var params = new URLSearchParams(window.location.search);
var q = _chestnutcms.query;
if (!q || q.length == 0) {
$("#div-result").html("请输入搜索词！");
return;
}
$('#_query').val(unescape(q));
$("#div-result").html("Loading...");
var page = Number(_chestnutcms.page);
if (!Number.isInteger(page) || page <= 0) {
page = 1;
}
$.ajax({
url: _chestnutcms.prefix + "api/cms/search/query?sid=" + _chestnutcms.siteId + "&pp="+_chestnutcms.pp+"&preview="+_chestnutcms.isPreview+"&q=" + q + "&page=" + page,
<#if IsPreview>
headers: {
"Authorization": "Bearer " + $.cookie("get", {name: 'Admin-Token'})
},
</#if>
type: "get",
success: function(res) {
$("#div-result").html("");
if (res.code != 200) {
alert(res.msg);
return;
}
$('#span-total').html(res.data.total);
var html = res.data.rows.map(row => {
return '<div class="blog-item">'
+ '<div class="row">'
+ '<div class="col-lg-10 col-sm-10">'
+ '<h1 style="margin-top:0;"><a href="'+row.link+'">'+row.title+'</a></h1>'
+ '<p>'+row.fullText+'</p>'
+ '</div>'
+ '</div>'
+ '<div>所属栏目：' + row.catalogName + '<a href="'+row.link+'">'+row.link+'</a></div>'
+ '</div>';
}).join("");
$("#div-result").html(html);
buildPageBar(page, pageSize, parseInt(res.data.total));
}
})
}
function buildPageBar(page, size, total) {
var link = _chestnutcms.prefix + "_search";
if (_chestnutcms.isPreview) {
link += '?sid='+_chestnutcms.siteId+'&pp='+_chestnutcms.pp+'&preview=true'+'&q='+$('#_query').val();
} else {
link += "?q=" + $('#_query').val();
}
if (page > 1) {
$(".pagebar").append('<a href="'+link+'&page='+(page-1)+'"> 上一页 </a>')
}
var pageNumber = parseInt((total + size - 1) / size);
for (var i = 1; i <= pageNumber; i++) {
if (page == i) {
$(".pagebar").append('<a href="javascript:void(0);" class="current">'+i+'</a>')
} else {
$(".pagebar").append('<a href="'+link+'&page='+i+'" class="current">'+i+'</a>')
}
}
if (page < pageNumber) {
$(".pagebar").append('<a href="'+link+'&page='+(page+1)+'"> 下一页 </a>')
}
}
document.addEventListener('DOMContentLoaded', function() {
queryResult();
});
</script>
</body>
</html>
3. Nginx代理搜索页路径到后台
# 搜索页面路径
location = /_search {
ssi on;
ssi_silent_errors on;
proxy_buffers 32 8k;
add_after_body "";
proxy_cookie_path / /;
# 后台访问路径
proxy_pass http://localhost:8090;
}
方式2：自定义动态模板
与方式1的区别在于可以自定义访问路径。
1. 配置定义动态模板
2. 搜索结果页模板制作
- 参考方式1的两种模板实现一致。
3. Nginx代理搜索页路径到后台
# 搜索页面路径，这里是自定义动态模板配置的访问路径
location = /search/result {
ssi on;
ssi_silent_errors on;
proxy_buffers 32 8k;
add_after_body "";
proxy_cookie_path / /;
# 后台访问路径
proxy_pass http://localhost:8090;
}
方式3：静态页面
与其他两方式的区别在于不需要每次访问都解析模板。
1. 创建栏用于配置搜索结果页模板及访问地址。
- 创建
搜索栏目，栏目路径即搜索结果页路径。
- 配置栏目首页或列表页模板
2. 搜索结果页模板制作
静态页面不会实时渲染模板，只能使用API接口方式实现搜索功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>搜索结果页</title>
<!-- Bootstrap core CSS -->
<link href="${Prefix}css/bootstrap.min.css" rel="stylesheet">
<link href="${Prefix}css/theme.css" rel="stylesheet">
<link href="${Prefix}css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="${Prefix}assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="${Prefix}css/flexslider.css"/>
<link href="${Prefix}assets/bxslider/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" href="${Prefix}css/animate.css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="${Prefix}css/style.css" rel="stylesheet">
<link href="${Prefix}css/style-responsive.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
<!--[if lt IE 9]>
<script src="${Prefix}js/html5shiv.js"></script>
<script src="${Prefix}js/respond.min.js"></script>
<![endif]-->
<style>
.pagebar { height: 50px; }
.pagebar a { border: 1px solid #48cfad; padding: 3px 8px; margin: 0 2px; }
.pagebar a.current { background-color: #48cfad; color: #fff; }
</style>
</head>
<body>
<!-- 页头公共区块 -->
<@cms_include file="header.template.html"></@cms_include>
<div class="breadcrumbs">
<div class="container">
<div class="row">
<div>
<input class="form-control" id="_query" placeholder=" Search" type="text" style="float: left;width: 295px;margin-right: 5px;">
<input class="form-control" type="button" onclick="queryResult()" value="搜索" style="width: 60px;color: #666;float: left;">
</div>
<div class="col-lg-8 col-sm-8" style="text-align:right;padding-top: 5px;">
<a class="position" href="${Site.link}">首页</a> > <a class="position" href="#">搜索</a>
</div>
</div>
</div>
</div>
<div class="container">
<div style="margin-bottom: 20px;">
为您找到 <span style="color:red;">${htmlUnescape(Request.q!'')}</span> 相关结果 <span id="span-total" style="color:red;">0</span> 个
</div>
<div class="row">
<div class="col-lg-9 " id="div-result">
<!-- 搜索结果列表 -->
</div>
<div class="col-lg-9 ">
<div class="text-center pagebar">
<!-- 搜索结果分页条 -->
</div>
</div>
</div>
</div>
<!--footer start-->
<@cms_include file="footer.template.html"></@cms_include>
<!--small footer end-->
<script src="${Prefix}js/jquery.js"></script>
<script src="${Prefix}js/jquery.cookie.min.js"></script>
<script src="${Prefix}js/bootstrap.min.js"></script>
<script type="text/javascript" src="${Prefix}js/hover-dropdown.js"></script>
<script defer src="${Prefix}js/jquery.flexslider.js"></script>
<script type="text/javascript" src="${Prefix}assets/bxslider/jquery.bxslider.js"></script>
<script src="${Prefix}js/jquery.easing.min.js"></script>
<script src="${Prefix}js/link-hover.js"></script>
<script src="${Prefix}js/common-scripts.js"></script>
<script src="${Prefix}js/wow.min.js"></script>
<script>
wow = new WOW(
{
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0 // default
}
)
wow.init();
</script>
<script>
var _chestnutcms = {
isPreview: ${IsPreview?c},
prefix: "${IsPreview?then(ApiPrefix, Prefix)}",
siteId: "${Site.siteId}",
pp: "${PublishPipeCode}",
query: "",
cid: 0,
pageSize: 10,
page: 1,
link: "${Catalog.link}"
}
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('page')) {
var page = Number(urlParams.get('page'));
if (Number.isInteger(page) && page > 0) {
_chestnutcms.page = page;
}
}
if (urlParams.has('q')) {
_chestnutcms.query = urlParams.get('q');
}
if (urlParams.has('cid')) {
_chestnutcms.cid = urlParams.get('cid');
}
// 使用jquery.ajax调用后台接口返回搜索结果
function queryResult() {
var params = new URLSearchParams(window.location.search);
var q = _chestnutcms.query;
if (!q || q.length == 0) {
$("#div-result").html("请输入搜索词！");
return;
}
$('#_query').val(unescape(q));
$("#div-result").html("Loading...");
var page = Number(_chestnutcms.page);
if (!Number.isInteger(page) || page <= 0) {
page = 1;
}
$.ajax({
url: _chestnutcms.prefix + "api/cms/search/query?sid=" + _chestnutcms.siteId + "&pp="+_chestnutcms.pp+"&preview="+_chestnutcms.isPreview+"&q=" + q + "&page=" + page,
<#if IsPreview>
headers: {
"Authorization": "Bearer " + $.cookie("get", {name: 'Admin-Token'})
},
</#if>
type: "get",
success: function(res) {
$("#div-result").html("");
if (res.code != 200) {
alert(res.msg);
return;
}
$('#span-total').html(res.data.total);
var html = res.data.rows.map(row => {
return '<div class="blog-item">'
+ '<div class="row">'
+ '<div class="col-lg-10 col-sm-10">'
+ '<h1 style="margin-top:0;"><a href="'+row.link+'">'+row.title+'</a></h1>'
+ '<p>'+row.fullText+'</p>'
+ '</div>'
+ '</div>'
+ '<div>所属栏目：' + row.catalogName + '<a href="'+row.link+'">'+row.link+'</a></div>'
+ '</div>';
}).join("");
$("#div-result").html(html);
buildPageBar(page, pageSize, parseInt(res.data.total));
}
})
}
function buildPageBar(page, size, total) {
var link = _chestnutcms.link;
if (_chestnutcms.isPreview) {
link += '&q=' + $('#_query').val();
} else {
link += "?q=" + $('#_query').val();
}
if (page > 1) {
$(".pagebar").append('<a href="'+link+'&page='+(page-1)+'"> 上一页 </a>')
}
var pageNumber = parseInt((total + size - 1) / size);
for (var i = 1; i <= pageNumber; i++) {
if (page == i) {
$(".pagebar").append('<a href="javascript:void(0);" class="current">'+i+'</a>')
} else {
$(".pagebar").append('<a href="'+link+'&page='+i+'" class="current">'+i+'</a>')
}
}
if (page < pageNumber) {
$(".pagebar").append('<a href="'+link+'&page='+(page+1)+'"> 下一页 </a>')
}
}
document.addEventListener('DOMContentLoaded', function() {
queryResult();
});
</script>
</body>
</html>
