如何在Rails 4 Pipeline中使用Galleria插件

Question

我最近遇到了一个问题，无法让Galleria插件与Rails 4 Pipeline一起使用，花了一些时间才找出解决方法，所以我希望在这里分享一下解决方案，以防其他人也遇到类似的问题。

1）下载插件后，将 galleria-1.3.3.js（这是我撰写本文时的当前版本）和 galleria.classic.js（或其他样式js文件）放到 vendor/assets/javascripts 中

2）将 galleria.classic.css（或其他主题样式表）放到 vendor/assets/stylesheets 中

3）在你的 application.js 文件中添加 //= require galleria-1.3.3 和 //= require galleria.classic，在 application.css 文件中添加 *= require galleria.classic

4）Asset pipeline 会为图像添加指纹，这使得通过通常的 css 访问它们变得困难，因此需要将 'scss' 添加到你的 galleria 样式表中，例如 galleria.classic.css.scss，并将 url(classic-map.png) 改为 asset_url("classic-map.png");，第二张图片同理。

5）打开 galleria.classic.js 文件，找到其中的 css: "galleria.classic.css" 或类似的内容，将其更改为 css: false

6）现在你只需要在某个 js 文件中添加 Galleria.run('#galleria'); 或其他元素即可，应该就可以正常使用了 :)

PS：我对 Rails 不是很熟悉，可能会犯一些愚蠢的错误，但我希望这对任何人都有所帮助 :)

- NoDisplayName

---

正是我所需要的，非常感谢。 - Tommy

Answer 1

我刚在Rails 4.1中使用了这个方法，同时使用的是Galleria 1.3.5版本。将主要的galleria文件夹中的文件复制到各个部分中。请注意，我正在使用经典/默认（免费）主题。

# app/assets/images
classic-loader.gif
classic-map.png

# app/assets/javascripts
galleria-1.3.5.js
galleria.classic.js

# app/assets/stylesheets (rename with .scss extension)
galleria.classic.css.scss

打开 galleria.classic.js 并编辑行 css: '...' 为 css: false (如果您不改变代码，则在大约第17行)。这就是我所做的一切，以使其与Rails 4配合工作。 我尝试将文件放置在vendor/assets文件夹中，但很快就变成了一场噩梦。 我发现上述解决方案是最简单/清洁的。更新：2016-02-02 - 我仍然使用相同的设置，其中包括Ruby 2.2.3，Rails 4.2.4，Galleria 1.4.2设置。确保在您的 galleria.classic.scss 样式表中使用 image-url（“classic-map.png”）助手。此当前设置没有问题。

- Dan L

---

gallerica.classic.css 重命名为 gallerica.classic.scss 或 gallerica.classic.css.scss？是打错了吗？ - V-SHY

@V-SHY：不，没有打错。如果您使用.scss扩展名，则无需使用.css.scss。我通常只在我的Rails样式表中使用.scss扩展名，因为.scss可以同时处理标准CSS和SASS。请注意，CoffeeScript资产不遵循此规则。如果您有一个.js.coffee文件，则它只能处理CoffeeScript代码，而不能处理原始JavaScript。 - Dan L

此外，我总是将 application.css 重命名为 application.scss 并通过 @import "sass_variables"; 语句手动控制我的样式表的顺序。这样就不会遇到 SASS 变量在使用之前未定义的问题。 - Dan L

感谢解决疑惑，顺便提一下，我发现有一个打错字，gallerica 应该是 galleria 对吧？ - V-SHY

@V-SHY：哎呀，你说得对！我以为你是在指扩展名，而不是文件名本身。我已经在答案中修正了这个错别字。 - Dan L

Answer 2

谢谢，这真是太棒了，正是我所需要的（真希望在经历了18个小时的折磨后能早点找到这个）！

我想再添加一些可能对其他人有用的信息：

1）我不得不改为使用galleria.css.scss.erb，这样它才能插值类加载器，像这样：background: url(<%= asset_path "/galleria/classic-loader.gif" %>) （不确定为什么，但asset_url对我没用）

2）相关的是，我还必须将classic-map和loader图像放在app / assets / images中

3）根据Galleria的说法，我移动的文件是min.js文件，而不是常规的.js

4）在视图的头部，我添加了：

<script src="<%= asset_path "/galleria-1.3.5.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.flickr.min.js" %>" ></script>
<script src="<%= asset_path "/galleria.classic.min.js" %>" ></script>

5) 在每个视图中加载Galleria的脚本中，我修改了它们的指令，如下所示：

Galleria.loadTheme("<%= asset_path "/galleria.classic.min.js" %>");

- james