javascript - 来自静态 HTML 的 Typed.js/strings(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 插件将其动画文本放在该元素中。