搜索
织梦建站

织梦企业产品详情页模板如何适配多终端？

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

核心概念

在织梦中,一个详情页的生成和显示，主要依赖两个文件：

织梦企业产品详情页模板
（图片来源网络，侵删）

  1. 动态页面文件: product.php (或你自定义的文件名)

    • 作用: 接收URL中的参数（通常是产品ID），从数据库中查询对应的产品信息，然后加载并解析对应的模板文件。
    • 类型: PHP文件，包含PHP逻辑代码。

  2. 模板文件: product.htm (或你自定义的文件名)

    • 作用: 定义产品详情页的HTML结构和样式，里面使用织梦的模板标签（如{dede:field}）来动态显示从product.php传过来的数据。
    • 类型: HTML文件，包含织梦模板标签。

创建详情页模板文件 (product.htm)

这是你看到的产品最终页面,是设计师工作的主要阵地，我们将分步构建一个功能完善的产品详情页。

步骤 1: 创建模板文件

在你的织梦模板目录下（通常是 /templets/你的模板文件夹/），新建一个名为 product.htm 的文件。

织梦企业产品详情页模板
（图片来源网络，侵删）

步骤 2: 编写模板内容

下面是一个完整的 product.htm 模板代码，包含了常见的模块，并附有详细注释。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">{dede:field.title/} - {dede:global.cfg_webname/}</title>
    <meta name="description" content="{dede:field.description function='html2text(@me)'/}">
    <meta name="keywords" content="{dede:field.keywords/}">
    <!-- 引入CSS文件 -->
    <link rel="stylesheet" href="/templets/你的模板文件夹/css/style.css">
</head>
<body>
    <!-- 顶部导航等公共部分 -->
    {dede:include filename="head.htm"/}
    <div class="main-container">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
            <a href="/">首页</a> > <a href="/product/">产品中心</a> > <a href="[field:typelink/]">{dede:field.typename/}</a> > <span>{dede:field.title/}</span>
        </div>
        <!-- 产品详情主体内容 -->
        <div class="product-detail">
            <!-- 左侧：产品图片 -->
            <div class="product-gallery">
                <!-- 主图 -->
                <div class="main-image">
                    <!-- 使用织梦的图片标签，支持缩略图 -->
                    <img src="{dede:field.litpic/}" alt="{dede:field.title/}" id="main-img">
                </div>
                <!-- 缩略图列表 -->
                <div class="thumbnail-list">
                    <!-- 调用附加表里的图片，通常用自定义函数处理 -->
                    {dede:field name='body' runphp='yes'}
                        $images = array();
        preg_match_all('/<img.*?src="(.*?)".*?>/is', @me, $imgarray);
        $imgcount = count($imgarray[1]);
        if($imgcount > 0){
            for($i=0;$i<$imgcount;$i++){
                if($i==0) continue; // 跳过第一张图，因为它是主图
                $images[] = "<a href='".$imgarray[1][$i]."' class='thumb'><img src='".$imgarray[1][$i]."' alt='产品图片".$i."'></a>";
            }
            @me = implode('', $images);
        }else{
            @me = '';
        }
                    {/dede:field}
                    <!-- 这里可以手动添加缩略图，或者使用更复杂的图集标签 -->
                    <!-- <a href="大图地址" class="thumb"><img src="缩略图地址" alt=""></a> -->
                </div>
            </div>
            <!-- 右侧：产品信息 -->
            <div class="product-info">
                <h1 class="product-title">{dede:field.title/}</h1>
                <div class="product-meta">
                    <p class="product-code">产品编号：{dede:field.id/}</p>
                    <p class="product-price">
                        <span class="price-label">价格：</span>
                        <!-- 这里可以根据你的产品模型，调用不同的价格字段 -->
                        <span class="price-value">面议</span> <!-- 或 {dede:field.price/} -->
                    </p>
                </div>
                <div class="product-actions">
                    <a href="javascript:;" class="btn btn-inquiry">立即咨询</a>
                    <a href="javascript:;" class="btn btn-favorite">收藏</a>
                </div>
                <div class="product-summary">
                    <h3>产品简介</h3>
                    <p>{dede:field.description function='cn_substr(@me, 200)'/}...</p>
                </div>
                <!-- 如果需要，可以在这里加入属性选择，如颜色、尺寸等 -->
            </div>
        </div>
        <!-- 产品详细内容/图文说明 -->
        <div class="product-content">
            {dede:field.body/}
        </div>
        <!-- 相关产品推荐 -->
        <div class="related-products">
            <h2>相关产品推荐</h2>
            <ul class="product-list">
                <!-- 调用同栏目下的其他产品作为推荐 -->
                {dede:arclist typeid='[field:typeid/]' titlelen='30' row='4'}
                <li>
                    <a href="[field:arcurl/]">
                        <img src="[field:litpic/]" alt="[field:title/]">
                        <h3>[field:title/]</h3>
                    </a>
                </li>
                {/dede:arclist}
            </ul>
        </div>
    </div>
    <!-- 底部等公共部分 -->
    {dede:include filename="footer.htm"/}
    <!-- 引入JS文件 -->
    <script src="/templets/你的模板文件夹/js/jquery.min.js"></script>
    <script src="/templets/你的模板文件夹/js/main.js"></script>
</body>
</html>

