` | 统一以 `Bytemoss 一看就会` 作品牌后缀（about 页保留公司全称） | | favicon | `byte-moss-logo.svg` 矢量图标；`apple-touch-icon` 保留 `favicon-bytemoss.png`（180×180） | **深色模式**：品牌 logo 为深绿（矢量填充色 `#236b43`），在深色模式近黑背景 `#17181a` 上对比度仅约 3:1。因此深色模式下对 `.brand__logo` 施加 `filter: brightness(1.6)`（得到约 `#38ab6b`，对比度提升到约 6:1），**不改变 logo 的形状与内容**，仅整体提亮；浅色模式保持原始品牌色（白底约 5.9:1）。过渡沿用 `--dur`（200ms）。原先手绘的占位 logo（`favicon.svg` 与内联 `brand__mark`）已全部移除，改用基于原始品牌 PNG 重绘的 SVG；原 PNG 保留作参考。 ## 本地预览直接双击 `index.html` 即可。若需本地服务（推荐，避免个别浏览器对 `file://` 的限制）： ```powershell npx --yes serve . # 或 python -m http.server 8000 ``` 部署：把整个目录内容上传到任意静态托管（对象存储 / Nginx / CDN）即可，无需 Node 环境。 ## 需要你确认或替换的内容 1. **产品文案**：MossKB 与 MyProfessor 的能力描述由产品名称与定位推导而成（本机无法访问 `maxkb.top` / `myprofessor.cn`，DNS 与 TLS 均被沙箱拦截，未能核对官网原文）。请按实际功能核对措辞后再上线。 2. **资讯文章**：4 篇文章是按公司业务方向撰写的**示意内容**，日期为 2026 年 7–9 月。请替换为真实文章，或删除该栏目。 3. **配图**：Hero、产品图、文章封面均为手工绘制的 SVG 抽象图。替换为真实照片时请保持 **16:9（Hero、文章封面）与 3:2（产品图）** 比例，卡片已使用 `object-fit: cover` 自动裁切。 4. **MyProfessor Logo**：`assets/img/myprofessor-logo.png` 已按原始文件使用（1254×1254、带透明通道、青色品牌色），未做重着色或裁剪。Logo 自带约 23% 的四周留白，作为安全区保留。 5. **备案号**：`沪ICP备2026010870号-5` 已加入全部 9 个页面的页脚底栏（紧随版权信息），并按工信部要求链接到 <https://beian.miit.gov.cn/>；`about.html` 的「公司信息」中也单列一条。若备案主体或序号有变更，只需改 `tools/build.js` 中的 `COMPANY.icp` 后重新生成。 6. **页脚文字对比度**：`.footer__bottom` 使用 `--c-ink-4`（`#a29e97`），在米白底上对比度约 2.5:1，低于 WCAG AA 的 4.5:1。备案号与地址处在同一行、同一灰度。若需合规加强可改 `assets/css/site.css` 中的 `--c-ink-4`，或仅把该行改为 `color: var(--c-ink-3)`（约 4.4:1）。 7. **知识库官网域名**：因 `maxkb.cloud` 备案尚未通过，站点当前全部指向 **`https://maxkb.top`**（首页与产品页按钮、页脚产品链接，共 9 个页面）。切换方式：只改 `tools/build.js` 中 `COMPANY.kbSite` 一处，然后 `node tools/build.js`。链接的可见文案（「访问 maxkb.top」等）由 `hostOf()` 从 URL 自动推导，不会出现「文字写 A、链接指向 B」的错位。 ```js kbSite: "https://maxkb.top", // 备案通过后改为 "https://maxkb.cloud" ``` 产品名（`MossKB` / MyProfessor）同样只在 `COMPANY.kb` / `COMPANY.myprof` 与 `assets/img/product-*.svg` 里出现，正文全部引用常量，改名不必逐页找。 > **改名流程（已实测）**：`tools/build.js` 里 `kb` 是产品名的唯一来源，站点文案共 104 处引用全部由它派生。 > > 1. 改 `COMPANY.kb`（如 `"NewName"`）； > 2. 需要换域名时改 `COMPANY.kbSite`（留空则链接文案自动跟随）； > 3. `git mv assets/img/product-<旧名小写>.svg assets/img/product-<新名小写>.svg`，并同步该文件 `aria-label` 里的产品名——文件名由 `slugOf(COMPANY.kb)` 推导，大小写、空格、连字符都会自动规范化； > 4. `node tools/build.js && node tools/verify.js`。 > > 漏了第 3 步不会静默出错：`verify.js` 会直接报 `引用的文件不存在: assets/img/product-<新名>.svg`。 > 七张 SVG 全部是抽象图形，**没有任何 `<text>` 元素**，改名不需要重绘配图。 8. **联系方式的收口**：全站对外只保留两个渠道——商务邮箱 `business@bytemoss.cn` 与企业微信。`19957680449`、微信 `jdk131219`、联系人「李总」在任何页面都不再渲染。 | 位置 | 呈现 | | --- | --- | | `contact.html` | 四张卡片：企业微信二维码 / 邮箱 / 商业支持 / 成为合作伙伴 | | 页脚「联系」列（9 个页面） | 邮箱 + 企业微信（指向 `contact.html`） | | `about.html`「工商与联系信息」 | 公司名称 / 地址 / 邮箱 / 备案号 | | 各页底部 CTA | 主按钮「邮箱 business@bytemoss.cn」（`mailto:`）+ 次按钮「企业微信」 | `COMPANY` 里的 `contact` / `tel` / `wechat` 三项保留作备案口径记录，但已不被任何页面引用；要重新露出，改 `footer()` 或 `MAIL_BTN` / `WECOM_BTN` 即可。「商业支持」与「成为合作伙伴」的「立即申请」当前指向 `mailto:business@bytemoss.cn`，并按卡片自动带上邮件主题（`?subject=` 由 `encodeURIComponent` 生成）。若有在线表单，把 `contactBody` 里的 `mailto(...)` 换成表单地址即可。 9. **企业微信二维码**：`assets/img/wecom-qr.png` 由企业微信名片图 `1080×2208` **按像素 1:1 裁出**（33×33 模块，静默区 4 个模块），未缩放、未重压缩。更换二维码时请一并更新 `tools/build.js` 中该 `<img>` 的 `src` 与 `width`/`height`（当前 `613`）。 10. **产品改名（重要）**：知识库产品已由 `MaxKB` 更名为 **`MossKB`**。弃用原名不是因为重名——杭州飞致云信息科技有限公司（FIT2CLOUD，1Panel 团队）**已持有 "MAXKB" 中国注册商标**，且 MaxKB 是其在售的同类产品。全站引用已随之替换（页面文案、`<title>`、meta description、配图 `alt`、页脚与产品按钮），`tools/build.js` 的 `COMPANY.kb` 上方注释也记录了原因，**请不要改回**。 > ⚠️ **上线前请补一次官方检索**：`MossKB` 与被注册的 `MAXKB` 同属第 9/42 类、同为「M + 结尾 -KB」结构。按公开的审查实务，同首字母、5 个字母以上、差异位于中间的英文标的一般倾向判定为近似。本项目的候选名核查来自公开检索与第三方商标聚合站，**不是 CNIPA 官方查询**，二手信息存在缺口；正式启用与提交注册前，建议做一次商标网上查询 + 近似检索。 > > 若检索结果不理想，换名成本已被压到最低：改 `COMPANY.kb` 一行 + `git mv` 一张图 + 重建（流程见第 7 条）。核查中未发现冲突的备选：`VeriKB`、`Evermoss`、`MossMind`、`Citebase`。 > 另一条独立风险：**`MyProfessor` 也未做过检索**，App Store 上存在同名应用（[id1532003727](https://apprecs.com/ios/1532003727/myprofessor)）。建议一并核查。 ## 设计规范对照 | 要求 | 实现方式 | | --- | --- | | 不用蓝紫渐变 | 全部 122 个色值经脚本校验，无蓝色/蓝紫倾向；4 处渐变均为中性灰与米色 | | 不用 Emoji，用 SVG 图标 | 全部图标为内联 SVG（`fill="none"` + `currentColor`），随主题变色 | | 顶栏磨玻璃 | `.site-header::before` 使用 `backdrop-filter: blur(20px) saturate(1.6)`，滚动后加深；不支持时降级为不透明 | | Hero 图片 + 遮罩 | 三层中性遮罩叠加（横向 0.76→0.34、上下渐隐），保证白字对比度 | | 标题衬线 / 正文无衬线 | `--font-serif` 优先 Noto Serif SC / Source Han Serif，回退系统宋体；正文用系统无衬线 | | 按钮黑底白字 | `--c-btn: #232323`，悬停加深至 `#000`，无高饱和色 | | 卡片式文章 | 上封面（16:9）/ 下标题、摘要、日期、分类；整卡可点，仅一个链接，避免重复制表位 | | 低饱和中性主色 | 白 `#fff` · 米白 `#f8f7f4` · 浅灰 `#f1efe9` · 深灰 `#1b1a18` | | 轻微圆角 | 3–9px（`--r-xs` ~ `--r-lg`），无胶囊形 | | 轻微阴影 | 三级极淡阴影，仅用于区分层级 | | 大留白 + 内容限宽 | 版心 1140px，区块上下间距 `clamp(4.5rem, 3rem + 6vw, 8rem)` | | Hover 150–250ms | `--dur: 200ms` / `--dur-slow: 250ms`，仅位移、透明度与阴影变化 | | 图片大横向比例 | 卡片 16:9、产品 3:2，均 `object-fit: cover` | | 首页不堆模块 | 仅 4 个区块：Hero、产品、精选与最新文章、联系 CTA | | Editorial / Magazine 风格 | 衬线标题、大字距眉题、非对称「左大右小」精选布局 | | 响应式 | 1080 / 940 / 720 / 620 / 420px 断点，覆盖桌面、平板、手机 | | 深色模式 | 背景 `#17181a`（近黑深灰），非纯黑；顶栏切换并记忆，首屏前预置避免闪白 | | 少用边框 | 分层依赖留白、字号、背景色与间距；仅用 `inset` 阴影画 1px 分隔线 | ## 可访问性与健壮性 - 语义化标签 + `skip-link`；装饰性图片 `alt=""`，说明性图片带描述。 - 主题切换按钮有 `aria-label` / `aria-pressed`；移动端抽屉有 `aria-expanded` / `aria-controls` / `aria-hidden`，支持 Esc 关闭。 - 滚动出现动画仅在 JS 可用时生效（`html.js .reveal`），脚本失效时内容照常显示。 - 遵循 `prefers-reduced-motion`，关闭动画与平滑滚动。 - 分类筛选使用 `[hidden]`，已在 CSS 中显式声明 `display: none !important` 覆盖组件自身的 `display`。 - 外链统一 `target="_blank" rel="noopener"`。 ## 维护脚本页面由同一套头部/页脚模板生成，保证 9 个页面的导航与页脚完全一致： ```powershell node tools/build.js # 重新生成全部 9 个页面（输出为纯静态 HTML） node tools/verify.js # 静态审计：结构、标签配对、链接与资源、类名与 CSS 变量、配色、Emoji node tools/img-info.js <图片.png> # 查看 PNG 尺寸/透明度/主色/内容包围盒 node tools/make-favicon.js <源.png> <输出.png> 180 0.07 # 由 logo 生成方形 favicon（等比缩放 + 透明边距） ``` `verify.js` 覆盖 30 项检查，当前结果：**0 问题**。 > `verify.js` 会自动跳过第三方站长平台的校验文件（`baidu_verify_*.html` 等）——它们不是站点页面，不适用页头/页脚/`<h1>` 等页面级检查。 `img-info.js` 与 `make-favicon.js` 是零依赖的纯 Node 脚本（自带 PNG 解码与编码），用于在没有图形界面的环境下核对与处理 PNG 资源。 > 站点本身**不依赖**这些脚本，部署时只需上传 HTML 与 `assets/`。若直接手改 HTML，请注意 `tools/build.js` 会覆盖同名文件。 `assets/css/site.css` 末尾（第 14–19 节）是本项目新增的组件；文件中另有一批来自设计系统的工具类（`grid--2`、`grid--4`、`card--plain`、`hero--compact`、`shell--wide`、`section--mute`、`btn--lg`、`sr-only` 等）当前未被页面使用，可按需取用或删除。

