基于控制器切换布局列

发布于 2024-12-27 08:06:52 字数 1160 浏览 1 评论 0原文

所以基本上我的应用程序看起来像这样

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<div id="content">
    <div id="content_left">
        // Some Stuff
    </div>

    <div id="content_right">
        <%= yield %>
    </div>
</div>
</body>
</html>

，现在我想根据控制器在两列布局和单列布局之间切换（最好：也基于我正在使用的方法）。

在正文和内容之间以及头部之间，有太多的东西可以简单地创建第二个布局并将其添加为我的控制器中的布局调用，而无需太多代码重复。

我想做的是这样的：

所有人都应该使用这个

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
 // much stuff
 <%= yield %>
</body>
</html>

，现在我可以在两个布局之间切换，fe

single_col

<div id="content">
    <%= yield %>
</div>

或two_column

<div id="content">
    <div id="content_left">
        // Some Stuff
    </div>

    <div id="content_right">
        <%= yield %>
    </div>
</div>

，然后在最后一个产量中应该有与我的控制器和方法相关的视图。

有没有一种简单的方法可以实现这一目标？

感谢所有提示。

如果有不清楚的地方，请发表评论。

原文

so basically my application looks like this

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<div id="content">
    <div id="content_left">
        // Some Stuff
    </div>

    <div id="content_right">
        <%= yield %>
    </div>
</div>
</body>
</html>

now i want to switch between a two column layout and a single column layout based on the controller (at best: also based on the method i'm using).

between the body and the content and also in there head there is way too much stuff for simply creating a second layout and adding this as a layoutcall in my controller without too much code duplication.

what i would love to do is something like this:

all should use this

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
 // much stuff
 <%= yield %>
</body>
</html>

and now i can switch between two layouts, f.e

single_col

<div id="content">
    <%= yield %>
</div>

or two_column

<div id="content">
    <div id="content_left">
        // Some Stuff
    </div>

    <div id="content_right">
        <%= yield %>
    </div>
</div>

and then in the last yield there should be the view that is related to my controller and method.

is there an easy way to achieve this?

thanks for all hints.

PLEASE leave a comment if something is unclear.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

饮湿 2025-01-03 08:06:52

将布局的不同部分放入部分！然后根据其中的内容渲染部分内容
params[:controller] 和 params[:action]。例如：

<% if params[:controller] == "controller_name" %>
     <%= render 'partial_name1' %>
<% else %>
     <%= render 'partial_name2' %>
<% end %>

params[:controller] 和 params[:action] 始终可用！这是一个向您展示其工作原理的示例。当然，视图中也不应该有任何逻辑！

Put the different parts of the layouts in partials! Then you render the partials based on what is in
params[:controller] and params[:action]. For example:

<% if params[:controller] == "controller_name" %>
     <%= render 'partial_name1' %>
<% else %>
     <%= render 'partial_name2' %>
<% end %>

The params[:controller] and params[:action] are always available! This is an example to show you how it works. Of cause there shjouldnt be any logic in the view aswell!

回复收藏 0 原文

-柠檬树下少年和吉他 2025-01-03 08:06:52

您可以使用两种布局来渲染页眉和页脚部分，其中包含两者的共同内容。

或者，您使用 <%= Yield :sidebar %>然后注入一些内容

<% content_for(:sidebar) do %>
  some stuff here
<% end %>

在这里查看有关这些内容的 Rails 指南部分。

You could use two layouts that would both render header and footer partials containing what's common to both.

OR, you use a <%= yield :sidebar %> and then inject something

<% content_for(:sidebar) do %>
  some stuff here
<% end %>

Take a look at Rails guide section about those here.

回复收藏 0 原文

再可℃爱ぅ一点好了 2025-01-03 08:06:52

我认为您正在寻找一种使用内部有两个子布局的共享布局的方法，在这里：

将其添加到您的 application_helper.rb

  # Allows easy using nested layouts
  def inside_layout(layout = 'application', &block)
    render :inline => capture_haml(&block), :layout => "layouts/#{layout}"
  end

布局/application.html.haml

!!!
%html
  %head
    -# your header content
  %body
    .content
      = yield

布局/single_column.html.haml

= inside_layout do
  .middle
    = yield

布局/two_column.html.haml

= inside_layout do
  .left
    -# your shared left content
  .right
    = yield

列布局现在可以像普通布局一样使用，因此您只需在控制器中设置它们

layout "single_column"

注意：所有标记都在 HAML 是我强烈推荐的宝石。

希望有帮助:)

