70 lines
9.1 KiB
Markdown
70 lines
9.1 KiB
Markdown
# 免费节点内容页重设计（2026-10-31）
|
||
|
||
**已正式发布**：[2026-10-31正式发布记录](UI_RELEASE_2026-10-31.md)，应用7d564df7；原业务正文不变。以下本地实施历史中的“未上线”表示该步骤当时状态，最终版本已包含提示框移除。
|
||
|
||
用户要求重新设计“免费节点”内容页，沿当前任务仅本地实施。未提交、推送、部署或访问线上，免费苹果ID、教程和列表页不变。首页继续复用最新免费节点详情，因此自然采用同一新版布局；没有另建首页数据源或改菜单选中规则。
|
||
|
||
## 结构
|
||
|
||
- 顶部：简洁H1“月日免费节点订阅”、客户端提示与该文章已有猫图。原title/description/canonical等SEO元信息保持；不改数据库标题或URL。
|
||
- 概览：从原正文提取本篇节点数、原速度文字、地区；只对重复地区去重，不重估节点可用性、不换算速度单位。0节点如实显示，并给最新更新入口，不捏造数值。
|
||
- 页内导航：获取订阅、使用说明、机场推荐。各锚点scroll-margin防导航遮挡。
|
||
- 订阅区：Clash/Mihomo、V2ray/Shadowrocket、Sing-box/Hiddify按已有格式显示卡片，桌面与手机都明确显示原地址和复制按钮。早期只有两种格式就只显示两张，不添加推测URL。
|
||
- 使用说明：增加简短三步说明，保留订阅下载补充说明；原三段使用提示框按用户最终要求不再展示，附已有Windows、Android、入门栏目内链。
|
||
- 机场推荐：复用[统一推荐](AIRPORT_RECOMMENDATIONS.md)，仅免费节点页移到订阅/使用说明之后，仍每页一处；其他栏目沿原维护规则。更新频道和仓库链接从正文读取后归并到末尾，未访问目标。
|
||
- 正文后既有整图广告、标签、点赞和分享保持。未创建或修改图片，顶部展示文章已有本地缩略图，保留文章原图片关联。
|
||
|
||
## 实现与保护
|
||
|
||
`app/Services/FreeNodeArticleLayout.php`只读解析已经过ArticleRecommendations处理的展示副本；没有更新文章数据库、编辑版本、正文源、创建时间、访问地址或点赞设置。新模板为`resources/views/pages/articles/freenode/header.blade.php`与`content.blade.php`，仅default/show中的freenode条件分支接入。样式`public/css/freenode-article.css`只在新版页面加载并以free-node-page/fn类限定，不影响其他页面。
|
||
|
||
原日更HTML含不规范的p/a嵌套，使用本地DOM解析属性和正文。识别明确的订阅区、提示区与已知URL格式，HTML实体还原后交给Blade重新转义；不请求订阅服务器，不验证节点。未知URL格式、重复格式、未知文章结构或解析失败时回退原内容页，避免静默遗漏内容。额外编辑说明和普通补充链接保留。
|
||
|
||
复制复用现有ClipboardJS的copy-permalink/data-clipboard-text机制，沿原成功反馈；不新增复制库、读取用户剪贴板或访问资源链接。侧栏保持原点赞活跃模块，只协调圆角和对齐。
|
||
|
||
## 本地验收
|
||
|
||
- 全量只读遍历78篇公开免费节点：78篇识别成功，订阅地址与原data-clipboard-text逐项一致；早期两格式和后期三格式均覆盖。
|
||
- 12项测试/61断言通过：非规范HTML、URL查询串与实体、0数值、去重地区、未知格式安全回退、两格式不补造、保留额外说明/链接，以及已有推荐和首页选择回归。
|
||
- HTTP核对首页、当前三格式、早期两格式、苹果ID、入门教程、免费节点列表均200；新版只出现在首页/免费节点详情，推荐模块仍单处，列表不出现。
|
||
- 浏览器1280桌面、390及320手机无横向溢出；逐个核对复制按钮边界在卡片内，没有被父级overflow遮住。真实复制显示“复制成功”，使用既有ClipboardJS。URL始终为原有值，未访问订阅/服务商/TG/GitHub落地页。
|
||
- dev模式沿用，未build。截图：[桌面](../../output/freenode-redesign/desktop.png)、[手机](../../output/freenode-redesign/mobile.png)。浏览器最终恢复默认视口。
|
||
|
||
预览：`http://fna-v3.loc/a/fn20261018.html`；最新首页`http://fna-v3.loc/`。本地最新10月21日及前两天原始记录为0，本次没有改成非零或制造线上新数据。
|
||
|
||
回退只移除show.blade.php的freeNodeLayout分支并恢复原共用渲染；无需回灌数据库、替换素材或修改推荐配置。保留其他本地/并行代码，本次没有执行Git清理或全量覆盖。
|
||
|
||
2026-10-31用户要求移除装饰性小字，已本地移除SUBSCRIPTIONS、QUICK START及共享推荐区“网络服务推荐”，保留中文主标题和功能，未上线。
|
||
|
||
2026-10-31用户进一步明确删除卡片内“免费节点 / 日期”小字，已移除fn-eyebrow整行，卡片外面包屑及日期主标题保留，仍仅本地。
|
||
|
||
2026-10-31按用户要求简化订阅卡片：移除C/V/S字母图标、客户端说明小字和格式小标签，主标题统一为“适用于：客户端名”；订阅原值及复制功能保留，仅本地。
|
||
|
||
2026-10-31按用户反馈同步收紧删字后的留白：标题行高1.3、说明上间距6px，桌面插画120×96、标题区下间距16px；手机插画68×76，说明间距6px；纯标题订阅卡头部下间距9px。不保留已删除眉题/图标的占位，仍仅本地。
|
||
|
||
2026-10-31按用户截图将标题下方两行说明合并为“支持 Clash / V2ray / Shadowrocket / Singbox / Hiddify”，移除原第二行，手机按宽度自然换行，仅本地。
|
||
|
||
2026-10-31按用户要求移除“按客户端选择格式”辅助文字，保留“获取免费订阅”标题及订阅卡片，仅本地。
|
||
|
||
2026-10-31对照用户指定clash-rule-global-direct教程的浏览器实际样式，修正免费节点页过小字号：桌面H1 32px/正文16px/二级标题22.72px，手机H1 26px/正文15px/二级标题19.5px，与参考页一致；卡片标题约18/17px、按钮14px、地址13/12px，概览/导航/步骤与辅助说明同步放大至可读层级。推荐表的字号覆盖限定free-node-page，参考教程和其他页面不改。清理已移除图标/装饰文字的孤立CSS，标题分组换行以防手机末尾孤字；390/320检查复制按钮边界、正文和推荐布局，默认视口恢复。本地生效，未上线。截图[字号对齐](../../output/freenode-redesign/typography.png)。
|
||
|
||
2026-10-31按用户截图仅缩小订阅地址与原使用提示：桌面地址12px、提示14px/1.8；手机地址11px、提示13px/1.8。正文主层级与标题保持，仅本地。
|
||
|
||
2026-10-31用户澄清使用提示框须恢复统一字号调整之前的版本，已仅恢复该框桌面/手机均11px、行高1.9、原文字色#786c84，原边框/背景/内边距不变；其他正文、标题和订阅地址保持，不是只缩小一档。仅本地。
|
||
|
||
2026-10-31用户随后要求提示框字号稍大，已仅将该框从11px调为12px（桌面/手机一致），行高、颜色和内边距保留，仅本地。
|
||
|
||
2026-10-31按用户最新截图要求，移除免费节点新布局里的整块原使用提示框（免费节点稳定性、DNS和全局模式三段说明）。不再渲染该容器，因此不保留空白占位；三步使用说明和教程入口保留。原文章正文及解析数据不改，仅本地展示调整，未上线。
|
||
|
||
2026-10-31用户反馈外层卡片圆角与其他页不一致，经浏览器核对参考教程正文/侧栏桌面与手机均4px，已移除免费节点正文卡片14px/手机10px及侧栏10px局部覆盖，沿网站共用4px圆角。仅本地。
|
||
|
||
2026-10-31用户再次反馈标题区留白不均，已将桌面标题/插画改为顶部对齐，标题行高1.3、说明上间距8px/行高1.6，插画112×80、概览前间距20px；手机沿其原独立尺寸和顶部对齐，不变更字号或文字。仅本地。
|
||
|
||
## 使用方法区重设计（2026-10-31，已发布）
|
||
|
||
用户在正式发布后指出“三步说明＋第一次使用链接”排版怪异，本次先在本地重设计：标题精简为“使用方法”，用单个浅紫灰区域统一容纳三步及教程入口；圆形序号与步骤标题对齐，说明文字简短统一，底部以细分隔线和教程导航收尾。桌面三列，767.98px及以下纵向排列；4px圆角沿本站卡片尺度，步骤标题16px/说明14px，手机教程链接13px避免挤压。教程链接显示Windows、Android、全部教程，实际URL及对应无障碍标签保留。
|
||
|
||
仅调整freenode/content.blade.php及freenode-article.css，清掉已删除提示框的孤立样式。原订阅值/复制按钮、文章数据、广告、推荐模块及其他页面保持。1280桌面、390/320窄屏检查通过：三步与三条教程链接都在容器内，无横向溢出；默认视口恢复。本次为可逆展示修改，未新增测试；用户随后要求发布，已Git提交推送并更新正式站，应用888358a6，46项服务器侧检查通过。精确SHA、恢复点及最终文档提交见[使用方法区发布记录](USAGE_RELEASE_2026-10-31.md)。
|
||
|
||
本地预览：`http://fna-v3.loc/a/fn20261018.html#node-usage`。截图：[桌面](../../output/usage-redesign-20261031/desktop.png)、[手机](../../output/usage-redesign-20261031/mobile.png)。
|