应通过URL参数（如?source=search）动态显示来源标识，用JavaScript解析window.location.search并映射为中文标签，避免依赖不可靠的document.referrer。
怎么用 HTML 显示“来自搜索”或“来自分享”这类来源标识
直接在页面里加个 <span> 就能显示，但关键是怎么让这个文字内容动态匹配真实来源。HTML 本身不读取访问来源，必须靠 JavaScript 补充逻辑，或者服务端注入（如 PHP、Node.js）。纯静态 HTML 文件无法自动识别来源，硬写死就失去统计意义。
常见错误是把 document.referrer 直接当可靠依据——它可能为空、被浏览器屏蔽、或被中间页污染（比如从微信内嵌浏览器点进来，referrer 常是 https://mp.weixin.qq.com/，不是“来自分享”的原始意图）。
- 优先用 URL 参数传递来源，例如：
portfolio.html?source=search或portfolio.html?source=share - 如果走服务端渲染，可在 HTTP 请求头或 session 中判断来源（如检查
User-Agent是否含MicroMessenger，或是否带utm_source=wechat） - 避免依赖
document.referrer做唯一判断，尤其在 iOS Safari 和微信内置浏览器中，它经常被清空
用 JavaScript 解析 URL 参数并显示来源文字
这是最轻量、兼容性最好、也最容易调试的方式。只要在页面加载时读取 window.location.search，解析出 source 参数，再填进指定 DOM 元素即可。
示例代码（放在 <body> 底部或 DOMContentLoaded 里）：
立即学习“前端免费学习笔记（深入）”；
const urlParams = new URLSearchParams(window.location.search);
const source = urlParams.get('source') || 'direct';
const labelMap = {
search: '来自搜索',
share: '来自分享',
direct: '直接访问'
};
const el = document.querySelector('#source-label');
if (el) {
el.textContent = labelMap[source] || '未知来源';
}
注意：要提前在 HTML 里留好容器，比如 <span id="source-label"></span>。别用 class 名做选择器——万一页面多个作品共用同一套 JS，容易误改其他位置。
为什么不能只靠 referrer 判断“来自分享”
因为 document.referrer 是浏览器提供的上一页地址，它不等于用户意图来源。比如：
- 用户从知乎点击链接进入你的作品页，
referrer是知乎域名，但你未必想标为“来自分享”——可能是别人转载了你的图，算传播，不算主动分享 - 微信中点击链接，iOS 微信常返回空
referrer；安卓微信可能返回https://servicewechat.com/这类无效值 - 用户复制链接发给朋友，朋友直接粘贴打开，
referrer为空，实际却是“来自分享”
真正可靠的“分享”行为，应由分享方主动带上参数（比如点击分享按钮时跳转到 portfolio.html?source=share&from=wechat），而不是靠下游被动猜。
部署时要注意的三个细节
上线后常因配置疏忽导致来源标识不显示或错乱：
- 确保所有分享链接都带
source=xxx参数，不要漏掉二维码、App 内跳转、邮件正文里的链接 - 如果用了 PWA 或 Service Worker，检查是否缓存了无参版本的 HTML，导致新参数不生效
- 统计后台（如 GA4、Umami）和前端显示逻辑要对齐：比如都把
source=share归为“分享”，别前端叫“社交分享”，后台叫“站外引流”
最麻烦的情况是：URL 参数正确，但前端 JS 因加载顺序或执行时机问题没跑完，结果用户看到空白或默认文案。建议加个 fallback 文本，并用 console.log 打印实际读到的 source 值，方便现场排查。
