2

我正在使用最新版本 6.1.3 和 ruby​​ 版本 2.7.2 创建一个 rails 应用程序。我有一个旧主题，我想将它集成到我的应用程序中。

但不知何故，我无法成功整合它。请在下面检查我的错误和集成步骤。

错误 在此处输入图像描述

一体化

应用程序/javascript/packs/application.js

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "jquery"
import "popper.js"
import "bootstrap"
require("./external/imagesloaded.min")
require("./external/isotope.min")
require("./external/simpleLightbox.min")
require("./external/theme")

Rails.start()
Turbolinks.start()
ActiveStorage.start()

所有自定义主题 js 文件都存储在app/javascript/packs/external

应用程序/javascript/packs/external/theme.js

;(function($){
  "use strict"

  /*  Isotope Fillter js */
    console.log("file execute successfully");
    function gallery_isotope(){
    if ( $('.gallery_f_inner').length ){
      // Activate isotope in container
      $(".gallery_f_inner").imagesLoaded( function() {
        $(".gallery_f_inner").isotope({
          layoutMode: 'fitRows',
          animationOptions: {
            duration: 750,
            easing: 'linear'
          }
        });
      });

      // Add isotope click function
      $(".gallery_filter li").on('click',function(){
        $(".gallery_filter li").removeClass("active");
        $(this).addClass("active");

        var selector = $(this).attr("data-filter");
        $(".gallery_f_inner").isotope({
          filter: selector,
          animationOptions: {
            duration: 450,
            easing: "linear",
            queue: false,
          }
        });
        return false;
      });
    }
  }
  setTimeout(() => {
    gallery_isotope();
    $('.imageGallery1 .light').simpleLightbox();
  }, 800);

  /*  Simple LightBox js */
})(jQuery)

我尝试了这个解决方案，但我有 7 个自定义 js 文件，每个文件至少有 16 种不同的函数，因此手动转换所有 js 文件非常困难。

请指导我哪里错了，并建议我一个可行的解决方案。提前致谢。

4

0 回答 0