5

我有一个应用程序，允许用户为他们的页面选择一个主题。有几个不同的主题供他们选择。

每个页面的 HTML 结构与 div 上的相同类名完全相同。CSS 因主题而异。当用户选择一个主题时，我将主题 id 存储在数据库中，并在访问页面时对其进行查询，并在以下位置加载适当的 CSS 文件application_layout.html.erb：

<%= yield(:theme_style) %>

在 上users_page.html.erb，我使用以下命令获取适当的文件：

<%= provide(:theme_style, "theme_styles/#{@user.style.style_filename_file_name}") %>

因为页面结构没有改变，所以不要将 CSS 文件一起编译到一个大的 CSS 文件中，否则最后一个主题将是唯一可用的主题，因为它将覆盖所有以前的样式，这一点很重要。如何让 Rails 处理主题文件？

在production.rb，我有，config.assets.precompile += ['theme_styles/basic.css', 'theme_styles/two-column.css']但这似乎并没有起到作用，因为它告诉我它没有预编译。

我似乎无法在任何地方找到足够的信息来让我朝着正确的方向前进，我查看了博客、SO 问题和 Rails 文档。

4

1 回答 1

6

我知道这是一个旧的，但我想我会回答我所做的，以防它帮助其他人。我在我的应用程序中有类似的需求，并且在没有找到很多结果之后，并且在由自定义选择器控制的一个 css 文件中使用它们时遇到了 IE 最大数量的选择器错误，我最终走上了让每个主题不同的路线通过创建如下所示的文件夹结构来创建 CSS 文件：

整体文件夹结构：

  • /应用程序/资产/样式表/
  • /应用程序/资产/样式表/全部/
  • /app/assets/stylesheets/theme-1/
  • /app/assets/stylesheets/theme-2/
  • 等等

在 app/assets/styleshseets 我放了 application.css.scss （或者如果你不使用 sass 就只放 css ）这个文件有一个 require self 和一些我在所有网站上使用的 mixin ，但就是这样

 *= require_self

展望未来，每个主题都有一个 css 文件夹，所有主题都有一个文件夹，每个都有一个清单（清单放在主 /stylesheets 文件夹中）。正确设置最终需要做一些工作，但是一旦配置就可以像魅力一样工作，不再为具有不同主题的人提供重叠或无关的 css，也解决了 IE 最大选择器问题。

更多细节

所有共享css的所有文件夹

/应用程序/资产/样式表/全部/

所以把你在所有主题上使用的任何css文件放在那里。我把我的项目的引导程序放在那里，但你可以把任何共享的 CSS 放在那里。那个清单是……

 *= require_self
 *= require_tree ./all

然后是您的主题，每个主题都有自己的文件夹：

/app/assets/stylesheets/theme-1/

它很明显：

   *= require_self
   *= require_tree ./theme-1

因此，您的第二个主题将是相同的（文件夹名称和清单中的 2 而不是 1）。

使这些工作在资产管道中

在您的 production.rb 文件中添加以下内容

  config.assets.precompile += %w( application-all.css application-theme-1.css application-theme-2.css, etc.)

我确实将我的主题存储到一个客户端站点并动态提供服务，这也允许我在运行时进行更改。在我的一个控制器（或应用程序，如果这是一个站点范围的设置）：

class MyController < ApplicationController
  layout :serve_layout
...
  def serve_layout
    #do what you need to call your layout / theme...    
  end

希望这可以帮助其他困在这条船上的人。

于 2013-06-25T22:30:13.607 回答