织梦图集缩略图分页样式如何自定义？

默认情况下,织梦图集的分页功能比较简陋，通常只是上一张/下一张的文字链接，或者是一个简单的数字列表，样式也比较单一，要美化它，我们需要从修改模板文件和编写CSS样式两个方面入手。

下面我将提供两种主流的修改方案,你可以根据自己的需求选择。

使用默认的 {page} 标签并自定义样式 (最简单)

这是最快速的方法,它利用织梦自带的 {page} 标签，我们只需要用CSS来美化它生成的HTML结构即可。

第1步：找到并修改图集内容页模板文件

1. 登录你的织梦后台。

2. 进入【模板】->【模板管理】。

   
   （图片来源网络，侵删）

3. 在你的网站模板目录下,找到并打开图集内容页模板，这个文件通常叫做 article_image.htm (具体名称可能因你的模板而异，但大概率是 article_image 开头)。

4. 在模板文件中,找到 {dede:page/} 这个标签，它就是用来生成分页导航的。

5. 将默认的 {dede:page/} 替换为以下更符合HTML5语义的结构：

   <!-- 图集分页导航 -->
   <div class="dede-pages">
       <div class="pagination">
           {dede:page/}
       </div>
   </div>

   为什么要这样做？ 因为默认的 {dede:page/} 可能会生成一个无序列表 <ul>，也可能只是一个 <div>，我们用一个外层的 div 包裹起来，并赋予 dede-pages 和 pagination 类，方便我们用CSS进行精准控制。

第2步：编写CSS样式

我们通过CSS来美化这个分页导航,你可以将这些CSS代码添加到你的模板CSS文件中（style.css 或 main.css）。

这里提供几个不同风格的CSS示例,你可以直接复制使用或进行修改。

示例1：Bootstrap风格（如果你的模板已经引入了Bootstrap）

如果你的模板使用了Bootstrap框架,那么分页几乎是自动美化的，你只需要确保 {dede:page/} 被一个带有 pagination 类的 nav 标签包裹即可。

<!-- 在 article_image.htm 中 -->
<nav aria-label="图集分页">
    {dede:page/}
</nav>

Bootstrap会自动为它生成的分页链接应用样式,你无需额外编写CSS。

示例2：简洁现代风格 (纯CSS)

这种风格清爽、现代，适合大多数网站。

/* 基础样式，清除默认样式 */
.dede-pages {
    text-align: center;
    margin: 20px 0;
    font-size: 14px;
}
/* 分页容器 */
.pagination {
    display: inline-block; /* 让分页居中 */
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
/* 链接通用样式 */
.pagination a,
.pagination span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
/* 鼠标悬停效果 */
.pagination a:hover {
    background-color: #eee;
    border-color: #ddd;
}
/* 当前页样式 */
.pagination span.current {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}
/* 上一页/下一页的左右箭头样式 */
.pagination .a1,
.pagination .a2 {
    border-radius: 4px;
}
/* 第一页和最后一页的样式 */
.pagination .first,
.pagination .end {
    border-radius: 4px;
}

示例3：圆角按钮风格 (iOS/Android风格)

这种风格活泼,适合移动端或年轻化的网站。

.dede-pages {
    text-align: center;
    margin: 20px 0;
}
.pagination a,
.pagination span {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 15px;
    color: #555;
    background-color: #f0f0f0;
    border-radius: 20px; /* 关键：实现圆角 */
    text-decoration: none;
    transition: all 0.3s ease; /* 平滑过渡效果 */
}
.pagination a:hover {
    background-color: #007bff;
    color: #fff;
    transform: scale(1.05); /* 鼠标悬停时轻微放大 */
}
.pagination span.current {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    cursor: default;
}
.pagination span.disabled {
    color: #ccc;
    background-color: #f9f9f9;
    cursor: not-allowed;
}

自定义分页逻辑 (更灵活，难度稍高)

如果你对默认的分页逻辑不满意,比如想显示缩略图小分页，或者想自定义“上一张/下一张”的文字，你可以手动编写分页逻辑。

第1步：在模板中手动编写分页结构

打开 article_image.htm，找到 {dede:page/} 所在的位置，替换为以下代码：

<!-- 图集分页导航 - 自定义版 -->
<div class="my-custom-pagination">
    <!-- 上一张 -->
    {dede:prepage}
        <a href="[field:link/]" class="prev-btn">
            <i class="fa fa-chevron-left"></i> 上一张
        </a>
    {/dede:prepage}
    <!-- 数字分页 -->
    <div class="page-numbers">
        {dede:pagelist listsize='2' listitem='index,end,pre,next,pageno'}
            <a href="[field:link/]">[field:text/]</a>
        {/dede:pagelist}
    </div>
    <!-- 下一张 -->
    {dede:nextpage}
        <a href="[field:link/]" class="next-btn">
            下一张 <i class="fa fa-chevron-right"></i>
        </a>
    {/dede:nextpage}
</div>

代码解释：

• {dede:prepage} 和 {dede:nextpage}：分别生成上一张和下一张的链接。
• {dede:pagelist}：生成数字分页列表。
  • listsize='2'：表示当前页码前后各显示2个页码。
  • listitem='index,end,pre,next,pageno'：指定要显示的分页项。index是首页，end是尾页，pre/next是上一页/下一页（文字版），pageno是页码数字，你可以根据需要增删。
• [field:link/] 和 [field:text/]：这是 {dede:pagelist} 内部的变量，分别代表链接地址和显示的文字。

第2步：编写对应的CSS样式

为上面的HTML结构编写CSS。

.my-custom-pagination {
    text-align: center;
    margin: 30px 0;
    font-size: 16px;
}
.my-custom-pagination .prev-btn,
.my-custom-pagination .next-btn {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s;
}
.my-custom-pagination .prev-btn:hover,
.my-custom-pagination .next-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
.my-custom-pagination .page-numbers {
    display: inline-block;
    margin: 0 10px;
}
.my-custom-pagination .page-numbers a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    margin: 0 3px;
    text-align: center;
    border-radius: 50%; /* 圆形页码 */
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
}
.my-custom-pagination .page-numbers a:hover {
    background-color: #007bff;
    color: #fff;
}
/* 如果需要高亮当前页，可能需要织梦配合输出一个特定的class，.current */
/* 这通常需要修改织梦的源码或使用JS来实现，这里先提供一个CSS示例 */
.my-custom-pagination .page-numbers a.current {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

总结与建议

1. 新手推荐：从 方案一 开始，它简单、快速，且能满足大部分美化需求，只需修改模板和添加CSS即可。
2. 高级需求：如果你需要完全自定义分页的HTML结构（比如显示缩略图、特定图标等），请选择 方案二，这需要你对织梦标签有更深入的了解。
3. 响应式设计：在编写CSS时，最好考虑一下移动端的显示效果，可以通过媒体查询 @media 来调整不同屏幕尺寸下的分页样式。
4. 浏览器检查：修改完成后，务必在浏览器中按 F12 打开开发者工具，检查生成的HTML结构，并实时调试你的CSS，确保样式生效。

希望这份详细的教程能帮助你成功美化织梦图集的分页样式！