Css Rails应用程序中的主题
我想制作一个Rails应用程序,让用户输入数据,然后允许他们更改页面的主题。这样,他们的数据可以根据他们选择的主题进行不同的样式设置。我该怎么做呢Css Rails应用程序中的主题,css,ruby-on-rails,templates,styles,Css,Ruby On Rails,Templates,Styles,我想制作一个Rails应用程序,让用户输入数据,然后允许他们更改页面的主题。这样,他们的数据可以根据他们选择的主题进行不同的样式设置。我该怎么做呢 更改样式表 具有不同类/元素的两个独立视图 动态更改类/ID/选择器 ? 感谢为站点设置主题最简单的方法就是链接到不同的样式表。您可以使用以下方法动态执行此操作: # in app/views/layouts/application.html.erb <%= stylesheet_link_tag :application %> <
感谢为站点设置主题最简单的方法就是链接到不同的样式表。您可以使用以下方法动态执行此操作:
# in app/views/layouts/application.html.erb
<%= stylesheet_link_tag :application %>
<%= stylesheet_link_tag #{current_theme} %>
# in app/helpers/application_helper
def current_theme
# You'll have to implement the logic for a user choosing a theme
# and how to record that in the model.
# Also, come up with a better name for your default theme, like 'twentyeleven' ;)
current_user.theme || 'default'
end
#在app/views/layouts/application.html.erb中
#应用程序内/帮助程序/应用程序/帮助程序
定义当前主题
#您必须为选择主题的用户实现逻辑
#以及如何在模型中记录这些信息。
#另外,为默认主题提供更好的名称,如“twentyeleven”;)
当前_user.theme | |“默认”
结束
然后,您可以有几个主题的清单。例如,您的资产目录可以如下所示:
- 应用程序/资产/样式表
- application.css
- 按钮.css
- 主题1/
- index.css
- 按钮.css
- 主题2/
- index.css
- 按钮.css
<% if current_theme == 'theme1' %>
<li>...
<% elsif current_theme == 'theme2' %>
<b>...
<% end %>
。。。
...
然后是时候实施一个更强大的主题框架了:
- 按主题命名html模板(例如app/views/themes/theme1/users/index.html.erb),并呈现主题版本而不是默认版本
- 按模板命名部分(例如app/views/themes/theme1/users/_form.html.erb),并添加一个助手方法,如
render\u themesed\u partial
- 类似于上述方法,但是当主题变得非常大时,您应该考虑将它们作为Rails引擎 放入他们自己的宝石中。
注意:这是静态主题的全部内容。对于动态主题(例如,管理员可以登录并编辑样式表或html),您必须将主题信息存储在数据库中。根据您的体系结构,您可以提供一组静态主题,然后提供另一个从数据库动态获取样式数据的主题。在这一点上,您正在开发一个CMS,但是,它超出了这个答案的范围:)如果我们为每个主题创建不同的样式表,并且在进行小的更改时,那么我们需要在所有样式表中进行相同的更改。这真是头痛。另一种方法是使用SASS概念(mixin) 添加你的文件
gem 'sass-rails'
然后
bundle install
现在,您需要将css样式放在一个SCSS文件中。
基本样式。scss
$font_color: #565656;
$font-size: 13px;
$success-color: #088A08;
$error-color: #B40404;
@mixin basic_styles($dark_color,$light_color,$bullet_image)
{
.footer
{
background-color: rgba($dark_color,0.9);
color: $light_color;
text-align: center;
position: fixed;
bottom:0;
left:0;
width: 100%;
height: 15px;
border-top: 1px solid lighten($dark_color, 9%);
padding-left: 10px;
padding-right: 10px;
font-size: $font_size - 2;
}
h3,hr,a,input
{
color: $dark_color;
}
h3
{
margin-top: 2px;
margin-bottom: 2px;
}
hr {
border-color: lighten($dark_color, 30%) -moz-use-text-color #FFFFFF;
border-left: 0 none;
border-right: 0 none;
border-style: solid none;
border-width: 1px 0;
}
.btn
{
background-color: $dark_color;
border-color: darken($dark_color, 15%);
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
line-height: 18px;
padding: 3px 10px 3px 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
vertical-align: middle;
}
.btn:hover
{
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
-webkit-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
}
.success
{
color: $success-color;
}
.error
{
color: $error-color;
}
}
@import "basic_styles";
$dark_color: #08c;
$light_color: #FFFFFF;
$bullet_image: 'bullet_blue.png';
@include basic_styles($dark_color,$light_color,$bullet_image);
然后,您可以创建任意数量的主题。例如Theme\u Blue.scss
$font_color: #565656;
$font-size: 13px;
$success-color: #088A08;
$error-color: #B40404;
@mixin basic_styles($dark_color,$light_color,$bullet_image)
{
.footer
{
background-color: rgba($dark_color,0.9);
color: $light_color;
text-align: center;
position: fixed;
bottom:0;
left:0;
width: 100%;
height: 15px;
border-top: 1px solid lighten($dark_color, 9%);
padding-left: 10px;
padding-right: 10px;
font-size: $font_size - 2;
}
h3,hr,a,input
{
color: $dark_color;
}
h3
{
margin-top: 2px;
margin-bottom: 2px;
}
hr {
border-color: lighten($dark_color, 30%) -moz-use-text-color #FFFFFF;
border-left: 0 none;
border-right: 0 none;
border-style: solid none;
border-width: 1px 0;
}
.btn
{
background-color: $dark_color;
border-color: darken($dark_color, 15%);
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
line-height: 18px;
padding: 3px 10px 3px 10px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
vertical-align: middle;
}
.btn:hover
{
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
-webkit-box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
box-shadow: 0px 0px 2px 1px lighten($dark_color, 10%);
}
.success
{
color: $success-color;
}
.error
{
color: $error-color;
}
}
@import "basic_styles";
$dark_color: #08c;
$light_color: #FFFFFF;
$bullet_image: 'bullet_blue.png';
@include basic_styles($dark_color,$light_color,$bullet_image);
现在在您的html中
<%= stylesheet_link_tag "Theme_Blue" %>
将使用basic_styles.scss中指定的蓝色css类
您可以添加任意数量的主题文件,如Theme\u Blue.scss。
换成
<%= stylesheet_link_tag current_user.theme %>
通过这种方式,您只需修改基本样式.scss即可进行任何修改。我设法从Chamnap的答案中提取精华(由于某种原因,该答案无效-可能是Rails版本?)
记住,在具有主题名称的子目录中有JS和图像。它们在服务器上可能是分开的,但在浏览器和缓存中,
/images/logo.png
对这两个主题看起来是一样的。因此,您必须使用/images/theme1/logo.png
和/images/theme2/logo.png
我是rails的新手,所以我不确定从何处或如何开始。在网上找不到有关此的任何信息。wordpress的人是如何很好地切换主题的?有没有一种方法可以在变量和混合之间切换以生成两个不同的application.css?示例:application-dark.css和application-light.css。