搜索
织梦建站

织梦产品频道页模板

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

织梦的产品频道页是电商、企业官网展示产品的核心页面，一个完整的产品频道页通常包含以下几个部分：

  1. 页面头部: 包含网站Logo、主导航、搜索框等。
  2. 面包屑导航: 显示当前页面的层级路径，如“首页 > 产品中心 > 手机”。
  3. 左侧分类/筛选区: 用于按产品分类、品牌、属性等进行筛选。
  4. 中间产品列表区: 核心区域，以列表或网格形式展示产品。
  5. 右侧边栏: 可能包含热门产品、推荐产品、下载中心等。
  6. 页面底部: 版权信息、友情链接等。

下面,我们将分步讲解如何制作这个模板，并提供核心的代码示例。

第一步：准备工作

  1. 创建栏目:

    • 在织梦后台,进入【栏目管理】->【添加顶级栏目】。
    • 栏目名称：产品中心”。
    • 栏目类型：选择“频道封面”。
    • 内容模型：选择“产品”（如果没有，需要先创建一个“产品”模型）。
    • 列表模板：填写你将要创建的模板文件名，product_list.htm。
    • 列表命名规则：保持默认即可，{typedir}/list_{tid}_{page}.html。
    • 勾选“使用栏目交叉栏目”，方便后续关联。

  2. 创建产品模型和字段:

    • 进入【模型管理】->【内容模型管理】->【添加模型】，创建一个名为“产品”的模型。
    • 在这个模型下,你可以添加自定义字段，
      • brand (品牌)：单选字段
      • price (价格)：数字或浮点数字段
      • specification (规格)：多行文本字段
      • picture (产品图集)：字段类型选择“图片(多图)”

  3. 创建子栏目:

    • 在“产品中心”栏目下，添加子栏目，手机”、“电脑”、“相机”等。
    • 这些子栏目的栏目类型也选择“频道封面”，并使用相同的列表模板 product_list.htm。
    • 这样,当你访问“手机”栏目时，它会自动继承“产品中心”的模板，并只显示“手机”分类下的产品。

第二步：制作模板文件 (product_list.htm)

在织梦的模板目录 /templets/default/ 下（或你自定义的模板目录），创建一个名为 product_list.htm 的文件。

下面是这个文件的结构和核心代码。

整体结构 (HTML框架)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">{dede:global.cfg_webname/} - {dede:field.title/}</title>
    <meta name="description" content="{dede:field.description function='html2text(@me)'/}" />
    <meta name="keywords" content="{dede:field.keywords/}" />
    <link rel="stylesheet" href="/templets/default/css/style.css"> <!-- 引入你的CSS文件 -->
</head>
<body>
    <!-- 头部文件 -->
    {dede:include filename="head.htm"/}
    <!-- 主要内容区 -->
    <div class="main-container">
        <!-- 左侧边栏 (分类和筛选) -->
        <div class="sidebar">
            <!-- 分类列表 -->
            <div class="category-box">
                <h3>产品分类</h3>
                {dede:channel type='son' currentstyle="<a href='~typelink~' class='active'>~typename~</a>"}
                <a href='[field:typelink/]'>[field:typename/]</a>
                {/dede:channel}
            </div>
            <!-- 品牌筛选 (如果品牌字段是单选) -->
            <div class="filter-box">
                <h3>品牌筛选</h3>
                {dede:sql sql="SELECT DISTINCT `brand` FROM `dede_addonproduct` WHERE `brand` != '' ORDER BY `brand` ASC"}
                <a href="[field:global name='cfg_phpurl'/]/product.php?brand=[field:brand/]">[field:brand/]</a>
                {/dede:sql}
            </div>
            <!-- 其他自定义筛选... -->
        </div>
        <!-- 中间产品列表区 -->
        <div class="content-list">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <a href="{dede:global.cfg_cmsurl/}/">首页</a> > <a href="{dede:field.typeurl/}">{dede:field.typename/}</a>
            </div>
            <!-- 列表标题和排序 -->
            <div class="list-header">
                <h2>{dede:field.title/}</h2>
                <div class="sort">
                    <span>排序：</span>
                    <a href="{dede:field name='phpurl'/}/product.php?tid={dede:field.id/}&orderby=senddate">发布时间</a>
                    <a href="{dede:field name='phpurl'/}/product.php?tid={dede:field.id/}&orderby=hot">人气</a>
                    <a href="{dede:field name='phpurl'/}/product.php?tid={dede:field.id/}&orderby=rank">评分</a>
                </div>
            </div>
            <!-- 产品列表循环开始 -->
            <ul class="product-grid">
                {dede:list pagesize='12' titlelen='40'}
                <li>
                    <a href="[field:arcurl/]">
                        <!-- 获取产品图集中的第一张图 -->
                        <img src="[field:litpic/]" alt="[field:title/]">
                        <h3>[field:title/]</h3>
                        <p class="price">¥ [field:price/]</p>
                        <p class="desc">[field:description function='cn_substr(@me, 100)'/]...</p>
                    </a>
                </li>
                {/dede:list}
            </ul>
            <!-- 分页条 -->
            <div class="pagination">
                {dede:pagelist listsize='4' listitem='index,pre,next,end,pageno'}
            </div>
        </div>
        <!-- 右侧边栏 -->
        <div class="sidebar-right">
            <!-- 热门产品 -->
            {dede:arclist titlelen='30' row='5' typeid='all' flag='h'}
            <div class="hot-item">
                <a href="[field:arcurl/]">[field:title/]</a>
            </div>
            {/dede:arclist}
            <!-- 推荐产品 -->
            {dede:arclist titlelen='30' row='5' typeid='all' flag='c'}
            <div class="commend-item">
                <a href="[field:arcurl/]">[field:title/]</a>
            </div>
            {/dede:arclist}
        </div>
    </div>
    <!-- 底部文件 -->
    {dede:include filename="footer.htm"/}
