如何在 AMP 中对大量文本实现"show more"？

Question

我有大量的文本，我想在页面加载上部分隐藏在页面上，同时将整个文本保留为单个文本，因此只有视图性能是已更改。

示例

来自：

关于文档的信息的摘要真的很长，可能是数千个单词...

显示

to：

关于文档的信息的摘要真的很长，可能是成千上万的单词可以到处都有到处都有任何地方，更多多更多，更多多更多，更多多更多，更多多更多，更多更多更多更多。多更多，更多多更多。

更多。

hide

我知道您可以使用AMP-ACORDION执行类似的行为，但是在这种情况下，椭圆（" ..."）必须消失并添加其余文本主体。这很重要，因此搜索引擎可以将整个抽象文本索引为一个实体。

这可以使用放大器页面实现吗？

Answer 1

我有相同的情况，找到清晰的解决方法。

这可以通过AMP绑定来完成。您可以使用隐式状态变量，例如可见，跟踪当前状态。

<button [text]="visible ? 'Show Less' : 'Show More'" on="tap:AMP.setState({visible: !visible})">
Show More </button>
<p [class]="visible ? 'show' : 'hide'" class="hide">Some more content.</p>

原始答案来自：放大器：切换CSS类的简便方法？

Answer 2

一个解决方案可能是使用AMP手风琴，并将标头造型看起来像段落，然后在末尾将超链接添加到文本中。这意味着整个H2都是可单击的，但锚模给了它们方向。

我不知道在重复内容上的谷歌立场是因为您在H2中显示了部分文本，然后在单击上藏起来并显示完整段落。

。

查看https://ampbyexample.com/components/amp-accordion/和"这是另一个示例，它在单击时隐藏了"更多"按钮。"示例

Answer 3

我看不到有关如何专门使用AMP进行的任何教程或文章。但是，您可以遵循有关使用纯CSS 实现"显示更多/更少"功能的教程。只需使用AMP页面中不允许的样式注意即可。

此外，我找到了具有Show more按钮的GitHub示例，如果amp-list内容需要比可用的空间更多，则AMP运行时将显示溢出元素（如果指定）。

<amp-list width=auto height=10 layout=fixed-height src="<%host%>/json/examples.json" template="amp-template-id">
    <div>
  <button overflow role=button aria-label="Show more" class="list-overflow">
    Show more
  </button>
    </div>

希望这会有所帮助！

Answer 4

可以简单地使用Amp-accordion

完成

amp html：

<amp-accordion disable-session-states>
  <section>
    <h4>
      <span class="show-more">Show more</span>
      <span class="show-less">Show less</span>
    </h4>
    <p>Id lacus amet. Aliquam eos nunc ut scelerisque lacinia, eu rutrum id, vestibulum aliqua vivamus luctus eu rhoncus ut, sodales id. Velit lacus, fermentum neque et sagittis, ac venenatis volutpat, dolore neque feugiat proin fermentum odio, odio arcu
      in eu wisi. </p>
  </section>
</amp-accordion>

AMP CSS将是：

amp-accordion section[expanded] .show-more {
  display: none;
}
amp-accordion section:not([expanded]) .show-less {
  display: none;
}