diff --git a/tests/test_theme_registry.py b/tests/test_theme_registry.py index e3f8e93..8ae6bae 100644 --- a/tests/test_theme_registry.py +++ b/tests/test_theme_registry.py @@ -336,6 +336,71 @@ def test_trade_pro_listing_layout_structure(factory): assert 'sf-tp-pagination' not in cases +def test_trade_pro_article_layout_structure(factory): + # Task 10d：article.html 移植 cms 文章详情设计（news/[slug].astro，像素基准 + # dist/hesupipe/en/news//）后的结构契约。构建流（/preview/ HTTP）+ + # 带 cover/publish_date/富文本正文的文章条目 + 4 条其他文章驱动断言： + # hero（.pro-article-hero 平台契约保留 + 封面底图 + 面包屑）、meta 行 + # （分类胶囊 · 发布日期 · 作者）、富文本正文容器、作者卡、下一篇导航、 + # More News 相关盒（不含自身、不含下一篇的去重列表）+ 侧栏 CTA + 返回； + # 交互箭头一律 SVG，无裸箭头字符。 + import re + sid = site(factory) + assert factory.post(f'/api/factory/sites/{sid}/bootstrap').status_code == 200 + made = factory.post(f'/api/sites/{sid}/entries', json={ + 'type': 'post', 'title': 'HDPE Pipe Export Standards Update', 'route': '/news/hdpe-standards/', + 'cover': 'https://imgs.example/hdpe-cover.jpg', 'summary': 'Updated inspection rules for HDPE pipe exports.', + 'body': '

Inspection requirements for HDPE pipe exports.

Packaging

Bundles are wrapped and strapped.

', + 'meta': {'fields': {'category': 'Company News', 'publish_date': '2026-10-18', 'author': 'Trade Desk'}}}) + assert made.status_code in (200, 201), made.text + for i in range(4): + r = factory.post(f'/api/sites/{sid}/entries', json={ + 'type': 'post', 'title': f'Worksite Report {i}', 'route': f'/news/worksite-{i}/', + 'summary': f'Installation report from worksite {i}.'}) + assert r.status_code in (200, 201), r.text + assert factory.put(f'/api/factory/sites/{sid}/theme', json={'theme': 'trade-pro', 'version': '1.0.0'}).status_code == 200 + bid = factory.post(f'/api/sites/{sid}/builds', json={}).json()['version'] + r = factory.get(f'/preview/{sid}/{bid}/news/hdpe-standards/') + assert r.status_code == 200, r.text[:400] + html = r.text + soup = BeautifulSoup(html, 'html.parser') + # hero：.pro-article-hero 契约保留（test_theme_pro_v3 对所有主题断言）+ + # 封面作 hero 底图 + 面包屑（Home › News › 标题）+ 唯一 h1 + reveal + hero = soup.select_one('section.sf-tp-article-hero.pro-article-hero') + assert hero is not None + bg = hero.select_one('.sf-tp-page-hero-bg') + assert bg is not None and 'hdpe-cover.jpg' in bg.get('src', '') + assert hero.select_one('.sf-tp-breadcrumb a[href$="/news/"]') + assert hero.select_one('.sf-tp-page-hero-copy[data-reveal] h1') + assert len(soup.find_all('h1')) == 1 + # meta 行：分类胶囊 + 发布日期（time）+ 作者字段 + meta = soup.select_one('.sf-tp-article-meta') + assert meta is not None and 'Company News' in meta.get_text() + assert meta.find('time') is not None and '2026-10-18' in meta.find('time').get_text() + assert 'Trade Desk' in meta.get_text() + # 正文：body_copy 富文本容器（加粗与小节标题随文渲染） + body = soup.select_one('.sf-tp-article-body .pro-rich') + assert body is not None and 'HDPE' in body.get_text() and 'Packaging' in body.get_text() + # 分隔线 + 作者卡（首字母头像） + assert soup.select_one('.sf-tp-article-divider') is not None + assert soup.select_one('.sf-tp-article-author .sf-tp-article-avatar') is not None + # 下一篇导航：排除自身后的首条其他文章 + nxt = soup.select_one('a.sf-tp-next-story') + assert nxt is not None and 'Worksite Report' in nxt.get_text() + # 相关阅读：More News 盒 3 条（其余文章），不含自身、不与下一篇重复 + items = soup.select('.sf-tp-article-side-box a.sf-tp-article-side-item') + assert len(items) == 3 + texts = [i.get_text() for i in items] + assert all('HDPE Pipe Export Standards' not in t for t in texts) + assert nxt.get('href') not in [i.get('href') for i in items] + assert items[0].select_one('.sf-tp-card-media img, .sf-tp-card-media .pro-art') + # 侧栏 CTA 指向联系页；返回链接回 /news/ + assert soup.select_one('.sf-tp-article-side-cta a.sf-tp-btn[href$="/contact/"]') + assert soup.select_one('a.sf-tp-article-back[href$="/news/"]') + # 交互箭头一律 SVG（Task 9 契约），链接文本无裸箭头字符 + assert not re.search(r'[←→↗↘⌕▾]', ''.join(a.get_text() for a in soup.find_all('a'))) + + def test_frontend_entries_include_trade_pro(): from pathlib import Path base = Path(__file__).resolve().parent.parent diff --git a/themes/trade-pro/pages/article.html b/themes/trade-pro/pages/article.html index 6983f2d..e926374 100644 --- a/themes/trade-pro/pages/article.html +++ b/themes/trade-pro/pages/article.html @@ -1 +1,89 @@ -
LATEST NEWS / INSIGHTS

