用原生 Web 重写我的网站

作者将网站重写为纯 HTML/CSS/JS,讲述了重写的原因、可行性、方法、简要回顾及技巧等方面:

  • 原因:多年来使用多种库和框架构建网站后,自建的静态网站生成器compose-html虽好用但最终未使生活更轻松,其抽象概念僵化且代码量增多,作者更倾向于简单易懂的系统。
  • 可行性:现代 HTML/JS 的 Web Components 可用于封装重复部分,如<site-header>等标签,虽需手动复制粘贴一些公共标签,但与其他框架的样板代码量相当。对于禁用 JS 的用户,仍能看到主要内容。对于生成数据驱动的内容,如博客列表,可根据需要进行部分自动化处理。
  • 方法:遵循语义 HTML、TAC CSS 方法论和带有轻量级 DOM 的 Web Components 原则。语义 HTML 用语义标签代替通用标签;TAC 方法论通过创建新标签来表示概念组件,使标记更精简,CSS 更模块化;轻量级 DOM 避免了 Web Components 的一些复杂性,与 TAC 方法论相契合,便于从普通 JS 风格转换为 Web Components。
  • 简要回顾:优点包括即时反馈、无外部控制的 bug、无框架或范式限制;缺点有公共文件大、较冗长、频繁复制粘贴、难重新设计等。
  • 技巧:利用 LLM 帮助转换页面样式,添加客户端 JS 实现组件的懒加载,在实际项目中根据需要灵活运用,不追求纯粹的 HTML 或 Web Components 等。同时对网站首页进行了重新设计,增加了一些自动化元素。整个重写过程比预期更顺利快捷,作者也喜欢这种原始的创作体验。
阅读 9
0 条评论