跳到主要内容
全部作品

前端实现 · 2024

文档站的前端重写

把旧文档站重排为可检索的单页结构,同步重建阅读路径与首屏加载。

React可访问性性能
年份
2024
方向
前端实现
角色
前端开发
工具与标签
React / 可访问性 / 性能
笔记本屏幕上显示的网页界面
笔记本屏幕上显示的网页界面图版 01

背景

旧站每个章节都是独立页面,导航和搜索各有一套实现,深链接经常落到错误位置,移动端的表格也会撑破阅读栏。

重写把内容收进统一的目录结构,路由、搜索与侧边导航共用一份数据;阅读页保持窄栏,代码块与表格在移动端可以横向滚动。

做法

3 个阶段
  1. 01

    先把目录变成数据

    章节、锚点与搜索索引来自同一份结构,深链接不再各自维护,新增页面只需要加一条数据。

    代码编辑器中的目录与路由实现
    代码编辑器中的目录与路由实现
  2. 02

    重建阅读页

    正文限定在可读宽度,代码块、表格和提示块统一组件;窄屏下表格改为可横向滚动,不挤压正文。

    桌面与移动设备上的响应式页面
    桌面与移动设备上的响应式页面
  3. 03

    按性能预算验收

    首屏只加载当前章节,图片与代码高亮延迟加载;用真实网络条件检查首屏可读时间。

图集

成品与过程材料
办公桌上的网页设计稿与笔记本
办公桌上的网页设计稿与笔记本图 1
设计工具中的界面与组件
设计工具中的界面与组件图 2
团队围桌评审设计与实现
团队围桌评审设计与实现图 3

结果

交付了什么

以可核对的交付物记录结果,不换算成无法验证的业绩数字。

统一的目录与路由结构
导航、搜索与深链接共用一份章节数据。
阅读页组件集
代码块、表格、提示块与锚点的统一实现。
无障碍与性能清单
键盘可达、对比度与首屏加载的检查项。

以上为过程与交付说明;站点访问数据由项目方统计。

复盘

搜索的第一版只做了标题匹配,正文关键词命中很差。后来补了分词与摘要,才真正可用。