侧边栏友情链接应使用<aside><nav aria-label="友情链接"><ul><li><a href="" rel="friend"></a></li></ul></nav></aside>结构，兼顾语义、SEO、可访问性与响应式。
侧边栏友情链接的 HTML 结构怎么写才不踩语义坑
直接用 <div> 套一堆 <a> 是最常见也最错的做法。搜索引擎和屏幕阅读器会把它当成普通区块，完全丢失“友情链接”这个关系含义。
正确做法是用 <aside> 包裹 <nav>，再用 <ul> 列出链接——<aside> 表明这是附属内容，<nav> 明确这是导航用途，<ul> 体现链接间的并列关系。
示例结构：
<aside>
<nav aria-label="友情链接">
<ul>
<li><a href="https://example.com" rel="friend">示例站点</a></li>
<li><a href="https://another.org" rel="friend">另一个友链</a></li>
</ul>
</nav>
</aside>
-
rel="friend"是关键：它告诉浏览器和爬虫这是双向认可的友链，不是普通外链，部分 SEO 工具会识别该属性 - 避免用
target="_blank"不加rel="noopener"，否则有安全风险（可能被恶意脚本劫持 window.opener） - 不要给每个
<a>加title属性堆砌关键词，既干扰可访问性，又可能被判定为 spam
CSS 控制侧边栏宽度和对齐时容易忽略的响应式断点
很多人写死 width: 240px 或用 float: right，结果在手机上侧栏跑到底部还占满屏宽。
立即学习“前端免费学习笔记（深入）”；
真正可控的方式是结合容器布局 + 媒体查询，而不是单靠侧栏自身样式。
- 主内容区用
flex或grid布局，把侧栏设为固定最小宽度（如min-width: 220px），主内容用flex: 1或flex-grow: 1 - 在
@media (max-width: 768px)下，把<aside>设为display: none或改用position: sticky滚动吸附，而非强行挤进窄屏 - 慎用
margin-left推主内容——一旦侧栏高度超过主内容，底部就会留白；用flex或grid才能自然对齐底边
JavaScript 动态加载友链时怎么避免 FOUC 和重复请求
如果友链数据来自 JSON 接口，直接 fetch() 后 innerHTML 注入，页面会先闪一下空白或默认文字，再渲染链接——这就是 FOUC（Flash of Unstyled Content）。
- 初始化时在 HTML 中保留一个带
aria-busy="true"的空<ul>，CSS 隐藏未加载状态下的文字提示 - 请求成功后，用
document.createElement+appendChild逐条插入，比拼接字符串更安全（防 XSS，也避免意外闭合标签） - 加个简单缓存：把返回的 JSON 存到
sessionStorage，30 分钟内重复访问不再发请求，但注意检查sessionStorage是否可用（某些隐私模式下会被禁用） - 别在
window.onload里发起请求——它等所有资源（包括图片）加载完才触发，用户要等很久；改用DOMContentLoaded即可
WordPress 主题里加友链侧边栏为什么总显示不全
不是代码写错了，而是 WordPress 5.5+ 默认移除了原生友链功能（Link Manager），wp_list_bookmarks() 函数已失效，插件也大多没适配新版本。
- 如果必须用传统方式，得手动启用 Link Manager：在
functions.php里加add_filter('pre_option_link_manager_enabled', '__return_true');，再激活对应插件 - 更推荐方案：把友链当自定义文章类型（CPT）管理，用
WP_Query查出列表，再用get_post_meta()读取 URL 和描述字段——兼容性好，后台也干净 - 注意主题是否调用了
dynamic_sidebar()且注册了对应 sidebar ID；很多主题只注册了sidebar-1，但你在小工具里拖到了sidebar-2，结果就是空着不显示
友链看似简单，但语义、响应式、加载时机、CMS 兼容这四块，任意一块没对齐，轻则样式错乱，重则影响 SEO 和辅助访问。动手前先确认你卡在哪一层，比直接抄代码有用得多。
