织梦移动端搜索页面模板-网站模板-锦华智联科技

准备工作：确认并设置好织梦的移动端。
创建模板文件：编写HTML、CSS和JavaScript代码。
创建搜索结果页面：在后台设置一个专门的搜索结果页面。
绑定模板：将创建好的模板文件与后台的搜索结果页面进行关联。
优化与美化：添加样式和交互效果,提升用户体验。

第一步：准备工作

在开始之前，请确保你已经为你的织梦网站开启了移动端支持，织梦自带的 m 目录是移动端的核心，如果你的网站没有,你需要先安装并配置好移动端。

（图片来源网络，侵删）

检查移动端目录：确认你的网站根目录下是否有 /m/ 文件夹。
设置移动端域名：在织梦后台 系统 -> 系统基本参数 -> 核心设置 中，找到 手机访问域名 并填写你的移动端域名（如 http://你的域名.com/m/）。
确认标签调用正常：确保你在移动端模板中可以正常调用织梦的标签，如 {dede:arclist} 等。

第二步：创建移动端搜索页面模板文件

我们将创建两个核心文件：一个用于搜索框和输入页面，另一个用于展示搜索结果。

文件 1：搜索框页面 (`search.htm`)

这个页面是用户点击搜索按钮后看到的页面，它本身不显示结果,而是提供一个更友好的搜索结果展示界面。

