日历式文章图文列表

模块概述

日历式文章图文列表组件基于公版组件进行扩展，实现个性化发布时间的图文展示，以"日历式"样式呈现文章日期信息。

核心功能

按"年 + 月日"分层展示日期（增强视觉识别）
展示文章标题与摘要内容
支持缩略图显示（存在图片时自动展示）
提供灵活的日期格式配置能力

适用场景

该组件适用于新闻列表、通知公告等场景，能够有效提升信息的层级感与可读性。

核心价值

提升信息层级感，便于用户快速定位内容
增强日期可视化，提升用户体验
灵活的配置能力，适应不同项目需求

核心功能分类

日历式文章列表调用

场景描述

此场景适用于需要以日历式样式展示文章列表的场景，如新闻中心、通知公告等页面。通过将发布日期以"年 + 月日"分层展示，增强信息的视觉识别度，提升用户阅读体验。

视图代码

<ul class="pageTPList">
    @Power.ArticleList("文章图文列表", new {
        Node = Model,
        Paging = true,
        TitleLength = 120,
        PicFollowTitle = false,
        ContentLength = 300,
        ImageWidth = 300,
        ImageHeight = 200,
        DateFollowTitle = false,
        DisplayDateTime = "yyyy",
        MinorDateFormat = "MM-dd",
        RefNode = true
    })
</ul>

参数说明

参数名	中文名	类型	默认值	详细说明
Node	节点	节点实体	Model	必填：要调用的节点实体或节点标识符
Paging	分页	Boolean	false	是否启用分页功能
TitleLength	标题长度	Int32	120	标题截断长度（按字符计算），超长部分显示为省略号
PicFollowTitle	图片跟随标题	Boolean	false	控制图片位置：true表示图片显示在标题后，false表示显示在标题前
ContentLength	内容长度	Int32	300	正文/摘要的截断长度（按字符计算）
ImageWidth	图片宽度	Int32	300	封面图渲染宽度（像素单位）
ImageHeight	图片高度	Int32	200	封面图渲染高度（像素单位）
DateFollowTitle	日期跟随标题	Boolean	false	控制发布日期显示位置：true表示日期跟随标题后显示，false表示显示在标题前
DisplayDateTime	主日期格式	String	"yyyy"	主日期格式（通常用于年份），支持标准时间格式化规则
MinorDateFormat	附加日期格式	String	"MM-dd"	附加日期格式（通常用于"月-日"），用于构建日历式展示效果
RefNode	引用节点	Boolean	true	是否包含通过"引用节点"关联的内容

示例效果

示意图

日历式文章图文列表效果展示，日期以"年 + 月日"分层展示，文章标题与摘要内容清晰呈现，缩略图按需显示，整体布局美观且信息层次分明。

HTML结构示例

<li>
    <span class="date">
        <span class="dd">01-07</span>
        <span class="ym">2026</span>
    </span>
    <div class="pic">
        <a href="#" target="_blank">
            <img src="demo.png" width="300" height="200">
        </a>
    </div>
    <div class="con">
        <div class="title">
            <a href="#">示例标题</a>
        </div>
        <div class="intro">
            示例简介内容……
        </div>
    </div>
</li>

样式实现

.pageTPList li {
    display: flex;
    gap: 30px;
    padding: 30px;
    border-bottom: 1px solid #eee;
}

.pageTPList .pic {
    width: 210px;
}

.pageTPList .title {
    font-size: 18px;
    font-weight: bold;
}

.pageTPList .intro {
    margin-top: 15px;
    color: #999;
}

.pageTPList .date {
    order: 1;
}

.pageTPList .date .dd {
    font-size: 30px;
}

.pageTPList .date .ym {
    font-size: 16px;
}

注意事项

日期格式配置：DisplayDateTime和MinorDateFormat需配合使用，共同构建日历式展示效果
Flex布局：使用Flex布局实现结构排列，通过order控制日期位置
间距控制：使用gap控制元素间距，确保布局美观
图片尺寸：合理设置ImageWidth和ImageHeight，避免图片变形
分页设置：如需分页功能，需配合通用分页组件使用
日期位置：通过DateFollowTitle控制日期显示位置，根据设计需求选择合适的位置

实现要点

使用Flex布局实现结构排列
使用gap控制间距
使用order控制日期位置
通过日期格式拆分实现日历效果
支持图片与文本灵活组合展示

关联引用

文章模型：《文章模型》 - 了解文章模型的更多组件和参数
扩展字段：《扩展字段》 - 扩展字段可结合文章组件实现更丰富的展示效果
通用分页：如需分页功能，请结合通用分页组件使用