Responsive article actions, no more header overlap

AGENTS.md

@@ -19,8 +19,8 @@ redirects.json ──────┘        (含生成的 assets/js/redirects.js
 
 构建后还有一步：`stage_markdown_copies()` 把 `cache/` 下每个 `.md` 复制到 `site/`
 同路径（如 `site/nmbot-telegram/mcp.md`），作为每页的 Markdown 版本，供
-`/llms.txt` 链接、“复制本文 Markdown”按钮、View-as-Markdown 菜单项与 AI
-打开菜单。
+`/llms.txt` 链接、“复制 Markdown”按钮、View-as-Markdown 菜单项与 AI 打开
+菜单。
 
 `generate()`（`src/nmteam_support/generator.py`）编排的完整链路：
 

README.md

@@ -70,7 +70,7 @@ Markdown 中仍使用普通图片语法，构建工具会自动输出 WebP
 - 每页 Markdown 版本：`nmteam build` 时在每个页面旁生成同路径的 `.md` 文件
     （如 `/nmbot-telegram/mcp.md`）。
 - 页面顶部的文章操作区：**复制本文 Markdown** 直接复制当前页面原文；
-    **使用［品牌图标］打开本文章** 菜单提供 GitHub 源文件、Markdown 版本，
+    **使用［品牌图标］打开本文** 菜单提供 GitHub 源文件、Markdown 版本，
     以及 Perplexity、Grok、ChatGPT、Claude Web、Claude Desktop、
     Claude Code、OpenAI Codex、Cursor 八种 AI 打开方式。
 

assets/js/ai-tools.js

@@ -105,7 +105,7 @@
         button.querySelector(".ai-tools__copy-icon--success").hidden = !copied;
         button.querySelector(".ai-tools__copy-label").textContent = copied
             ? "已复制"
-            : "复制本文 Markdown";
+            : "复制 Markdown";
     }
 
     function wireCopy(button, md, availability) {

assets/styles/ai-tools.css

@@ -1,7 +1,7 @@
 /* Fumadocs-style page actions menu. */
 .ai-tools {
     position: relative;
-    z-index: 4;
+    z-index: 1;
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
@@ -210,9 +210,40 @@
     height: 100%;
 }
 
+@media (max-width: 48em) {
+    .md-content__inner {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .md-content__inner > h1 {
+        order: -1;
+    }
+
+    .md-content__inner > .ai-tools {
+        order: 0;
+        float: none;
+        flex-wrap: nowrap;
+        width: 100%;
+        justify-content: flex-start;
+        margin: 0 0 16px;
+    }
+
+    .ai-tools__copy,
+    .ai-tools__trigger {
+        flex: 0 1 auto;
+        background: transparent;
+        border-color: var(--md-default-fg-color--light);
+    }
+
+    .md-content__inner > :not(h1):not(.ai-tools) {
+        order: 1;
+    }
+}
+
 @media (max-width: 44.984375em) {
     .ai-tools {
-        flex-wrap: nowrap;
+        flex-wrap: wrap;
         gap: 6px;
         margin-right: 4px;
     }

assets/styles/base.css

@@ -0,0 +1,10 @@
+/* Global anchor-link smooth scrolling. */
+html {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}

docs/nmbot-telegram/index.md

@@ -12,17 +12,11 @@ title: nmBot Telegram 帮助文档
 
 欢迎查阅由 nmTeam 官方和 nmBot 社区志愿者编写的 nmBot 官方帮助文档，请从页面导航中或通过搜索框查找您需要的内容。
 
-<center>
-<a href="https://t.me/nmnmfunbot" target="_blank">
-![开始使用 nmBot](/assets/images/nmbot/doc%20start%20telegram.png){ width="200" }
-</a>
-<a href="https://nmbot.nmnm.fun" target="_blank">
-![开始使用 nmBot](/assets/images/nmbot/doc%20start%20panel.png){ width="200" }
-</a>
-<a href="https://nmteam.xyz/products/overview/nmBot-Telegram" target="_blank">
-![开始使用 nmBot](/assets/images/nmbot/doc%20start%20intro.png){ width="200" }
-</a>
-</center>
+<div align="center" markdown="1">
+
+[![开始使用 nmBot](/assets/images/nmbot/doc%20start%20telegram.png){ width="200" }](https://t.me/nmnmfunbot) [![开始使用 nmBot](/assets/images/nmbot/doc%20start%20panel.png){ width="200" }](https://nmbot.nmnm.fun) [![开始使用 nmBot](/assets/images/nmbot/doc%20start%20intro.png){ width="200" }](https://nmteam.xyz/products/overview/nmBot-Telegram)
+
+</div>
 
 ## 了解 nmBot 最新动态
 

mkdocs-template.yml

@@ -34,7 +34,7 @@ theme:
     - navigation.sections
     - toc.integrate
     - navigation.top
-extra_css: [assets/styles/docsList.css, assets/styles/plus.css, assets/styles/ai-tools.css]
+extra_css: [assets/styles/base.css, assets/styles/docsList.css, assets/styles/plus.css, assets/styles/ai-tools.css]
 extra_javascript: [assets/js/redirects.js, assets/js/ai-tools.js]
 docs_dir: generated
 

overrides/partials/actions.html

@@ -37,7 +37,7 @@
   </a>
 {%- endmacro %}
 
-{% if page %}
+{% if page and page.url %}
   {% set source_url = "https://github.com/nm-Team/Support/blob/main/docs/" ~ page.file.src_uri %}
   <div
     class="ai-tools"
@@ -47,7 +47,7 @@
     <button class="ai-tools__copy" type="button">
       <span class="ai-tools__copy-icon ai-tools__copy-icon--idle" aria-hidden="true">{% include ".icons/material/content-copy.svg" %}</span>
       <span class="ai-tools__copy-icon ai-tools__copy-icon--success" aria-hidden="true" hidden>{% include ".icons/material/check.svg" %}</span>
-      <span class="ai-tools__copy-label" aria-live="polite">复制本文 Markdown</span>
+      <span class="ai-tools__copy-label" aria-live="polite">复制 Markdown</span>
     </button>
     <button
       class="ai-tools__trigger"
@@ -62,14 +62,14 @@
         <span class="ai-tools__provider-icon">{% include ".icons/ai/claude.svg" %}</span>
         <span class="ai-tools__provider-icon">{% include ".icons/ai/codex.svg" %}</span>
       </span>
-      <span>打开本文章</span>
+      <span>打开</span>
       <span class="ai-tools__chevron">{% include ".icons/material/chevron-down.svg" %}</span>
     </button>
     <div class="ai-tools__menu" id="ai-tools-menu" role="menu" hidden>
       {{ ai_action("Open in GitHub", "fontawesome/brands/github.svg", "github", source_url) }}
       {{ ai_action("View as Markdown", "material/language-markdown.svg", "markdown") }}
       {{ ai_action("Open in Perplexity", "ai/perplexity.svg", "perplexity", group_start=true, brand=true) }}
-      {{ ai_action("Open in Grok", "simple/x.svg", "grok") }}
+      {{ ai_action("Open in Grok", "simple/grok.svg", "grok") }}
       {{ ai_action("Open in ChatGPT", "ai/openai.svg", "chatgpt", brand=true) }}
       {{ ai_action("Open in Claude Web", "ai/claude.svg", "claude", brand=true) }}
       {{ ai_action("Open in Claude Desktop", "ai/claude.svg", "claude-desktop", group_start=true, brand=true) }}