{{page.title}}

{{page.summary}}

{% if fields.get('publish_date') %}{% endif %}
{% if page.cover %}{{page.title}}{% endif %}{{body_copy(content,page)}}{{ icon('arrow-left') }} Back to news
+{# trade-pro article detail — cms 文章详情设计移植（Task 10d）。 + 区块序列对照 D:/project/cms/runtimes/astro-site-runtime/src/pages/[locale]/news/[slug].astro + （像素基准 dist/hesupipe/en/news//）： + 面包屑（hero 顶部）→ PageHero（眉题=分类 / h1 / 导语 / 封面底图 + brand-soft 罩） + → meta 行（分类胶囊 · 发布日期 · 作者）→ 富文本正文 → 分隔线 → 作者卡 + → 下一篇导航 → More News 相关盒（120px 缩略图 + 分类 + 标题）+ 深色侧栏 + CTA + 返回列表（1fr + 300px 双列带）。 + 与 cms 的结构决策： + 1. .pro-article-hero 平台契约类保留挂在 hero 上（test_theme_pro_v3 对所有 + 主题 article 页断言该类存在）；pro-base 骨架的居中排版与巨型 h1 由 + pro.css 的 article 作用域规则按特异性压平。 + 2. cms 的“下一篇”按全量列表顺序取模回绕、相关阅读同 tag 优先补位； + 平台 groups['post'] 无稳定语义顺序，简化为：下一篇 = 排除自身后首条， + 相关盒 = 其余文章取 3（与下一篇去重，小数据集不出现重复链接）。 + 3. 日期字段是 meta.fields.publish_date（blueprints 为 post 定义的发布日期 + 字段），YYYY-MM-DD 原串直出（cms 同款，不做本地化重排）；作者缺省回落 + “{site.name} Editorial Team”（cms 的 HESU Team 位）。 + 4. cms 正文区分富文本/纯文本双通道（纯文本首段 lead-para 放大）；平台正文 + 统一走 body_copy（.pro-rich 基线 + pro.css 的 sf-tp-article-body 排版层）， + 无纯文本分支。 + 5. 页尾 CTA 横幅由 pro.html 的 .pro-end-cta 承担，cms 的 Cta 组件不重复。 #} +{% set tp_others = groups['post']|rejectattr('route','equalto',page.route)|list %} +{% set tp_next = tp_others[0] if tp_others else none %} +{% set tp_related = tp_others[1:4] %} +
+ {% if page.cover %}{% endif %} + +
+ +
+ {{ fields.get('category') or 'NEWS & INSIGHTS' }} +

{{ page.title }}

+ {% if page.summary %}

{{ page.summary }}

{% endif %} +
+
+
+
+
+
+ {{ fields.get('category') or 'News' }} + {% if fields.get('publish_date') %}{% endif %} + + {{ fields.get('author') or (site.name ~ ' Editorial Team') }} +
+
{{ body_copy(content, page) }}
+ +
+
+ +
+ {{ fields.get('author') or (site.name ~ ' Editorial Team') }} + {{ (footer_text or site.tagline or 'Industry insights and company news from our team.')|truncate(80, True, '…') }} +
+
+
+ {% if tp_next %} + + Next story + {{ tp_next.title }} {{ icon('arrow-right', cls='sf-tp-icon--sm') }} + + {% endif %} +
+
+{% if tp_related %} +
+
+
+

More news

+ {% for p in tp_related %} + +
{{ cover(p, 'post') }}
+
+ {{ fields_of(p).get('category') or 'News' }} + {{ p.title }} +
+ + {% endfor %} +
+
+ {{ site.name }} +

Ready to source with confidence?

+ Get a quote {{ icon('arrow-right') }} +
+ {{ icon('arrow-left', cls='sf-tp-icon--sm') }} Back to news +
+
+{% endif %} diff --git a/themes/trade-pro/pro.css b/themes/trade-pro/pro.css index 41cba45..0842184 100644 --- a/themes/trade-pro/pro.css +++ b/themes/trade-pro/pro.css @@ -365,3 +365,83 @@ .sf-theme-trade-pro .sf-tp-news-aside{margin-block-start:var(--sf-tp-space-8)} .sf-theme-trade-pro .sf-tp-page-num,.sf-theme-trade-pro .sf-tp-page-arrow{min-width:32px;height:32px} } + +/* ── Task 10d：article 文章详情（news/[slug].astro 移植）── + 源 src/pages/[locale]/news/[slug].astro：PageHero（面包屑内置）+ meta 行 + + rich-body 富文本 + 分隔线 + 作者卡 + 下一篇导航 + More News 侧盒 + （120px 缩略图行）+ 深色侧栏 CTA + 返回链接。hero 复用 10c 的 + sf-tp-page-hero 组件（底图/罩层/内边距由其提供）。 */ + +/* pro-base 的 .pro-article-hero 骨架（居中/浅底）与 .pro-article-hero h1 + （clamp(40..75px) 巨型字）按特异性压平；0,3,0 > 0,1,0 / 0,1,1 */ +.sf-theme-trade-pro .sf-tp-article-hero.pro-article-hero{text-align:start} +.sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:var(--sf-tp-font-size-display)} +/* hero 内面包屑（cms：置 hero 顶部，宽度随 copy 收敛，900 放开） */ +.sf-theme-trade-pro .sf-tp-article-breadcrumb{margin-block-end:var(--sf-tp-space-5);max-width:min(56%,var(--sf-tp-container-content-max))} +/* meta 行：tag 胶囊 · 发布日期 · 作者 */ +.sf-theme-trade-pro .sf-tp-article-meta{display:flex;align-items:center;gap:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5);flex-wrap:wrap} +.sf-theme-trade-pro .sf-tp-article-meta-dot{color:var(--sf-tp-color-neutral-400)} +/* 正文排版层（.pro-rich 基线之上，cms rich-body 同构；WP 迁移正文常带 + figure/表格，class 属性被 sanitize 剥离故不做 alignleft/right 浮动分支） */ +.sf-theme-trade-pro .sf-tp-article-body{color:var(--sf-tp-color-text-secondary);line-height:var(--sf-tp-line-height-relaxed)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich p{margin-block-end:var(--sf-tp-space-5)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich h2,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h3,.sf-theme-trade-pro .sf-tp-article-body .pro-rich h4{color:var(--sf-tp-color-text-primary);font-weight:var(--sf-tp-font-weight-bold);margin-block:var(--sf-tp-space-6) var(--sf-tp-space-3)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich img{max-width:100%;height:auto;border-radius:var(--sf-tp-radius-md);margin-block:var(--sf-tp-space-4)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich figure{margin-block:var(--sf-tp-space-6)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich figcaption{margin-block-start:var(--sf-tp-space-2);font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted);text-align:center} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich ul,.sf-theme-trade-pro .sf-tp-article-body .pro-rich ol{padding-inline-start:var(--sf-tp-space-6);margin-block-end:var(--sf-tp-space-5)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich li{margin-block-end:var(--sf-tp-space-2)} +.sf-theme-trade-pro .sf-tp-article-body .pro-rich blockquote{border-inline-start:3px solid var(--sf-tp-color-border-brand);padding-inline-start:var(--sf-tp-space-4);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-5)} +.sf-theme-trade-pro .sf-tp-article-body table{width:100%;border-collapse:collapse;font-size:var(--sf-tp-font-size-sm);margin-block:var(--sf-tp-space-6)} +.sf-theme-trade-pro .sf-tp-article-body th,.sf-theme-trade-pro .sf-tp-article-body td{border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-default);padding:var(--sf-tp-space-3) var(--sf-tp-space-4);text-align:start;vertical-align:middle} +.sf-theme-trade-pro .sf-tp-article-body tbody tr:nth-child(even) td{background:var(--sf-tp-color-neutral-50)} +/* 分隔线 + 作者卡（cms article-foot：首字母头像 + 团队名 + 简介） */ +.sf-theme-trade-pro .sf-tp-article-divider{margin-block:var(--sf-tp-space-8);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)} +.sf-theme-trade-pro .sf-tp-article-author{display:flex;align-items:center;gap:var(--sf-tp-space-4)} +.sf-theme-trade-pro .sf-tp-article-avatar{width:var(--sf-tp-space-12);height:var(--sf-tp-space-12);border-radius:var(--sf-tp-radius-full);background:var(--sf-tp-color-brand-primary);color:var(--sf-tp-color-text-on-brand);display:grid;place-items:center;font-size:var(--sf-tp-font-size-xl);font-weight:var(--sf-tp-font-weight-bold);flex:0 0 auto} +.sf-theme-trade-pro .sf-tp-article-author strong{display:block;margin-block-end:var(--sf-tp-space-1)} +.sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-muted)} +/* 下一篇导航（cms next-story：灰底卡，悬浮转 brand-soft） */ +.sf-theme-trade-pro .sf-tp-next-story{display:flex;flex-direction:column;gap:var(--sf-tp-space-2);margin-block-start:var(--sf-tp-space-8);padding:var(--sf-tp-space-5);background:var(--sf-tp-color-surface-muted);border-radius:var(--sf-tp-card-border-radius);transition:background-color var(--sf-tp-duration-fast) var(--sf-tp-easing-standard)} +.sf-theme-trade-pro .sf-tp-next-story:hover{background:var(--sf-tp-color-surface-brand-soft)} +.sf-theme-trade-pro .sf-tp-next-story-label{font-size:var(--sf-tp-font-size-xs);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);font-weight:var(--sf-tp-font-weight-semibold)} +.sf-theme-trade-pro .sf-tp-next-story-title{font-size:var(--sf-tp-font-size-md);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)} +/* 相关阅读带（cms .side）：More News 盒占宽列 + 深色 CTA 300px + 返回整行 */ +.sf-theme-trade-pro .sf-tp-article-side{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:calc(var(--sf-tp-space-8) + var(--sf-tp-space-2));align-items:start} +.sf-theme-trade-pro .sf-tp-article-side>.sf-tp-article-back{grid-column:1/-1} +.sf-theme-trade-pro .sf-tp-article-side-box{background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5)} +.sf-theme-trade-pro .sf-tp-article-side-box h3{font-size:var(--sf-tp-font-size-sm);text-transform:uppercase;letter-spacing:var(--sf-tp-letter-spacing-wide);color:var(--sf-tp-color-text-muted);margin-block-end:var(--sf-tp-space-4)} +.sf-theme-trade-pro .sf-tp-article-side-item{display:grid;grid-template-columns:120px 1fr;gap:var(--sf-tp-space-3);padding-block:var(--sf-tp-space-3);border-block-end:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle)} +.sf-theme-trade-pro .sf-tp-article-side-item:last-child{border-block-end:0;padding-block-end:0} +/* 媒体复用 sf-tp-card-media（4:3 + 裁剪 + 无图占位），补行内块与圆角 */ +.sf-theme-trade-pro .sf-tp-article-side-media{display:block;border-radius:var(--sf-tp-radius-xs)} +.sf-theme-trade-pro .sf-tp-article-side-tag{display:block;font-size:var(--sf-tp-font-size-xs);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);margin-block-end:var(--sf-tp-space-1)} +.sf-theme-trade-pro .sf-tp-article-side-title{display:block;font-size:var(--sf-tp-font-size-sm);font-weight:var(--sf-tp-font-weight-semibold);color:var(--sf-tp-color-text-primary);line-height:var(--sf-tp-line-height-snug)} +.sf-theme-trade-pro .sf-tp-article-side-item:hover .sf-tp-article-side-title{color:var(--sf-tp-color-text-brand)} +.sf-theme-trade-pro .sf-tp-article-side-cta{background:var(--sf-tp-color-surface-inverse);border-radius:var(--sf-tp-card-border-radius);padding:var(--sf-tp-space-5);display:grid;gap:var(--sf-tp-space-3);color:var(--sf-tp-color-text-inverse)} +.sf-theme-trade-pro .sf-tp-article-side-cta .eyebrow{color:var(--sf-tp-color-text-inverse-muted)} +.sf-theme-trade-pro .sf-tp-article-side-cta h3{font-size:var(--sf-tp-font-size-md);color:var(--sf-tp-color-text-inverse)} +/* 深底上的按钮换白底品牌字（沿用应用带按钮反色方案） */ +.sf-theme-trade-pro .sf-tp-article-side-cta .sf-tp-btn{justify-self:start;background:var(--sf-tp-color-surface-default);border-color:var(--sf-tp-color-surface-default);color:var(--sf-tp-color-text-brand)} +.sf-theme-trade-pro .sf-tp-article-back{font-size:var(--sf-tp-font-size-sm);color:var(--sf-tp-color-text-link);font-weight:var(--sf-tp-font-weight-semibold);display:inline-flex;align-items:center;gap:var(--sf-tp-space-2)} +.sf-theme-trade-pro .sf-tp-article-back:hover{color:var(--sf-tp-color-text-link-hover)} + +/* ── article 响应式（cms 断点 1023/620 映射到平台 900/620；折叠规则收在 + 本任务媒体块内——10a/10c 的既有折叠块在本段之前，覆盖不到 10d 类名， + 10d 也不依赖其折叠（10c 教训：同特异性按源顺序取胜））── */ +@media (max-width: 900px){ + .sf-theme-trade-pro .sf-tp-article-breadcrumb{max-width:100%} + .sf-theme-trade-pro .sf-tp-article-side{grid-template-columns:1fr} +} +@media (max-width: 620px){ + /* 本任务无媒体的 h1 复位（0,4,0）会压过 10c 的 620 hero 紧凑字号 + （0,3,0）——同选择器补回移动端字号（cms 620：28px） */ + .sf-theme-trade-pro .sf-tp-article-hero .sf-tp-page-hero-copy h1{font-size:28px;line-height:1.05} + .sf-theme-trade-pro .sf-tp-article-meta{font-size:var(--sf-tp-font-size-xs)} + .sf-theme-trade-pro .sf-tp-article-body .pro-rich p{font-size:13px} + .sf-theme-trade-pro .sf-tp-article-author span{font-size:var(--sf-tp-font-size-xs)} + .sf-theme-trade-pro .sf-tp-next-story{padding:var(--sf-tp-space-4)} + .sf-theme-trade-pro .sf-tp-article-side-box{padding:16px} + .sf-theme-trade-pro .sf-tp-article-side-item{grid-template-columns:72px 1fr} + .sf-theme-trade-pro .sf-tp-article-side-cta{padding:16px} +}