简体   繁体   English

允许在多个 Rails 应用程序上自定义主题

[英]Allow custom themes on multiple Rails apps

I have a couple instances of the same Rails app and I want to allow a few custom theme options on each.我有几个相同 Rails 应用程序的实例,我想在每个实例上允许一些自定义主题选项。 For example, a different header color or column width.例如,不同的标题颜色或列宽。

I still want to keep the same code base, so I can't just change the CSS for each one and it doesn't seem like using environment variables would be a good idea.我仍然想保留相同的代码库,所以我不能只更改每个 CSS 的 CSS,而且使用环境变量似乎不是一个好主意。 I also want to keep the optimization benefits of the assets pipeline.我还想保留资产管道的优化优势。

What can I use that will allow for easy theme customization in each instance of the app?我可以使用什么来在应用程序的每个实例中轻松自定义主题?

You can create multiple manifest files in which you include whichever partial files you want.您可以创建多个清单文件,其中包含您想要的任何部分文件。 For example you can create a core.css file with the common styles and then have blue.css , green.css etc. files which you optionally include.例如,您可以创建一个具有通用样式的core.css文件,然后您可以选择包含blue.cssgreen.css等文件。 This is inspired by this answer , have a look at it for more info.这是受此答案的启发,请查看它以获取更多信息。

If by custom themes you mean customisable by users you can simply use cookies to store the name of the manifest file which should be included in the application.如果自定义主题是指由用户自定义,您可以简单地使用cookie来存储应包含在应用程序中的清单文件的名称。 However, if you do this don't forget that the user can change the cookie so beware of injections.但是,如果您这样做,请不要忘记用户可以更改 cookie,因此请注意注入。

You can create separate layouts for each theme.您可以为每个主题创建单独的布局。

Under app/views/layouts/theme_one_base.html.hamlapp/views/layouts/theme_one_base.html.haml

<html>
  <head>
    <%= stylesheet_link_tag "application" %>
  </head>
  <body id='theme_one'>
    <%= yield %>
  </body>
</html>

You can specify the layout to use in your application controller, and that could be an environment variable.您可以指定要在应用程序控制器中使用的布局,这可以是一个环境变量。

class ApplicationController < ActionController::Base
    layout 'theme_one'
end

If this is not enough and each theme requires it's own set of stylesheets you can split them up like so.如果这还不够,并且每个主题都需要它自己的一组样式表,您可以像这样将它们分开。

In app/assets/stylesheets/ , the directory would look likeapp/assets/stylesheets/ ,目录看起来像

theme_one.css.scss
theme_one/

And the manifest file theme_one.css.scss contains清单文件theme_one.css.scss包含

/**
*= require_self
*= require_tree ./theme_one
*/

And you would update the base_layout.html.haml你会更新base_layout.html.haml

<html>
  <head>
    <%= stylesheet_link_tag "theme_one" %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

Basically each base layout includes it's own set of independent stylesheets.基本上每个基本布局都包括它自己的一组独立的样式表。

Update 1 - adding info on overriding layouts更新 1 - 添加有关覆盖布局的信息

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM