72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
<!-- templates/components/_news_card.html -->
|
|
{% load dict_tools %} {# 确保加载了过滤器，虽然这里可能不再需要 get_item，但保留以防万一 #}
|
|
|
|
<div class="news-card">
|
|
<div class="custom-tabs-header">
|
|
<div class="tabs-header-wrapper">
|
|
<ul class="nav nav-tabs" id="newsTab_{{ unique_id }}" role="tablist">
|
|
{# 核心修改：直接遍历 data 字典的 key #}
|
|
{% for tab_id, items in data.items %}
|
|
<li class="nav-item">
|
|
{# 确定显示名称：如果有 labels 字典则取 labels.tab_id，否则直接用 tab_id (或进行capitalize处理) #}
|
|
{% with display_name=tab_id %}
|
|
{# 如果 default 返回的是英文 key，可以在这里做简单的格式化，比如首字母大写，或者保持原样 #}
|
|
<a class="nav-link {% if forloop.first %}active{% endif %}"
|
|
id="{{ tab_id }}-tab_{{ unique_id }}"
|
|
data-toggle="tab"
|
|
href="#{{ tab_id }}_{{ unique_id }}"
|
|
role="tab"
|
|
aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">
|
|
{{ display_name }}
|
|
</a>
|
|
{% endwith %}
|
|
</li>
|
|
{% endfor %}
|
|
|
|
|
|
</ul>
|
|
<!-- 右侧：更多链接 (独立于 ul) -->
|
|
<a class="more-link-standalone"
|
|
href="{{ more_url|default:'#' }}">
|
|
更多 >
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-content news-list-body" id="newsTabContent_{{ unique_id }}">
|
|
|
|
{# 再次遍历 data 生成内容面板 #}
|
|
{% for tab_id, items in data.items %}
|
|
<div class="tab-pane fade {% if forloop.first %}show active{% endif %}"
|
|
id="{{ tab_id }}_{{ unique_id }}"
|
|
role="tabpanel"
|
|
aria-labelledby="{{ tab_id }}-tab_{{ unique_id }}">
|
|
|
|
<ul class="list-unstyled mb-0">
|
|
{# items 就是当前 key 对应的列表数据，直接使用 #}
|
|
{% if items %}
|
|
{% for item in items %}
|
|
<li class="news-item">
|
|
<a href="{% url route|default:"front:article_detail" pk=item.id %}"
|
|
style="text-decoration: none;color: black;">
|
|
|
|
<div class="news-title-wrapper">
|
|
<span class="bullet-point"></span>
|
|
<span class="news-title-text"
|
|
title="{{ item.title }}">{{ item.title|truncatechars:30 }}</span>
|
|
</div>
|
|
</a>
|
|
<span class="news-date">{{ item.created_at | date:"Y-m-d" }}</span>
|
|
|
|
</li>
|
|
{% endfor %}
|
|
{% else %}
|
|
<li class="text-muted text-center py-2">暂无数据</li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|