首页 > 模板开发 > 正文

模板制作新手教程(八)-制作搜索结果页面

  • 更新时间:2024-03-28 16:18:45
  • 669阅读
  • 0评论

这一篇我们来制作搜索结果页面,rpcms搜索页面模板名称是:search.php,

老样子,先建一个search.php的模板文件。先看看效果图:

2021-01-13_164641.jpg


一、加入form表单

修改header.php文件,加入form表单。搜索提交的地址为/search,get或post都可以。提交参数名称为q

<form action="/search/" method="get" class="searchform">
	<input class="input" placeholder="想搜点什么呢.."  name="q" type="text" value="{:input('q')}">
	<button type="submit" class="searchBtn">搜</button>
</form>


二、创建模板

搜索结果的数据列表和列表页的一样,可以参考《帮助文档-模板开发-列表变量》。

这里就简单的实现了下,在search.php中写入:

<?php if (!defined('CMSPATH')){exit('error!');}?>
{include:header}
<div class="container">
	<ul class="logList">
		{foreach $logList as $k=>$v}
		<li><a href="{$v['url']}" title="{$v['title']}">
			{:thumb($v)}
			<div class="info">
				<h3>{$v['title']|str_replace=$listId,'<font style="color: #f40;">'.$listId.'</font>',###}</h3>
				<p class="desc">{$v['excerpt']|str_replace=$listId,'<font style="color: #f40;">'.$listId.'</font>',###}</p>
				<div class="bottom">
					<span>时间:{$v['createTime']}</span>
				</div>
			</div>
		</a></li>
		{/foreach}
	</ul>
	
</div>
{include:footer}

系统自带有搜索功能,默认在标题和内容中检索。

搜索结果数据不包含html内容,所有搜索关键词高亮需要在模板中定义,如上demo中,title和excerpt用了str_replace函数来替换搜索关键词。


三、附CSS,可参考

.searchform{float: right;margin: 10px 20px;}
.searchform input[type="text"]{height: 30px;padding: 0 10px;border: none;border-radius: 3px 0 0 3px;outline:none;float: left;}
.searchform .searchBtn{height: 30px;padding: 0 10px;border: none;float: left;border-radius: 0 3px 3px 0;background: #eaeaea;cursor: pointer;color: #8c8c8c;}
.logList li{margin: 20px 0;}
.logList li:after{content:"";display:block;height:0;clear:both;}
.logList li a{color: #333;}
.logList li img{width: 180px;height: 180px;float: left;margin-right: 20px;}
.logList li .info h3,.logList li .info h3 font{font-size: 20px;}
.logList li .info .desc{height: 100px;margin: 10px 0;color: #999;}
.logList li .info .bottom span{font-size: 13px;color: #999;}


总结默认在标题和内容中检索,提交地址为/search,参数名称为q,支持get和post。

发表评论

评论已关闭,请移步论坛发表,立即前往

0 位网友评论:

Top