Question

为什么<amp-sidebar>必须成为身体的直接孩子？

我的情况是，在代码结构方面，我会更容易在<amp-sidebar>中包含<div>。我希望它的行为与<amp-sidebar>完全相同，但我没有任何简单的方法可以将元素作为<body>的直接子项。

当我看到amp-by-example page没有通过AMP验证器时，我特别困惑。

有人可以照亮我吗？我想在github上打开一个问题，但我不确定是否有错误。

Answer 1

根据AMP项目的主要开发人员，<amp-sidebar>是<body>的孩子的要求是由于position:fixed的Safari错误造成的。链接到tweet。

Answer 2

如果您正在使用服务器端呈现，一种可能的解决方法是解析呈现的html字符串并将侧边栏标记放置为正文的直接子项。我还没有大规模地试过这个：

function fixAmpSidebars(strHtml) {
    let sidebarBegin = 0, sidebarEnd = 0
    const sidebars = []
    do {
        sidebarBegin = strHtml.indexOf('<amp-sidebar', sidebarBegin)
        if (sidebarBegin !== -1) {
            sidebarEnd = strHtml.indexOf('</amp-sidebar>', sidebarBegin) + 14
            sidebars.push(strHtml.slice(sidebarBegin, sidebarEnd))
            strHtml = strHtml.slice(0, sidebarBegin) + strHtml.slice(sidebarEnd)
        }
    } while (sidebarBegin !== -1)
    if (sidebars.length) {
        strHtml = strHtml + sidebars.join('')
    }

    return strHtml
}

Amp-sidebar：它绝对必须是身体的孩子吗？为什么？

2 个答案: