【问题标题】:RefineryCMS: apply bootstrap styles to navigation menuRefineryCMS:将引导样式应用于导航菜单
【发布时间】:2013-10-25 18:29:27
【问题描述】:

我已将 Refinery CMS 升级到最新版本 (2.1.0),其中有一种呈现导航菜单的新方法:

(部分_header.html.erb)

<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>

相同部分的旧版本:

<%= render(:partial => "/refinery/menu", :locals => {
         :dom_id => 'menu',
         :css => 'menu'
       }) %>

如何使用MenuPresenter 将引导样式添加到导航栏?

【问题讨论】:

  • 我怀疑您必须编辑 HTML 以添加所需的样式。您是否将 Bootstrap css 文件放入资产管道或安装了 bootstrap-sass gem?
  • 没错,我已经安装好了。在哪里可以找到导航栏的 HTML?
  • 在整个目录中搜索/refinery/_menu.html.erb(如果您正在使用,则使用haml 扩展名)。它应该在那里。
  • 不幸的是,最新版本 (2.1.0) 不再提供_menu.html.erb。我做了rake refinery:override view=refinery/*,但没有出现菜单文件。

标签: css ruby-on-rails twitter-bootstrap refinerycms


【解决方案1】:

可以做到,但解决方案并不漂亮,因为 Refinery 2.1 中的 Menu Presenter 不支持开箱即用的所有正确 CSS 选项。不过有了一点毅力,大致是这样的:

首先在这里新建一个空白文件:config/initializers/refinery/monkey_patch_menu_presenter.rb

在此补丁文件中,粘贴此更新版本的菜单演示器(2013 年 10 月发布)的内容:menu_presenter.rb

接下来,根据section 5 of the menu presenter guide 中的说明,在您的app/helpers/application_helper.rb 文件中,添加一个名为navigation_menu 的新方法:

def navigation_menu
  presenter = Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self)
  presenter.css = "navbar-inner"
  presenter.menu_tag = :div
  presenter.list_tag_css = "nav"
  presenter.selected_css = "active"
  presenter.first_css = ""
  presenter.last_css = ""
  presenter.max_depth = 0 # prevents dropdown menus, which don't render correctly
  presenter
end

最后,在您的app/views/refinery/_header.html.erb 文件中(如果不存在,请使用$ bundle exec rake refinery:override view=refinery/_header),替换以下调用:

<%= Refinery::Pages::MenuPresenter.new(refinery_menu_pages, self).to_html %>

与:

<div class="navbar">
  <%= navigation_menu.to_html %>
</div>

确保您已加载 Bootstrap CSS/JS 文件并将整个页面包装在 &lt;div class="container"&gt; 元素中。然后重新启动您的应用程序以使补丁生效,希望您会看到一个熟悉的引导导航栏。

祝你好运!

马丁。

【讨论】:

  • 您的解决方案看起来很有希望,我即将实施并测试它。谢谢你的详细描述。
  • 我已经测试了您的解决方案,它工作得非常好。我希望您的知识能够帮助任何使用 RefineryCMS v 2.1.0 的人。再次感谢您。
  • 您是否知道有关可用属性或如何找出它们的任何文档?在帮助函数navigation_menu中定义的那些。
  • 不幸的是,我没有找到这些属性的记录位置。但是,如果您跟踪代码,这并不太难。通常,属性要么指定要使用的 HTML 标记:例如
  • 或
    ,或应用于标签的 CSS 类。
  • 是的,这对 Refinery 2.1.0 来说有点小题大做;不幸的是,它不适用于其他版本的炼油厂。更好的解决方案是专门为 BootStrap 重写 menu_presenter。
  • 【解决方案2】:

    这里是上面 menu_presenter.rb 的一个版本,它也呈现子菜单 (这适用于 Bootstrap 3、RefineryCMS 2.1.1):

    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_tag_css,
                          :link_tag_css
          self.dom_id = 'menu'
          self.css = "collapse navbar-collapse"
          self.menu_tag = :div
          self.list_tag = :ul
          self.list_item_tag = :li
          self.selected_css = 'active'
          self.first_css = :first
          self.last_css = :last
          self.list_tag_css = "nav navbar-nav"
    
          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 => list_tag_css) 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_items_children(menu_items)
            if menu_items.present?
              content_tag(list_tag, :class => 'dropdown-menu') 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_link_dropdown(menu_item)
            link_to( menu_item.title, context.refinery.url_for(menu_item.url), class: "dropdown-toggle", data: {toggle:"dropdown", target: "#"})
          end
    
          def render_menu_item_link(menu_item)
            link_to(menu_item.title, context.refinery.url_for(menu_item.url), :class => link_tag_css)
          end
    
          def render_menu_item(menu_item, index)
            content_tag(list_item_tag, :class => menu_item_css(menu_item, index)) do
              buffer = ActiveSupport::SafeBuffer.new
              # Check for sub menu
              menu_item_children(menu_item).empty? ? buffer << render_menu_item_link(menu_item) : buffer << render_menu_item_link_dropdown(menu_item)
              buffer << render_menu_items_children(menu_item_children(menu_item))
              buffer
            end
          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_item_css(menu_item, index)
            css = []
    
            css << selected_css if selected_item_or_descendant_item_selected?(menu_item)
            css << "dropdown" unless menu_item_children(menu_item).empty?
            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
    

    【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签