改对三处关键位置：路径需统一为根绝对路径或配base标签、viewport标签不可注释、锚点id必须唯一且可见。否则手机错位、链接失效、图片不显示。
直接用开源 HTML 模板建站，不是“复制粘贴就能上线”，而是“改对三处关键位置，否则页面在手机上错位、链接全失效、图片不显示”。
为什么 index.html 里所有相对路径都可能崩
开源模板通常假设你把整个文件夹部署在网站根目录（比如 https://me.com/），但你本地双击打开、或上传到子目录（如 https://github.io/me/my-website/）时，./css/style.css、images/avatar.jpg 这类路径就会 404。
- 先检查
里的<link rel="stylesheet" href="css/style.css">和<script src="js/main.js"></script>—— 把它们全改成以/开头的绝对路径（如/css/style.css），前提是你的托管平台支持根路径解析（GitHub Pages 默认不支持，需配合base标签） - 更稳妥的做法：在
里加一行<base href="/">，然后所有资源路径保持相对写法；但如果部署在子路径（如/my-website/），就得改成<base href="/my-website/"> - 图片路径同理：
<img src="images/photo.png">在子路径下会请求https://me.com/images/photo.png，实际却在https://me.com/my-website/images/—— 直接删掉开头的images/改成<img src="photo.png">（把图和 HTML 放同级）最省事
meta name="viewport" 被注释掉就等于放弃手机用户
很多模板为了“兼容旧浏览器”或“方便调试”，把这行 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 注释掉了。结果就是：你在手机上打开，页面缩成一条细线，必须手动双指放大才能看字。
- 打开
index.html，搜索viewport，确认它没被包在<!-- -->里 - 如果模板用了
initial-scale=1.0但没写user-scalable=no，保留它——禁用缩放会伤害可访问性，别加 - 某些老模板还残留
target-densitydpi这种已废弃属性，直接删，留了反而干扰现代浏览器渲染
导航栏链接指向 #about 却跳不到对应区块？检查 id 是否唯一且未被覆盖
单页模板常用锚点跳转（如 @#@#@#@#@#@#@#@#@#@0），但点击后页面不动，大概率是目标元素的 id="contact" 被重复写了两次，或被 JavaScript 动态移除了。
- 用浏览器开发者工具（F12）右键点击导航链接 → “检查”，看
href值是否确实是#xxx；再搜页面里是否存在<section id="xxx"></section>，且只出现一次 - 有些模板用
<div class="section"> + JS 绑定 ID，此时要确认 JS 文件已加载，且没报 <code>TypeError: Cannot read property 'addEventListener' of null这类错误 - 若区块用了
display: none或opacity: 0动画隐藏，锚点跳转仍能定位，但用户看不到——加一句scroll-margin-top: 80px到该区块 CSS，避免被固定头部遮挡
真正卡住人的从来不是“怎么加一张图”，而是改完 index.html 后发现 style.css 里某条 background: url(../img/bg.jpg) 的上级目录数多了一层，或者 GitHub Pages 构建日志里静默失败，因为 _config.yml 缺失而自动降级为纯静态托管——这些细节不提前扫一遍，上线前两小时你还在对着白屏干瞪眼。
