RefineryCMS高级技巧：自定义菜单标记实现Foundation框架导航-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00175/article/details/148552031

RefineryCMS高级技巧：自定义菜单标记实现Foundation框架导航

前言

在RefineryCMS项目中，默认的菜单系统可能无法直接满足现代前端框架（如Foundation或Bootstrap）的标记要求。本文将详细介绍如何通过自定义菜单呈现器（Menu Presenter）来实现与Zurb Foundation框架兼容的导航菜单。

理解RefineryCMS菜单系统

RefineryCMS的菜单系统基于"呈现器"（Presenter）模式设计，这种设计允许开发者在不修改核心代码的情况下，完全自定义菜单的HTML输出结构。默认情况下，系统使用简单的无序列表结构，但我们可以通过创建自定义呈现器来生成符合特定框架要求的标记。

实现步骤详解

1. 覆盖默认视图文件

首先需要覆盖系统的默认头部视图文件：

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

这个命令会在应用的视图目录中创建可编辑的副本，让我们可以自定义菜单的容器结构。

2. 创建Foundation风格的菜单容器

在覆盖后的视图文件中，我们可以设置符合Foundation框架要求的容器结构：

# app/views/refinery/shared/_header.html.erb
<section class="top-bar-section" id="menu">
  <%= foundation_menu(refinery_menu_pages, list_tag_css: 'left').to_html %>
  
  <ul class='right'>
    <li>
      <a href="/contact">Contact Us</a>
    </li>
  </ul>
</section>

这里我们创建了一个Foundation的top-bar-section容器，左侧是页面菜单，右侧可以添加额外的导航项。

3. 创建应用辅助方法

为了简化菜单调用，我们在应用辅助模块中创建一个包装方法：

# app/helpers/ApplicationHelper
module ApplicationHelper
  def foundation_menu(items, options = {})
    presenter = Refinery::Pages::FoundationMenuPresenter.new(items, self)
    %w(menu_tag dom_id css list_dropdown_css list_item_dropdown_css list_tag_css active_css selected_css).each do |k|
      presenter.send("#{k}=", options[k.to_sym]) if options.has_key?(k.to_sym)
    end
    presenter
  end
end

这个方法允许我们传递各种CSS类名选项，这些选项将被传递给自定义呈现器。

4. 实现Foundation菜单呈现器

核心的自定义呈现器需要继承自Refinery::Pages::MenuPresenter：

module Refinery
  module Pages
    class FoundationMenuPresenter < MenuPresenter
      # 可配置的属性
      config_accessor :list_dropdown_css, :list_item_dropdown_css, :list_tag_css

      # 默认配置
      self.menu_tag = nil
      self.dom_id = nil
      self.css = nil
      self.list_dropdown_css = 'dropdown'
      self.list_item_dropdown_css = 'has-dropdown'
      self.list_tag_css = nil
      self.active_css = 'active'
      self.selected_css = 'active'

      private

      # 渲染整个菜单
      def render_menu(items)
        if menu_tag
          content_tag(menu_tag, id: dom_id, class: css) do
            render_menu_items(items)
          end
        else
          render_menu_items(items)
        end
      end

      # 渲染菜单项集合
      def render_menu_items(menu_items)
        return if menu_items.blank?
        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

      # 检查是否是下拉菜单项
      def check_for_dropdown_item(menu_item)
        (menu_item != roots.first) && (menu_item_children(menu_item).count > 0)
      end

      # 确定菜单项的CSS类
      def menu_items_css(menu_items)
        css = []
        css << (roots == menu_items ? list_tag_css : list_dropdown_css)
        css.reject(&:blank?).presence
      end

      # 确定单个菜单项的CSS类
      def menu_item_css(menu_item, index)
        css = []
        css << active_css if descendant_item_selected?(menu_item)
        css << selected_css if selected_item?(menu_item)
        css << list_item_dropdown_css if check_for_dropdown_item(menu_item)
        css << first_css if index == 0
        css << last_css if index == menu_item.shown_siblings.length
        css.reject(&:blank?).presence
      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
          buffer << link_to(menu_item.title, context.refinery.url_for(menu_item.url))
          buffer << render_menu_items(menu_item_children(menu_item))
          buffer
        end
      end
    end
  end
end

关键实现细节解析

配置灵活性：通过config_accessor定义的属性可以在调用时动态配置，使呈现器更加灵活。
CSS类处理：menu_items_css和menu_item_css方法智能地处理各种状态下的CSS类，包括：
- 活动状态（active）
- 选中状态（selected）
- 下拉菜单标识（has-dropdown）
- 首项和末项的特殊类
递归渲染：render_menu_items和render_menu_item方法协同工作，递归地渲染整个菜单树。
安全缓冲：使用ActiveSupport::SafeBuffer确保HTML输出的安全性。