文章页头

PostHeader文章

复用真实 PostHeader,以自然宽度展示文章的开场。面包屑「文章 / 所在栏目」中「文章」回到首页,栏目取第一个标签,没有标签时只显示「文章」;元信息行的日期优先取发布时间、未发布时回退到创建时间,用标题字体的旧式数字,阅读时长与字数用等宽数字,字数带千位分隔,窄屏下整体换行。下方呈现草稿标记,以及长标题、无摘要、无标签的布局;所有内容均为本地样例。

预览

让想法生根

在时间的缝隙里,种下一些文字。记录设计、代码与日常,让零散的念头慢慢长成一片风景。

草稿标题旁显示草稿标记

还在生长的想法草稿

这一页,留给尚未完成的念头。

长标题 · 无摘要 · 无标签面包屑只剩「文章」

在时间的缝隙里种下一些文字:从零开始构建自己的数字花园

属性

名称类型默认值说明
postPostHeaderData由调用方提供页眉所需的最小字段集(标题、可选摘要、发布状态、标签、日期、阅读时长与字数),用 PostHeaderData::from(&post) 构造。
sampleboolfalse图鉴中的非跳转样例链接;正式文章使用默认值。

用法

src/components/post/post_header.rs
Leptos view!
let header = PostHeaderData::from(&post);

view! {
    <PostHeader post=header/>
}