javascript - 来自静态 HTML 的 Typed.js/string(SEO 友好)

Question

现在我正在努力使用 Typed.js jQuery 插件。

我想要做的就是，不使用 strings 数组插入字符串，而是在页面上放置一个 HTML div 并从中读取。 这样机器人和搜索引擎以及禁用 JavaScript 的用户就可以看到页面上的文本。

<div id="text1">

  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>

</div>

<span id="typed"></span>

<script>
$(function(){
    $("#typed").typed({
        stringsElement: $('#text1')
        typeSpeed: 50
    });
}); </script>

我也不明白 span 的用途。

Answer 1

一个问题可能是您没有最新版本的 Typed.js。尽管版本 1.1.1 是 cdnjs.com 上提供的最新版本在 Bower 中，代码 on GitHub此后已更新，但未发布。 stringsElement最新自述文件中描述的功能仅适用于最新的 code in the repo ，不是发布的版本 1.1.1。其他用户noticed this problem too .

此外，您需要通过在 $('#text1') 之后添加逗号来修复语法错误。 。在 JavaScript 对象文字中 {} ，每个 key: value 后面需要一个逗号除了最后一个之外的一对。

将这两个修复放在一起，您将得到以下工作代码:

$(function() {
  $("#typed").typed({
    stringsElement: $('#text1'),
    typeSpeed: 50
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/mattboldt/typed.js/master/dist/typed.min.js"></script>


<div id="text1">
  <p>
    Hello,
    <br>
    <br>
    bla bla bla
    <br>
    <br>
    bla bla bla.
  </p>
</div>

<span id="typed"></span>

此外，这可能是有目的的，但请注意您的 <div id="text1">格式与示例 in the README 不同。而不是使用许多 <p> s，您正在使用一个 <p>包含许多由 <br> 分隔的行。这样做的效果是插件永远不会在每一行上退格，而是一次将它们全部写入。如果这不是您想要的，请使用自述文件中的格式。

至于什么span是的，它是页面上将显示打字动画的元素。您可以移动该span围绕页面并根据需要使用 CSS 对其进行样式设置。您引用了 span当您在代码中编写 $("#typed") 时– 选择span与 id="typed" 。然后你调用.typed()告诉 Typed.js 插件将其动画文本放入该元素内。