RefineryCMS:将Bootstrap样式应用于导航菜单

5

我已经将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将Bootstrap样式添加到导航栏中?


我猜你需要编辑HTML来添加所需的样式。你是否将Bootstrap CSS文件放入了资产管道或安装了“bootstrap-sass”宝石? - Alex Lynham
没错,我已经安装了它们。那么导航栏的HTML在哪里可以找到? - R Milushev
在整个目录中搜索 /refinery/_menu.html.erb(如果你使用的是haml扩展名,则使用它)。应该会在那里找到它。 - Alex Lynham
不幸的是,最新版本(2.1.0)不再提供_menu.html.erb。我尝试了rake refinery:override view=refinery/*,但菜单文件没有出现。 - R Milushev
2个回答

12
可以做到,但解决方案并不美观,因为Refinery 2.1中的菜单Presenter默认不支持所有正确的CSS选项。但只要有一点毅力,大致上就是这样做的:
首先,在此处创建一个新的空文件:config/initializers/refinery/monkey_patch_menu_presenter.rb 在此补丁文件中,粘贴此菜单Presenter的更新版本内容(发布于2013年10月):menu_presenter.rb 接下来,根据菜单Presenter指南第5节的说明,在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文件,并且将整个页面包装在<div class="container">元素中。然后重新启动应用程序以使补丁生效,希望您能看到熟悉的Bootstrap导航栏。
祝好运!
马蒂恩。

你的解决方案看起来很有前途,我即将实施并测试它。感谢您提供详细的描述。 - R Milushev
1
我已经测试了你的解决方案,它完全正常工作。我希望你的知识能够帮助任何使用 RefineryCMS v 2.1.0 的人。再次感谢你。 - R Milushev
你知道有关可用属性的任何文档或如何找出它们吗?这些属性在辅助函数 navigation_menu 中定义。 - givanse
monkey_patch_menu_presenter.rb在我的开发环境中运行良好。然而,在生产环境中,补丁实际上并没有被应用(或者可能稍后被覆盖)。在config/environments/production.rb中设置config.cache_classes = false“解决”了这个问题。 真正的解决方法是使用class_eval,如Refinery::Pages::MenuPresenter.class_eval do ... end。灵感来自https://dev59.com/i2Qn5IYBdhLWcg3wETvj。我不明白出了什么问题。 - Matthias Berth
1
是的,这对于Refinery 2.1.0来说有点像黑客技巧;不幸的是,它不能与其他版本的Refinery一起使用。更好的解决方案是专门为BootStrap重新编写menu_presenter。 - Martyn W
显示剩余2条评论

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

我认为你放置的那段代码不是针对RefineryCMS 2.1.1的,对吧?我想它还没有发布(https://github.com/refinery/refinerycms/blob/85c3d89de5ae726d8789a19ec7a291c69a18a61e/pages/app/presenters/refinery/pages/menu_presenter.rb),那应该是2.1.2。 - frbl

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接