Files
cms-SiteForge/themes/trade-pro/_professional_components.html
T
浅念 5797638caf feat: trade-pro skeleton theme package (Phase 2)
Fifth built-in theme: English-first international B2B skeleton registered
via manifest discovery, builds real sites end-to-end. pro.html derives
from industrial with lang=en, href-set value-comparison English fallback
nav (header + footer), sf-tp-* button classes and hard-coded #0b3d91
theme-color until the map entry lands. pages/ ships all 14 kinds; macro
library is an English passthrough copy pending the Phase 3 cms port.

Co-Authored-By: Claude Code <noreply@anthropic.com>
2026-10-22 18:19:30 +08:00

20 lines
2.8 KiB
HTML

{# trade-pro skeleton macro library: passthrough copy of the shared
themes/_professional_components.html with English strings. Phase 3 (Task 9+)
replaces these with the ported cms design and the SVG icon set. #}
{% macro cover(item, kind='product') %}
{% if item.cover %}<img class="pro-photo" src="{{ safe_image(item.cover) }}" alt="{{ item.title }}" loading="lazy">
{% else %}<div class="pro-art pro-art-{{ kind }}"><span class="pro-art-ring"></span><span class="pro-art-center">{{ (item.title or 'SF')[:2] }}</span><span class="pro-art-label">{{ kind|upper }}</span></div>{% endif %}
{% endmacro %}
{% macro card(item, kind='product', position=0) %}
<a class="pro-card pro-card-{{ kind }}" href="{{ safe_href(item.route) }}" data-category="{{ fields_of(item).get('category','') }}" data-brand="{{ fields_of(item).get('brand','') }}">
<div class="pro-card-cover">{{ cover(item,kind) }}</div>
<div class="pro-card-body"><div class="pro-card-meta"><span>{{ fields_of(item).get('brand') or fields_of(item).get('category') or {'product':'PRODUCT','vehicle':'VEHICLE','post':'NEWS','case':'CASE','brand':'BRAND','service':'SERVICE'}.get(item.type,'CONTENT') }}</span><span>{{ '%02d'|format(position+1) }}</span></div>
<h3>{{ item.title }}</h3><p>{{ (item.summary or '')[:128] }}</p><span class="pro-card-link">View details <span aria-hidden="true">↗</span></span></div>
</a>
{% endmacro %}
{% macro grid(items,kind='product') %}<div class="pro-grid pro-grid-{{ kind }}">{% for item in items %}{{ card(item,kind,loop.index0) }}{% else %}<div class="pro-empty">No published content in this section yet.</div>{% endfor %}</div>{% endmacro %}
{% macro section_title(eyebrow,heading,href='') %}<div class="pro-section-head"><div><span class="pro-eyebrow">{{ eyebrow }}</span><h2>{{ heading }}</h2></div>{% if href %}<a class="pro-text-link" href="{{ href }}">Browse all <span>↗</span></a>{% endif %}</div>{% endmacro %}
{% macro filters() %}<div class="pro-filter-panel"><label><span>Search</span><input type="search" data-pro-filter-search placeholder="Filter by name or content"></label><label><span>Brand</span><select data-pro-filter-brand><option value="">All brands</option></select></label><label><span>Category</span><select data-pro-filter-category><option value="">All categories</option></select></label><span class="pro-filter-count" data-pro-filter-count role="status"></span></div>{% endmacro %}
{% macro footer_links(nav) %}<ul>{% for item in nav[:7] %}<li><a href="{{item.route}}">{{item.title}}</a></li>{% endfor %}</ul>{% endmacro %}
{% macro body_copy(content,page) %}{% if content %}<div class="pro-rich">{{ content }}</div>{% elif page.summary %}<p class="pro-lead">{{ page.summary }}</p>{% else %}<p class="pro-muted">Complete this page's content in the admin console.</p>{% endif %}{% endmacro %}