style(public): 前台导航页响应式适配 + 暗色模式 + 锚点目录

主要改动
- 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 项响应式/交互特性检查全部通过
- 服务器本地运行无异常
This commit is contained in:
bwstudio
2026-09-05 15:33:45 +08:00
parent 115585c00d
commit 9ba96bcc3e
3 changed files with 251 additions and 38 deletions
+17 -3
View File
@@ -1,5 +1,18 @@
{% 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">
@@ -8,7 +21,8 @@
</div>
{% else %}
{% for category, items in groups.items() %}
<section class="section">
{% set cat_id = 'cat-' ~ loop.index %}
<section class="section" id="{{ cat_id }}">
<div class="section-header">
<h2>{{ category }}</h2>
<div class="meta">
@@ -25,10 +39,10 @@
<div class="icon-wrap">
<i class="layui-icon {{ item.icon }}"></i>
</div>
<div class="title">{{ item.title }}</div>
<div class="title" title="{{ item.title }}">{{ item.title }}</div>
</div>
<div class="desc">{{ item.description or '暂无描述' }}</div>
<div class="url">{{ item.url }}</div>
<div class="url" title="{{ item.url }}">{{ item.url }}</div>
</a>
{% endfor %}
</div>