首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何推迟<head>渲染?

问如何推迟<head>渲染?
EN

Stack Overflow用户
提问于 2017-12-13 16:52:57
回答 1查看 146关注 0票数 3

我有这样的布局:

代码语言:javascript
复制
@@ layouts/v2.html.ep
<html lang="en">
  <head>
    %= content_for 'stylesheets'
  </head>
<body>
  %= include 'layouts/v2/header'
  <main class="main">
    %= include 'layouts/v2/menu'
    <div class="content">
    %= content
    </div>
  </main>
</body>
</html>


@@ layouts/v2/menu
% content_for stylesheets => begin
  %= stylesheet 'v2/css/menu.css'
% end
<aside class="menu">
  ...
</aside>

@@ layouts/v2/header
% content_for stylesheets => begin
  %= stylesheet 'v2/css/header.css'
% end
<header class="header">
  ...
</header>

在这里,当包含模板时,我会包括它们的样式表。请注意模板中的以下内容:

代码语言:javascript
复制
% content_for stylesheets => begin
  %= stylesheet 'v2/css/menu.css'
% end

但是这样做太晚了,因为<head>已经呈现出来了。

为了解决这个问题,我可以将%= content_for 'stylesheets'从<head>移到页面底部。但我要先装上样式表。

有没有办法将“样式表”块的内容的呈现推迟到整个页面呈现?

UPD

谢谢@amon关于那个Mojolicous layouts are rendered inside out的事。我理解这个问题,对于第一个layout中包含的模板,我手动地包含样式表:

代码语言:javascript
复制
@@ layouts/v2.html.ep
<html lang="en">
  <head>
    %= stylesheet 'v2/css/header.css'
    %= stylesheet 'v2/css/menu.css'
    %= content_for 'stylesheets'
  </head>
<body>
  %= include 'layouts/v2/header'
  <main class="main">
    %= include 'layouts/v2/menu'
    <div class="content">
    %= content
    </div>
  </main>
</body>
</html>

因此,在任何呈现/包含的模板(布局除外)中,下一步工作都很好:

代码语言:javascript
复制
@@ some/template
% content_for stylesheets => begin
  %= stylesheet 'some/template.css'
% end
template content
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-13 17:03:20

Mojolicous布局是在内部呈现的,您可以任意嵌套许多布局。

创建一个模板,其中只包含最外层的文档内容和其他HTML样板,其中包含<body>内容的占位符

代码语言:javascript
复制
<html lang="en">
  <head>
    %= content_for 'stylesheets'
  </head>
  <body>
    %= content
  </body>
</html>

然后,您可以使用该模板作为HTML页面主体的布局。也就是说,像这样使用layout助手:

代码语言:javascript
复制
% layout 'outermost_layout';
%= include 'layouts/v2/header'
<main class="main">
  %= include 'layouts/v2/menu'
  <div class="content">
  %= content
  </div>
</main>

在呈现模板之后,will将检查您是否指定了一个layout,然后使用该模板的输出作为外部布局的content。因此,因为最内部的布局是先呈现的,所以数据可以从模板通过存储区流到包装布局。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47798400

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档