视图与组件

这一课你将能做到

1. 用 ERB 模板渲染数据，理解 <%= %> 与 <% %> 的区别
2. 用布局 + yield + content_for 组织页面骨架，用 partial 消除重复片段
3. 说清楚 Rails 服务端渲染与 Next.js 客户端渲染的取舍，知道 Hotwire 补位交互

为什么要学

视图是用户唯一能看见的部分。Rails 的视图层哲学是「HTML 优先」：服务端把数据填进模板直接吐出完整 HTML，浏览器零 JS 也能用；需要交互的地方交给 Hotwire（Turbo + Stimulus）做渐进增强。这和本站的 Next.js 路线（浏览器下载 JS bundle → 客户端取数据渲染）是两种范式，各自有明确的适用边界——内容型、后台型产品服务端渲染交付更快，重交互应用才需要前端框架。

先建立图像

视图的套娃结构：

layouts/application.html.erb          ← 最外层：html/head/body 骨架
  └── yield                           ← 内容插槽
        └── articles/index.html.erb   ← 动作对应视图
              └── render "article"    ← partial 局部视图（每个文章卡片）
                    └── _article.html.erb

渲染顺序由内而外：partial → 动作视图 → 布局 → 完整 HTML 响应。

ERB 两种标签：

<% @articles.each do |a| %>   ← 只执行，不输出
  <%= a.title %>              ← 执行并输出（HTML 转义）
<% end %>

跟着做

步骤 1：第一个视图

app/views/articles/index.html.erb：

<h1>文章列表</h1>

<ul>
  <% @articles.each do |article| %>
    <li>
      <%= link_to article.title, article_path(article) %>
      <small><%= article.created_at.strftime("%Y-%m-%d") %></small>
    </li>
  <% end %>
</ul>

<%= link_to "写新文章", new_article_path %>

控制器里 @articles = Article.all，视图直接用实例变量。文件名规则：动作名.格式.模板引擎——index.html.erb 意为「HTML 格式、ERB 引擎」。

步骤 2：布局与 yield

app/views/layouts/application.html.erb：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title><%= content_for(:title) || "我的博客" %></title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  <%= javascript_importmap_tags %>
</head>
<body>
  <nav><%= link_to "首页", root_path %></nav>

  <% flash.each do |type, msg| %>
    <div class="flash <%= type %>"><%= msg %></div>
  <% end %>

  <main><%= yield %></main>

  <footer>© 2026</footer>
</body>
</html>

每个动作视图的内容会被塞进 yield 位置。子页面想定制标题：

<%# app/views/articles/show.html.erb %>
<% content_for :title, @article.title %>
<h1><%= @article.title %></h1>