下面我将从最简单到最复杂的几种情况,为你详细讲解如何在织梦网站中实现打开新页面。
打开一个外部链接(最简单)
这是最简单的情况,比如在页脚放一个“关于我们”链接到公司官网。
方法:直接在 <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>
| |
| 内部栏目/列表页 | 织梦 {dede:type}
| |
| 文章详情页 | {dede:arclist} 标签属性 |
{dede:arclist ... target='_blank'} 或 <a href="[field:arcurl/]" target="_blank"> |
| 动态/复杂页面 | JavaScript + 织梦标签 | window.open(url, '_blank') + data-* 属性传参 |
最重要的提醒:
- 栏目ID:在使用织梦标签时,
typeid和id等参数一定要替换成你网站中实际存在的栏目或文章ID。 - 安全考虑:对于所有新打开的窗口,特别是来自用户输入的链接,都建议加上
rel="noopener noreferrer"。 - 模板文件位置:这些代码通常需要放在织梦的模板文件中,如
index.htm(首页),list_article.htm(列表页),article_article.htm(内容页) 等,修改后需要在后台“生成”相应页面才能看到效果。
