dede选项卡如何实现对应链接跳转?

99ANYc3cd6
预计阅读时长 18 分钟
位置: 首页 DEDE建站 正文

“选项卡”在 DedeCMS 中通常不是一个独立的“标签”,而是通过调用 栏目模型 来实现的,它的链接本质上是栏目链接文章链接

dede选项卡对应链接
(图片来源网络,侵删)

下面我将分两种最常见的情况来解释:


是调用“栏目”下的文章(最常见)

这是最标准的用法,通常用于首页或频道页,展示不同分类下的内容。

选项卡对应的链接是什么?

  • 选项卡的标题 (Tab Title):对应一个栏目的名称。
  • 区的链接:对应该栏目下的文章列表页链接。
  • “查看更多”或“进入频道”的链接:直接指向该栏目的列表页链接。

示例: 假设你的首页有一个选项卡,包含“公司新闻”、“产品中心”、“客户案例”三个标签。

  • 公司新闻产品中心客户案例
  • 对应的链接
    • 公司新闻 标签内容链接到:你的域名/plus/list.php?tid=1 (tid=1 是“公司新闻”栏目的ID)
    • 产品中心 标签内容链接到:你的域名/plus/list.php?tid=2 (tid=2 是“产品中心”栏目的ID)
    • 客户案例 标签内容链接到:你的域名/plus/list.php?tid=3 (tid=3 是“客户案例”栏目的ID)

如何在后台找到和管理这些链接?

你需要去 【栏目管理】 中操作。

dede选项卡对应链接
(图片来源网络,侵删)
  1. 登录 DedeCMS 后台。
  2. 进入 【核心】 -> 【栏目管理】
  3. 在栏目列表中,找到你用于选项卡的那个栏目(公司新闻”)。
  4. 点击该栏目后面的 【修改】 按钮。
  5. 在修改页面,你可以看到关键信息:
    • 栏目名称:这就是选项卡上显示的标题。
    • 栏目目录:系统会根据这个生成列表页链接,通常是 plus/list.php?tid=[栏目ID]
    • :这里可以填写栏目的简介,通常会显示在选项卡内容区的顶部。

前端模板代码如何调用?

选项卡功能通常由一个 JS 文件控制,它会根据点击事件来加载不同栏目 ID (tid) 对应的内容。

在模板文件(通常是 index.htm)中,你会找到类似这样的代码结构:

<!-- 选项卡标题 -->
<ul class="tab-nav">
    <li class="active"><a href="javascript:;" data-tid="1">公司新闻</a></li>
    <li><a href="javascript:;" data-tid="2">产品中心</a></li>
    <li><a href="javascript:;" data-tid="3">客户案例</a></li>