I think you looking for a way to use a shared layout with two sub layouts inside, here you go:

add this to your application_helper.rb

  # Allows easy using nested layouts
  def inside_layout(layout = 'application', &block)
    render :inline => capture_haml(&block), :layout => "layouts/#{layout}"
  end

layouts/application.html.haml

!!!
%html
  %head
    -# your header content
  %body
    .content
      = yield

layouts/single_column.html.haml

= inside_layout do
  .middle
    = yield

layouts/two_column.html.haml

= inside_layout do
  .left
    -# your shared left content
  .right
    = yield

the column layouts can now be used like normal layouts, so you can just set them in your controller

layout "single_column"

Note: All markup is in HAML a gem which I can highly suggest.

hope it helps :)

回复收藏 0 原文

段念尘 2025-01-03 08:06:52

您可以在 Rails 项目中使用多种布局。您可以有一个 2 列和一个单列。

要指定使用的布局，请在控制器的方法中提供它。

def index
  respond_to do |format|
    if current_user
      format.html {render 'pages/index', :layout => 'home'}# index.html.erb
    else
      format.html {render 'pages/landingpage', :layout => 'landingpage'}# index.html.erb
    end
  end
end

例如上面的控制器，将根据 current_user 的值渲染视图 index.html.erb 和 landingpage.html.erb。您也可以仅向 render 提供布局参数，例如 render :layout =>; 'home'

您还可以查看嵌套布局但我从来没有和这些一起工作过。

You can use multiple layouts in a rails project. You could have a 2 column and a single column one.

To specify the layout used, provide it in the method in the controller.

def index
  respond_to do |format|
    if current_user
      format.html {render 'pages/index', :layout => 'home'}# index.html.erb
    else
      format.html {render 'pages/landingpage', :layout => 'landingpage'}# index.html.erb
    end
  end
end

For example the controller above, will render the the views index.html.erb and landingpage.html.erb based on the value of current_user. You can also only provide the layout parameter to render like render :layout => 'home'

You could also have a look at nested layouts but I have never worked with those.

回复收藏 0 原文

你的笑 2025-01-03 08:06:52

您可以使用 sub_layouts

Class IndexController < ApplicationController

  def index

    def sub_layout
      "left"
    end

   end

 end

将子布局添加到 /app/view/shared/layouts/sub/_mysublayout.haml 或

/app/views/layouts/application.haml/.erb 中的 .erb * 你的主布局文件*

= render :partial= >"layouts/sub/#{controller.sub_layout}"

通过使用救援 nil 检查 nils，您可以使此子模板加载右列或左列的布局，在我的应用程序中使用它会带来很大的好处。它可以节省大量时间，并为您提供额外的灵活性来在操作基础上设置布局。

You could use sub_layouts

Class IndexController < ApplicationController

  def index

    def sub_layout
      "left"
    end

   end

 end

Add sub layouts to /app/view/shared/layouts/sub/_mysublayout.haml or .erb

in /app/views/layouts/application.haml/.erb * your main layout file*

= render :partial=>"layouts/sub/#{controller.sub_layout}"

With some checking for nils with rescue nil you can make this sub template load the layout for say a right or a left col, use this with great benefit in my apps. Its a big time saver and gives you the extra flexibility to set the layout on an action base.

回复收藏 0 原文

滥情稳全场 2025-01-03 08:06:52

我假设在您的单列布局中，您没有 content_left 的信息。
在两列布局中，您可以获得 content_left 和 content_right 的信息。
有很多方法，但我推荐完全由 CSS 控制的方法。

CSS 类将如下所示

#content_left{
    float: left;
    background-color: red;
}
#content_right{
        background-color: green;
}
#content {
    margin: 0 auto;
    width: 80%;
}

现在请注意...如果 content_left div 为空，则 content_right div 将扩展到全宽。您已准备好使用单列布局。如果 content_left 中有数据，它将相应地显示。

Im assuming that in your single column layout you have no information for your content_left.
And in two column layout you have information for both content_left and content_right.
There are lots of ways but im recommending something completely controlled by CSS.

CSS classes will be like following

#content_left{
    float: left;
    background-color: red;
}
#content_right{
        background-color: green;
}
#content {
    margin: 0 auto;
    width: 80%;
}

Now notice... if content_left div is empty then the content_right div will expand to full width. And you are ready with single column layout. And if you have data in content_left it will be showing accordingly.

回复收藏 0 原文

