Rails：如何根据视图模板引擎渲染不同布局？

1. 识别视图文件类型，区分.html.md与.html.erb #

首先自定义HighVoltage的控制器，通过模板查找上下文识别文件后缀，以此切换布局：

# app/controllers/pages_controller.rb
class PagesController < HighVoltage::PagesController
  private

  def layout_for_page
    # 获取当前待渲染模板的完整路径
    template_path = lookup_context.find_template(page_id, "pages", true).identifier
    if template_path.end_with?(".html.md")
      # 为Markdown文件返回博客专属布局
      "blog_layout"
    else
      # ERB文件沿用默认布局或指定支持文章布局
      super
    end
  end
end

2. 为Markdown文件添加Frontmatter解析功能 #

修改自定义的Markdown模板处理器，分离并解析Frontmatter内容：

# app/lib/markdown_template_handler.rb
require "redcarpet"
require "yaml"

class MarkdownTemplateHandler
  def call(template)
    content = template.source
    frontmatter_code = ""
    # 识别并提取Frontmatter
    if content.start_with?("---")
      frontmatter_end = content.index("---", 3)
      frontmatter = YAML.load(content[3..frontmatter_end-1])
      content = content[frontmatter_end+3..-1]
      # 将Frontmatter转为实例变量，供布局/视图调用
      frontmatter_code = "@frontmatter = #{frontmatter.inspect}"
    end
    # 渲染Markdown内容并拼接Frontmatter变量代码
    "#{frontmatter_code}\nRedcarpet::Markdown.new(Redcarpet::Render::HTML).render(#{content.inspect}).html_safe"
  end
end

ActionView::Template.register_template_handler :md, MarkdownTemplateHandler

在博客专属布局中可直接调用Frontmatter参数：

<!-- app/views/layouts/blog_layout.html.erb -->
<header>
  <h1><%= @frontmatter[:title] %></h1>
  <p class="post-date"><%= @frontmatter[:date] %></p>
</header>
<main><%= yield %></main>

3. 路由配置，指定自定义控制器 #

修改路由设置，让HighVoltage使用你自定义的控制器：

# config/routes.rb
HighVoltage.configure do |config|
  config.controller = "pages"
  # 其他原有配置可保留，比如content_path等
end

4. 测试验证 #

• 创建博客Markdown文件（如app/views/pages/blog/first_post.html.md）：

---
title: "我的第一篇Markdown博客"
date: "2024-05-20"
---
这是用Markdown编写的博客内容，会自动渲染为HTML并套用`blog_layout`布局。

• 保留支持文章的ERB文件（如app/views/pages/support/faq.html.erb），其会沿用原有布局及JS交互逻辑。

内容的提问来源于stack exchange，提问作者Luca Spiller