黄博士中医诊所Website 2.0 开发日记22-24
Website 2.0 开发日记 22
从试错施工到按图施工
日期：2026年8月11日
过去两天，我们正式进入 Website 2.0 的 Elementor 实施阶段，主要尝试搭建 Header 和首页第一屏。虽然最后发现施工方向存在问题，需要重新整理，但这两天并不是白做，反而让我们真正认识到“设计网站”和“把网站建出来”之间还缺少一个重要环节。
前期 Website 2.0 已经完成了大量设计工作，包括 Master Blueprint、Desktop Master Layout、Design System 和响应式原则。因此，真正进入 Elementor 后，本来应该按照已经确定的设计直接施工。
但这两天实际采用的方法却逐渐变成了：
放入一个组件 → 看效果 → 调参数 → 截图 → 再判断 → 再修改。
这实际上又回到了“边搭边设计”。
Header 最典型。原设计中 Logo、Navigation、中文站本来就是三个独立区域，但施工过程中一度把 Navigation 和中文站放在同一个结构里。首页第一屏也出现类似问题：虽然已有设计图，却没有先转换成完整的 Elementor 参数，就开始现场搭建和调整。
这说明真正的问题并不是设计错误，而是设计与施工之间缺少 Implementation Specification（施工规格）。
从现在开始，Website 2.0 正式固定新的实施流程：
Master Layout → Design System → Implementation Specification → Elementor Construction → QA → Lock
以后每一个 Header、Footer、Screen 或 Section，在进入 Elementor 前，必须先确定容器层级、宽度、Flex/Grid、Gap、Padding、Typography、Colour、图片和 Responsive 等具体参数。施工阶段只负责执行，不再现场寻找设计答案。
同时改变操作方式。以后不再“点一步、拍一张、再决定下一步”。ChatGPT 应先把完整施工单准备好，我按照施工单连续完成；只有遇到界面异常或一个完整模块施工结束时，才截图进行检查和验收。
不过，这两天也有非常实际的收获。
刚开始使用 Elementor 时，我对 Container、Flexbox、Widget、Structure、Padding、Margin、Typography 等几乎完全陌生。经过两天实际操作，现在已经能够理解基本后台结构，也能够自己发现页面结构与原设计不一致的问题。
因此，这两天实际上完成了一次很有价值的 Elementor 实战训练。
更重要的是，我们由此找到了 Website 2.0 后续更高效的施工方式：
先想清楚，再动手；先做好施工图，再进入 Elementor；一次施工，集中验收。
以后每天的进度也不再以“操作了几个小时”衡量，而以真正完成并锁定的模块衡量。
Development Diary 22 的意义，不是记录一次失败，而是记录 Website 2.0 从“摸索式建站”正式转向“工程化施工”的转折点。
下一步：按照完整施工规格，重新高效率完成 Desktop Header V1，验收并锁定后，再进入 Homepage Screen 1。
website 2.0 开发日记 23
日期：2026年8月11日
主题：Header 主体搭建完成，网站第一次清楚呈现设计成果
一、今天的工作目标
今天继续在 Elementor Theme Builder 中制作网站 Header，重点完成左侧品牌标志和右侧中文站入口，并把真实网页与原来的首页设计草图进行第一次正式对照。
今天不是重新讨论设计，而是把已经锁定的 Header 方案真正做进网站：
- 左侧：三叶品牌标志＋诊所英文名称
- 中间：六个主导航
- 右侧：小地球＋“中文站”
二、今天完成的内容
1. 正式三叶品牌标志成功上传并替换星形图标
今天先把原来临时使用的星形图标替换为正式的三叶 SVG 标志。上传过程中一度进入了错误页面，也曾回到 Theme Builder 模板列表，但最后顺利回到 Header 编辑器，并从媒体库重新上传和插入标志。
最终设置：
- 图标：正式三叶圆环 SVG
- 颜色：Warm Clinical Green
#0B3D2E - 尺寸：
42px - 右侧间距：
8px - Padding：四边均为
0 - 图标比例正常，没有变形
三叶标志已经与两行诊所名称组合在一起，左侧品牌区的基本结构完成。
2. “中文站”左侧加入小地球图标
在右侧语言入口中新增 Elementor 自带的线性 Globe 图标。最初 Icon 被误放进了中间导航的 Flexbox，后来通过 Navigator 将它移动到最下面的语言入口 Flexbox，并放在“中文站”Heading 前面。
最终设置：
- 图标样式：线性经纬网格 Globe
- 尺寸：
16px - 默认颜色：
#0B3D2E - Hover 颜色：中国红
#DE2910 - 图标右侧 Margin：
6px - Padding：四边均为
0
“中文站”文字原来已经完成字体和颜色设置，因此没有重复修改。
3. Header 已保存并完成第一次前台预览
保存 Header 后，在前台打开了模板预览。虽然页面中央显示 Elementor Header #94，但这只是 Header 模板的预览标题，不是正式首页内容。
前台检查确认：
- 左侧三叶标志和诊所名称正常显示
- 六个导航顺序正确，并保持在同一水平线上
- 右侧小地球和“中文站”正常显示
- 三个主要区域没有换行或明显错位
- 暖白背景和深绿色品牌方向正确
- Header 的基本结构已真正建立
三、与设计草图的对照结果
真实 Header 与原设计草图的总体结构已经一致，完成度约为 85%–90%。今天最重要的成果，不只是加入了两个图标，而是第一次可以在真实网页中清楚看到完整 Header 的样子。
一致的部分包括：
- 三叶标志＋两行诊所名称
- 六个主导航的结构和顺序
- 小地球＋“中文站”的语言入口
- 左、中、右三区布局
- 暖白背景、深临床绿色和留白方向
四、前台检查后发现的三个精修重点
1. 左侧诊所名称需要更像一个紧凑 Logo
目前第二行 Acupuncture Clinic 相对太长，整个文字组合横向占位偏大。下一次需要：
- 第一行
PhD Win保持稍大、稍有分量 - 第二行
Acupuncture Clinic缩小并收紧 - 缩短两行之间的距离
- 让三叶图标与两行文字形成一个更完整、更紧凑的品牌 Logo
- 必要时把目前一个 Heading 拆成两个 Heading，以便分别控制两行字体
2. 六个导航需要略微缩小和收紧
目前六个导航整体偏宽，视觉上稍显松散。下一次需要：
- 字号略微缩小
- 导航项目之间的间隔缩短
- 保持清楚易读
- 为左侧 Logo 和右侧语言入口留出更自然的空间
3. 小地球和“中文站”要真正合并成一个入口
目前小地球与文字虽然放在同一个 Flexbox 内，但仍是两个独立组件，视觉距离也稍大，还不像一个完整的语言切换按钮。
下一次需要：
- 将两者距离从
6px进一步缩小到约2–3px - 小地球、文字和以后可能加入的下拉箭头组成一个整体
- 整个区域使用同一个中文站链接
- 鼠标放在任何位置时，图标和文字同时变为中国红
- 点击图标或文字都能进入中文网站
五、今天遇到的问题与经验
今天上传 SVG 时曾经“迷路”，先后进入了 Theme Builder 列表和 Elementor Custom Icons 页面；新增小地球时也一度把 Icon 放进了错误的 Flexbox。
但这些问题最后都通过 Navigator 和浏览器标签页顺利纠正，没有破坏已经完成的 Header。今天进一步确认：
- Elementor 中复杂结构应优先通过 Navigator 判断位置
- 新组件放入后，要先检查它属于哪个 Flexbox
- 上传 SVG 后，不要急于重复上传，先确认媒体库和当前编辑页面
- 每完成一个小单元就保存和前台检查，可以及时发现真实比例问题
- 草图负责确定方向，真实网页负责验证比例和使用感受
六、今天的阶段结论
今天 Header 的主体已经成功完成，网站建设可以说“成功了一半”。虽然还需要精修，但我们已经从抽象的设计图进入了真实网站，并且清楚看到了成果。
今天整体施工比较顺当。更重要的是，真实页面证明原来的设计方向是正确的，不需要推翻重做，只需在现有结构上收紧比例和交互。
七、下次工作的准确起点
下次直接从 Header 精修继续，不重新搭建：
- 收紧左侧 Logo 两行文字
- 缩小并收紧六个导航
- 将“小地球＋中文站”合并为一个可整体点击、整体变红的语言入口
- 视需要加入下拉小箭头
- 再做一次桌面端前台整体复查
今日状态：Header 主体搭建完成，进入视觉与交互精修阶段。
中文微信：nzacupunctureclinic
Leave a reply