<div class="field">
<%= f.label :name %><br>
<%= f.text_field :name %>
</div>
<div class="field">
<%= f.label :color1 %><br>
<%= f.text_field :color1 %>
</div>
<div class="field">
<%= f.label :color2 %><br>
<%= f.text_field :color2 %>
</div>
私ThemesControllerファイルがどのように見えるかです::
class ThemesController < ApplicationController
after_action :compile_theme, only: [:create, :update]
THEME_PATH = 'app/assets/'
PATH = THEME_PATH + '/themes'
def new
@theme = Theme.new
end
def edit
@theme = Theme.find(params[:id])
end
def create
@theme = Theme.new(theme_params)
if @theme.save
# Create a scss theme file
write_theme_file
redirect_to @theme, notice: 'Theme was successfully created.'
else
render :new
end
end
def update
@theme = Theme.find(params[:id])
if @theme.update(theme_params)
# Create/Update a scss theme file, you can check for file exists
write_theme_file
redirect_to @theme, notice: 'Theme was successfully updated.'
else
render :edit
end
end
private
def write_theme_file
file = PATH + name + '.scss'
body = "$color1: #{@theme.color1};\n$color2: #{@theme.color2};"
File.write(file, body)
end
def compile_theme
file = PATH + name + '.scss'
theme_body = ''
if File.exists?(file) && File.exists?(THEME_PATH + 'theme.scss')
file = File.open(file)
theme_body = file.read
file.close
file = File.open(THEME_PATH + 'theme.scss')
theme_body = theme_body + file.read
file.close
else
colors = ''
end
env = if Rails.application.assets.is_a?(Sprockets::Index)
Rails.application.assets.instance_variable_get('@environment')
else
Rails.application.assets
end
Dir.mkdir(Rails.root + 'public/assets/themes') unless Dir.exists?(Rails.root + 'public/assets/themes')
asset_file = File.join(Rails.root, 'public', asset_path(name))
File.delete(asset_file) if File.exists?(asset_file)
body = ::Sass::Engine.new(theme_body, {syntax: :scss, cache: false, read_cache: false, style: :compressed}).render
File.write(File.join(Rails.root, 'public', asset_path(name)), body)
end
def asset_path(name)
digest = Digest::MD5.hexdigest(name)
"assets/themes/#{name}-#{digest}.css"
end
def name
return @theme.name.downcase
end
def theme_params
params.require(:theme).permit(:name, :color1, :color2)
end
end
コントローラ方法の説明:
新しいここ
は、私の見解フォームがどのように見えるかですテーマが作成または更新され、テーマが保存され、テーマ名と定義済みのcでapp/assets/themes内に新しい.scssファイルが作成されますオウル値。
作成/更新アクションが完了した後、CSSアセットファイルのコンパイルと作成が行われます。 compile_themeメソッドはtheme.scss(下の例)ファイル(基本テーマカラー変数を持つapp/assets/stylesheets /フォルダ内に既に作成済み)を探し、$ color1と$ color2変数を現在のカラー値で置き換えますテーマファイル。結果のCSSデータは、theme_body変数に保持されています。
body = ::Sass::Engine.new(theme_body, {syntax: :scss, cache: false, read_cache: false, style: :compressed}).render
File.write(File.join(Rails.root, 'public', asset_path(name)), body)
これら二つの最後の行はTHEME_NAMEとダイジェストとtheme_body CSSのコンテンツとファイル名を結果とパブリック/資産/テーマ内に新しいファイルを作成します。
これで、すべてのページでファイルを取得する必要があります。これを行うには、application_controller.rbファイルで次のように定義します。
before_filter :set_theme
private
def set_theme
@theme = Theme.first # or change theme according to params
end
最後に、レイアウトファイルでテーマファイルを取得する必要があります。だから、レイアウト/ application.html.erbファイルでこれを追加する:すべてです
body {
background-color: $color1;
}
#header-wrapper, footer {
background-color: $color2;
}
:
は <% if @theme.present? %>
<% digest = Digest::MD5.hexdigest(@theme) %>
<%= stylesheet_link_tag asset_url("assets/themes/#{@theme}-#{digest}.css") %>
<% end %>
ただ、参考のために、ここに私のtheme.scssファイルがどのように見えるかです。お役に立てれば。問題がある場合はお知らせください。
テーマフォルダの外に資産フォルダを置いてみてください。 :http:// localhost:3000/vendor/assets/stylesheets/application.css' – Amit
私のcssとjsをデフォルトの 'vendor/assets'フォルダの中に入れた場合にのみ動作します。ベンダーの他のフォルダから資産を配信できますか? –