头条式文章图文列表

模块概述

头条式文章图文列表组件基于平台公版文章列表组件扩展开发，复刻头条图文列表头部核心展示结构，解决原组件强制带图文章提权排序、无法按业务规则正常排序的问题，同时满足标准化图文展示需求。

核心解决问题

原头条图文列表强制将带封面图文章优先置顶展示，破坏「优先级降序/发布时间降序」的正常业务排序规则；本组件不干预文章原始排序，仅按数据源返回顺序渲染，保留正常排序逻辑。

功能需求

排序规则：严格遵循数据源返回顺序展示，不强制带图文章提权，支持优先级降序、发布时间降序等原生排序规则。
内容展示：统一展示文章标题+摘要，支持配置标题、摘要截取长度。
图片处理
- 开启图片展示时，文章有封面图则展示实际缩略图。
- 支持无图兜底：无封面图时自动加载默认图 nopic.gif（可配置开关）。
结构规范：HTML 结构与头条图文列表完全对齐，降低前端 CSS 适配、修改成本。
通用性：适用于新闻资讯、通知公告、行业动态等常规列表场景，可直接替代原头条图文列表组件。

适用场景

常规新闻列表、通知公告列表展示。
原头条图文列表组件因强制排序问题，无法满足正常排序需求的替代方案。
需要固定图文结构、低 CSS 调整成本的列表页面。

核心价值

保留正常排序逻辑，满足业务需求
统一图文展示结构，降低CSS适配成本
灵活的配置能力，适应不同项目需求

核心功能分类

头条式文章列表调用

场景描述

此场景适用于需要以头条式样式展示文章列表的场景，如新闻中心、通知公告等页面。通过复刻头条图文列表头部核心展示结构，解决原组件强制带图文章提权排序问题，同时满足标准化图文展示需求。

视图代码

<ul class="pageTPList">
    @Power.ArticleList("文章图文列表", new {
        Node = "xwdt",
        Count = 9,
        TitleLength = 46,
        ContentLength = 140,
        DisplayPic = true,
        DisplayNopic = true,
        PicFollowTitle = false,
        ImageWidth = 360,
        ImageHeight = 200
    })
</ul>

参数说明

参数名	中文名	类型	默认值	详细说明
Node	节点	String	"xwdt"	必填：要调用的节点标识符或节点实体
Count	数量	Int32	9	调用内容的数量限制
TitleLength	标题长度	Int32	46	标题截断长度（按字符计算），超长部分显示为省略号
ContentLength	内容长度	Int32	140	正文/摘要的截断长度（按字符计算）
DisplayPic	显示图片	Boolean	true	控制是否显示图片
DisplayNopic	显示默认图	Boolean	false	无图时是否显示默认"nopic.gif"图片，默认值为false，不会显示这个默认图
PicFollowTitle	图片跟随标题	Boolean	false	控制图片位置：true表示图片显示在标题后，false表示显示在标题前
ImageWidth	图片宽度	Int32	360	封面图渲染宽度（像素单位）
ImageHeight	图片高度	Int32	200	封面图渲染高度（像素单位）

示例效果

头条式文章图文列表示意图

头条式文章图文列表效果展示，文章标题与摘要内容清晰呈现，有封面图时展示实际缩略图，无封面图时显示默认图，整体布局采用三列布局，信息层次分明。

HTML结构示例

<ul class="topicList">
    <!-- 有封面图片时 -->
    <li>
        <div class="pic">
            <a href="/xwdt/content_24089" target="_blank">
                <img alt="示范图文" src="demo_360_200.jpg" width="360" height="200" />
            </a>
        </div>
        <div class="con">
            <div class="title">
                <a target="_blank" class="tit" href="/xwdt/content_24089" title="示范图文">示范图文</a>
            </div>
            <div class="intro">
                示范图文简介
            </div>
            <div class="others">
            </div>
        </div>
    </li>
    <!-- 无封面图片时 -->
    <li>
        <div class="pic">
            <a href="/xwdt/content_24089" target="_blank">
                <img alt="示范图文2" src="/content/_common/base/img/nopic.gif" width="360" height="200" />
            </a>
        </div>
        <div class="con">
            <div class="title">
                <a target="_blank" class="tit" href="/xwdt/content_24090" title="示范图文2">示范图文2</a>
            </div>
            <div class="intro">
                示范图文2简介
            </div>
            <div class="others">
            </div>
        </div>
    </li>
</ul>

样式实现

/* 头条图文信息列表_普通式 + 三列布局 优化合并版 */
.topicList {
    margin: 0 -10px;
    overflow: hidden;
}

/* 基础列表项 */
.topicList li {
    float: left;
    width: 33.3%;
    height: auto;
    padding: 0;
    margin: 0;
    border: none;
    position: relative;
    line-height: 24px;
    overflow: hidden;
}

