9

誰でも、refineryCMS に Rails Bootstrap Navbar を実装しましたか?

ドロップダウン メニューをレンダリングする方法を理解するのに苦労しています。

これを達成する正しい方法はどれですか?

_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 スニペット

<%= 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 %>
4

7 に答える 7

8

同じ問題で数時間直面しました。もう少しきれいなコード(または製油所の標準に近いもの)を使用してソリューションを用意してください。まず、ベースのRefinery menu_presenterをオーバーライドする方が良いと思います。少し似たクエストhttp://refinerycms.com/guides/menu-presenterを見てくださいそしてこれも:http://refinerycms.com/guides/extending-controllers-with-decorators

そう。その記事に基づいて、これを行いましょう

app/decorators/models/refinery/page_decorator.rb:

Refinery::Page.class_eval do
  def self.menu_pages
    where :show_in_menu => true
  end
end

アプリ/ヘルパー/application_helper.rb

module ApplicationHelper
  def menu_header
    menu_items = Refinery::Menu.new(Refinery::Page.menu_pages)

    presenter = Refinery::Pages::MenuPresenter.new(menu_items, self)
    presenter.first_css = nil
    presenter.last_css = nil

    presenter
  end
end

ターミナルランで:

cd /path/to/app/
rake refinery:override presenter=refinery/pages/menu_presenter

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 = :div
      self.css = ["nav-collapse", "collapse", "navbar-responsive-collapse"]
      self.menu_tag = :nav
      self.list_tag = :ul
      self.list_first_css = :nav
      self.carret = '<b class="caret"></b>'
      self.list_dropdown_css = "dropdown-menu"
      self.link_dropdown_options = {class: "toggle-dropdown", 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

ほぼ完了しました。次のように、メニューのコンテナー内のメニューにmenu_header.to_htmlを追加します。

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#"><%=Refinery::Core::site_name %></a>
          <%= menu_header.to_html %>
        </div>
      </div>
    </div>

PS:RefineryCMS 2.1.0

于 2013-08-23T06:11:28.453 に答える
7

Bootstrap 3 を使用したRefinery 2.1.0

上記の解決策はどれもうまくいきませんでした。だから私はバレンタインコノフの答えから適応しなければなりませんでした。以下に、私のすべてのファイルを見つけることができます。助けが必要な場合は、いつでもコメントを残してください。どうぞ!

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 メソッドも忘れて構いません。このようにして、次のものが得られます。

アプリ/ヘルパー/application_helper.rb

module ApplicationHelper
end

3) では、実際の作業に取り掛かりましょう

を。デフォルトのヘッダーを次のようにオーバーライドします。

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

そのコードを次のように変更します。

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. ターミナルに移動して実行しますrake refinery:override presenter=refinery/pages/menu_presentermenu_presenter.rbファイルが生成されます。これを次のように変更します。

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. サーバーを再起動して結果を確認します。すでにいくつかのページを作成している場合、ナビゲーション バーは次のようになります。

ここに画像の説明を入力

于 2014-04-14T20:56:00.310 に答える
4

これを試してください _menu_branch.html.erb

<% if ( (children = menu_branch.children unless hide_children).present? &&
        (!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>

<%
  if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
    css = "class='#{classes.join(' ')} dropdown'".html_safe
  end

-%>
<li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
<%= link_to("#{menu_branch.title} <b class='caret'></b>".html_safe, refinery.url_for(menu_branch.url), :class=>"dropdown-toggle", 'data-toggle'=>'dropdown') -%>
    <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>
<% else -%>
<%
  if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
    css = "class='#{classes.join(' ')}'".html_safe
  end

-%>
<li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
<%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
</li>
<% end -%>

_menu.html.erb

<%
  # Collect the root items.
  # ::Refinery::Menu is smart enough to remember all of the items in the original collection.
  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 id="main-menu" class="nav-collapse">
  <nav id='<%= dom_id %>' class='<%= css %>'>
    <ul id="main-menu-left" 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>
<% end -%>

および _header.html.erb

<div class="container">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="container">
          <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
                </a>
    <%= link_to Refinery::Core.site_name, refinery.root_path, :class => "brand" %>

    <%= render(:partial => "/refinery/menu", :locals => {
                 :dom_id => 'menu',
                 :css => 'menu'
               }) %>
        </div>
      </div>
    </div>  
</div>
于 2013-02-18T10:59:03.867 に答える
3

user1852788によって概説されたアプローチは私のために働きました。ドロップダウン付きのメニューを使用している場合は、application.jsマニフェストファイルにブートストラップjsをロードすることを忘れないでください。

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

次に、ドロップダウン関数を呼び出します(layout.js.coffeeというファイルがあります)。

$('.dropdown-toggle').dropdown()
于 2013-03-04T18:18:45.973 に答える
1

このGistは、最新のRefineryとBootstrap https://gist.github.com/npflood/2d3f5fc44518ef231195でうまく機能しました

于 2015-05-03T18:04:04.047 に答える
0

この問題を解決しようとする宝石があります。

https://github.com/ghoppe/refinerycms-bootstrap

しかし、私は個人的にそれについて問題を抱えてきました。

于 2013-04-30T03:59:47.250 に答える
0

製油所でこれを行うためのはるかに簡単な方法を見つけましたcms2-0-stable

私の解決策は次のとおりです。

最初の _menu.html.erb 変数をブートストラップ クラスで更新し、たとえばラップcssに追加した必要な html を追加します。divul

<%
  # Collect the root items.
  # ::Refinery::Menu is smart enough to remember all of the items in the original collection.
  if (roots = local_assigns[:roots] || (collection ||= refinery_menu_pages).roots).present?
    dom_id ||= 'menu'
    css = [(css || 'pull-right')].flatten.join(' ')
    hide_children = Refinery::Core.menu_hide_children if hide_children.nil?
-%>
<nav id='<%= dom_id %>' class='<%= css %>'>
  <div class="collapse navbar-collapse">
    <ul class="nav nav-pills navbar-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>
  </div>
</nav>
<% end -%>

2 番目の _menu_branch.html.erb 更新クラスとブートストラップ クラス

    <%
  if !!local_assigns[:apply_css] and (classes = menu_branch_css(local_assigns)).any?
    css = "class='#{classes.join(' ')}'".html_safe
  end
-%>
<% if ( (children = menu_branch.children unless hide_children).present? &&
        (!local_assigns[:menu_levels] || menu_branch.ancestors.length < local_assigns[:menu_levels]) ) -%>
  <li class="dropdown">
    <a href="<%= refinery.url_for(menu_branch.url) %>" class="dropdown-toggle" data-toggle="dropdown"><%= menu_branch.title %><b class="caret"></b></a>
    <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>
<% else -%>
  <li<%= ['', css].compact.join(' ').gsub(/\ *$/, '').html_safe %>>
  <%= link_to(menu_branch.title, refinery.url_for(menu_branch.url)) -%>
<% end -%>
  </li>

これで、メニューが正常に表示されるはずです。有効にするには、次のコードを変更してファイルActiveを更新するだけです。/config/initializers/refinery/core.rb

選択を変更active

    # CSS class selectors for menu helper
  config.menu_css = {:selected=>"active", :first=>"first", :last=>"last"}
于 2013-12-01T23:06:43.147 に答える