gpt4 book ai didi

javascript - 如何将 animejs 导入我的 wordpress 主题?

转载 作者:行者123 更新时间:2023-11-30 14:30:04 26 4
gpt4 key购买 nike

所以我完全是一个尝试构建自己的 wordpress 主题的菜鸟!

我想在我的页面上添加一个由 anime.js 制作动画的形状。但是,我不知道如何着手并实际输入 javascript 来使形状动画化。

这是我到目前为止在我的 functions.php 文件中尝试过的内容:

function tabula_rasa_scripts() {

// Enqueue Google fonts Roboto
wp_enqueue_style( 'tabula_rasa-fonts', tabula_rasa_fonts_url());

//Enqueue anime.js
wp_enqueue_script( 'tabula_rasa_anime', get_template_directory_uri() . '/js/businesscard.js', array(), false, false );

wp_enqueue_style( 'tabula_rasa-style', get_stylesheet_uri() );

wp_enqueue_script( 'tabula_rasa-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );

wp_enqueue_script( 'tabula_rasa-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'tabula_rasa_scripts' );

这是我的索引文件中的内容(原始形状出现了!)

<div id="primary" class="content-area">

<main id="main" class="site-main">

<div id="svgAttributes">
<svg class="businesscard" width="128" height="128" viewBox="0 0 128 128">
<polygon points="64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100 " fill=orange></polygon>
</svg>
</div>

这是我的 javascript 文件的样子:

/*jshint esversion: 6 */

import anime from 'animejs';

anime({
targets: '#svgAttributes svg polygon',
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96'
});

因此,我假设将它放入 .php 文件中并没有真正起作用,因为它在 header 中被调用。但是,如果不在 functions.php 文件中,我不知道在哪里实际调用 javascript 文件。

此外,也许这有帮助,但 Firefox Dev Tools 向我抛出此错误:

SyntaxError: import declarations may only appear at top level of a module

但是,我什至不知道那是什么意思!

谢谢你的帮助!!

最佳答案

所以,在@Core972 的评论的指导下,我找到了解决我自己问题的方法!

如果您使用 functions.php 文件对脚本进行排队(这是一种很好的做法),那么在将您自己的动画文件导入页脚之前,您还必须实际导入 anime.js 本身。

早些时候,我试图在没有将 .zip 文件提取到我的主题文件夹中的情况下导入 anime.js。这次是从github上下载文件,放在正确的文件夹下,然后从functions.php中调用

//Introduce animejs
wp_enqueue_script( 'tabula_rasa-anime', get_template_directory_uri() . '/anime-master/anime.min.js', array(), false, true );

//Enqueue animejs businesscard
wp_enqueue_script( 'tabula_rasa-businesscard', get_template_directory_uri() . '/js/businesscard.js', array(), false, true );

注意最后一个值是“true”,它告诉 functions.php 文件将它加载到页脚,而不是页眉。这也是最后加载动画的好习惯(因为它们通常是最没有值(value)的)。

然后,您可以删除 .js 文件中的导入调用,这将消除 Firefox 调试器向您抛出的导入错误。

关于javascript - 如何将 animejs 导入我的 wordpress 主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51341915/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com