Rails Bootstrap 导航栏和精炼CMS [英] Rails Bootstrap Navbar and refineryCMS

查看:53
本文介绍了Rails Bootstrap 导航栏和精炼CMS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有人在精炼CMS中实现了Rails Bootstrap Navbar吗?

我很难弄清楚如何呈现下拉菜单.

哪种方式应该是实现这一目标的正确方法?

_menu.html.erb

<%if (roots = local_assigns[:roots] || (collection ||=精炼厂_menu_pages).roots).present?dom_id ||=' '菜单'css = [(css || 'menu'), 'clearfix'].flatten.join(' ')hide_children = Refinery::Core.menu_hide_children 如果 hide_children.nil?-%><div class="navbar"><div class="navbar-inner"><div class="容器"><nav id='<%= dom_id %>'class='<%= css %>导航'><ul class="nav"><%=渲染:部分=>'/refinery/menu_branch', :collection =>根,:locals =>{:hide_children =>隐藏孩子,:sibling_count =>(roots.length - 1),:menu_levels =>local_assigns[:menu_levels],:apply_css =>true #如果您不关心 class='first' class='last' 或 class='selected' 将 apply_css 设置为 false 以提高速度.} -%></nav>

<%结束-%>

_menu_branch.html.erb

<%如果 !!local_assigns[:apply_css] 和 (classes = custom_menu_branch_css(local_assigns)).any?css = "class='#{classes.join(' ')}'".html_safe结尾-%>
  • <% 如果 menu_branch.children.present?&&menu_branch.ancestors.length <1%><%= link_to(menu_branch.title,refinery.url_for(menu_branch.url), class: "dropdown-togle", data: { toggle: "dropdown" }) -%><%其他%><%=link_to(menu_branch.title,refinery.url_for(menu_branch.url))-%><%结束%><% if ( (children = menu_branch.children until hide_children).present? &&(!local_assigns[:menu_levels] || menu_branch.ancestors.length <ul class="下拉菜单"><%=渲染:部分=>'/refinery/menu_branch', :collection =>孩子们,:locals =>{:apply_css =>local_assigns[:apply_css],:hide_children =>!!hide_children,:menu_levels =>local_assigns[:menu_levels]} -%>
  • <%结束-%>

    nav_bar 片段

    <%= nav_bar :fixed =>:top, :brand =>时尚 Clicheizr 2.0",:响应 =>真的做%><%= menu_group do %><%= menu_item "Home", root_path %><%= menu_divider %><%= drop_down "Products" do %><%= menu_item "你买不起的东西",precious_products_path %><%= menu_item "无论如何都不适合你的东西", harem_pants_path %><%= menu_item "你根本买不起的东西", hipster_products_path %><% 如果 current_user.lives_in_hackney?%><%= menu_item "自行车", fixed_wheel_bikes_path %><%结束%><%结束%><%= menu_item "关于我们", about_us_path %><%= menu_item "联系人", contact_path %><%结束%><%= menu_group :pull =>: 正确做 %><% if current_user %><%= menu_item "注销", log_out_path %><%其他%><%= form_for @user, :url =>session_path(:user), html =>{:class=>"navbar-form pull-right"} 做 |f|-%><p><%= f.text_field :email %></p><p><%= f.password_field :password%></p><p><%= f.submit登录"%></p><%结束-%><%结束%><%结束%><%结束%>

    解决方案

    Refinery 2.1.0 with Bootstrap 3

    以上解决方案都不适合我.所以我不得不适应瓦伦丁科诺夫的回答.您可以在下面找到我的所有文件.如果您需要任何帮助,您可以随时给我留言.来了!

    1) 检查您的 RefineryCMS 和 Bootstrap 版本

    Gemfile

    gem 'bootstrap-sass', '~>3.1.1'gem 'refinerycms', '~>2.1.0'

    2) 节省几行代码

    一个.您实际上无需创建 app/decorators/models/refinery/page_decorator.rb 文件.

    B.您也可以忘记 menu_header 方法.这样,您将拥有:

    app/helpers/application_helper.rb

    module ApplicationHelper结尾

    3) 现在让我们开始真正的工作

    一个.使用以下内容覆盖默认标题:

    $ rake 炼油厂:覆盖视图=炼油厂/_header.html

    并将其代码更改为:

    app/views/refinery/_header.html.erb

    <!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>

    </nav>

    B.现在转到终端并运行 rake精炼厂:override presenter=refinery/pages/menu_presenter.它将生成一个 menu_presenter.rb 文件.改成这样:

    app/presenters/refinery/pages/menu_presenter.rb

    需要'active_support/core_ext/string'需要'active_support/configurable'需要'action_view/helpers/tag_helper'需要'action_view/helpers/url_helper'模块炼油厂模块页面类 MenuPresenter包括 ActionView::Helpers::TagHelper包括 ActionView::Helpers::UrlHelper包括 ActiveSupport::Configurableconfig_accessor :roots, :menu_tag, :list_tag, :list_item_tag, :css, :dom_id,:max_depth, :selected_css, :first_css, :last_css, :list_first_css,:list_dropdown_css, :list_item_dropdown_css,:list_item__css, :link_dropdown_options, :carret# self.dom_id = nil# self.css = "拉左"self.menu_tag = :sectionself.list_tag = :ulself.list_first_css = ["nav", "navbar-nav", "navbar-right"]self.carret = '<b class="caret"></b>'self.list_dropdown_css = "下拉菜单"self.link_dropdown_options = {class: "dropdown-toggle", data: {:toggle=>"dropdown"}}self.list_item_tag = :liself.list_item_dropdown_css = :dropdownself.list_item__css = nilself.selected_css = :activeself.first_css = :firstself.last_css = :last定义根config.roots.presence ||集合.roots结尾attr_accessor :context, :collection委托 :output_buffer, :output_buffer=, :to =>:语境def 初始化(集合,上下文)@collection = 集合@context = 上下文结尾def to_htmlrender_menu(roots) 如果roots.present?结尾私人的def render_menu(items)content_tag(menu_tag, :id => dom_id, :class => css) 做render_menu_items(items)结尾结尾def render_menu_items(menu_items)如果 menu_items.present?content_tag(list_tag, :class => menu_items_css(menu_items)) 做menu_items.each_with_index.inject(ActiveSupport::SafeBuffer.new) do |buffer, (item, index)|缓冲< menu_item_css(menu_item, index)) 做@cont = context.refinery.url_for(menu_item.url)缓冲区 = ActiveSupport::SafeBuffer.new如果 check_for_dropdown_item(menu_item)缓冲<

    c.重新启动服务器并查看结果.如果您已经创建了一些页面,您的导航栏应该类似于下面的:

    Does anyone have implemented the Rails Bootstrap Navbar in refineryCMS?

    I'm having a hard time trying to figure out how to render the dropdown menu.

    which should be the right way of accomplish this?

    _menu.html.erb

    <%    
      if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present?
        dom_id ||= 'menu'
      css = [(css || 'menu'), 'clearfix'].flatten.join(' ')
        hide_children = Refinery::Core.menu_hide_children if hide_children.nil?
    -%>
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
    
          <nav id='<%= dom_id %>' class='<%= css %> nav'>
            <ul class="nav">
    
    
              <%= render :partial => '/refinery/menu_branch', :collection => roots,
                         :locals => {
                           :hide_children => hide_children,
                           :sibling_count => (roots.length - 1),
                           :menu_levels => local_assigns[:menu_levels],
                           :apply_css => true #if you don't care about class='first' class='last' or class='selected' set apply_css to false for speed.
                         } -%>
    
            </ul>
            </nav>
        </div>
        </div>
    </div>
    <% end -%>
    

    _menu_branch.html.erb

    <%
      if !!local_assigns[:apply_css] and (classes = custom_menu_branch_css(local_assigns)).any?
        css = "class='#{classes.join(' ')}'".html_safe
      end
    
    -%>
    <li class="dropdown">
    <% if menu_branch.children.present? &&  menu_branch.ancestors.length < 1 %>
    <%= link_to(menu_branch.title, refinery.url_for(menu_branch.url), class: "dropdown-togle", data: { toggle: "dropdown" }) -%>
    <% else %>
    <%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
    <% end %>
      <% if ( (children = menu_branch.children unless hide_children).present? &&
              (!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>
    
    
          <ul class="dropdown-menu">
          <%= render :partial => '/refinery/menu_branch', :collection => children,
                     :locals => {
                       :apply_css => local_assigns[:apply_css],
                       :hide_children => !!hide_children,
                       :menu_levels => local_assigns[:menu_levels]
                      } -%>
    
        </ul>
    </li>
    <% end -%>
    

    nav_bar snippet

    <%= nav_bar :fixed => :top, :brand => "Fashionable Clicheizr 2.0", :responsive => true do %>
        <%= menu_group do %>
            <%= menu_item "Home", root_path %>
            <%= menu_divider %>
            <%= drop_down "Products" do %>
                <%= menu_item "Things you can't afford", expensive_products_path %>
                <%= menu_item "Things that won't suit you anyway", harem_pants_path %>
                <%= menu_item "Things you're not even cool enough to buy anyway", hipster_products_path %>
                <% if current_user.lives_in_hackney? %>
                    <%= menu_item "Bikes", fixed_wheel_bikes_path %>
                <% end %>
            <% end %>
            <%= menu_item "About Us", about_us_path %>
            <%= menu_item "Contact", contact_path %>
        <% end %>
        <%= menu_group :pull => :right do %>
            <% if current_user %>
                <%= menu_item "Log Out", log_out_path %>
            <% else %>
                <%= form_for @user, :url => session_path(:user), html => {:class=> "navbar-form pull-right"} do |f| -%>
                  <p><%= f.text_field :email %></p>
                  <p><%= f.password_field :password %></p>
                  <p><%= f.submit "Sign in" %></p>
                <% end -%>
            <% end %>
        <% end %>
    <% end %>
    

    解决方案

    Refinery 2.1.0 with Bootstrap 3

    None of the solutions above worked for me. So I had to adapt from Valentine Konov's answer. Below you can find all of my files. You can always leave me a comment if you need any help. Here we go!

    1) Check your RefineryCMS and Bootstrap versions

    Gemfile

    gem 'bootstrap-sass', '~> 3.1.1'
    gem 'refinerycms', '~> 2.1.0'
    

    2) Save a few lines of code

    a. You actually have no need to create an app/decorators/models/refinery/page_decorator.rb file.

    b. You can forget the menu_header method as well. This way, you'll have:

    app/helpers/application_helper.rb

    module ApplicationHelper
    end
    

    3) Now let's get to the real work

    a. Override your default header with:

    $ rake refinery:override view=refinery/_header.html
    

    And change its code to:

    app/views/refinery/_header.html.erb

    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
    
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><%=Refinery::Core::site_name %></a>
            </div>
    
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>
            </div>
        </div>
    </nav>
    

    b. Now go to terminal and run rake refinery:override presenter=refinery/pages/menu_presenter. It will generate a menu_presenter.rb file. Change it to this:

    app/presenters/refinery/pages/menu_presenter.rb

    require 'active_support/core_ext/string'
    require 'active_support/configurable'
    require 'action_view/helpers/tag_helper'
    require 'action_view/helpers/url_helper'
    
    module Refinery
        module Pages
            class MenuPresenter
                include ActionView::Helpers::TagHelper
                include ActionView::Helpers::UrlHelper
                include ActiveSupport::Configurable
    
                config_accessor :roots, :menu_tag, :list_tag, :list_item_tag, :css, :dom_id,
                                                :max_depth, :selected_css, :first_css, :last_css, :list_first_css,
                                                :list_dropdown_css, :list_item_dropdown_css,
                                                :list_item__css, :link_dropdown_options, :carret
    
                # self.dom_id = nil
                # self.css = "pull-left"
                self.menu_tag = :section
                self.list_tag = :ul
                self.list_first_css = ["nav", "navbar-nav", "navbar-right"]
                self.carret = '<b class="caret"></b>'
                self.list_dropdown_css = "dropdown-menu"
                self.link_dropdown_options = {class: "dropdown-toggle", data: {:toggle=>"dropdown"}}
                self.list_item_tag = :li
                self.list_item_dropdown_css = :dropdown
                self.list_item__css = nil
                self.selected_css = :active
                self.first_css = :first
                self.last_css = :last
    
                def roots
                    config.roots.presence || collection.roots
                end
    
                attr_accessor :context, :collection
                delegate :output_buffer, :output_buffer=, :to => :context
    
                def initialize(collection, context)
                    @collection = collection
                    @context = context
                end
    
                def to_html
                    render_menu(roots) if roots.present?
                end
    
                private
                def render_menu(items)
                    content_tag(menu_tag, :id => dom_id, :class => css) do
                        render_menu_items(items)
                    end
                end
    
                def render_menu_items(menu_items)
                    if menu_items.present?
                        content_tag(list_tag, :class => menu_items_css(menu_items)) do
                            menu_items.each_with_index.inject(ActiveSupport::SafeBuffer.new) do |buffer, (item, index)|
                                buffer << render_menu_item(item, index)
                            end
                        end
                    end
                end
    
                def render_menu_item(menu_item, index)
                    content_tag(list_item_tag, :class => menu_item_css(menu_item, index)) do
                        @cont = context.refinery.url_for(menu_item.url)
                        buffer = ActiveSupport::SafeBuffer.new
                            if check_for_dropdown_item(menu_item)
                                buffer << link_to((menu_item.title+carret).html_safe, "#", link_dropdown_options)
                            else
                                buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url))
                            end
                        buffer << render_menu_items(menu_item_children(menu_item))
                        buffer
                    end
                end
    
                def check_for_dropdown_item(menu_item)
                    (menu_item!=roots.first)&&(menu_item_children(menu_item).count > 0)
                end
    
                # Determines whether any item underneath the supplied item is the current item according to rails.
                # Just calls selected_item? for each descendant of the supplied item
                # unless it first quickly determines that there are no descendants.
                def descendant_item_selected?(item)
                    item.has_children? && item.descendants.any?(&method(:selected_item?))
                end
    
                def selected_item_or_descendant_item_selected?(item)
                    selected_item?(item) || descendant_item_selected?(item)
                end
    
                # Determine whether the supplied item is the currently open item according to Refinery.
                def selected_item?(item)
                    path = context.request.path
                    path = path.force_encoding('utf-8') if path.respond_to?(:force_encoding)
    
                    # Ensure we match the path without the locale, if present.
                    if %r{^/#{::I18n.locale}/} === path
                        path = path.split(%r{^/#{::I18n.locale}}).last.presence || "/"
                    end
    
                    # First try to match against a "menu match" value, if available.
                    return true if item.try(:menu_match).present? && path =~ Regexp.new(item.menu_match)
    
                    # Find the first url that is a string.
                    url = [item.url]
                    url << ['', item.url[:path]].compact.flatten.join('/') if item.url.respond_to?(:keys)
                    url = url.last.match(%r{^/#{::I18n.locale.to_s}(/.*)}) ? $1 : url.detect{|u| u.is_a?(String)}
    
                    # Now use all possible vectors to try to find a valid match
                    [path, URI.decode(path)].include?(url) || path == "/#{item.original_id}"
                end
    
                def menu_items_css(menu_items)
                    css = []
    
                    css << list_first_css if (roots == menu_items)
                    css << list_dropdown_css if (roots != menu_items)
    
                    css.reject(&:blank?).presence
    
                end
    
                def menu_item_css(menu_item, index)
                    css = []
    
                    css << list_item_dropdown_css if (check_for_dropdown_item(menu_item))
                    css << selected_css if selected_item_or_descendant_item_selected?(menu_item)
                    css << first_css if index == 0
                    css << last_css if index == menu_item.shown_siblings.length
    
                    css.reject(&:blank?).presence
                end
    
                def menu_item_children(menu_item)
                    within_max_depth?(menu_item) ? menu_item.children : []
                end
    
                def within_max_depth?(menu_item)
                    !max_depth || menu_item.depth < max_depth
                end
    
            end
        end
    end
    

    c. Restart your server and see the results. If you already have some pages created, your navbar should look similar to the one below:

    这篇关于Rails Bootstrap 导航栏和精炼CMS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

    查看全文
    相关文章
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