前端

这是一篇按日期累积的开发日志。每次改动博客，我都把"做了什么"和"学到的前端原理"记在这里，方便以后翻查。最新的改动放在最上面。 维护约定：下次改动时，在 改动模板 上面新增一个 ## 日期 — 标题 小节即可。 2026-06-09 — 接入自定义域名 + 翻译按钮升级 这次做了什么 自定义域名上线：把 GoDaddy 买的 xungirl.com 接到 GitHub Pages，配置了 DNS（4 条 A 记录指向 GitHub IP + 1 条 www 的 CNAME），清掉了 GoDaddy 默认的停放记录，最后开启了自动 HTTPS（Let’s Encrypt 证书）。 新增文章：一篇讲 A 记录 vs CNAME 记录的英文文章。 翻译按钮：保护代码与公式：点翻译时，代码块、行内代码、数学公式保持原样不被翻译。 翻译按钮：升级为双向：自动判断当前文章是中文还是英文，翻成"另一种"——英文文章翻中文、中文文章翻英文。 涉及文件：layouts/partials/extend_head.html（翻译逻辑）、content/posts/（文章）。 前端原理 这次最值得记的是几个前端基础概念，比具体代码更重要。 1. 构建期 vs 运行期（最核心的一条线） 构建期（Hugo） 运行期（浏览器 JS） 谁在做 push 后 GitHub Actions 构建一次，生成静态 HTML 访客打开页面时，浏览器实时执行 适合 文章内容、菜单、固定文案（可走 Hugo 的 {{ i18n }} 翻译） 会动的东西：计时器、实时翻译、交互 特点 生成完就定死，之后不变 每次访问都重新跑，可以随时变 为什么重要：博客底部那个"已运行 X 天 X 时"的计时器，必须用运行期 JS（因为每秒都在变，Hugo 构建一次没法让它跳动）；而它显示的英文字是写死在 JS 里的，脱离了 Hugo 的翻译体系，所以切语言不会变——这不是 bug，是它本来就在另一套系统里。 ...