Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
仅适用于站点级或应用级主要导航区块，如顶部主导航、侧边菜单、汉堡菜单、分页器（需满足跳转逻辑连续且加aria-label）、面包屑等；非主导航链接如相关阅读、操作按钮、上一篇/下一篇等不应使用。
<nav></nav> 可以包裹分页器，但必须满足“主导航链接集合”这一语义前提，不是所有分页都自动合格。
分页器用 <nav></nav> 的合理场景
分页器本质是页面间跳转的导航行为，当它承担的是“在一组逻辑连续的内容单元（如文章列表、搜索结果、商品目录）中切换当前视图”时，就符合 <nav></nav> 的语义定义。
- 常见合格用例：
<nav aria-label="文章列表分页"><ul> <li>@#@#@#@#@#@#@#@#@#@0</li> <li>@#@#@#@#@#@#@#@#@#@1</li> </ul></nav> - 关键判断点：分页项指向的是同一资源的不同切片（如 /blog?page=1、/blog?page=2），而非跳转到完全不同主题的页面
- 若分页出现在
<article></article>内部（如长文分章节），且仅用于该文章内部导航，也适用<nav></nav>，建议加aria-labelledby关联标题
为什么有些分页不该套 <nav></nav>
语义错位会削弱可访问性，尤其对屏幕阅读器用户——它们会把 <nav></nav> 读作“navigation”，但若里面只有“上一篇/下一篇”两个链接，用户无法判断这是全局导航还是局部翻页。
- “上一篇/下一篇”单独成组：属于内容流延续，更推荐用普通
<p></p>或<div role="navigation">，避免与主导航混淆 <li>带筛选条件的分页（如“按价格排序后分页”）：此时分页依赖于表单状态，语义上更接近“结果操作区”，<code><nav></nav>不准确，可用<section aria-label="结果分页"></section> - 无限滚动加载按钮（“加载更多”）：不是静态链接集合，不构成“导航链接”，不应使用
<nav></nav> - 不能只写
<nav><ul>...</ul></nav>—— 无障碍检测工具会报 “nav missing label” - 有可见标题时（如
<h2 id="paging-title">共 42 页</h2>），优先用aria-labelledby="paging-title" - 无可见标题时，必须用
aria-label="搜索结果分页"，不能用title属性替代 - 分页中当前页需用
<li aria-current="page">3</li>，而非仅靠 CSS 视觉高亮 - 在
flex容器中，<li>默认不占宽，导致移动端点不准；需加flex: 1或min-width: max-content - IE11 对
flex下<li>的宽度计算异常，若需支持，改用display: inline-block+vertical-align: top - 不要给
<nav></nav>直接设overflow: hidden或text-overflow: ellipsis，会截断屏幕阅读器可读文本
<nav></nav> 分页的无障碍硬性要求
即使语义正确，没加 aria-label 或 aria-labelledby 就算不合格。W3C 要求每个 <nav></nav> 必须能被辅助技术明确识别用途。
兼容性和样式注意点
<nav></nav> 本身无默认样式，但现代布局常配合 display: flex 或 grid，容易引发点击热区问题。
最易被忽略的是：分页器是否真的构成“导航”，取决于上下文而非结构本身。同一个分页组件，在搜索结果页是合格 <nav></nav>，在用户个人中心的“我的订单”列表里可能只是普通操作控件——语义永远跟着用户意图走，而不是标签看起来像不像导航。
