按 URL ID 自定义导航栏颜色

Question

我创建了一个传统的导航栏。一切正常，但现在我想按地区 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.

我目前已经找到了一个解决方案，但是当我添加更多的地区时，它的效率并不高。我想以某种方式遍历每个 District 并获得相关的 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

首先 - 看起来您想要所有选项的通用导航栏内容。唯一的区别是如果你有地区，你会得到不同。所以这意味着你不需要所有的废话检查任何一种控制器或会话。只是：

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

对吧？如果它总是存在，那么为多个选项一遍又一遍地重复相同的代码是没有意义的。

现在你需要弄清楚如果你有一个区的话应该放什么...但是你的id已经和你的cssstyle_names[=13一对一匹配了=]

navbar1 用于地区 id 1 navbar2 用于地区 id 2 等等...

所以你只需要那个 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 自定义导航栏颜色

Custom Navigation Bar Color by URL ID

css

ruby

ruby-on-rails

sass

navbar