/* 无数据状态 */
.topicList li.noData {
    padding-left: 12px;
    background: url(../img/icon.png) no-repeat 0 -177px;
}

/* 带图标样式的项 */
.topicList li.n {
    height: 30px;
    line-height: 30px;
    padding: 0 5px 0 13px;
    background: url(../img/icon.png) no-repeat 0 -177px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 日期样式 */
.topicList li .date {
    float: right;
    color: #999;
}
.topicList li.n .date {
    color: #bcbcbc;
}

/* 标题区域公共样式 */
.topicList .t {
    overflow: hidden;
    height: auto;
    margin-bottom: 7px;
    padding-bottom: 10px;
    border-bottom: 1px dotted #ccc;
}

/* 图片容器 */
.topicList li .pic {
    float: none;
    margin: 0 10px;
    padding: 10px;
}
.topicList .t .pic {
    float: left;
    margin-right: 10px;
}

/* 图片链接与边框动画 */
.topicList li .pic a {
    display: block;
    border: 3px solid transparent;
    transition: all 0.25s ease;
}
.topicList li .pic img {
    width: 100%;
}

/* 内容容器 */
.topicList li .con {
    margin: 0 10px;
    padding: 0 10px 20px;
}

/* 标题文字定位 */
.topicList li .title {
    position: absolute;
    z-index: 3;
    top: 180px;
    left: 20px;
    right: 20px;
    padding: 0 10px;
    text-align: left;
    overflow: hidden;
    height: 24px;
    line-height: 24px;
}
.topicList li .title a {
    color: #fff;
}
.topicList .t .tit {
    font-size: 16px;
}

/* 标题背景遮罩 */
.topicList li .con::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 128px;
    left: 23px;
    right: 23px;
    height: 85px;
    background: url(../../base/img/titlebg.png) repeat-x left bottom;
    opacity: 0.8;
    filter: alpha(opacity=80);
}

/* 简介内容 */
.topicList li .intro {
    height: 90px;
    line-height: 24px;
    padding: 0;
    font-size: 14px;
    color: #999;
    overflow: hidden;
}
.topicList .t .intro {
    color: #666;
    text-align: left;
    padding-top: 8px;
}
.topicList .t .intro .more {
    float: none;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    color: #cf1b0c;
    text-indent: 0;
}

/* 鼠标悬浮效果 */
.topicList li:hover .pic a {
    border-color: #9a0000;
}

注意事项

排序逻辑：不新增任何排序逻辑，直接透传数据源排序结果
图片处理：读取组件DisplayPic参数，为false时直接隐藏图片区域；为true时，判断文章是否存在有效封面图
无图兜底：判断DisplayNopic参数，true渲染默认图nopic.gif，false隐藏图片容器
结构规范：根容器固定为ul.topicList，列表项为li；固定结构：.pic（图片区）+ .con（内容区）
CSS适配：HTML结构与头条图文列表完全对齐，降低前端CSS适配、修改成本
文本处理：标题按TitleLength截取字符长度，超出部分省略展示，hover显示完整标题；摘要按ContentLength截取字符长度，自动过滤HTML标签、纯文本展示

实现要点

核心排序实现不新增任何排序逻辑，直接透传数据源排序结果。禁止对带图/无图文章做分组、置顶、重排处理，保证排序与业务规则完全一致。
图片渲染逻辑读取组件DisplayPic参数，为false时直接隐藏图片区域。为true时，判断文章是否存在有效封面图：有图：渲染原图，按ImageWidth/ImageHeight固定尺寸展示。无图：判断DisplayNopic参数，true渲染默认图nopic.gif，false隐藏图片容器。图片统一添加alt属性（取文章标题），保证可访问性。
文本处理规则标题：按TitleLength截取字符长度，超出部分省略展示，hover显示完整标题。摘要：按ContentLength截取字符长度，自动过滤HTML标签、纯文本展示。
HTML结构规范根容器固定为ul.topicList，列表项为li。固定结构：.pic（图片区）+ .con（内容区）。内容区固定层级：.title（标题）→ .intro（摘要）→ .others（扩展区）。有图/无图仅替换图片src，不改变DOM结构，保证CSS样式统一生效。
参数适配逻辑 DisplayPic：控制整个.pic容器显示/隐藏。 DisplayNopic：仅无图时生效，控制是否显示默认图。 PicFollowTitle：控制图片浮动方向：true=标题后展示，false=标题前展示。 ImageWidth/Height：强制赋值给img标签，保证图片尺寸统一。

关联引用

文章模型：《文章模型》 - 了解文章模型的更多组件和参数
扩展字段：《扩展字段》 - 扩展字段可结合文章组件实现更丰富的展示效果