主要改动 - templates/public/base.html - 增加 3 套响应式断点:≤900px(平板)、≤600px(手机)、≤360px(小屏) - topbar 在小屏下压缩 padding/字号,actions 自适应换行 - grid 卡片在手机端最小 160px,小屏单列 - 卡片字号、间距在手机端缩放 - 增加 sticky 分类目录条占位 - 增加回到顶部按钮(滚动后显示) - 增加暗色模式 CSS(prefers-color-scheme + data-theme 手动覆盖)和主题切换按钮 - 补充 theme-color、viewport 等移动端 meta - templates/public/index.html - 输出 5 个分类的 sticky 目录导航(点击锚点跳转) - 每个 section 设置 id=cat-N 锚点 - 卡片 title/url 增加 title 提示 - templates/public/category.html - 目录条加返回首页 + 当前分类名 - section 锚点统一为 cat-detail 验证 - curl 抓取 /site/ 响应 200,HTML 中 10 项响应式/交互特性检查全部通过 - 服务器本地运行无异常
52 lines
2.1 KiB
HTML
52 lines
2.1 KiB
HTML
{% extends 'public/base.html' %}
|
|
|
|
{# 分类目录条(sticky 顶部导航) #}
|
|
{% block cat_nav %}
|
|
{% if groups %}
|
|
<nav class="cat-nav" aria-label="分类导航">
|
|
<div class="cat-nav-inner">
|
|
{% for category in groups.keys() %}
|
|
<a href="#cat-{{ loop.index }}">{{ category }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
{% if not groups %}
|
|
<div class="empty">
|
|
<i class="layui-icon layui-icon-face-surprised" style="font-size:48px;color:#ccc;"></i>
|
|
<p>暂无导航数据,请先在后台【系统管理 → 导航管理】添加。</p>
|
|
</div>
|
|
{% else %}
|
|
{% for category, items in groups.items() %}
|
|
{% set cat_id = 'cat-' ~ loop.index %}
|
|
<section class="section" id="{{ cat_id }}">
|
|
<div class="section-header">
|
|
<h2>{{ category }}</h2>
|
|
<div class="meta">
|
|
共 {{ items|length }} 个 ·
|
|
<a href="{{ url_for('public_nav.category_detail', name=category) }}">查看全部 →</a>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
{% for item in items %}
|
|
<a class="card"
|
|
href="{{ item.url }}"
|
|
{% if item.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
|
|
<div class="title-row">
|
|
<div class="icon-wrap">
|
|
<i class="layui-icon {{ item.icon }}"></i>
|
|
</div>
|
|
<div class="title" title="{{ item.title }}">{{ item.title }}</div>
|
|
</div>
|
|
<div class="desc">{{ item.description or '暂无描述' }}</div>
|
|
<div class="url" title="{{ item.url }}">{{ item.url }}</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endblock %} |