不能直接用而用模拟，是因为IE10及更早版本不识别该语义标签，或项目有SSR、微前端等兼容要求；此时必须添加role="complementary"及aria-label等属性确保可访问性，而非仅靠CSS布局。

为什么不能直接用

却要用

模拟？

因为某些旧版浏览器（如 IE10 及更早）不识别

语义标签，或项目强制要求 DOM 结构中避免 HTML5 语义元素（例如 SSR 渲染兼容、微前端子应用隔离、CSS 重置策略）。此时用

手动模拟

的逻辑，核心不是“长得像”，而是“行为和可访问性一致”。

• 必须添加 role="complementary"，否则屏幕阅读器不会将其识别为辅助内容区
• 建议加上 aria-labelledby 或 aria-label，明确说明侧边栏用途（如 aria-label="文章相关推荐"）
• 不要仅靠 CSS 浮动或 position: absolute 实现布局——这会破坏文档流与语义顺序，影响键盘焦点和读屏顺序

display: flex 布局下

宽度不生效？

常见错误是把侧边栏放在 flex 容器里却没设主轴尺寸约束。Flex 项默认会收缩（flex-shrink: 1），即使写了 width: 280px，也可能被压缩为最小内容宽。

• 给侧边栏加 flex: 0 0 280px（即不伸展、不收缩、基准宽 280px）
• 主内容区用 flex: 1 占满剩余空间，避免用 width: calc(100% - 280px) —— 后者在缩放或响应式时易出错
• 若父容器未设 display: flex，或漏了 flex-direction: row，flex 属性完全无效

如何让

在移动端自动折叠？

侧边栏的“独立逻辑”不仅指结构，还包括响应式行为：PC 端常驻，移动端需收起并提供触发入口。关键不在隐藏本身，而在保持可访问性不降级。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 用 max-width 媒体查询 + transform: translateX(100%) 隐藏（比 display: none 更安全，不破坏焦点流）
• 折叠状态通过 aria-expanded="false" 和 aria-hidden="true" 同步控制
• 切换按钮必须用 而非
  ，且绑定 aria-controls="aside-id"
• JavaScript 控制显隐时，记得同步更新 inert 属性（或手动移除/恢复 tabindex）

侧边栏内链接点击后页面跳转，但焦点丢失怎么办？

这是纯

模拟时最易忽略的细节：原生

不接管焦点，但自定义侧边栏若含交互元素（如搜索框、筛选按钮），用户键盘操作后焦点可能“掉出”组件外，导致后续 Tab 键无法继续在侧边栏内循环。

• 给侧边栏容器加 tabindex="-1"，使其可被脚本聚焦
• 在用户打开侧边栏后，用 element.focus() 主动将焦点移到第一个可聚焦子元素（如首链接或搜索框）
• 实现键盘循环：监听 keydown，当焦点在末尾元素且按 Tab 时，preventDefault() 并跳回首个元素
• 不要依赖 CSS outline: none 彻底隐藏焦点环——可用 :focus-visible 精准控制

侧边栏是否“独立”，不取决于它用了什么标签，而在于它是否在结构、行为、可访问性三个层面都自洽。手写

时，补全这些逻辑比写对一个 class 名难得多。