织梦网站如何实现新页面打开?

99ANYc3cd6
预计阅读时长 23 分钟
位置: 首页 织梦建站 正文

下面我将从最简单到最复杂的几种情况,为你详细讲解如何在织梦网站中实现打开新页面。


打开一个外部链接(最简单)

这是最简单的情况,比如在页脚放一个“关于我们”链接到公司官网。

方法:直接在 <a> 标签中使用 target="_blank" 属性。

示例代码:

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">
    访问我们的官网
</a>
  • href="...": 填写你想要跳转的外部URL。
  • target="_blank": 这是核心,告诉浏览器在新的浏览器标签页中打开这个链接。
  • rel="noopener noreferrer": 强烈建议添加,这是一个安全属性,可以防止新打开的页面通过 window.opener 来操控原始页面,提升安全性。

打开织梦网站内部的另一个页面(如栏目页、文章列表页)

这种情况通常用于首页的“查看更多”按钮,点击后跳转到对应的栏目列表页。

方法:使用织梦的 {dede:type}{dede:arclist} 标签获取栏目URL,并配合 target="_blank"

示例1:在栏目首页的“查看更多”按钮

假设你在首页调用了一个栏目文章列表,想在列表底部加一个“查看更多”的按钮,跳转到该栏目的列表页。

{dede:arclist titlelen='30' row='5' typeid='1'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
    </li>
{/dede:arclist}
<!-- 在这里添加“查看更多”按钮 -->
<a href="{dede:type typeid='1'}[field:typelink/]{/dede:type}" target="_blank">
    查看更多 <i class="fa fa-angle-right"></i>
</a>

代码解析:

  • {dede:type typeid='1'}...{/dede:type}: 这是一个织梦标签,用于获取指定ID(这里是1)的栏目信息。
  • typeid='1': 请务必替换成你自己的栏目ID,你可以在后台“频道模型” -> “栏目管理”中查看每个栏目的ID。
  • [field:typelink/]: 获取该栏目的完整链接地址。
  • target="_blank": 同样,使其在新标签页打开。

点击文章标题或图片,在新页面打开文章详情页

这是最常见的需求,通常文章列表中的每条新闻都需要在新标签页中打开。

方法:在文章列表循环标签 {dede:arclist} 中,对链接添加 target="_blank" 属性。

织梦的 {dede:arclist} 标签非常灵活,可以直接为循环内的所有链接设置属性。

示例代码:

<ul class="news-list">
    {dede:arclist titlelen='40' row='10'}
        <li>
            <!-- 方法A:直接给arclist标签添加属性(推荐) -->
            <a href="[field:arcurl/]" target="_blank">
                [field:title/]
            </a>
            <span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        </li>
    {/dede:arclist}
</ul>

代码解析:

  • 我们将 target="_blank" 直接加在了 <a> 标签里,这样循环出来的每一条文章链接都会在新标签页打开。

更优雅的写法(使用 autotarget 属性):

织梦的 {dede:arclist} 有一个专门的属性 autotarget,可以自动为所有链接添加 target="_blank"

<ul class="news-list">
    {dede:arclist titlelen='40' row='10' autotarget='_blank'}
        <li>
            <!-- 这里的链接会自动带上 target="_blank" -->
            <a href="[field:arcurl/]">
                [field:title/]
            </a>
            <span class="date">[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
        </li>
    {/dede:arclist}
</ul>

这种方式更简洁,代码更干净。


点击按钮,通过JS弹窗或跳转到一个动态生成的页面

这是一种更高级的需求,比如点击“生成报价单”按钮,弹出一个新的页面显示计算结果。

方法:结合HTML、织梦标签和JavaScript。

示例:点击按钮,在新页面打开一个带参数的链接

假设你有一个产品列表,每个产品都有一个“立即询价”按钮,点击后在新页面打开询价表单,并带上产品ID。

步骤1:在列表页模板中(如 list_article.htm

{dede:arclist row='5'}
    <div class="product">
        <h3>[field:title/]</h3>
        <!-- 注意这里的 href 是一个伪链接,真正跳转由JS控制 -->
        <a href="javascript:void(0);" class="inquiry-btn" data-id="[field:id/]">
            立即询价
        </a>
    </div>
{/dede:arclist}
  • href="javascript:void(0);":阻止链接的默认跳转行为。
  • class="inquiry-btn":给按钮添加一个类名,方便JS选择。
  • data-id="[field:id/]":使用HTML5的 data-* 属性,将当前文章的ID存起来,供JS读取。

步骤2:在页面底部添加 <script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有 class 为 inquiry-btn 的元素
        var inquiryBtns = document.querySelectorAll('.inquiry-btn');
        inquiryBtns.forEach(function(btn) {
            btn.addEventListener('click', function() {
                // 获取存储在 data-id 属性中的产品ID
                var productId = this.getAttribute('data-id');
                // 构建新的URL,这里假设你的询价页面是 inquiry.php
                // 并且你通过GET参数传递产品ID
                var newUrl = "/inquiry.php?productid=" + productId;
                // 在新标签页中打开
                window.open(newUrl, '_blank');
            });
        });
    });
</script>

步骤3:创建接收参数的页面(如 inquiry.php

这个页面需要是一个独立的PHP文件,放在你的网站根目录下。

<?php
require_once (dirname(__FILE__) . "/include/common.inc.php"); // 引入织梦核心文件
// 获取URL中的产品ID
$productid = isset($_GET['productid']) ? intval($_GET['productid']) : 0;
if($productid > 0) {
    // 使用织梦的查询函数获取产品信息
    $arcRow = GetOneArchive($productid);
    if($arcRow) {
        $title = $arcRow['title'];
        // ... 其他逻辑
    }
}
// 在这里编写你的询价表单HTML
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">询价 - <?php echo $title ?? '产品'; ?></title>
</head>
<body>
    <h1>产品询价</h1>
    <p>您正在询价的产品是:<strong><?php echo $title ?? '未知产品'; ?></strong></p>
    <form action="submit_inquiry.php" method="post">
        <input type="hidden" name="productid" value="<?php echo $productid; ?>">
        <!-- 表单内容 -->
        <input type="text" name="name" placeholder="您的姓名">
        <textarea name="content" placeholder="请输入您的需求"></textarea>
        <button type="submit">提交询价</button>
    </form>
</body>
</html>

总结与核心要点

需求场景 推荐方法 核心代码/标签
外部链接 HTML <a> <a href="url" target="_blank">
内部栏目/列表页 织梦 {dede:type} <a href="{dede:type typeid='1'}[field:typelink/]{/dede:type}" target="_blank">
文章详情页 {dede:arclist} 标签属性 {dede:arclist ... target='_blank'}<a href="[field:arcurl/]" target="_blank">
动态/复杂页面 JavaScript + 织梦标签 window.open(url, '_blank') + data-* 属性传参

最重要的提醒:

  1. 栏目ID:在使用织梦标签时,typeidid 等参数一定要替换成你网站中实际存在的栏目或文章ID。
  2. 安全考虑:对于所有新打开的窗口,特别是来自用户输入的链接,都建议加上 rel="noopener noreferrer"
  3. 模板文件位置:这些代码通常需要放在织梦的模板文件中,如 index.htm (首页), list_article.htm (列表页), article_article.htm (内容页) 等,修改后需要在后台“生成”相应页面才能看到效果。
-- 展开阅读全文 --
头像
织梦管理员文章记录为何出错?
« 上一篇 01-13
织梦图标修改为何无效?
下一篇 » 01-14

相关文章

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