feat: port cms listing layout into trade-pro (kind-branched cards/filters/pagination)
Task 10c. listing.html (category.html now includes it) replaces the thin pro-inner-hero variant with the cms list designs: - product-like listings (product/vehicle/brand/case/service) get the products/[...page].astro form: ported PageHero, 260px sticky category side panel, 3-col sf-tp-card grid reusing the 10a card components - post-like listings (/news/, /post/) get the news/[...page].astro form: 1fr+310px two-col layout, horizontal news rows (290px media + tag/ title/summary/Read more), three aside boxes (Latest/Popular/count) - pagination is the cms Pagination window (first/last + current-2..+2, ellipsis collapse) with arrow-left/arrow-right SVG icons and builder-consistent URLs (page 1 = section root) - platform filter contract kept: .pro-filter-panel stays the immediate previous sibling of .pro-filter-scope (pro.js previousElementSibling lookup); cards/rows carry .pro-card + data-brand/data-category - empty sections hide filters/grid/pagination behind a friendly empty state (noindex scaffold pages) Test: test_trade_pro_listing_layout_structure drives a real build with 105 imported products + 3 posts, asserting both branches, static pagination on /categories/pumps/ pages 1-2, contract adjacency, and no bare arrow glyphs. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
浅念
@@ -1,2 +1,4 @@
|
||||
<section class="pro-inner-hero pro-listing-hero"><div class="pro-wrap"><span class="pro-eyebrow">DISCOVER / {{'CATEGORY' if kind=='category' else 'COLLECTION'}}</span><h1>{{page.title}}</h1><p>{{page.summary or 'Browse all published content in this section.'}}</p><div class="pro-breadcrumb"><a href="/">Home</a><span>／</span><strong>{{page.title}}</strong></div></div></section>
|
||||
<section class="pro-section pro-list-section"><div class="pro-wrap">{{ filters() }}<div class="pro-filter-scope">{{grid(listing,'catalog')}}</div>{% if pagination and pagination.pages>1 %}<nav class="pro-pages-nav" aria-label="Catalogue pagination">{% if pagination.previous %}<a href="{{pagination.previous}}" rel="prev">{{ icon('arrow-left') }} Previous</a>{% endif %}<span>Page {{pagination.page}} of {{pagination.pages}}</span>{% if pagination.next %}<a href="{{pagination.next}}" rel="next">Next {{ icon('arrow-right') }}</a>{% endif %}</nav>{% endif %}</div></section>
|
||||
{# 派生分类页与 listing 同构（Task 10c 起共用同一列表布局；
|
||||
分类上下文由 theme_pro.select_listing 按 page.category 过滤产品组，
|
||||
分页来自构建期 render_paginated 的 _pagination）。 #}
|
||||
{% include 'pages/listing.html' %}
|
||||
|
||||
@@ -1,2 +1,131 @@
|
||||
<section class="pro-inner-hero pro-listing-hero"><div class="pro-wrap"><span class="pro-eyebrow">DISCOVER / {{'CATEGORY' if kind=='category' else 'COLLECTION'}}</span><h1>{{page.title}}</h1><p>{{page.summary or 'Browse all published content in this section.'}}</p><div class="pro-breadcrumb"><a href="/">Home</a><span>／</span><strong>{{page.title}}</strong></div></div></section>
|
||||
<section class="pro-section pro-list-section"><div class="pro-wrap">{{ filters() }}<div class="pro-filter-scope">{{grid(listing,'catalog')}}</div>{% if pagination and pagination.pages>1 %}<nav class="pro-pages-nav" aria-label="Catalogue pagination">{% if pagination.previous %}<a href="{{pagination.previous}}" rel="prev">{{ icon('arrow-left') }} Previous</a>{% endif %}<span>Page {{pagination.page}} of {{pagination.pages}}</span>{% if pagination.next %}<a href="{{pagination.next}}" rel="next">Next {{ icon('arrow-right') }}</a>{% endif %}</nav>{% endif %}</div></section>
|
||||
{# trade-pro listing / category — cms 列表设计移植（Task 10c）。
|
||||
设计源 D:/project/cms/runtimes/astro-site-runtime/src/pages/[locale]/：
|
||||
- products/[...page].astro：PageHero + 260px 产品分类侧栏（sticky）+
|
||||
SectionHead + 3 列卡片栅格（CardGrid cols-3）+ 窗口式分页
|
||||
- news/[...page].astro：PageHero + 1fr/310px 双栏；列表列为横向新闻行
|
||||
（290px 封面 + tag/标题/摘要/Read more），侧栏三盒
|
||||
（Latest / Popular / Categories 计数）
|
||||
与 cms 的结构决策：
|
||||
1. kind 分支按列表内容类型：post 类（/news/、/post/ 等文章集合）用
|
||||
新闻行形态；其余（product/vehicle/brand/case/service）复用产品卡片
|
||||
栅格——cms 只定义了这两种列表设计，品牌/案例/服务映射到产品卡形态
|
||||
（与 brand.html 相关产品、product.html 相关产品一致）。
|
||||
2. 产品分类侧栏仅产品类列表渲染（侧栏链接是产品分类语义，出现在
|
||||
/brands/ 等页面会误导）；文章分支的侧栏是 cms 新闻三盒。空分类
|
||||
数据时侧栏整段隐藏，主列变单栏。
|
||||
3. cms news 页的 Tab 行（All/Company News/...）与 products 页 hero 的
|
||||
“Explore Products”锚点按钮是内容数据驱动 / 页内锚点跳转，平台无
|
||||
对应数据源与目标锚点，不移植；筛选面板承担列表交互入口。
|
||||
4. 平台筛选契约（test_theme_pro_v3 对所有主题 listing 断言）保留：
|
||||
filters() 宏输出 .pro-filter-panel 且必须保持为 .pro-filter-scope
|
||||
的紧邻前兄弟（pro.js 用 previousElementSibling 定位面板）；卡片与
|
||||
新闻行都携带 .pro-card + data-brand/data-category（pro.js 过滤的
|
||||
数据源与零结果空态都依赖它们）。
|
||||
5. 分页器是 cms Pagination 的窗口式页码（首尾必现 + 当前±2，其余折叠
|
||||
为省略号），上一页/下一页用 arrow-left/arrow-right SVG（Task 9 图标
|
||||
契约：交互箭头一律 SVG，无裸箭头字符）；页码 URL 与构建期静态分页
|
||||
路由一致（第 1 页 = 栏目根，形如 /products/page/2/ 递增）。
|
||||
6. 空列表：筛选、栅格、分页整段隐藏，替换为友好空态提示（cms 站点
|
||||
恒有内容，平台必须处理 noindex 栏目占位页的空集）。 #}
|
||||
{% set tp_post_like = (listing and listing[0].type == 'post') or ('news' in route or 'post' in route) %}
|
||||
{% set tp_eyebrow = 'NEWS & INSIGHTS' if tp_post_like else 'PRODUCT CATALOGUE' %}
|
||||
{% set tp_hero_img = safe_image(page.cover) %}
|
||||
{% set tp_lead = page.summary or ('Industry updates, project stories and exhibition news from our team.' if tp_post_like else 'Browse the full catalogue with specifications, brands and categories.') %}
|
||||
{% set pg_root = (route.split('/page/')[0]).rstrip('/') ~ '/' %}
|
||||
{# 分页导航宏：显式传参（pg/base/icon），不依赖模板上下文闭包 #}
|
||||
{% macro tp_pages(pg, base, icon) -%}
|
||||
{% if pg and pg.pages > 1 %}
|
||||
{% set cur = pg.page %}{% set last = pg.pages %}{% set win = [] %}
|
||||
{% for i in range(1, last + 1) %}
|
||||
{% if i == 1 or i == last or (i - cur)|abs <= 2 %}{% if win.append(i) %}{% endif %}
|
||||
{% elif win and win[-1] != '…' %}{% if win.append('…') %}{% endif %}{% endif %}
|
||||
{% endfor %}
|
||||
<nav class="sf-tp-pagination" aria-label="Pagination">
|
||||
{% if pg.previous %}<a class="sf-tp-page-arrow" href="{{ pg.previous }}" rel="prev" aria-label="Previous page">{{ icon('arrow-left', size='16') }}</a>
|
||||
{% else %}<span class="sf-tp-page-arrow is-disabled" aria-hidden="true">{{ icon('arrow-left', size='16') }}</span>{% endif %}
|
||||
{% for n in win %}{% if n == '…' %}<span class="sf-tp-page-dots">…</span>
|
||||
{% elif n == cur %}<span class="sf-tp-page-num is-active" aria-current="page">{{ n }}</span>
|
||||
{% else %}<a class="sf-tp-page-num" href="{{ base if n == 1 else base ~ 'page/' ~ n ~ '/' }}">{{ n }}</a>{% endif %}{% endfor %}
|
||||
{% if pg.next %}<a class="sf-tp-page-arrow" href="{{ pg.next }}" rel="next" aria-label="Next page">{{ icon('arrow-right', size='16') }}</a>
|
||||
{% else %}<span class="sf-tp-page-arrow is-disabled" aria-hidden="true">{{ icon('arrow-right', size='16') }}</span>{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
{%- endmacro %}
|
||||
<section class="sf-tp-page-hero">
|
||||
{% if tp_hero_img %}<img class="sf-tp-page-hero-bg" src="{{ tp_hero_img }}" alt="" width="1600" height="900" fetchpriority="high" decoding="async">{% endif %}
|
||||
<div class="sf-tp-page-hero-overlay" aria-hidden="true"></div>
|
||||
<div class="wrap">
|
||||
<div class="sf-tp-page-hero-copy" data-reveal>
|
||||
<span class="eyebrow">{{ tp_eyebrow }}</span>
|
||||
<h1>{{ page.title }}</h1>
|
||||
<p class="sf-tp-page-hero-lead">{{ tp_lead }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% if listing %}
|
||||
{% if tp_post_like %}
|
||||
<section class="section sf-tp-news-section"><div class="wrap"><div class="sf-tp-news-layout">
|
||||
<div class="sf-tp-news-list">
|
||||
{{ filters() }}
|
||||
<div class="pro-filter-scope sf-tp-news-rows">
|
||||
{% for item in listing %}
|
||||
<article class="sf-tp-news-row pro-card" data-reveal style="--reveal-i: {{ loop.index0 % 3 }}" data-brand="{{ fields_of(item).get('brand','') }}" data-category="{{ fields_of(item).get('category','') }}">
|
||||
<div class="sf-tp-news-row-media sf-tp-card-media">{{ cover(item, 'post') }}</div>
|
||||
<div class="sf-tp-news-body">
|
||||
<span class="sf-tp-tag">{{ fields_of(item).get('tag') or fields_of(item).get('category') or 'News' }}</span>
|
||||
<h3><a href="{{ safe_href(item.route) }}">{{ item.title }}</a></h3>
|
||||
<p>{{ (item.summary or '')[:200] }}</p>
|
||||
<a class="sf-tp-more" href="{{ safe_href(item.route) }}">Read more {{ icon('arrow-right', cls='sf-tp-icon--sm') }}</a>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ tp_pages(pagination, pg_root, icon) }}
|
||||
</div>
|
||||
<aside class="sf-tp-news-aside">
|
||||
<div class="sf-tp-aside-box" data-reveal><h3>Latest posts</h3>{% for p in listing[:5] %}<p><a href="{{ safe_href(p.route) }}">{{ p.title }}</a></p>{% endfor %}</div>
|
||||
<div class="sf-tp-aside-box" data-reveal style="--reveal-i: 1"><h3>Popular reads</h3><ol>{% for p in listing[:5] %}<li>{{ p.title }}</li>{% endfor %}</ol></div>
|
||||
<div class="sf-tp-aside-box" data-reveal style="--reveal-i: 2"><h3>Categories</h3><p>All news <strong>{{ groups['post']|length }}</strong></p></div>
|
||||
</aside>
|
||||
</div></div></section>
|
||||
{% else %}
|
||||
{% set tp_kind = listing[0].type %}
|
||||
{% set tp_show_side = categories and tp_kind in ('product', 'vehicle') %}
|
||||
<section class="section sf-tp-catalogue-section"><div class="wrap{{ ' sf-tp-catalogue-layout' if tp_show_side else ' sf-tp-catalogue-single' }}">
|
||||
{% if tp_show_side %}
|
||||
<aside class="sf-tp-side-panel" aria-label="Product categories" data-reveal>
|
||||
<h3>Product categories</h3>
|
||||
<a class="sf-tp-side-link{{ ' sf-tp-side-link--active' if route == '/products/' }}" href="/products/">All products</a>
|
||||
{% for cat in categories[:12] %}<a class="sf-tp-side-link{{ ' sf-tp-side-link--active' if cat.url == route }}" href="{{ cat.url }}">{{ cat.name }}</a>{% endfor %}
|
||||
</aside>
|
||||
{% endif %}
|
||||
<div class="sf-tp-catalogue-main">
|
||||
<div class="sf-tp-section-head" data-reveal>
|
||||
<div><span class="eyebrow">{{ tp_eyebrow }}</span><h2>{{ page.title }}</h2></div>
|
||||
<p class="sf-tp-intro">{{ tp_lead }}</p>
|
||||
</div>
|
||||
{{ filters() }}
|
||||
<div class="pro-filter-scope sf-tp-card-grid sf-tp-card-grid--listing">
|
||||
{% for item in listing %}
|
||||
<a class="sf-tp-card pro-card" href="{{ safe_href(item.route) }}" data-reveal style="--reveal-i: {{ loop.index0 % 4 }}" data-brand="{{ fields_of(item).get('brand','') }}" data-category="{{ fields_of(item).get('category','') }}">
|
||||
<div class="sf-tp-card-media">{{ cover(item, tp_kind) }}</div>
|
||||
<div class="sf-tp-card-body">
|
||||
<h3>{{ item.title }}</h3>
|
||||
<p>{{ (item.summary or 'Published specifications available on request.').split('.')[0] }}.</p>
|
||||
<span class="sf-tp-more">View details {{ icon('arrow-right', cls='sf-tp-icon--sm') }}</span>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{{ tp_pages(pagination, pg_root, icon) }}
|
||||
</div>
|
||||
</div></section>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<section class="section sf-tp-listing-section"><div class="wrap">
|
||||
<div class="sf-tp-listing-empty" data-reveal>
|
||||
<h2>Nothing published here yet</h2>
|
||||
<p>Content added to this section in the admin console appears here automatically.</p>
|
||||
</div>
|
||||
</div></section>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user