琅琊王朝 发表于 2023-9-27 21:34:00

hexo打字机

https://loujunyi-blog.netlify.app/
我希望在https://langyawangchao.github.io/实现自动打字,并且自定义内容
主题已经弄好了

isdkz 发表于 2023-9-27 21:34:18

要在 Hexo 博客中实现自动打字效果,你可以使用一个名为 Typed.js 的 JavaScript 库。你可以通过以下步骤来实现:

1. 在你的 Hexo 博客中安装 Typed.js 库:

npm install typed.js --save


2. 在你的主题中添加 Typed.js 的 CSS 和 JavaScript 文件。你可以将它们下载到你的本地,然后将它们放在你的主题目录下的/source/css和/source/js文件夹中。然后在你的主题中添加以下代码:

<link rel="stylesheet" href="/css/typed.css">
<script src="/js/typed.js"></script>


3. 在你的 Hexo 博客中创建一个新的页面,用于显示自动打字效果。你可以在你的 Hexo 博客根目录下运行以下命令来创建一个新页面:

hexo new page typing


这将在你的 Hexo 博客中创建一个名为typing的新页面。

4. 在你的typing页面中添加以下代码:

<div id="typed-strings">
<p>你想要打字的第一行内容</p>
<p>你想要打字的第二行内容</p>
<p>你想要打字的第三行内容</p>
</div>
<div id="typed"></div>

<script>
var typed = new Typed('#typed', {
    stringsElement: '#typed-strings',
    typeSpeed: 50,
    backSpeed: 50,
    loop: true
});
</script>


在上面的代码中,你需要将#typed-strings元素中的内容替换为你想要打字的内容。你还可以根据需要调整typeSpeed和backSpeed的值来改变打字的速度。

5. 最后,在你的 Hexo 博客中添加一个链接,以便用户可以访问你的自动打字页面。你可以在你的主题中添加以下代码:

<a href="/typing">自动打字</a>


这将在你的 Hexo 博客中添加一个名为“自动打字”的链接,当用户点击该链接时,他们将被带到你的自动打字页面。

希望这可以帮助你实现你想要的效果!

Mike_python小 发表于 2023-9-27 22:29:15

实现自动打字效果并自定义内容

要在你的网页上实现自动打字效果,并且自定义打字内容,你可以使用JavaScript来实现。以下是一个实现自动打字效果的示例代码:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Typewriter Effect</title>
</head>
<body>
    <h1 id="typewriter"></h1>

    <script>
      // 自定义打字内容
      const text = "这是我自定义的打字内容。";

      // 获取要显示打字效果的元素
      const typewriter = document.getElementById("typewriter");

      // 定义打字速度和初始索引
      const speed = 100; // 每个字符的打字时间间隔(毫秒)
      let index = 0; // 当前打字到的位置

      // 定义函数实现打字效果
      function type() {
            if (index < text.length) {
                typewriter.innerHTML += text.charAt(index);
                index++;
                setTimeout(type, speed); // 通过递归实现连续打字效果
            }
      }

      // 调用打字函数
      type();
    </script>
</body>
</html>


你可以将以上代码保存为一个HTML文件,然后在你的网页上引入该文件即可实现自动打字效果。注意替换自定义的打字内容。在示例代码中,我们已经将打字内容设置为"这是我自定义的打字内容。"。

希望以上信息能够帮助到你。如果还有其他问题,请随时提问。

球一个最佳答案谢谢啦!这对我非常重要!{:10_254:}{:10_254:}{:10_254:}

Mike_python小 发表于 2023-9-27 22:31:09

没B用,不如实在写几篇文章管用
到了还是用了hexo,那你去搜打字效果,我猜一抓一把,baidu和bilibili可以解决你的需求
页: [1]
查看完整版本: hexo打字机