在你的移动端模板目录 /m/templets/你的模板文件夹/ 下，新建一个名为 search.htm 的文件。
将以下代码复制进去：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">搜索结果 - {dede:global.cfg_webname/}</title>
    <link rel="stylesheet" href="{dede:global.cfg_cmspath/}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style.css">
    <style>
        /* 搜索结果页专用样式 */
        .search-result-header {
            background-color: #f8f8f8;
            padding: 10px;
            border-bottom: 1px solid #e7e7e7;
        }
        .search-input-group {
            display: flex;
            align-items: center;
        }
        .search-input {
            flex-grow: 1;
            border: none;
            outline: none;
            padding: 8px;
            font-size: 16px;
        }
        .search-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 3px;
            margin-left: 5px;
        }
        .search-keyword {
            color: #007bff;
            font-weight: bold;
        }
        .result-item {
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .result-item h4 a {
            color: #333;
            font-size: 16px;
            font-weight: normal;
        }
        .result-item .info {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }
        .result-item .summary {
            color: #666;
            font-size: 14px;
            margin-top: 8px;
            line-height: 1.5;
        }
        .no-result {
            text-align: center;
            padding: 50px 15px;
            color: #999;
        }
    </style>
</head>
<body>
    <!-- 顶部搜索框 -->
    <div class="search-result-header">
        <div class="search-input-group">
            <form action="/plus/search.php" method="get">
                <input type="text" name="q" class="search-input" placeholder="请输入关键词" value="{dede:global name='keyword' function='RemoveXSS(@me)'/}" required>
                <button type="submit" class="search-btn">搜索</button>
            </form>
        </div>
    </div>
    <!-- 搜索结果列表 -->
    <div class="container">
        <!-- 搜索提示 -->
        <div class="alert alert-info" style="margin-top: 10px; margin-bottom: 10px;">
            搜索 “<span class="search-keyword">{dede:global name='keyword' function='RemoveXSS(@me)'/}</span>” 的结果，共找到 <strong>{dede:global name='resultnum'/}</strong> 条
        </div>
        <!-- 遍历搜索结果 -->
        {dede:loop table='dede_search_keywords' sort='keyword' row='10' if=''}
        {/dede:loop}
        {dede:arclist titlelen='40' row='10' typeid='' keyword='{dede:global name='keyword' function='RemoveXSS(@me)'/}'}
        <div class="result-item">
            <h4><a href="[field:arcurl/]">[field:title function='htmlspecialchars(@me)'/]</a></h4>
            <div class="info">[field:pubdate function="MyDate('Y-m-d H:i',@me)"] &nbsp;&nbsp; [field:typename/]</div>
            <div class="summary">[field:description function='cn_substr(@me, 150)'/]...</div>
        </div>
        {/dede:arclist}
        <!-- 无结果提示 -->
        {dede:global name='resultnum' runphp='yes'}
        if(@me==0) @me = '<div class="no-result"><p>很抱歉，没有找到与 “<strong>{dede:global name='keyword' function='RemoveXSS(@me)'/}</strong>” 相关的内容。</p><p>建议您：</p><ul><li>检查输入的关键字是否正确</li><li>尝试使用其他关键词</li><li>减少关键词的字数</li></ul></div>';
        else @me = '';
        {/dede:global}
    </div>
    <!-- 底部导航 -->
    {dede:include filename='footer.htm'/}
    <script src="{dede:global.cfg_cmspath/}/static/jquery/jquery.min.js"></script>
    <script src="{dede:global.cfg_cmspath/}/static/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

代码解析：

<head> 部分：设置了移动端必需的 viewport 标签，引入了 Bootstrap 和模板的 CSS 文件。
搜索框：<form action="/plus/search.php" method="get"> 是织梦搜索的标准表单。name="q" 是关键词的默认字段。value="{dede:global name='keyword'...}" 会自动回显用户输入的关键词。
搜索结果：使用 {dede:arclist} 标签来调用搜索结果。
- keyword='{dede:global name='keyword'...}'：这是关键，它将全局变量 keyword（即用户搜索的关键词）传递给 arclist 标签,实现搜索功能。
- titlelen, row 等是常规的列表参数。
无结果处理：使用 runphp='yes' 的全局变量 {dede:global name='resultnum'} 来判断搜索结果数量，如果为0,则显示友好的无结果提示。
底部导航：{dede:include filename='footer.htm'}/ 用于引入移动端共同的底部文件。

第三步：创建搜索结果页面

这个步骤是在织梦后台完成的，目的是告诉系统当用户搜索时，使用我们刚刚创建的 search.htm 模板来展示结果。

（图片来源网络，侵删）

登录织梦后台。
进入 核心 -> 频道模型 -> 自由列表管理。
点击 增加自由列表。
填写列表信息：
- 列表名称：可以填写“移动端搜索结果”。
- 列表目录：可以留空,系统会自动生成。
- 列表模板：这是最关键的一步！ 点击后面的“选择模板”按钮，在弹出的窗口中选择你刚刚创建的 /m/templets/你的模板文件夹/search.htm 文件。
- 命名规则：可以留空,系统会自动处理。
点击“保存”按钮。

第四步：绑定模板并测试

绑定搜索页面：
- 进入 系统 -> 系统基本参数 -> 其他选项。
- 找到 搜索页面模板 这一栏，点击后面的“选择模板”按钮。
- 在弹出的窗口中，同样选择你刚刚创建的 search.htm 文件。
- 点击“保存”按钮。
测试：
- 访问你的移动端首页（http://你的域名.com/m/）。
- 找到搜索框（如果你的首页没有，可以在 search.htm 里直接测试）。
- 输入一个关键词，织梦”,然后点击搜索。
- 页面应该会跳转到 /plus/search.php,并且展示的内容和样式都是你自定义的移动端搜索结果页面。

第五步：优化与美化

上面的模板已经具备了基本功能,但你可以根据自己网站的风格进行美化。

CSS 样式优化：
（图片来源网络，侵删）
- 修改 .search-result-header 的背景色、边框样式。
- 调整 .search-btn 的颜色、圆角和悬停效果。
- 修改 .result-item 的间距、字体大小和颜色,使其更符合你的设计。
增加分页功能：在 {dede:arclist} 标签后,添加织梦的分页标签：
```
{dede:pagelist listsize='4' listitem='pre,next,end,option'/}
```
这会在搜索结果列表底部显示分页导航。
增加交互效果 (JS)：
- 可以添加一点 JavaScript，让搜索框在获得焦点时自动清空（如果关键词是默认的占位符）。
- 或者为搜索结果项添加点击反馈效果（如背景色变暗）。
考虑使用 AJAX 搜索：对于更好的用户体验，可以实现 AJAX 搜索，当用户输入关键词时，不跳转页面，而是通过异步请求直接在下拉列表中展示搜索结果，这需要编写更多的 JavaScript 代码，并可能需要修改 search.php 文件以支持 JSON 格式的输出，但对于大多数网站来说,标准的搜索页面已经足够。

通过以上步骤，你就成功地为你的织梦网站创建了一个功能完善、样式美观的移动端搜索页面模板。

织梦移动端搜索页面模板