cms-SiteForge/themes/_professional_components.html

{% macro cover(item, kind='product') %}
  {% if item.cover %}<img class="pro-photo" src="{{ safe_image(item.cover) }}" alt="{{ item.title }}" loading="lazy" decoding="async">
  {% 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, semantic_icons=False) %}
<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 labels.get(item.type,'PROJECT') }}</span><span>{{ '%02d'|format(position+1) }}</span></div>
  <h3>{{ item.title }}</h3><p>{{ (item.summary or '')[:128] }}</p><span class="pro-card-link">查看详情 {% if semantic_icons %}<svg class="auto-icon" aria-hidden="true" focusable="false"><use href="assets/auto-icons.svg#{{ 'car' if kind in ('vehicle','catalog','product') else 'news' if kind == 'news' else 'file' }}"></use></svg>{% else %}<span aria-hidden="true">↗</span>{% endif %}</span></div>
</a>
{% endmacro %}
{% macro grid(items,kind='product',semantic_icons=False) %}<div class="pro-grid pro-grid-{{ kind }}">{% for item in items %}{{ card(item,kind,loop.index0,semantic_icons) }}{% else %}<div class="pro-empty">该栏目还没有发布内容。可在网站工厂的内容中心添加内容并重新构建。</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 }}">浏览全部 <span>↗</span></a>{% endif %}</div>{% endmacro %}
{% macro filters() %}<div class="pro-filter-panel"><label><span>搜索</span><input type="search" data-pro-filter-search placeholder="按名称或内容筛选"></label><label><span>品牌</span><select data-pro-filter-brand><option value="">全部品牌</option></select></label><label><span>分类</span><select data-pro-filter-category><option value="">全部分类</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">可在管理后台完善本页的内容。</p>{% endif %}{% endmacro %}