【开发日志】OldWebsiteToNew 开发全记录三（6月9日）全文搜索上线 + 分页+防御+图片修复

今天继续罗炳辉网站项目,完成 6 件大事: 全文搜索上线、分页改上下页+中间省略号、每篇文章底部返回改 history.back、import.py 加中文率+GBK 防御、删除乱码文章、图片格式修复后全量重渲。

一、全文搜索上线

今天最大的改动。MySQL articles 表加了 ngram FULLTEXT 索引(title + body_text),这是 MySQL 8 内置的中文分词解析器,不需要额外装 Jieba。写了一个 Flask app 跑在 gunicorn 2 workers @ 127.0.0.1:5001,nginx 加了反代 /search 和 /search.html 双路径,兼容老 URL。搜索是全域的,搜全文 926 篇文章,不只是搜标题。实测多个关键字都返回大量结果,系统工作正常。

二、关键实现细节

Flask app 实现了 6 个核心功能:关键字搜索(GET /search?q=xxx)、相关度排序(MATCH…AGAINST 返回 score 降序)、关键字高亮(用 mark 标签,黄底红字)、摘要取关键字前后 50 字、分页 20 篇/页、按发布日期二级排序。首页和栏目页 “最新文章” 行的右边加了搜索框,action=”/search”,用户点搜索直接跳到搜索结果页。

三、用户操作流程

用户在首页右上搜索框输入关键字(比如”会议”),提交后跳到 /search?q=会议,看到多条相关结果,按相关度排序,关键字黄底红字高亮。点结果跳到对应文章页,文章页底部返回 history.back() 回到搜索结果,而不是”重新开始”到首页。

图1是首页,”最新文章” 行右边有搜索框,分页改成了上下页 + 中间省略号模式。图2是搜”会议”的搜索结果页,多条结果按相关度排序,关键字高亮。

四、配套改动

分页改上下页 + 中间省略号,跟香港 ws 站同款,不再列 1-47 全数字,用 Jinja2 set + 范围判断实现。每篇文章底部返回改 history.back,用户从哪来就回哪去。import.py 加了中文率 < 5% 拒绝入库(乱码)、GBK 乱码标题拒绝(3+ 不可识别字符)、纯图页保留(全家福类)。删了多篇乱码文章,纯图/中文页恢复,新 id 收尾。

五、图片与渲染

图片格式 3 件套修复:input[type=image] 转 ,老动易装饰 GIF 删, 自动用 src 文件名当 alt(SEO 关键,50% 没 alt → 0)。图片仍 90% 宽 + height: auto,电脑和手机都能正常显示,不变形。重渲 926 篇 HTML + 首页 + 栏目页 + about.html。

六、技术栈与总结

栈:MySQL 8 ngram FULLTEXT / Flask 3 + gunicorn / Jinja2 / nginx 1.24 / Python 3.12。所有代码已 commit 到 c119ch/OldWebsiteToNew 私有仓库, commit hash a956fc1。规则已固化到 import.py,后续新文章入库自动应用 12 条防御规则,不会再出现 GBK 乱码污染。dev-log 在 docs/dev-log-2026-06-09.md。

图3是搜”故居”的搜索结果页。今日成果:926 篇入库,真搜索(多个关键字返回大量结果),上下页省略号分页,history.back 返回,中文率 + GBK 防御,乱码清洗,3 件图片格式修复。Gunicorn + nginx 都在线,全文搜索服务 /search 跟现有静态站无缝集成。

关于作者:WoodStone,技术爱好者,专注于 AI 和 Web 开发。

记录时间:2026年6月9日