给博客加上自己的声音

音频导读

最近给博客增加了使用自己音色合成的音频导读，并对页面交互和代码做了一些整理，希望阅读和后续维护都能方便一些。

音频导读

音频导读放在正文开始的位置，内容是根据文章写的一百字左右的介绍，再通过本地语音工具合成我的音色，上传以后供读者选择播放。

我先在《奥德赛》那篇影评中试用了这个功能，随后在后台加入了独立开关，其他文章也可以按需要启用。新文章默认关闭导读，关闭已有播放器时会保留音频链接和标题，以后重新开启时可以继续使用。

播放器保留了播放、暂停、时间和进度条，默认不会自动播放；如果页面脚本没有正常加载，也可以使用浏览器原生的音频控件。

阅读体验和代码整理

页面整体保留了原来的欢迎大图、玻璃导航和图片卡片，这次主要补充了搜索的加载、空结果和失败提示，加载失败后可以保留关键词重试。搜索和目录也支持键盘操作，按 Esc 键关闭后，焦点会回到原来的按钮。

长标题的卡片现在可以随内容增高，窄屏下的间距和表单也做了调整，减少文字裁切和横向溢出。

代码仍然使用原来的 Hexo 和原生 JavaScript，后台、构建脚本和样式按职责重新拆分，方便以后查找和修改。测试也改为根据当前文章检查搜索、归档和分页，修正了依赖旧文章数量的判断。

这些改动在隔离环境中完成构建、发布和恢复检查后统一上线，原有文章、图片、音频和恢复资料都已保留。桌面和不同手机宽度下的显示也做过检查，真机体验还需要继续留意。

之后发布文章时，可以先写正文和导读，再生成语音、上传图片及音频，检查链接和播放效果以后发布。