dede搜索页模板怎么改？-DEDE建站-盈思创科技

核心概念

在开始之前，你需要理解 DedeCMS 模板的基本原理：

入口文件：用户通过访问 plus/search.php 文件来触发搜索。
模板文件：search.php 会根据系统配置,加载一个专门的模板文件来渲染搜索结果页。
模板位置：这个模板文件默认位于你的模板目录下，路径是 /templets/default/search.htm，如果你使用的是自定义模板（比如名为 mytheme），那么路径就是 /templets/mytheme/search.htm。

所有修改都将围绕编辑这个 search.htm 文件进行。

第一步：定位并准备模板文件

通过 FTP 或文件管理器,登录你的网站服务器。
找到模板文件：进入 /templets/你的模板文件夹/ 目录（/templets/default/ 或 /templets/pc/）。
复制并重命名：为了安全起见，强烈建议你先复制一份 search.htm 文件，并命名为 search.htm.bak 作为备份，这样即使修改出错,也可以轻松恢复。
打开原文件：用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开 search.htm 文件。

第二步：了解 `search.htm` 的基本结构

打开 search.htm，你会发现它和普通的列表页（如 list_article.htm）结构非常相似,主要由三部分组成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">{dede:global name='keyword' function='RemoveXSS(@me)'/} - {dede:global.cfg_webname/}</title>
    <link href="{dede:global.cfg_templets_skin/}/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="header">...</div>
    <div class="main">
        <!-- 1. 搜索表单 -->
        <form name="formsearch" action="{dede:global name='cfg_phpurl'/}/search.php">
            <input type="hidden" name="kwtype" value="0" />
            <input type="hidden" name="searchtype" value="titlekeyword" />
            <input type="text" name="q" class="search-keyword" value="{dede:global name='keyword'/}" />
            <button type="submit" class="search-submit">搜索</button>
        </form>
        <!-- 2. 搜索结果列表 -->
        <div class="listbox">
            {dede:list pagesize='10'}
            <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
            <p class="intro">[field:description function='cn_substr(@me, 150)'/]...</p>
            <div class="info">
                <span class="author">作者：[field:writer/]</span>
                <span class="time">发布时间：[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
                <span class="view">点击：[field:click/]</span>
            </div>
            {/dede:list}
        </div>
        <!-- 3. 分页条 -->
        <div class="page">
            {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'}
            {/dede:pagelist}
        </div>
    </div>
    <div class="footer">...</div>
</body>
</html>

第三步：常见修改与自定义

你可以根据自己的需求对 search.htm 进行修改了。

修改 1：自定义搜索框的样式和功能

你可以像修改普通网页的表单一样，修改 <form> 标签内的内容。

示例：美化搜索框

<!-- 原始代码 -->
<form name="formsearch" action="{dede:global name='cfg_phpurl'/}/search.php">
    <input type="hidden" name="kwtype" value="0" />
    <input type="hidden" name="searchtype" value="titlekeyword" />
    <input type="text" name="q" class="search-keyword" value="{dede:global name='keyword'/}" />
    <button type="submit" class="search-submit">搜索</button>
</form>
<!-- 修改后，增加更美观的样式和占位符文本 -->
<form name="formsearch" action="{dede:global name='cfg_phpurl'/}/search.php" class="my-search-form">
    <div class="search-input-group">
        <input type="hidden" name="kwtype" value="0" />
        <input type="hidden" name="searchtype" value="titlekeyword" />
        <input type="text" name="q" class="search-keyword" placeholder="请输入关键词..." value="{dede:global name='keyword'/}" />
        <button type="submit" class="search-btn"><i class="fa fa-search"></i></button>
    </div>
</form>

对应的 CSS 样式 (可以加到 style.css 文件中):

.my-search-form {
    margin: 20px 0;
    text-align: center;
}
.search-input-group {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 25px;
    overflow: hidden;
}
.search-keyword {
    border: none;
    outline: none;
    padding: 10px 15px;
    width: 300px;
}
.search-btn {
    border: none;
    background: #007bff;
    color: white;
    padding: 10px 20px;
    cursor: pointer;
}
.search-btn:hover {
    background: #0056b3;
}

修改 2：自定义搜索结果的显示

这是最核心的部分。{dede:list} 标签内的代码决定了每条搜索结果的展示方式。

示例：改变文章列表的布局

<!-- 原始代码 -->
<div class="listbox">
    {dede:list pagesize='10'}
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
    <p class="intro">[field:description function='cn_substr(@me, 150)'/]...</p>
    <div class="info">
        <span>作者：[field:writer/]</span>
        <span>时间：[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        <span>点击：[field:click/]</span>
    </div>
    {/dede:list}
</div>
<!-- 修改后，使用卡片式布局 -->
<div class="article-list">
    {dede:list pagesize='10'}
    <article class="article-item">
        <h2><a href="[field:arcurl/]" title="[field:title/]">[field:title/]</a></h2>
        <div class="article-content">
            <p>[field:description function='cn_substr(@me, 200)'/]...</p>
        </div>
        <div class="article-meta">
            <span><i class="fa fa-user"></i> [field:writer/]</span>
            <span><i class="fa fa-clock-o"></i> [field:pubdate function="MyDate('Y-m-d H:i',@me)"/]</span>
            <span><i class="fa fa-eye"></i> [field:click/] 次阅读</span>
        </div>
    </article>
    {/dede:list}
</div>

对应的 CSS 样式:

.article-list {
    padding: 0;
}
.article-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
}
.article-item h2 {
    font-size: 20px;
    margin-bottom: 10px;
}
.article-item h2 a {
    color: #333;
    text-decoration: none;
}
.article-item h2 a:hover {
    color: #007bff;
}
.article-meta {
    color: #999;
    font-size: 12px;
    margin-top: 10px;
}
.article-meta span {
    margin-right: 15px;
}

修改 3：自定义分页条

{dede:pagelist} 标签用于生成分页导航。

示例：美化分页条

<!-- 原始代码 -->
<div class="page">
    {dede:pagelist listsize='4' listitem='info,index,end,pre,next,pageno'}
    {/dede:pagelist}
</div>
<!-- 修改后，使用更现代的分页样式 -->
<div class="pagination">
    {dede:pagelist listitem='pre,next,end' listsize='2'}
    {/dede:pagelist}
</div>

对应的 CSS 样式:

.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
.pagination a, .pagination span {
    margin: 0 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-decoration: none;
    color: #333;
}
.pagination a:hover {
    background-color: #f5f5f5;
}
.pagination .thisclass {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.pagination .pageinfo {
    border: none;
    padding: 8px 12px;
    color: #666;
}

第四步：高级技巧与常见问题

如何在搜索结果页显示“没有找到结果”？

当搜索结果为空时，{dede:list} 标签不会输出任何内容，你可以使用 {dede:global name='keyword'/} 来显示用户搜索的关键词，并用一个判断来提示“没有结果”。

{dede:list pagesize='10'}
    <!-- 这里是正常的结果列表 -->
    <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
{/dede:list}
{dede:if empty($dlist)}
    <!-- $dlist (即列表数据) 为空，则显示此内容 -->
    <div class="no-result">
        抱歉，没有找到与 "<strong>{dede:global name='keyword'/}</strong>" 相关的结果。
        <br>建议您：
        <ul>
            <li>检查输入的关键词是否正确</li>
            <li>尝试使用更简洁的关键词</li>
            <li>尝试使用同义词进行搜索</li>
        </ul>
    </div>
{/dede:if}

如何修改搜索结果的排序方式？

在 search.php 文件中，你可以找到类似 $orderby = isset($orderby) && in_array($orderby, array('hot', 'click', 'pubdate', 'lastpost')) ? $orderby : 'default'; 的代码，默认情况下，搜索结果可能按默认顺序或相关度排序，如果你想修改默认排序，可以编辑 search.php 文件，将 $orderby 的默认值改为你想要的，'pubdate' (按发布时间)。

如何修改每页显示的数量？

在 {dede:list} 标签中，使用 pagesize 属性来控制。{dede:list pagesize='20'} 表示每页显示20条结果。

修改 DedeCMS 搜索页模板的流程可以总结为：

备份：复制 search.htm 并重命名。
定位：打开 /templets/你的模板文件夹/search.htm 文件。
修改：
- 搜索框：修改 <form> 标签内的 HTML 和 CSS。
- 结果列表：修改 {dede:list} 标签内的 HTML 结构和 CSS 样式。
- 分页：修改 {dede:pagelist} 标签及其样式。
- 无结果提示：使用 {dede:if empty($dlist)} 添加自定义提示。
刷新：保存文件后，清空网站缓存（在 DedeCMS 后台 -> 系统 -> 站点缓存管理）,然后刷新搜索页查看效果。

通过以上步骤，你就可以打造一个与网站整体风格完美融合的、功能完善的搜索结果页了。

dede搜索页模板怎么改？

核心概念

第一步：定位并准备模板文件

第二步：了解 `search.htm` 的基本结构

第三步：常见修改与自定义

修改 1：自定义搜索框的样式和功能

修改 2：自定义搜索结果的显示

修改 3：自定义分页条

第四步：高级技巧与常见问题

如何在搜索结果页显示“没有找到结果”？

如何修改搜索结果的排序方式？

如何修改每页显示的数量？

相关文章

目录[+]

核心概念

第一步：定位并准备模板文件

第二步：了解 search.htm 的基本结构

第三步：常见修改与自定义

修改 1：自定义搜索框的样式和功能

修改 2：自定义搜索结果的显示

修改 3：自定义分页条

第四步：高级技巧与常见问题

如何在搜索结果页显示“没有找到结果”？

如何修改搜索结果的排序方式？

如何修改每页显示的数量？

相关文章

目录[+]

第二步：了解 `search.htm` 的基本结构