product.htm 核心标签解析：

  • {dede:field.title/}: 调用文章的标题。
  • {dede:field.description/}: 调用文章的摘要（description）。
  • {dede:field.keywords/}: 调用文章的关键词。
  • {dede:field.litpic/}: 调用文章的缩略图。
  • {dede:field.body/}: 最重要的标签，调用文章的正文内容，这里存放了产品的详细图文介绍。
  • {dede:field.id/}: 调用文章的ID。
  • {dede:field.typename/}: 调用当前文章所属的分类名称。
  • [field:typelink/]: 调用当前文章所属分类的链接。
  • {dede:include filename="head.htm"/}: 包含公共头部文件。
  • {dede:arclist ...}: 调用文章列表，这里用它来获取“相关产品”。
    • typeid='[field:typeid/': 获取当前文章的分类ID，并调用同分类下的文章。
    • row='4': 显示4条。

创建动态页面文件 (product.php)

这个文件负责告诉织梦,当用户访问一个产品详情链接时，应该做什么。

步骤 1: 创建PHP文件

在网站根目录（与index.php同级）下，创建一个名为 product.php 的文件。

步骤 2: 编写PHP代码

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php");
require_once DEDEINC."/arc.partview.class.php";
// 获取URL中的ID参数，intval()用于防止SQL注入
$id = isset($aid) && is_numeric($aid) ? $aid : 0;
// 如果ID无效，则显示404页面或跳转到首页
if ($id == 0) {
    header('HTTP/1.1 404 Not Found');
    header('Status: 404 Not Found');
    include(DEDETEMPLATE.'/404.htm');
    exit();
}
// 实例化一个会员浏览类
$pv = new PartView();
// 获取当前文档的信息
$arcRow = GetOneArchive($id);
// 检查文档是否存在
if (!is_array($arcRow)) {
    header('HTTP/1.1 404 Not Found');
    header('Status: 404 Not Found');
    include(DEDETEMPLATE.'/404.htm');
    exit();
}
// 设置模板的变量
$pv->SetTemplet($cfg_basedir . $cfg_templets_dir . "/" . $cfg_df_style . "/product.htm");
// 解析模板并显示
$pv->Display();
?>

product.php 代码解析：

  1. require_once "include/common.inc.php";: 加载织梦的核心文件，所有自定义页面都需要这一句。
  2. $id = isset($aid) && is_numeric($aid) ? $aid : 0;: 从URL中获取aid（文章ID）参数，在 product.php?aid=123 中，$id 的值就是 123。
  3. GetOneArchive($id);: 根据文章ID，从数据库中获取该文章的所有相关信息（标题、内容、分类等）。
  4. $pv = new PartView();: 创建一个视图对象，用于加载和解析模板。
  5. $pv->SetTemplet(...): 关键步骤，指定要使用的模板文件，这里我们指向了刚刚创建的 /templets/你的模板文件夹/product.htm，请确保路径正确。
  6. $pv->Display();: 执行解析，并将最终生成的HTML内容输出到浏览器。

织梦后台设置

模板和PHP文件都准备好了,现在需要在织梦后台进行一些设置，让它们关联起来。

织梦企业产品详情页模板
（图片来源网络，侵删）

  1. 设置默认文档类型（重要）:

    • 进入织梦后台 -> 系统 -> 系统基本参数 -> 核心设置。
    • 找到 “文档HTML默认命名规则”。
    • 修改为：{typedir}/{aid}.html，这个规则决定了生成的静态URL格式，一个ID为123的产品，在“产品中心”栏目下，生成的静态文件路径就是 /product/123.html。

  2. 创建栏目并选择模型:

    • 进入 “频道模型” -> 模型管理”，确保有一个“产品模型”（如果没有，可以复制“文章模型”并修改）。
    • 进入 “栏目管理”，创建一个用于存放产品的顶级栏目，产品中心”。
    • 在“产品中心”下创建子栏目（如“产品分类A”、“产品分类B”）。
    • 编辑这些子栏目,在 ” 设置中，将 模型” 选择为你创建的“产品模型”。

  3. 发布产品并生成页面:

    • 在你创建的产品栏目下,”。
    • 填写产品标题、上传缩略图、填写详细内容（正文）等。
    • 发布成功后,进入 “生成” -> “一键生成网站”，或者使用 “更新HTML” -> “指定目录生成” 来生成产品详情页。
    • 生成后,你就可以访问 你的域名/product/123.html 这样的链接来查看产品详情页了。

高级技巧与常见问题

  1. 调用自定义字段:

    • 如果你在“产品模型”中添加了自定义字段，规格”、“材质”、“重量”等。
    • 在模板中调用它们：{dede:field.字段名/}，字段名为 guige，则调用 {dede:field.guige/}。

  2. 图集功能:

    • 如果产品是多图展示,可以在模型中设置“图集”字段。
    • 在模板中,可以使用 {dede:field name='imgurls'} 循环输出所有图片。
    • {dede:field name='imgurls'}
  <li><img src="[field:imgsrc/]" alt="[field:text/]"></li>
{/dede:field}

  3. “织梦标签无法显示”问题:

    • 最常见原因: 模板文件没有被正确生成，请确保执行了“生成”操作。
    • 检查路径: product.php 中的 $pv->SetTemplet(...) 路径是否正确。
    • 检查标签拼写: {dede:field.title/} 和 {dede:field.title} 是不同的，标签必须用 包裹。

  4. SEO优化:

    • 确保每个产品都有和描述。
    • 在product.htm中，我们使用了 {dede:field.title/} - {dede:global.cfg_webname/} 作为<title>，这是标准的SEO做法。
    • 产品图片务必使用有意义的alt属性。

通过以上步骤,你就可以成功创建一个功能完善、美观的企业产品详情页模板了，你可以根据自己公司的具体需求，对 product.htm 的结构和样式进行自由修改和扩展。

-- 展开阅读全文 --
头像
评论后可见功能如何保障内容安全与用户体验？
« 上一篇 01-09
dede memberlist如何调用会员列表数据？
下一篇 » 01-09

相关文章

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

目录[+]