Question

我创建了一个传统的导航栏。一切都很好，但现在我想自定义导航栏Color by District URL。

例如：

###blue
http://0.0.0.0:3000/districts/1

###red
http://0.0.0.0:3000/districts/2

###orange
http://0.0.0.0:3000/districts/3

etc.

我目前已经破解了一个解决方案，但是当我添加更多区域时效率并不高。我想以某种方式遍历每个区域并获得相关的css_color。

区域参数

:name, :css_color, :photo

CSS

.navbar1 {
  background-color: #4B8DC8;
}

.navbar2 {
  background-color: #406DA6;
}

.navbar3 {
  background-color: #640000;
}

.navbar4 {
  background-color: #1450A3;
}

.navbar5 {
  background-color: #CBAA7F;
}

_navigation.html.erb

###how can i do this more efficiently
<% if  params[:controller] == 'static_pages' || params[:controller] == 'searches' %>
  <nav class="navbar navbar-default navbar-fixed-top">
<% elsif params[:controller] == 'sessions' %>
  <nav class="navbar navbar-default navbar-fixed-top">
<% elsif params[:controller] == 'password_resets' %>
  <nav class="navbar navbar-default navbar-fixed-top">
<% elsif params[:controller] == 'resource_tags' %>
  <nav class="navbar navbar-default navbar-fixed-top">
<% elsif params[:controller] == 'favorites' %>
  <nav class="navbar navbar-default navbar-fixed-top">
<% elsif @districts %>
  <nav class="navbar navbar-default navbar-fixed-top">

###Beg of districts
<% elsif @district.id == 1 %>
  <nav class="navbar navbar1 navbar-default navbar-fixed-top">
<% elsif @district.id == 2 %>
  <nav class="navbar navbar2 navbar-default navbar-fixed-top">
<% elsif @district.id == 3 %>
  <nav class="navbar navbar3 navbar-default navbar-fixed-top">
<% elsif @district.id == 4 %>
  <nav class="navbar navbar4 navbar-default navbar-fixed-top">
<% elsif @district.id == 5 %>
  <nav class="navbar navbar5 navbar-default navbar-fixed-top">
<% end %>

Answer 1

首先 - 看起来你想要所有选项的常用导航栏内容。唯一的区别是，如果你有区，你会得到的差异。这意味着你不需要所有guff检查任何类型的控制器或会话。只是：

<% if @district.present? %>
   ... you'll do the district-specific stuff here
<% else %>
   <nav class="navbar navbar-default navbar-fixed-top">
<% end %>

正确？如果它始终存在，那么对于多个选项一遍又一遍地重复相同的代码是没有意义的。

现在你需要弄清楚如果你有一个区域要放什么...但你的id已经与你的css style_names一对一匹配

navbar1 for district id 1 navbar2 for district id 2 etc ...

所以你不需要比id更多的东西：

<% if @district.present? %>
   <nav class="navbar navbar<%= @district.id %> navbar-default navbar-fixed-top">
<% else %>
   <nav class="navbar navbar-default navbar-fixed-top">
<% end %>

但这里仍有重复。顶部的导航栏（在if子句中）与底部的导航栏（在else子句中）之间唯一不同的是额外的样式...所以你可以减少if / else到仅环绕这样的差异：

<nav class="navbar <%= "navbar#{@district.id}" if @district.present? %> navbar-default navbar-fixed-top">

按URL ID自定义导航栏颜色

1 个答案: