RefineryCMS 进阶指南：使用 Menu Presenter 实现自定义底部菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01181/article/details/148552295

RefineryCMS 进阶指南：使用 Menu Presenter 实现自定义底部菜单

refinerycms refinery/refinerycms: Refinery CMS 是一个基于 Ruby on Rails 构建的内容管理系统，为非技术用户提供直观易用的后台管理界面，方便他们添加、编辑和管理网站内容。项目地址: https://gitcode.com/gh_mirrors/re/refinerycms

前言

在 RefineryCMS 项目中，页面导航菜单的管理是一个常见需求。系统默认提供了主菜单功能，但有时我们需要为网站添加额外的导航区域，比如底部菜单。本文将详细介绍如何在 RefineryCMS 中实现一个可管理的底部菜单系统。

需求分析

我们需要实现以下功能：

在网站底部版权信息上方添加一个导航菜单
管理员可以在页面编辑界面控制哪些页面出现在底部菜单中
菜单项的显示状态需要持久化存储

技术实现方案

1. 数据库迁移

首先需要扩展页面模型，添加一个字段来存储页面是否显示在底部菜单中的状态。

# 创建迁移文件
rails generate migration add_show_in_footer_to_refinery_pages

在生成的迁移文件中添加以下内容：

class AddShowInFooterToRefineryPages < ActiveRecord::Migration
  def change
    add_column :refinery_pages, :show_in_footer, :boolean, default: false
  end
end

执行迁移：

rake db:migrate

2. 扩展页面模型

使用 RefineryCMS 的装饰器模式来扩展页面模型，添加查询方法：

# app/decorators/models/refinery/page_decorator.rb
Refinery::Page.class_eval do
  def self.footer_menu_pages
    where(show_in_footer: true)
  end
end

这种方法保持了原始模型的整洁，同时添加了我们需要的功能。

3. 扩展管理控制器

为了允许管理员设置页面是否显示在底部菜单中，需要扩展页面管理控制器：

# app/decorators/controllers/refinery/admin/pages_controller_decorator.rb
Refinery::Admin::PagesController.prepend(
  Module.new do
    def permitted_page_params
      super << :show_in_footer
    end
  end
)

4. 扩展管理界面

添加底部菜单选项到页面编辑表单中：

rake refinery:override view=refinery/admin/pages/_form_extra_fields_for_more_options.html

在生成的视图中添加：

<div class='field'>
  <span class='label_with_help'>
    <%= f.label :show_in_footer, "Show in footer" %>
  </span>
  <%= f.check_box :show_in_footer %> Show this page in the footer menu
</div>

5. 创建菜单展示器

菜单展示器(MenuPresenter)是 RefineryCMS 中用于渲染菜单的强大工具。我们创建一个辅助方法来初始化和配置展示器：

# app/helpers/application_helper.rb
def footer_menu
  menu_items = Refinery::Menu.new(Refinery::Page.footer_menu_pages)

  Refinery::Pages::MenuPresenter.new(menu_items, self).tap do |presenter|
    presenter.dom_id = "footer_menu"
    presenter.css = "footer_menu"
    presenter.menu_tag = :div
  end
end

这里我们做了以下配置：

使用 div 标签代替默认的 nav 标签
设置自定义的 CSS 类和 ID
使用我们之前创建的查询方法来获取菜单项

6. 在视图中渲染菜单

最后，在底部视图中渲染我们的菜单：

rake refinery:override view=refinery/_footer.html

在生成的视图中添加：

<%= footer_menu.to_html %>

效果验证

完成以上步骤后：

编辑几个页面，勾选"Show in footer"选项
访问网站首页，查看底部区域
应该能看到勾选过的页面链接出现在底部菜单中

生成的 HTML 结构如下：

<div class="footer_menu" id="footer_menu">
  <ul>
    <!-- 菜单项列表 -->
  </ul>
</div>

高级定制建议

多级菜单：可以通过扩展 MenuPresenter 来支持多级嵌套菜单
样式定制：利用配置的 CSS 类为菜单添加自定义样式
缓存优化：考虑为菜单添加缓存，减少数据库查询
排序控制：可以添加排序字段，让管理员控制菜单项顺序

总结

通过本文的步骤，我们在 RefineryCMS 中成功实现了一个可管理的底部菜单系统。这种方法展示了 RefineryCMS 的扩展性，包括模型装饰、视图覆盖和菜单展示器的使用。这种模式可以应用于其他类似的定制需求，如侧边栏菜单、快速链接等。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考