</body>
</html>

核心标签详解

  • {dede:include filename="head.htm"/}: 引入公共头部文件，实现代码复用。
  • {dede:channel type='son' ...}: 调用当前栏目的子栏目。currentstyle 用于定义当前选中栏目的样式。
  • {dede:sql ...}: 执行自定义SQL查询，这里用来查询 dede_addonproduct 表（产品附加表）中所有不重复的品牌。注意： 表名前缀 dede_ 可能不同，请根据你的实际配置修改。
  • {dede:list ...}: 产品列表的核心标签。
    • pagesize='12': 每页显示12条产品。
    • titlelen='40': 标题最多显示40个字符。
    • [field:arcurl/]: 文章（产品）的链接。
    • [field:litpic/]: 产品缩略图。
    • [field:title/]: 产品标题。
    • [field:price/]: 产品价格（需要在模型中定义price字段）。
    • [field:description function='cn_substr(@me, 100)'/]: 对产品描述进行截取，显示前100个字符。function 属性可以调用PHP函数来处理字段值。
  • {dede:pagelist ...}: 分页条标签。
    • listsize='4': 显示4个页码。
    • listitem='index,pre,next,end,pageno': 显示首页、上一页、页码、下一页、末页。
  • {dede:arclist ...}: 调用文章列表，常用于侧边栏。
    • flag='h': 调带“h”标志的文章（热门）。
    • flag='c': 调带“c”标志的文章（推荐）。
    • typeid='all': 调用所有栏目的内容。

第三步：CSS样式 (style.css)

为了让页面看起来美观,你需要编写CSS，下面是一个简单的示例，你可以根据需要扩展。

/* 主要布局 */
.main-container {
    display: flex;
    width: 1200px;
    margin: 20px auto;
    gap: 20px;
}
.sidebar {
    width: 200px;
    background: #f4f4f4;
    padding: 15px;
    border-radius: 5px;
}
.content-list {
    flex: 1;
}
.sidebar-right {
    width: 250px;
}
/* 产品网格布局 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}
.product-grid li {
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    transition: transform 0.2s;
}
.product-grid li:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.product-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}
.product-grid h3 {
    font-size: 16px;
    margin: 10px 0;
}
.product-grid .price {
    color: #ff4400;
    font-weight: bold;
    font-size: 18px;
}
.product-grid .desc {
    color: #666;
    font-size: 12px;
    padding: 0 10px;
}
/* 分页样式 */
.pagination {
    text-align: center;
    margin-top: 30px;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid #ddd;
    text-decoration: none;
}
.pagination a:hover, .pagination .pageNow {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

第四步：进阶技巧与注意事项

  1. 筛选功能实现:

    • 左侧的“品牌筛选”链接指向 product.php?tid=xx&brand=xx。
    • 你需要修改 product.php 文件，在查询数据库时增加对 brand 参数的判断。
    • 在 product.php 中找到生成列表的SQL语句，添加类似 AND a.brand = '{$brand}' 的条件。
    • 这需要对PHP和织梦的底层逻辑有一定了解,或者使用现成的筛选插件。

  2. 图片调用:

    • 如果产品图集是“多图”字段，默认 [field:litpic/] 调用的是上传时设置的“缩略图”。
    • 如果你想调用图集中的第一张图,可以使用 [field:imgsrc/] 或者通过自定义函数来实现。

  3. 缓存问题:

    • 织梦默认开启页面缓存,当你修改模板后，如果页面没有更新，可能是缓存导致的。
    • 可以在后台【系统】->【SQL命令行工具】中执行 DELETE FROM dede_arccache; 来清除所有文章缓存。
    • 或者临时关闭缓存：【系统基本参数】->【性能选项】，将“启用页面静态化”设为“否”。

  4. 响应式设计:

    • 现代网页需要适配手机,你可以使用媒体查询（Media Queries）来修改CSS，让 .main-container 在小屏幕下变为单列布局。

通过以上步骤,你就可以构建一个功能完整、样式美观的织梦产品频道页了，模板制作是一个熟能生巧的过程，多看官方文档和优秀案例，多动手实践，很快就能掌握。

-- 展开阅读全文 --
头像
c语言struct定义
« 上一篇 05-04
dede数据库主机怎么配置或修改？
下一篇 » 05-04

相关文章

取消
微信二维码
支付宝二维码

目录[+]