Glidejs with Wordpress

Question

我想在我的Wordpresse站点上使用Glide.JS。我读了文档，并转译了可湿性粉剂的解释。

https://glidejs.com/docs/setup/

我在我的主题文件夹中安装了"npm“，并且在我的fonction.php文件夹中编写了代码：

​

​

我在single.php中的代码：

                    <div class="glide">
                    <?php 
                        $images = get_field('galery');
                        if( $images ): ?>
                            <div class="glide__track" data-glide-el="track">
                                <ul class="glide__slides">
                                    <?php foreach( $images as $image ): ?>
                                        <li class="glide__slide">
                                            <a href="<?php echo esc_url($image['url']); ?>">
                                                <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>">
                                            </a>
                                            <p><?php echo esc_html($image['caption']); ?></p>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                            <div class="glide__arrows" data-glide-el="controls">
                                <button class="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
                                <button class="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
                            </div>
                            
                        <?php endif; ?>
                    </div>
                    <script>
                        import Glide from '@glidejs/glide'
                        new Glide('.glide').mount()
                    </script>

我有一个开始的结果，但我在我的控制台中有这个错误：

未捕获SyntaxError:导入声明只能出现在模块的顶级

我相信我的问题在于这个解释，我看不出Wordpress该怎么做

谢谢！

​

​

Answer 1

这是因为您在single.php的脚本标记中使用了import语句。您只需在ES模块中使用import语句，如屏幕截图所示。

因为您是在functions.php中将脚本排入队列，所以glide.js是全局可用的，您应该从脚本标记中删除导入语句，glide将被初始化。

或者，您可以利用此处所述的CDN https://glidejs.com/docs/setup/来托管代码。