┾廆蒐ゝ 2025-01-03 08:06:52

我正在使用辅助方法来设置动态侧边栏，您可以根据您的要求使用。

<div id="main_content" class="<%= main_content_css_class %>">
   <%= yield %>
</div>
<div id="sidebar" class="<%= sidebar_css_class %>">
  <%= yield :sidebar %>
</div>

在 Helper 中

def sidebar_enabled?
 current_page = "#{controller.controller_name}.#{controller.action_name}"
 current_controller = controller.controller_name
 pages = %w(home)
 return pages.include?(current_page) || pages.include?(current_controller)

end

def main_content_css_class
  sidebar_enabled? ? "grid_12" : "grid_16"
end

# Returns the CSS class for the 'sidebar' div depending on sidebar requirement
def sidebar_css_class
   sidebar_enabled? ? "grid_4" : "dont-show"
end

使用你的代码也更加干净和可维护。

I am using helper method to set Dynamically sidebar,you can use as per your requirement.

<div id="main_content" class="<%= main_content_css_class %>">
   <%= yield %>
</div>
<div id="sidebar" class="<%= sidebar_css_class %>">
  <%= yield :sidebar %>
</div>

In Helper

def sidebar_enabled?
 current_page = "#{controller.controller_name}.#{controller.action_name}"
 current_controller = controller.controller_name
 pages = %w(home)
 return pages.include?(current_page) || pages.include?(current_controller)

end

def main_content_css_class
  sidebar_enabled? ? "grid_12" : "grid_16"
end

# Returns the CSS class for the 'sidebar' div depending on sidebar requirement
def sidebar_css_class
   sidebar_enabled? ? "grid_4" : "dont-show"
end

Using your code is also cleaner and maintainable.

回复收藏 0 原文

云胡 2025-01-03 08:06:52

我通常在控制器和操作名称的主体元素上放置类，因为它在很多方面都很方便。下面是一个基于该策略的示例：

...
<body class="<%= controller_name %> <%= action_name %>">
<div id="content">
    <div id="sidebar">
        // Some Stuff
    </div>

    <div id="main">
        <%= yield %>
    </div>
</div>
</body>
...

然后就是获取正确的 CSS 的问题。如果您有一个“帖子”控制器，侧边栏通常是可见的，并且您想隐藏它：

body.posts { #sidebar { display: none; } };

如果您希望它只有时显示，您可以反转逻辑，使其通常隐藏，然后用更具体的范围覆盖显示它。或者，您可以为所有“索引”操作设置一列，为其他所有操作设置两列，等等。

这样做的缺点（而且并非无关紧要）是您的视图与控制器的名称耦合。即这种策略违反了“告诉，不要问”的原则。我仍然认为这是值得的，因为我还没有被涉及此代码的令人讨厌的重构所困扰。通常，更改 ex 中控制器名称的几个实例很简单。重命名文件时为“posts.css.scss”；没什么大不了的。只是需要权衡的东西。

另请注意，我选择了更具描述性的类名称。正如您的示例所示，“左”和“右”是短暂的。 “侧边栏”和“主要”可能不是您所拥有的，但如果可能的话，我会尝试描述它们的内容。

I usually put classes on the body element for the controller and action name, as it comes in handy in many ways. Here's an example based on that strategy:

...
<body class="<%= controller_name %> <%= action_name %>">
<div id="content">
    <div id="sidebar">
        // Some Stuff
    </div>

    <div id="main">
        <%= yield %>
    </div>
</div>
</body>
...

then it's a matter of getting the right CSS. If you had a 'posts' controller, the sidebar is usually visible, and you want to hide it:

body.posts { #sidebar { display: none; } };

If you want it to only show up sometimes, you could invert the logic so it's usually hidden, then override with a more specific scope to show it. Or, you could have one column on all 'index' actions, two columns for everything else, etc.

The downside to this, and it's not insignificant, is that your views are coupled to the name of the controller. I.e. this strategy violates the "tell, don't ask" principle. I still think it's worth it, since I haven't been bit by a nasty refactoring involving this code yet. Usually it's a simple matter of changing a couple instances of the controller name in ex. "posts.css.scss" when renaming the file; no big deal. Just something to weigh.

Also, note that I picked more descriptive class names. "Left" and "right" are ephemeral, as your example demonstrates. "Sidebar" and "main" might not be what you have, but I'd make an attempt to describe what goes in them if possible.

回复收藏 0 原文

~没有更多了~