搜索
DEDE建站

dede移动端搜索页面如何实现？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 2 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 30 分钟
位置： 首页 › DEDE建站 › 正文

DedeCMS 本身没有像 PC 端那样提供一个独立的、功能强大的移动端搜索页面模板，它的移动端通常依赖于 PC 端的模板，通过 m 目录或 mobile 目录来调用不同的移动端样式。

dede移动端搜索页面
（图片来源网络，侵删）

要实现一个功能完善的移动端搜索页面,通常有两种主流方法：

  1. PC 模板改造法（推荐）：这是最简单、最常用且最稳定的方法，我们直接修改 PC 端的搜索模板，使其在移动端访问时自动切换为移动端样式。
  2. 独立移动模板法：为移动端创建一套完全独立的搜索模板文件，这种方法更灵活，但维护起来更复杂，需要对 DedeCMS 的模板调用机制有更深的理解。

下面我将重点讲解第一种方法，因为它对大多数用户来说是最实用的。

PC 模板改造法 (推荐)

这种方法的核心思想是：移动端和 PC 端共用同一个搜索结果模板文件，但通过不同的 CSS 样式来控制显示效果。

步骤 1：定位搜索模板文件

DedeCMS 的搜索结果页模板文件通常位于：

dede移动端搜索页面
（图片来源网络，侵删）

/templets/default/search.htm

这是默认模板,如果你使用了其他模板，请将 default 替换为你自己的模板目录名。

步骤 2：分析并修改 search.htm 模板

打开 search.htm 文件，你会看到类似这样的结构：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global name='keyword'/} - {dede:global name='cfg_webname'/}搜索结果</title>
    <!-- 引入PC端CSS -->
    <link href="{dede:global name='cfg_cmspath'/}/skin/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <!-- 搜索框 -->
    <form name="formsearch" action="{dede:global name='cfg_phpurl'/}/search.php">
        <input type="hidden" name="kwtype" value="0" />
        <input type="text" name="q" class="search-keyword" value="{dede:global name='keyword'/}" />
        <button type="submit" class="search-submit">搜索</button>
    </form>
    <!-- 搜索结果列表 -->
    <div class="result">
        {dede:list pagesize='10'}
        <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p class="intro">[field:description function='cn_substr(@me,200)'/]...</p>
        <p class="info">发布时间：[field:pubdate function="MyDate('Y-m-d',@me)"/] &nbsp; 来源：[field:source/] &nbsp; 点击：[field:click/]</p>
        {/dede:list}
    </div>
    <!-- 分页 -->
    <div class="page">
        {dede:pagelist listsize='4' listitem='info,index,pre,next,end'/}
    </div>
</body>
</html>

步骤 3：添加移动端适配的关键代码

为了在移动端有更好的体验,我们需要对 search.htm 进行两处关键修改：

添加移动端适配的 meta 标签和响应式 CSS 引入

在 <head> 标签内，加入以下代码：

<head>
    <meta charset="utf-8">
    <!-- 添加移动端适配的viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">{dede:global name='keyword'/} - {dede:global name='cfg_webname'/}搜索结果</title>
    <!-- 引入PC端CSS -->
    <link href="{dede:global name='cfg_cmspath'/}/skin/style.css" rel="stylesheet" type="text/css" />
    <!-- 【关键】引入移动端CSS -->
    <!-- 你可以创建一个新的移动端CSS文件，/templets/default/mobile_search.css -->
    <!-- 然后在这里引入它 -->
    <link href="{dede:global name='cfg_cmspath'/}/skin/mobile_search.css" rel="stylesheet" type="text/css" />
</head>

为模板元素添加统一的类名

为了让我们的移动端 CSS 能够精准地控制样式，需要给 HTML 元素加上一些有意义的类名。

  • 搜索框：

    <form name="formsearch" action="{dede:global name='cfg_phpurl'/}/search.php">
    <input type="hidden" name="kwtype" value="0" />
    <input type="text" name="q" class="search-keyword" placeholder="请输入关键词" value="{dede:global name='keyword'/}" />
    <button type="submit" class="search-submit">搜索</button>
</form>

    给 input 添加了 placeholder 属性，提升用户体验。

  • 搜索结果列表：

    <!-- 搜索结果列表 -->
