织梦标签如何实现上一条下一条功能？

核心标签介绍

织梦CMS为文章详情页（article_article.htm）模板专门设计了这两个标签,它们会自动获取当前文章的上一篇和下一篇信息。

{dede:pre} 标签 (上一篇)

• 作用：获取当前文章的上一篇文档信息。
• 语法：{dede:pre}
• 说明：该标签通常放在一个链接标签（<a>）内部,直接输出上一篇文章的标题和链接。

{dede:next} 标签 (下一篇)

• 作用：获取当前文章的下一篇文档信息。
• 作用：获取当前文章的下一篇文档信息。
• 语法：{dede:next}
• 说明：与上一篇类似，通常放在链接标签内,输出下一篇文章的标题和链接。

标签参数详解

这两个标签都支持一些常用参数,可以灵活控制输出内容。

基本用法示例

这是最简单的用法,直接输出带有链接的标题。

<div class="prenext">
    <div class="pre">
        {dede:pre}<a href="[field:arcurl/]">上一篇：[field:title/]</a>{/dede:pre}
    </div>
    <div class="next">
        {dede:next}<a href="[field:arcurl/]">下一篇：[field:title/]</a>{/dede:next}
    </div>
</div>

说明：

• [field:arcurl/]：通过 get 参数获取到的链接字段，放在 href 属性中。
• [field:title/]：通过 get 参数获取到的标题字段,作为链接文本。

进阶用法示例（带标题长度限制）

很长，我们可以使用 titlelen 参数来限制显示的字符数,避免样式错乱。

<div class="prenext">
    <div class="pre">
        {dede:pre}
            <a href="[field:arcurl/]" title="[field:title/]">
                上一篇：[field:title function='cn_substr(@me, 30)'/]
            </a>
        {/dede:pre}
    </div>
    <div class="next">
        {dede:next}
            <a href="[field:arcurl/]" title="[field:title/]">
               下一篇：[field:title function='cn_substr(@me, 30)'/]
            </a>
        {/dede:next}
    </div>
</div>

说明：

• 这里我们使用了 function='cn_substr(@me, 30)' 来截取标题前30个字符，这和 titlelen 参数效果类似，但 function 更灵活,可以结合其他PHP函数使用。
• 同时保留了完整的 title 属性，当用户鼠标悬停时可以看到完整标题,这对SEO和用户体验都很好。

完整模板示例（推荐样式）

在实际项目中，我们通常会设计一个更美观的上一篇/下一篇区域,下面是一个常见的HTML和CSS结合的示例。

在 article_article.htm 模板中添加如下代码：

<!-- 文章内容区域 -->
<div class="article-content">
    [field:body/]
</div>
<!-- 上一篇/下一篇区域 -->
<div class="prenav">
    <div class="prenav-left">
        {dede:pre}
            <a href="[field:arcurl/]" title="上一篇：[field:title/]">
                <i class="fa fa-chevron-left"></i> 上一篇：[field:title function='cn_substr(@me, 40)'/]
            </a>
        {/dede:pre}
    </div>
    <div class="prenav-right">
        {dede:next}
            <a href="[field:arcurl/]" title="下一篇：[field:title/]">
               下一篇：[field:title function='cn_substr(@me, 40)'/] <i class="fa fa-chevron-right"></i>
            </a>
        {/dede:next}
    </div>
</div>
<!-- 其他内容... -->

在CSS文件（如 /templets/default/style/dedecms.css）中添加样式：

/* 上一篇/下一篇容器 */
.prenav {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 两端对齐 */
    margin: 30px 0;
    padding: 15px 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    color: #666;
}
.prenav a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}
.prenav a:hover {
    color: #0066cc;
}
.prenav-left {
    text-align: left;
    width: 48%;
}
.prenav-right {
    text-align: right;
    width: 48%;
}
/* 使用Font Awesome图标，请确保已引入其字体文件 */
.prenav .fa {
    margin-right: 8px;
}
.prenav-right .fa {
    margin-left: 8px;
    margin-right: 0;
}

重要注意事项

1. 适用页面：{dede:pre} 和 {dede:next} 只能在文章内容页模板（通常是 article_article.htm） 中使用，在其他页面（如列表页 index.htm 或栏目页 list_x.htm）使用它们是无效的。
2. 栏目关联：上一篇/下一篇的判断是基于同一个栏目下的文章，也就是说，系统会在当前文章所属的栏目里查找上一条和下一条记录,而不是在整个网站范围内查找。
3. 边界情况：
   • 如果当前文章是栏目中的第一篇文章，{dede:pre} 标签区域将不会显示任何内容（或显示你设定的“没有了”的提示）。
   • 如果当前文章是栏目中的最后一篇文章，{dede:next} 标签区域将不会显示任何内容。
4. “没有了”的处理：为了更好的用户体验，通常我们会判断上一篇或下一篇是否存在，如果不存在则显示提示文字。

   <div class="prenext">
       <div class="pre">
           {dede:pre}
               <a href="[field:arcurl/]">上一篇：[field:title/]</a>
           {else}
               <span>已经是第一篇了</span>
           {/dede:pre}
       </div>
       <div class="next">
           {dede:next}
               <a href="[field:arcurl/]">下一篇：[field:title/]</a>
           {else}
               <span>已经是最后一篇了</span>
           {/dede:next}
       </div>
   </div>

   使用 {else} 可以在找不到上一篇或下一篇时显示自定义的提示信息。

希望这份详细的教程能帮助你完全掌握织梦CMS的上一篇/下一篇功能！