hexo打字机

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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文件，然后在你的网页上引入该文件即可实现自动打字效果。注意替换自定义的打字内容。在示例代码中，我们已经将打字内容设置为"这是我自定义的打字内容。"。

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

球一个最佳答案谢谢啦！这对我非常重要！

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

没B用，不如实在写几篇文章管用
到了还是用了hexo，那你去搜打字效果，我猜一抓一把，baidu和bilibili可以解决你的需求

账号		自动登录	找回密码
密码			立即注册