搜索
织梦建站

织梦新闻列表如何实现多种样式？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 1 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 33 分钟
位置： 首页 › 织梦建站 › 正文

核心思路

无论使用哪种方法，核心思路都是通过判断当前列表项的序号（[field:global.autoindex/]）来应用不同的HTML结构和CSS样式，织梦的循环标签 {dede:list} 会为每一篇文章生成一个唯一的 autoindex 变量,从1开始递增。

织梦新闻列表多种样式
（图片来源网络，侵删）

利用 if 条件判断（最常用、最灵活）

这是最基础也是最强大的方法，可以在模板文件中直接通过DedeCMS的 if 标签进行判断,实现不同位置的列表项显示不同样式。

场景示例：

  • 样式A：普通列表（适用于第1、4、7...项）
  • 样式B：带图片的卡片（适用于第2、5、8...项）
  • 样式C：大图横幅（适用于第3、6、9...项）

实现步骤：

  1. 修改列表模板文件 打开你的列表模板文件，通常位于 /templets/default/list_*.htm 或你自定义的目录下。

  2. 编写带判断的循环代码 将默认的 {dede:list} 循环代码修改如下：

    {dede:list pagesize='8'}
<!-- 使用 [field:global.autoindex/] 获取当前项的序号 -->
<!-- 使用 if 条件判断序号，并应用不同的CSS类 -->
[field:global name=autoindex runphp="yes"]
    $a = @me;
    if($a % 3 == 1) {
        @me = 'style-a'; // 第1, 4, 7... 项应用 style-a 类
    } elseif($a % 3 == 2) {
        @me = 'style-b'; // 第2, 5, 8... 项应用 style-b 类
    } else {
        @me = 'style-c'; // 第3, 6, 9... 项应用 style-c 类
    }
[/field:global]
<!-- 将生成的类名应用到列表项的容器上 -->
<li class="[field:global name=autoindex runphp='yes']">
    <!-- 样式A：普通列表 -->
    [field:global name=autoindex runphp="yes"]
        $a = @me;
        if($a % 3 == 1) {
            @me = '<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
                   <p class="info">[field:pubdate function="MyDate('Y-m-d',@me)"]</p>
                   <p class="summary">[field:description function="cn_substr(@me,100)"]...</p>';
        } elseif($a % 3 == 2) {
            @me = ''; // 此处留空，因为下面有else
        } else {
            @me = ''; // 此处留空，因为下面有else
        }
    [/field:global]
    <!-- 样式B：带图片的卡片 -->
    [field:global name=autoindex runphp="yes"]
        $a = @me;
        if($a % 3 == 2) {
            @me = '<div class="img-box">
                       <a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a>
                   </div>
                   <div class="text-box">
                       <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
                       <p class="summary">[field:description function="cn_substr(@me,80)"]...</p>
                   </div>';
        } else {
            @me = ''; // 此处留空
        }
    [/field:global]
    <!-- 样式C：大图横幅 -->
    [field:global name=autoindex runphp="yes"]
        $a = @me;
        if($a % 3 == 0) {
            @me = '<a href="[field:arcurl/]" class="banner-link">
                       <img src="[field:litpic/]" alt="[field:title/]">
                       <div class="banner-title">[field:title/]</div>
                   </a>';
        } else {
            @me = ''; // 此处留空
        }
    [/field:global]
</li>
{/dede:list}

    代码解释：

    织梦新闻列表多种样式
    （图片来源网络，侵删）
    • runphp="yes"：允许在标签内执行PHP代码。
    • $a % 3：取模运算，$a 除以 3 的余数，余数为1、2、0,正好对应三种样式。
    • @me = '...'：将生成的HTML代码赋值给 @me 变量,最终在模板中显示。

  3. 编写CSS样式 在你的CSS文件中,为这三个样式类定义不同的外观。

    /* 基础列表样式 */
.style-a, .style-b, .style-c {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden; /* 清除浮动 */
}
/* 样式A：普通列表 */
.style-a h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
.style-a .info {
    color: #999;
    font-size: 12px;
}
.style-a .summary {
    color: #666;
    line-height: 1.6;
}
/* 样式B：带图片的卡片 */
.style-b {
    display: flex;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}
.style-b .img-box {
    width: 120px;
    height: 80px;
    margin-right: 15px;
}
.style-b .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.style-b .text-box {
    flex: 1;
}
/* 样式C：大图横幅 */
.style-c {
    height: 200px;
    position: relative;
    margin-bottom: 30px; /* 增加与下方列表的间距 */
}
.style-c .banner-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
}
.style-c .banner-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.style-c .banner-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 10px;
    font-size: 16px;
}
.style-c .banner-link:hover img {
    transform: scale(1.05);
}

通过自定义函数（代码更简洁）

