Question

我有大量的文本，我希望在页面加载时部分隐藏，同时将整个文本保留为单个文本正文，因此只有视图才能被更改。

示例

自：

有关文件的信息摘要真的很长，可能长达数千字......

Show

到：

有关文件的信息摘要真的很长，可能长达数千字可以在任何地方随处可见，越来越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越多越好。

Hide

我知道您可以使用amp-accordion执行类似的行为，但在这种情况下，省略号（“...”）必须消失并附加剩余的文本正文。这很重要，因此搜索引擎可以将整个抽象文本索引为一个实体。

这可以使用AMP页面实现吗？

Answer 1

我有同样的情况，并找到明确的解决方法。

这可以通过amp-bind完成。您可以使用隐式状态变量，例如可见，跟踪当前状态。

<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>

原帖：DATETIME

Answer 2

对此的一个解决方案可能是使用放大器手风琴并将标题设置为看起来像一个段落，然后在末尾添加到文本的超链接。这意味着整个h2是可点击的，但锚模具给他们指示方向。

我不知道谷歌对重复内容的立场是什么，因为你在h2中显示文本的一部分，然后将其隐藏在点击上并显示完整的段落。

查看https://ampbyexample.com/components/amp-accordion/和“这是另一个例子，点击后会隐藏”显示更多“按钮。”示例

Answer 3

我无法看到有关如何使用AMP专门执行此操作的任何教程或文章。但是，您可以按照tutorial关于使用Pure CSS实现“显示更多/更少”功能。请注意AMP页面中不允许的styles。

此外，我发现此GitHub sample具有Show more按钮，如果amp-list内容需要的空间超过可用空间，AMP运行时将显示溢出元素（如果已指定）。< / p>

<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;
}

如何在AMP的大量文本中实现“显示更多”？

4 个答案: