admin 2026年02月18日 00:51 102 0

织梦CMS默认的上一篇/下一篇链接样式较为简洁，可通过CSS与HTML优化提升视觉体验，可调整字体大小、颜色及间距，添加箭头或书本图标增强引导性；悬停时增加颜色渐变或下划线动画，提升交互反馈，可优化布局结构，将链接居中对齐或分左右两侧对称排列，搭配背景色块区分，使页面层次更分明，美化后不仅提升美观度，还能有效引导用户持续浏览，降低跳出率，增强网站整体用户体验。

织梦CMS文章页上一篇下一篇链接美化技巧与代码实现

在织梦CMS（DedeCMS）搭建的网站中，文章页的"上一篇"和"下一篇"导航是提升用户体验的关键功能——它能帮助读者在阅读完当前内容后，无缝衔接其他相关文章，有效降低跳出率，增强用户粘性，默认情况下，织梦的上一篇下一篇导航样式较为简陋：仅显示文字链接，缺乏视觉引导元素、无hover交互效果，甚至字体颜色与页面整体风格格格不入，本文将从CSS样式调整、HTML结构优化、交互效果增强三个维度，详细介绍如何美化织梦CMS的上一篇下一篇链接，让导航更加美观、直观且富有吸引力。

准备工作：定位模板文件

要修改上一篇下一篇的样式，首先需要找到对应的模板文件，织梦的文章页模板通常位于 /templets/你的模板文件夹/ 目录下，文件名一般为 article_article.htm（具体名称以你的实际模板为准），使用FTP工具或本地编辑器打开该文件,找到调用上一篇下一篇的标签：

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

这两个标签分别对应"上一篇"和"下一篇",我们需要通过修改HTML结构和添加CSS样式来实现美化效果。

基础美化：CSS样式调整

默认的上一篇下一篇仅输出纯文本链接，我们可以通过CSS添加图标、调整颜色、优化间距等，让视觉效果更加协调,以下是具体步骤：

为链接添加图标（可选）

为了让导航更加直观，可以为"上一篇"和"下一篇"分别添加"左箭头"和"右箭头"图标，这里推荐使用字体图标（如FontAwesome）或SVG图标,避免图片加载影响页面性能。

操作步骤：

在模板的 <head> 标签内引入FontAwesome（若模板未引入）：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css">

修改上一篇下一篇的HTML结构,添加图标容器：

<!-- 上一篇（在模板中修改{dede:prenext get='pre'}的输出） -->
<div class="prenav">
 <i class="fas fa-chevron-left"></i>
 <span class="prenav-text">{dede:prenext get='pre'}</span>
</div>
<!-- 下一篇 -->
<div class="nextnav">
 <span class="nextnav-text">{dede:prenext get='next'}</span>
 <i class="fas fa-chevron-right"></i>
</div>

编写CSS样式

在模板的 <head> 标签内或外联CSS文件中，添加以下样式（可根据网站主色调调整颜色）：

/* 上一篇下一篇容器样式 */
.prenav, .nextnav {
    display: inline-flex; /* 弹性布局，让图标和文字对齐 */
    align-items: center;   /* 垂直居中 */
    margin: 20px 10px 0;  /* 上边距20px，左右10px */
    padding: 8px 15px;     /* 内边距 */
    border-radius: 20px;   /* 圆角 */
    background-color: #f5f5f5; /* 背景色 */
    transition: all 0.3s ease; /* 过渡动画 */
    position: relative; /* 为后续提示框定位做准备 */
}
/* 上一篇样式（左对齐） */
.prenav {
    float: left;
}
.prenav i {
    margin-right: 8px; /* 图标与文字间距 */
    color: #666;       /* 图标颜色 */
}
/* 下一篇样式（右对齐） */
.nextnav {
    float: right;
}
.nextnav i {
    margin-left: 8px;  /* 图标与文字间距 */
    color: #666;       /* 图标颜色 */
}
/* 链接文字样式 */
.prenav-text, .nextnav-text {
    font-size: 14px;    /* 字体大小 */
    color: #333;        /* 文字颜色 */
    text-decoration: none; /* 去掉下划线 */
}
/* hover效果：鼠标悬停时变化 */
.prenav:hover, .nextnav:hover {
    background-color: #e0e0e0; /* 背景色变深 */
    transform: translateY(-2px); /* 轻微上移 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 添加阴影效果 */
}
.prenav:hover .prenav-text, 
.nextnav:hover .nextnav-text {
    color: #007bff; /* 悬停时文字颜色变为主题色 */
}
.prenav:hover i, 
.nextnav:hover i {
    color: #007bff; /* 悬停时图标颜色变为主题色 */
}

效果说明

上一篇：左箭头图标 + 文字，左对齐，灰色背景，悬停时背景变深、文字变蓝、图标上移并添加阴影效果
下一篇：文字 + 右箭头图标，右对齐，样式与上一篇对称

整体效果更加简洁、现代，与页面风格更加协调,同时通过微妙的动画效果增强了交互体验。

进阶优化：HTML结构与交互效果

如果基础样式仍不能满足需求，可以进一步优化HTML结构，添加更多交互效果（如显示文章摘要、标签等）。

修改HTML结构，显示文章摘要

织梦默认的上一篇下一篇仅显示标题，我们可以通过修改标签，让鼠标悬停时显示文章摘要（需开启织梦的文章摘要功能）。

操作步骤：

在 article_article.htm 中,将上一篇下一篇的标签改为：

<!-- 上一篇 -->
<div class="prenav" title="{dede:prenext get='pre' function='htmlspecialchars(@me)'}">
 <i class="fas fa-chevron-left"></i>
 <span class="prenav-text">{dede:prenext get='pre'}</span>
</div>
<!-- 下一篇 -->
<div class="nextnav" title="{dede:prenext get='next' function='htmlspecialchars(@me)'}">
 <span class="nextnav-text">{dede:prenext get='next'}</span>
 <i class="fas fa-chevron-right"></i>
</div>

在CSS中添加自定义提示框样式（替代浏览器默认的title样式）：

/* 自定义提示框样式 */
.prenav:hover::after, 
.nextnav:hover::after {
 content: attr(title); /* 获取title属性作为提示内容 */
 position: absolute;
 bottom: 100%;
 left: 50%;
 transform: translateX(-50%);
 background-color: #333;
 color: #fff;
 padding: 8px 12px;
 border-radius: 4px;
 font-size: 12px;
 white-space: nowrap;
 z-index: 1000;
 margin-bottom: 10px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/ 添加小三角形指向 / .prenav:hover::before, .nextnav:hover::

标签： #cms #美化 #上下篇