</ul>
<!-- 选项卡内容区 -->
<div class="tab-content">
    <!-- 内容1 (默认显示) -->
    <div class="panel active">
        {dede:arclist titlelen='40' row='5' typeid='1'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
        <a href="/plus/list.php?tid=1" class="more">查看更多 &gt;</a>
    </div>
    <!-- 内容2 (默认隐藏) -->
    <div class="panel">
        {dede:arclist titlelen='40' row='5' typeid='2'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
        <a href="/plus/list.php?tid=2" class="more">查看更多 &gt;</a>
    </div>
    <!-- 内容3 (默认隐藏) -->
    <div class="panel">
        {dede:arclist titlelen='40' row='5' typeid='3'}
        <li><a href="[field:arcurl/]">[field:title/]</a></li>
        {/dede:arclist}
        <a href="/plus/list.php?tid=3" class="more">查看更多 &gt;</a>
    </div>
</div>

代码解析:

  • data-tid="1":这是 JS 用来识别点击的是哪个标签的。
  • typeid='1':这是 {dede:arclist} 标签的参数,告诉 DedeCMS 要调用 ID 为 1 的栏目下的文章。
  • [field:arcurl/]:这是文章的链接,会自动指向文章的详细页。
  • /plus/list.php?tid=1:这是该栏目的列表页链接,也就是“查看更多”按钮指向的地址。

是调用“自定义模型”的内容

如果你的选项卡内容不是常规的文章,而是如“团队成员”、“合作伙伴”、“服务流程”等这类结构化信息,那么它们对应的是自定义模型

dede选项卡对应链接
(图片来源网络,侵删)

选项卡对应的链接是什么?

  • 选项卡的标题:对应一个自定义模型的名称,或者一个专门为此创建的栏目(这个栏目使用了自定义模型)。
  • 区的链接:每个具体条目的链接指向该自定义模型内容的详细页
  • “查看更多”链接:这种情况通常没有“查看更多”,或者会指向一个专门的频道页(如果该自定义模型也绑定了栏目)。

示例: 一个“服务流程”的选项卡,包含“需求分析”、“方案设计”、“项目实施”、“售后支持”四个步骤。

  • 服务流程
  • 对应的链接
    • 每个步骤(如“需求分析”)都是一个独立的内容条目。
    • 点击“需求分析”标题,链接到:你的域名/plus/view.php?aid=10 (aid=10 是该条内容的ID)。
    • 这个选项卡本身可能没有总的列表页链接。

如何在后台找到和管理这些链接?

你需要去 【核心】 -> 模型管理】【栏目管理】 中操作。

  1. 创建自定义模型

    • 进入 【核心】 -> 模型管理】 -> 【增加一个内容模型】
    • 创建一个名为“服务流程”的模型,并为其添加字段,如“步骤标题”、“步骤描述”、“步骤图标”等。
  2. 创建栏目并绑定模型

    • 进入 【栏目管理】,增加一个顶级栏目或二级栏目,命名为“服务流程”。
    • 在栏目设置中,选择刚才创建的自定义模型
    • 这样,在这个栏目下发布的内容,就会使用“服务流程”模型的表单。
  3. 在“服务流程”栏目下,发布你的各个步骤内容。

前端模板代码如何调用?

模板调用方式类似,只是 {dede:arclist}{dede:list} 标签的 typeid 指向了你创建的那个“服务流程”栏目的ID。

<!-- 选项卡标题 -->
<ul class="tab-nav">
    <li class="active"><a href="javascript:;" data-tid="4">服务流程</a></li>
    <!-- 其他标签... -->
</ul>
<!-- 选项卡内容区 -->
<div class="tab-content">
    <div class="panel active">
        {dede:arclist titlelen='40' row='4' typeid='4' orderby='pubdate'}
        <div class="process-item">
            <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
            <p>[field:description function='cn_substr(@me, 100)'/]</p>
        </div>
        {/dede:arclist}
    </div>
</div>

注意:自定义模型的详细页模板可能需要单独设置,通常在 【频道模型】 -> 【自定义表单】 中可以找到。


特性 调用栏目 (常用) 调用自定义模型
来源 栏目的“栏目名称” 自定义模型的名称,或专用栏目名
列表页链接 /plus/list.php?tid=[栏目ID] 通常没有,或指向绑定了该模型的栏目列表页
后台管理位置 【栏目管理】 模型管理】 + 【栏目管理】 (绑定模型)
典型标签 {dede:arclist typeid='1'} {dede:arclist typeid='5'} (typeid指向模型栏目)

要找到你网站中选项卡的具体链接,最直接的方法是:

  1. 在浏览器中右键点击选项卡中的“查看更多”或文章标题。
  2. 选择“检查”或“审查元素”。
  3. 在弹出的代码中,找到 <a> 标签的 href 属性,这个值就是它对应的真实链接,通过这个链接,你就能反推出它对应的栏目ID或内容ID,从而在后台进行管理。
-- 展开阅读全文 --
头像
织梦图片链接如何彻底去除?
« 上一篇 03-01
struction c语言
下一篇 » 03-01

相关文章

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

目录[+]