织梦上一篇下一篇标签如何正确调用与显示？

页（article_article.htm 模板）中,自动获取并显示当前文章的上一篇和下一篇的链接标题。

基础标签代码

页模板中,最常用的调用方式如下：

{dede:prenext get='pre'/}
{dede:prenext get='next'/}

• {dede:prenext}：这是织梦系统内置的函数标签，专门用于处理上一篇/下一篇的逻辑。
• get='pre'：参数 get 用来指定获取哪一篇。
  • pre：上一篇
  • next：下一篇
  • pre,：上一篇和当前文章
  • ,next：当前文章和下一篇
  • pre,next：上一篇、当前文章和下一篇

标签详解与常用属性

{dede:prenext} 标签本身非常灵活,可以通过属性来控制输出的样式和内容。

get 属性 (指定获取内容)

这是最重要的属性,决定了显示哪些文章。

• get='pre'：只显示上一篇。
• get='next'：只显示下一篇。
• get='pre,next'：同时显示上一篇和下一篇（这是最常见的用法）。
• get='pre,'：显示上一篇和当前文章。
• get=',next'：显示当前文章和下一篇。

titlelen 属性 (控制标题长度)

很长时，我们可以截断标题，只显示前N个字符,避免页面布局错乱。

{dede:prenext get='pre,next' titlelen='30'/}

infolen 属性 (控制简介长度)

我们还可以显示文章的简介（，并用 infolen 来控制简介的显示长度。

<!-- 显示上一篇/下一篇的标题，并附带最多50个字符的简介 -->
{dede:prenext get='pre,next' titlelen='30' infolen='50'/}

text 属性 (自定义前后文本)

可以自定义在链接前后添加固定的文字，上一篇：”、“下一篇：”。

<!-- 在链接前加上“上一篇：”和“下一篇：” -->
{dede:prenext get='pre,next' text='上一篇：,下一篇：'/}

style 属性 (自定义样式)

这是最强大的属性之一，允许你完全自定义上一篇/下一篇的HTML结构,而不是使用系统默认的样式。

• style='text' (默认)：只输出一个简单的 <a> 链接。
• style='li'：将上一篇/下一篇分别包裹在 <li> 标签中，非常适合用在 <ul> 列表里。
• style='block'：将上一篇和下一篇分别包裹在 <div> 标签中。
• style='index'：在列表模式下，通常用于显示“返回首页”的链接。

示例 (强烈推荐使用 style='li' 或自定义 style)

<!-- 使用 style='li'，模板中需要配合 <ul> 使用 -->
<ul class="prenext">
    {dede:prenext get='pre,next' style='li'/}
</ul>

织梦会自动解析成类似下面的HTML结构：

<ul class="prenext">
    <li>上一篇：<a href="/a/1.html">文章标题1</a></li>
    <li>下一篇：<a href="/a/3.html">文章标题3</a></li>
</ul>

进阶用法：完全自定义样式

如果你对默认的 style 属性不满意，或者想实现更复杂的布局（比如左右分栏），可以使用 style 自定义功能。

语法： {dede:prenext get='pre,next' style='自定义模板代码'/}

在自定义的模板代码中,使用以下两个占位符：

• @me：代表当前文章（上一篇或下一篇）的数据对象。
• @me['字段名']：代表当前文章的某个字段值。

常用字段名：

• arcurl：文章链接
• description：文章摘要

实战案例：左右分栏布局

假设我们想在文章页下方实现一个左右分栏，左边是上一篇,右边是下一篇。

<div class="article-page-nav">
    <div class="prev-page">
        {dede:prenext get='pre' style="
            <span>上一篇：</span>
            <a href='@me[arcurl]'>@me[title]</a>
        "/}
    </div>
    <div class="next-page">
        {dede:prenext get='next' style="
            <span>下一篇：</span>
            <a href='@me[arcurl]'>@me[title]</a>
        "/}
    </div>
</div>

对应的CSS样式：

.article-page-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.prev-page, .next-page {
    flex: 1;
}
.prev-page {
    text-align: left;
    padding-right: 20px;
}
.next-page {
    text-align: right;
    padding-left: 20px;
}
.prev-page a, .next-page a {
    color: #0066cc;
    text-decoration: none;
}
.prev-page a:hover, .next-page a:hover {
    text-decoration: underline;
}

常见问题与解决方案

上一篇/下一篇为空怎么办？

当当前文章是最新的一篇时，下一篇会为空；是最后一篇时，上一篇会为空，织梦默认会显示“没有了”或“暂无”。

• 使用CSS隐藏 在CSS中添加 .prenext a:empty { display: none; },但这样标题文字也没了。
• 使用JS判断（较复杂）
• 最推荐，使用自定义 style 并结合织梦判断

自定义 style 实现优雅处理：

我们可以利用织梦模板的判断语法 {if} 来判断 @me['title'] 是否为空。

{dede:prenext get='pre' style="
    {if @me['title']}
        <span>上一篇：</span>
        <a href='@me[arcurl]'>@me[title]</a>
    {else}
        <span>已经是最新文章了</span>
    {/if}
"/}
{dede:prenext get='next' style="
    {if @me['title']}
        <span>下一篇：</span>
        <a href='@me[arcurl]'>@me[title]</a>
    {else}
        <span>已经是最后一篇文章了</span>
    {/if}
"/}

如何只显示标题，不显示“上一篇：”、“下一篇：”文字？

使用 style='text' 属性即可,它只输出一个干净的链接。

{dede:prenext get='pre,next' style='text'/}

输出结果为：

<a href="/a/1.html">文章标题1</a>
<a href="/a/3.html">文章标题3</a>

总结与最佳实践

对于大多数网站，我强烈推荐使用 style='li' 的方式，因为它结构清晰，方便用CSS进行样式调整,是当前的主流实践。