如何去掉dede pagelist默认的li标签?

99ANYc3cd6
预计阅读时长 12 分钟
位置: 首页 DEDE建站 正文

使用 CSS 隐藏 <li> 标签(推荐)

这是最安全、最灵活的方法,我们不修改程序生成的 HTML 结构,而是通过 CSS 样式来控制其显示效果,使其看起来就像没有 <li> 一样。

dede pagelist去掉 li
(图片来源网络,侵删)

原理:<li> 标签设置为 display: inline;display: inline-block;,这样 <li> 元素就会像 <span> 一样在同一行内显示,其前后的换行和空格也就看不出来了。

操作步骤:

  1. 找到你的模板文件,通常是 list_article.htm(列表页模板)。
  2. <head> 标签内或外联的 CSS 文件中,添加以下 CSS 样式:
/* 方法1:将li元素设置为行内元素,去除换行和列表样式 */
.dede_pages ul li {
    display: inline; /* 或者使用 inline-block */
    list-style: none; /* 去掉默认的列表小圆点 */
    margin: 0 2px; /* 可选:增加页码之间的间距 */
}
/* 方法2:如果方法1有间距问题,可以更彻底地控制 */
/*
.dede_pages ul {
    padding-left: 0; /* 去掉ul的左边距 */
    margin-left: 0; /* 去掉ul的左边距 */
}
.dede_pages ul li {
    display: inline-block; /* 使用inline-block可以更好地控制对齐和间距 */
    list-style: none;
    margin: 0 2px; /* 控制页码间距 */
}
*/

说明:

  • .dede_pages{dede:pagelist} 默认生成的最外层 div 的 class 名称,如果你的模板修改过,可能需要换成你自己的 class 名。
  • display: inline; 会让 <li> 元素紧密排列。
  • display: inline-block; 则允许你设置 <li> 的宽高和对齐方式,通常更常用。
  • list-style: none; 是必须的,它会去掉 <li> 默认前面的项目符号(小圆点)。

效果: 你的分页代码会从这样:

dede pagelist去掉 li
(图片来源网络,侵删)
<div class="dede_pages">
    <ul>
        <li><a href="...">上一页</a></li>
        <li><a href="...">1</a></li>
        <li class="thisclass"><span>2</span></li>
        <li><a href="...">3</a></li>
        <li><a href="...">下一页</a></li>
    </ul>
</div>

通过 CSS 控制后,在浏览器中会显示成这样: 上一页 1 2 3 下一页<li> 标签依然存在,但视觉上已经去除了块级元素的效果)


修改 arc.listview.class.php 文件(不推荐,仅供了解)

这种方法直接修改了 DedeCMS 的核心类文件,会强制分页标签不生成 <li>请注意: 当你下次升级 DedeCMS 时,这些修改会被覆盖,需要重新修改。

操作步骤:

  1. 找到核心文件:/include/arc.listview.class.php

    dede pagelist去掉 li
    (图片来源网络,侵删)
  2. 用代码编辑器打开该文件。

  3. 搜索 GetPageListST 函数(这是处理 pagelist 标签的核心函数)。

  4. 在函数内找到生成 <li> 的代码,通常在循环生成页码的部分,类似这样的代码:

    // ... 在循环内部 ...
    $listitem = "<li><a href='".$purl."PageNo=$i'>".$i."</a></li>";
    // 或者
    $listitem = "<li>".$j."</li>";
    // ...
  5. 将这些 <li></li> 标签去掉,只保留内部的内容。

    // 修改前
    $listitem = "<li><a href='".$purl."PageNo=$i'>".$i."</a></li>";
    // 修改后
    $listitem = "<a href='".$purl."PageNo=$i'>".$i."</a>";
  6. 你还需要处理最外层的 <ul></ul> 标签,通常在 GetPageListST 函数的开始和结束处,找到类似 $listdd = "<ul>\r\n";$listdd .= "</ul>\r\n"; 的代码,将它们也去掉或替换为 <div>

    // 修改前
    $listdd = "<ul>\r\n";
    // ... 循环生成 $listitem ...
    $listdd .= "</ul>\r\n";
    // 修改后
    $listdd = "<div class='dede_pages'>\r\n";
    // ... 循环生成 $listitem ...
    $listdd .= "</div>\r\n";
  7. 保存文件,然后刷新网站页面查看效果。

警告: 此方法会破坏 DedeCMS 的标准结构,可能导致与其他依赖 <li> 标签的样式或 JavaScript 冲突,除非你非常熟悉代码,否则强烈建议使用方法一


方法 优点 缺点 推荐度
CSS 样式控制 安全、灵活、不影响程序升级 需要一点 CSS 基础 ★★★★★ (强烈推荐)
修改核心文件 一劳永逸(直到下次升级) 危险、升级会失效、可能引发其他问题 ★☆☆☆☆ (不推荐)

对于绝大多数情况,请使用方法一,通过 CSS 来实现你的需求,这是前端开发的最佳实践。

-- 展开阅读全文 --
头像
C语言上机实验与习题,如何高效掌握?
« 上一篇 12-12
dedecms dede sql语句如何正确使用?
下一篇 » 12-12

相关文章

取消
微信二维码
支付宝二维码

目录[+]