<div class="search-result-list">
    {dede:list pagesize='10'}
    <div class="result-item">
        <h3 class="result-title"><a href="[field:arcurl/]">[field:title/]</a></h3>
        <p class="result-summary">[field:description function='cn_substr(@me,200)'/]...</p>
        <p class="result-meta">发布时间：[field:pubdate function="MyDate('Y-m-d',@me)"/] &nbsp; 来源：[field:source/] &nbsp; 点击：[field:click/]</p>
    </div>
    {/dede:list}
</div>

    我用更具语义化的类名（如 search-result-list, result-item）替换了原来的 result。

  • 分页：

    <!-- 分页 -->
<div class="pagination">
    {dede:pagelist listsize='4' listitem='info,index,pre,next,end'/}
</div>

    将类名从 page 改为更通用的 pagination。

步骤 4：创建移动端样式文件 mobile_search.css

在 /templets/default/skin/ 目录下，新建一个名为 mobile_search.css 的文件，这个文件将专门用于覆盖 PC 端的样式，以适应移动端屏幕。

mobile_search.css 示例代码：

/* 重置一些默认样式，确保在不同浏览器下表现一致 */
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; background-color: #f5f5f5; margin: 0; padding: 20px; }
/* 搜索框样式 */
.search-keyword {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* 防止iOS上自动缩放 */
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 10px;
}
.search-submit {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.search-submit:active { background-color: #0056b3; }
/* 搜索结果列表样式 */
.search-result-list {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 0;
    margin-bottom: 20px;
}
.result-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
}
.result-item:last-child {
    border-bottom: none;
}
.result-title {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
}
.result-title a {
    color: #007bff;
    text-decoration: none;
}
.result-title a:hover { text-decoration: underline; }
.result-summary {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}
.result-meta {
    margin: 0;
    font-size: 12px;
    color: #999;
}
/* 分页样式 */
.pagination {
    text-align: center;
    margin-top: 20px;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}
.pagination a:hover { background-color: #f5f5f5; }
.pagination .this { background-color: #007bff; color: #fff; border-color: #007bff; }
.pagination .pageinfo { border: none; }

步骤 5：测试

当你用手机或浏览器的开发者工具（切换到移动设备模式）访问你的网站搜索页面时，页面就会自动加载 mobile_search.css，呈现出适合移动端的布局和样式。

独立移动模板法 (进阶)

如果你的移动端和 PC 端风格差异巨大，或者需要完全不同的逻辑，可以采用此方法。

原理

DedeCMS 在加载模板时，会检查是否存在一个名为 mobile 的模板目录，如果存在，它会优先从这个目录加载模板。

步骤

  1. 创建移动端模板目录： 在 /templets/ 目录下，复制你的 PC 端模板目录（default）并重命名为 mobile。 /templets/mobile/

  2. 复制并修改模板文件： 将 /templets/default/search.htm 复制到 /templets/mobile/ 目录下。

  3. 修改移动端模板： 在 /templets/mobile/search.htm 中，你可以完全重写 HTML 结构和样式，你可以直接在 <head> 里写内联样式，或者引入一个专门为移动端设计的 CSS 文件。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>移动端搜索结果</title>
    <!-- 这里引入移动端独有的CSS -->
    <style>
        /* 在这里写所有移动端样式 */
    </style>
</head>
<body>
    <!-- 这里写移动端专属的HTML结构 -->
    <h1>移动端搜索页</h1>
    {dede:list}
    <div>[field:title/]</div>
    {/dede:list}
</body>
</html>

  4. 测试： 访问网站，DedeCMS 会自动检测并使用 /templets/mobile/ 下的模板文件。

总结与建议

特性 方法一 (PC模板改造) 方法二 (独立移动模板)
实现难度 简单 较高
维护成本 低 (只需维护一套核心逻辑) 高 (需要维护两套模板)
灵活性 中等 (受限于PC端HTML结构) 高 (可以完全自定义)
推荐场景 绝大多数网站，特别是移动端和PC端内容、逻辑基本一致，只是样式不同。 移动端和PC端有巨大差异，例如移动端是 H5 应用，PC端是传统门户。

对于绝大多数 DedeCMS 用户，我强烈推荐使用【方法一】，它成本低、见效快，并且能很好地满足移动端适配的需求，只有在移动端体验需要完全颠覆 PC 端设计时，才考虑投入更多精力去使用【方法二】。

-- 展开阅读全文 --
头像
C程序设计语言谭浩强版该怎么学？
« 上一篇 今天
dede5.7后台破解方法是否安全可靠？
下一篇 » 今天

相关文章

dede手机m search.htm如何实现移动端搜索？
取消
微信二维码
支付宝二维码

目录[+]