记
开发日志
特效预览
特效优化预览站 · 非正式博客——只看效果,不动真站(blog.hench.cc.cd)。 其中 搜索、点赞、智能助手 为演示态;目录、摘要卡、洞察图谱、代码块为可直接落地的交互演示。

特效优化预览

取对方站特效的思路,按本博客黑曜金风格重做一遍:不照搬浅色像素、不抄对方文章内容,演示文章全部取自博客已有文章。

效果总览 · 对方原样 → 优化后

三栏布局

对方原样:对方:浅色三栏(左导航 / 中文章卡 / 右模块)。
优化后:优化后:黑曜金三栏(左:本篇目录 + 预览说明;中:文章;右:搜索 / 相关 / 标签)。1080px 去右栏、820px 去左栏转悬浮目录按钮。

目录

对方原样:对方:蓝色悬浮面板列章节。
优化后:优化后:金色面板 + 左侧常驻目录 + 滚动高亮当前节 + 平滑滚动;移动端悬浮「目录」按钮。

代码块

对方原样:对方:语言标签 + 行号 + 复制 + 折叠。
优化后:优化后:黑曜金代码块(金色头栏、行号槽、复制成功反馈、超 12 行默认折叠 + 底部渐隐)。

摘要卡

对方原样:对方:文首摘要卡片。
优化后:优化后:金色磨砂摘要卡(摘要 + 日期 / 标签 / 阅读时长 / 字数 / 章节数)。

洞察图谱

对方原样:对方:可折叠的洞察图谱按钮。
优化后:优化后:可折叠的章节链(按文章 h2 串成叙事链,一眼看清结构)。

点赞分享

对方原样:对方:文末点赞 / 分享按钮。
优化后:优化后:金色胶囊按钮;本地演示态(计数只存本机,无后端)。

搜索

对方原样:对方:顶部搜索图标。
优化后:优化后:右栏搜索框;前端演示(仅检索预览站文章,防抖 + 下拉结果)。

智能助手

对方原样:对方:右下角助手按钮。
优化后:优化后:金色悬浮按钮 + 面板;样子货,不接后端(固定演示回复)。

评论区

对方原样:对方:本来就没有。
优化后:优化后:同样不做,不画蛇添足。
演示文章
改真站时要动的位置
① build.py 的 CSS 常量:追加本预览的 FX_CSS(或拆成独立 fx.css 由 page() 引入)
② build.py 文章页模板:加三栏结构、摘要卡、洞察图谱、点赞分享、右侧搜索 / 相关 / 标签模块
③ build.py md2html:代码块保留围栏语言(现在丢语言)、h2 加锚点 id(目录跳转用)
④ 新增 FX_JS:目录滚动高亮、代码块行号 / 复制 / 折叠、搜索、点赞 localStorage、助手面板
⑤ 搜索真功能:build 时生成站内搜索索引 JSON(预览是前端演示,只含 2 篇文章)
⑥ 注意:真站文章目前都没有 ``` 代码块,代码块特效上线后只在有代码的文章上出现