如果你觉得方法一中 runphp 代码太冗长，可以把它写成一个自定义函数,让模板更清爽。

实现步骤：

  1. 修改 /include/extend.func.php 文件 在这个文件中添加一个自定义函数，

    // 根据序号返回不同的HTML结构
function getMultiStyleList($aid, $title, $arcurl, $litpic, $description, $pubdate) {
    $autoindex = $aid; // 通常在循环中，aid就是autoindex
    $html = '';
    if ($autoindex % 3 == 1) {
        // 样式A
        $html = '<div class="list-item style-a">
                    <h3><a href="'.$arcurl.'">'.$title.'</a></h3>
                    <p class="info">'.date('Y-m-d', $pubdate).'</p>
                    <p class="summary">'.cn_substr($description, 100).'...</p>
                 </div>';
    } elseif ($autoindex % 3 == 2) {
        // 样式B
        $html = '<div class="list-item style-b">
                    <div class="img-box">
                        <a href="'.$arcurl.'"><img src="'.$litpic.'" alt="'.$title.'"></a>
                    </div>
                    <div class="text-box">
                        <h3><a href="'.$arcurl.'">'.$title.'</a></h3>
                        <p class="summary">'.cn_substr($description, 80).'...</p>
                    </div>
                 </div>';
    } else {
        // 样式C
        $html = '<div class="list-item style-c">
                    <a href="'.$arcurl.'" class="banner-link">
                        <img src="'.$litpic.'" alt="'.$title.'">
                        <div class="banner-title">'.$title.'</div>
                    </a>
                 </div>';
    }
    return $html;
}

  2. 修改列表模板文件 现在模板变得非常简洁：

    织梦新闻列表多种样式
    （图片来源网络，侵删）
    {dede:list pagesize='8'}
<li>
    <!-- 调用自定义函数，并传入所需参数 -->
    [field: function='getMultiStyleList(@me, @me, @me, @me, @me, @me)']
        <!-- 这里需要将函数的参数与[field]标签对应起来 -->
        <!-- 更正的调用方式 -->
        [field:id function='getMultiStyleList(@me, "[field:title/]", "[field:arcurl/]", "[field:litpic/]", "[field:description/]", "[field:pubdate/]")'/]
</li>
{/dede:list}

    注意：函数调用时，需要确保参数顺序和函数定义一致，这里的 @me 在不同标签中代表不同的值（id, title, arcurl...）,所以需要明确写出。

使用JS动态加载（高级用法，实现瀑布流等）

对于更复杂的布局，如瀑布流（Masonry），使用PHP判断可能会打乱布局，这时，可以先按统一样式输出,然后用JavaScript来动态计算和调整位置。

实现步骤：

  1. 模板文件（输出统一格式的卡片）

    <div id="masonry-container">
    {dede:list pagesize='20'}
    <div class="masonry-item">
        <img src="[field:litpic/]" alt="[field:title/]">
        <div class="item-content">
            <h3><a href="[field:arcurl/]">[field:title/]</a></h3>
            <p>[field:description function="cn_substr(@me,100)"]...</p>
        </div>
    </div>
    {/dede:list}
</div>

  2. 引入JS库 在页面底部引入Masonry库，例如使用 masonry 或 pinterest-style 等库。

    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

  3. 编写JS代码

    document.addEventListener('DOMContentLoaded', function() {
    var container = document.querySelector('#masonry-container');
    var msnry = new Masonry(container, {
        // options
        itemSelector: '.masonry-item',
        columnWidth: '.masonry-item', // 或者设置一个固定宽度，如 200px
        gutter: 10 // 卡片之间的间距
    });
});

总结与建议

方法 优点 缺点 适用场景
if条件判断 灵活，无需额外文件，逻辑直接在模板中 模板文件会变得冗长，可读性稍差 最常用，适用于大多数简单的多样式列表，如图文混排、重点突出等。
自定义函数 模板代码非常简洁，逻辑与视图分离 需要修改PHP核心文件，对新手不友好 适用于样式复杂或需要在多处复用此逻辑的情况，追求代码整洁。
JS动态布局 实现瀑布流等复杂布局，性能好（浏览器端计算） 依赖JS，如果用户禁用JS则效果不佳；首次加载可能布局混乱 适用于图片瀑布流、不规则网格等现代网站布局。

对于绝大多数用户，强烈推荐使用方法一，它足够强大，能满足90%的需求，且不需要任何额外的开发工作，直接在模板里就能搞定，当你发现自己写的runphp代码已经超过20行时,再考虑方法二将其封装成函数。

-- 展开阅读全文 --
头像
织梦QQ邮箱找回设置怎么操作？
« 上一篇 03-18
C语言中do while语句的执行流程是怎样的？
下一篇 » 03-18

相关文章

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

目录[+]