# bytemoss-official **Repository Path**: ppnt/bytemoss-official ## Basic Information - **Project Name**: bytemoss-official - **Description**: 上海一看就会信息科技有限公司官网 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-09-20 - **Last Updated**: 2026-10-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 上海一看就会信息科技有限公司 · 官网纯静态站点：**无框架、无构建步骤、无外部依赖**。所有图标为内联 SVG，所有图片为本地文件，字体使用系统中文字体回退，离线可直接打开。 ## 页面结构 | 文件 | 说明 | | --- | --- | | `index.html` | 首页：Hero（图片背景 + 半透明遮罩）→ 两条产品线 → 精选与最新文章 → 联系 CTA | | `products.html` | 产品总览：MossKB 智能知识库、MyProfessor 知识动画系统（含特性网格） | | `articles.html` | 资讯列表，支持按分类筛选（全部 / 产品动态 / 技术实践 / 行业观察） | | `article-rag.html` | 文章：从文档到答案——企业知识库检索增强的四个落地环节（首页精选） | | `article-knowledge-base.html` | 文章：MossKB 智能知识库——让企业文档从「归档」走向「可被提问」 | | `article-animation.html` | 文章：MyProfessor 知识动画系统——把抽象知识讲成看得懂的动画 | | `article-knowledge-asset.html` | 文章：企业知识资产的第二次生命 | | `about.html` | 关于我们：公司简介、工商与联系信息 | | `contact.html` | 联系我们：企业微信二维码、商务邮箱、商业支持与合作伙伴申请四张卡片 | ``` assets/ ├── css/base.css 设计令牌 + 重置 + 排版 + 按钮 + 版心 ├── css/site.css 组件与布局（顶栏、Hero、卡片、产品、文章、页脚、响应式） ├── js/main.js 主题切换、移动端抽屉、滚动状态、滚动出现、分类筛选、页脚年份 └── img/ ├── byte-moss-logo.svg 品牌 logo（Bytemoss，1254×1254 viewBox、透明底深绿矢量） ├── favicon-bytemoss.png 由品牌 logo 生成的 180×180 favicon（16.8 KB） ├── myprofessor-logo.png 产品 logo（MyProfessor，1254×1254 透明底青色） ├── hero.svg 首页 Hero 背景图（2000×1125） ├── wecom-qr.png 企业微信二维码（613×613，由企业微信名片图裁出） ├── product-mosskb.svg 产品图（1200×800，3:2） ├── product-myprofessor.svg └── cover-*.svg 文章封面（1600×900，16:9，共 4 张） ``` ## 品牌名与 logo 「**Bytemoss**」是英文品牌名，「**一看就会**」是中文品牌名，两者指同一品牌。 | 位置 | 呈现方式 | | --- | --- | | 顶栏 | `byte-moss-logo.svg` + 主行 `Bytemoss`（衬线）+ 副行 `一看就会` | | 页脚 | `byte-moss-logo.svg` + `Bytemoss · 一看就会` | | 版权行 | `© 2026 上海一看就会信息科技有限公司 · 沪ICP备2026010870号-5` | | `` | 统一以 `Bytemoss 一看就会` 作品牌后缀（about 页保留公司全称） | | favicon | `byte-moss-logo.svg` 矢量图标；`apple-touch-icon` 保留 `favicon-bytemoss.png`（180×180） | **深色模式**：品牌 logo 为深绿（矢量填充色 `#236b43`），在深色模式近黑背景 `#17181a` 上对比度仅约 3:1。因此深色模式下对 `.brand__logo` 施加 `filter: brightness(1.6)`（得到约 `#38ab6b`，对比度提升到约 6:1），**不改变 logo 的形状与内容**，仅整体提亮；浅色模式保持原始品牌色（白底约 5.9:1）。过渡沿用 `--dur`（200ms）。原先手绘的占位 logo（`favicon.svg` 与内联 `brand__mark`）已全部移除，改用基于原始品牌 PNG 重绘的 SVG；原 PNG 保留作参考。 ## 本地预览直接双击 `index.html` 即可。若需本地服务（推荐，避免个别浏览器对 `file://` 的限制）： ```powershell npx --yes serve . # 或 python -m http.server 8000 ``` 部署：把整个目录内容上传到任意静态托管（对象存储 / Nginx / CDN）即可，无需 Node 环境。 ## 需要你确认或替换的内容 1. **产品文案**：MossKB 与 MyProfessor 的能力描述由产品名称与定位推导而成（本机无法访问 `maxkb.top` / `myprofessor.cn`，DNS 与 TLS 均被沙箱拦截，未能核对官网原文）。请按实际功能核对措辞后再上线。 2. **资讯文章**：4 篇文章是按公司业务方向撰写的**示意内容**，日期为 2026 年 7–9 月。请替换为真实文章，或删除该栏目。 3. **配图**：Hero、产品图、文章封面均为手工绘制的 SVG 抽象图。替换为真实照片时请保持 **16:9（Hero、文章封面）与 3:2（产品图）** 比例，卡片已使用 `object-fit: cover` 自动裁切。 4. **MyProfessor Logo**：`assets/img/myprofessor-logo.png` 已按原始文件使用（1254×1254、带透明通道、青色品牌色），未做重着色或裁剪。Logo 自带约 23% 的四周留白，作为安全区保留。 5. **备案号**：`沪ICP备2026010870号-5` 已加入全部 9 个页面的页脚底栏（紧随版权信息），并按工信部要求链接到 <https://beian.miit.gov.cn/>；`about.html` 的「公司信息」中也单列一条。若备案主体或序号有变更，只需改 `tools/build.js` 中的 `COMPANY.icp` 后重新生成。 6. **页脚文字对比度**：`.footer__bottom` 使用 `--c-ink-4`（`#a29e97`），在米白底上对比度约 2.5:1，低于 WCAG AA 的 4.5:1。备案号与地址处在同一行、同一灰度。若需合规加强可改 `assets/css/site.css` 中的 `--c-ink-4`，或仅把该行改为 `color: var(--c-ink-3)`（约 4.4:1）。 7. **知识库官网域名**：因 `maxkb.cloud` 备案尚未通过，站点当前全部指向 **`https://maxkb.top`**（首页与产品页按钮、页脚产品链接，共 9 个页面）。切换方式：只改 `tools/build.js` 中 `COMPANY.kbSite` 一处，然后 `node tools/build.js`。链接的可见文案（「访问 maxkb.top」等）由 `hostOf()` 从 URL 自动推导，不会出现「文字写 A、链接指向 B」的错位。 ```js kbSite: "https://maxkb.top", // 备案通过后改为 "https://maxkb.cloud" ``` 产品名（`MossKB` / MyProfessor）同样只在 `COMPANY.kb` / `COMPANY.myprof` 与 `assets/img/product-*.svg` 里出现，正文全部引用常量，改名不必逐页找。 > **改名流程（已实测）**：`tools/build.js` 里 `kb` 是产品名的唯一来源，站点文案共 104 处引用全部由它派生。 > > 1. 改 `COMPANY.kb`（如 `"NewName"`）； > 2. 需要换域名时改 `COMPANY.kbSite`（留空则链接文案自动跟随）； > 3. `git mv assets/img/product-<旧名小写>.svg assets/img/product-<新名小写>.svg`，并同步该文件 `aria-label` 里的产品名——文件名由 `slugOf(COMPANY.kb)` 推导，大小写、空格、连字符都会自动规范化； > 4. `node tools/build.js && node tools/verify.js`。 > > 漏了第 3 步不会静默出错：`verify.js` 会直接报 `引用的文件不存在: assets/img/product-<新名>.svg`。 > 七张 SVG 全部是抽象图形，**没有任何 `<text>` 元素**，改名不需要重绘配图。 8. **联系方式的收口**：全站对外只保留两个渠道——商务邮箱 `business@bytemoss.cn` 与企业微信。`19957680449`、微信 `jdk131219`、联系人「李总」在任何页面都不再渲染。 | 位置 | 呈现 | | --- | --- | | `contact.html` | 四张卡片：企业微信二维码 / 邮箱 / 商业支持 / 成为合作伙伴 | | 页脚「联系」列（9 个页面） | 邮箱 + 企业微信（指向 `contact.html`） | | `about.html`「工商与联系信息」 | 公司名称 / 地址 / 邮箱 / 备案号 | | 各页底部 CTA | 主按钮「邮箱 business@bytemoss.cn」（`mailto:`）+ 次按钮「企业微信」 | `COMPANY` 里的 `contact` / `tel` / `wechat` 三项保留作备案口径记录，但已不被任何页面引用；要重新露出，改 `footer()` 或 `MAIL_BTN` / `WECOM_BTN` 即可。「商业支持」与「成为合作伙伴」的「立即申请」当前指向 `mailto:business@bytemoss.cn`，并按卡片自动带上邮件主题（`?subject=` 由 `encodeURIComponent` 生成）。若有在线表单，把 `contactBody` 里的 `mailto(...)` 换成表单地址即可。 9. **企业微信二维码**：`assets/img/wecom-qr.png` 由企业微信名片图 `1080×2208` **按像素 1:1 裁出**（33×33 模块，静默区 4 个模块），未缩放、未重压缩。更换二维码时请一并更新 `tools/build.js` 中该 `<img>` 的 `src` 与 `width`/`height`（当前 `613`）。 10. **产品改名（重要）**：知识库产品已由 `MaxKB` 更名为 **`MossKB`**。弃用原名不是因为重名——杭州飞致云信息科技有限公司（FIT2CLOUD，1Panel 团队）**已持有 "MAXKB" 中国注册商标**，且 MaxKB 是其在售的同类产品。全站引用已随之替换（页面文案、`<title>`、meta description、配图 `alt`、页脚与产品按钮），`tools/build.js` 的 `COMPANY.kb` 上方注释也记录了原因，**请不要改回**。 > ⚠️ **上线前请补一次官方检索**：`MossKB` 与被注册的 `MAXKB` 同属第 9/42 类、同为「M + 结尾 -KB」结构。按公开的审查实务，同首字母、5 个字母以上、差异位于中间的英文标的一般倾向判定为近似。本项目的候选名核查来自公开检索与第三方商标聚合站，**不是 CNIPA 官方查询**，二手信息存在缺口；正式启用与提交注册前，建议做一次商标网上查询 + 近似检索。 > > 若检索结果不理想，换名成本已被压到最低：改 `COMPANY.kb` 一行 + `git mv` 一张图 + 重建（流程见第 7 条）。核查中未发现冲突的备选：`VeriKB`、`Evermoss`、`MossMind`、`Citebase`。 > 另一条独立风险：**`MyProfessor` 也未做过检索**，App Store 上存在同名应用（[id1532003727](https://apprecs.com/ios/1532003727/myprofessor)）。建议一并核查。 ## 设计规范对照 | 要求 | 实现方式 | | --- | --- | | 不用蓝紫渐变 | 全部 122 个色值经脚本校验，无蓝色/蓝紫倾向；4 处渐变均为中性灰与米色 | | 不用 Emoji，用 SVG 图标 | 全部图标为内联 SVG（`fill="none"` + `currentColor`），随主题变色 | | 顶栏磨玻璃 | `.site-header::before` 使用 `backdrop-filter: blur(20px) saturate(1.6)`，滚动后加深；不支持时降级为不透明 | | Hero 图片 + 遮罩 | 三层中性遮罩叠加（横向 0.76→0.34、上下渐隐），保证白字对比度 | | 标题衬线 / 正文无衬线 | `--font-serif` 优先 Noto Serif SC / Source Han Serif，回退系统宋体；正文用系统无衬线 | | 按钮黑底白字 | `--c-btn: #232323`，悬停加深至 `#000`，无高饱和色 | | 卡片式文章 | 上封面（16:9）/ 下标题、摘要、日期、分类；整卡可点，仅一个链接，避免重复制表位 | | 低饱和中性主色 | 白 `#fff` · 米白 `#f8f7f4` · 浅灰 `#f1efe9` · 深灰 `#1b1a18` | | 轻微圆角 | 3–9px（`--r-xs` ~ `--r-lg`），无胶囊形 | | 轻微阴影 | 三级极淡阴影，仅用于区分层级 | | 大留白 + 内容限宽 | 版心 1140px，区块上下间距 `clamp(4.5rem, 3rem + 6vw, 8rem)` | | Hover 150–250ms | `--dur: 200ms` / `--dur-slow: 250ms`，仅位移、透明度与阴影变化 | | 图片大横向比例 | 卡片 16:9、产品 3:2，均 `object-fit: cover` | | 首页不堆模块 | 仅 4 个区块：Hero、产品、精选与最新文章、联系 CTA | | Editorial / Magazine 风格 | 衬线标题、大字距眉题、非对称「左大右小」精选布局 | | 响应式 | 1080 / 940 / 720 / 620 / 420px 断点，覆盖桌面、平板、手机 | | 深色模式 | 背景 `#17181a`（近黑深灰），非纯黑；顶栏切换并记忆，首屏前预置避免闪白 | | 少用边框 | 分层依赖留白、字号、背景色与间距；仅用 `inset` 阴影画 1px 分隔线 | ## 可访问性与健壮性 - 语义化标签 + `skip-link`；装饰性图片 `alt=""`，说明性图片带描述。 - 主题切换按钮有 `aria-label` / `aria-pressed`；移动端抽屉有 `aria-expanded` / `aria-controls` / `aria-hidden`，支持 Esc 关闭。 - 滚动出现动画仅在 JS 可用时生效（`html.js .reveal`），脚本失效时内容照常显示。 - 遵循 `prefers-reduced-motion`，关闭动画与平滑滚动。 - 分类筛选使用 `[hidden]`，已在 CSS 中显式声明 `display: none !important` 覆盖组件自身的 `display`。 - 外链统一 `target="_blank" rel="noopener"`。 ## 维护脚本页面由同一套头部/页脚模板生成，保证 9 个页面的导航与页脚完全一致： ```powershell node tools/build.js # 重新生成全部 9 个页面（输出为纯静态 HTML） node tools/verify.js # 静态审计：结构、标签配对、链接与资源、类名与 CSS 变量、配色、Emoji node tools/img-info.js <图片.png> # 查看 PNG 尺寸/透明度/主色/内容包围盒 node tools/make-favicon.js <源.png> <输出.png> 180 0.07 # 由 logo 生成方形 favicon（等比缩放 + 透明边距） ``` `verify.js` 覆盖 30 项检查，当前结果：**0 问题**。 > `verify.js` 会自动跳过第三方站长平台的校验文件（`baidu_verify_*.html` 等）——它们不是站点页面，不适用页头/页脚/`<h1>` 等页面级检查。 `img-info.js` 与 `make-favicon.js` 是零依赖的纯 Node 脚本（自带 PNG 解码与编码），用于在没有图形界面的环境下核对与处理 PNG 资源。 > 站点本身**不依赖**这些脚本，部署时只需上传 HTML 与 `assets/`。若直接手改 HTML，请注意 `tools/build.js` 会覆盖同名文件。 `assets/css/site.css` 末尾（第 14–19 节）是本项目新增的组件；文件中另有一批来自设计系统的工具类（`grid--2`、`grid--4`、`card--plain`、`hero--compact`、`shell--wide`、`section--mute`、`btn--lg`、`sr-only` 等）当前未被页面使用，可按需取用或删除。