<g:layoutBody /> 不呈现应用于 <body> 标签的样式答案

【问题标题】：<g:layoutBody /> does not render the styling applied to <body> tag<g:layoutBody /> 不呈现应用于 <body> 标签的样式
【发布时间】：2023-03-21 19:30:02
【问题描述】：

我使用 grails 默认布局模式创建了一个简单的布局。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title><g:layoutTitle default="my website" /></title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />

        <g:layoutHead />
            <r:layoutResources />

    </head>
    <body id="mainContainer">

        <g:render template="/templates/headerTemplate"></g:render>
        <g:render template="/templates/menuTemplate"></g:render>
        <g:layoutBody />
        <r:layoutResources />

    </body>
</html>

现在据我了解呈现正文内容。（如果我错了，请纠正我）。现在，我已将自定义样式应用于每个页面的

标记。但是那个样式并没有应用于我的渲染视图。例如。我有一个想应用于身体的图像。但这没有被应用。当我在 body 中插入一个 div 并将相同的图像应用到它时，它会被应用到它。

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="mainLayout"/>
    <title>Match List</title>
    <script type="text/javascript" src="${resource(dir:'js',file:'matchDetailsJS.js')}"></script>
</head>
<body class="myclass">    </body>
</html>

当我的样式应用于其他元素时，我的 css 文件被包含在内。

我错过了什么？我的 g:layout 有问题吗？我尝试在文档中查找，但到目前为止没有找到任何东西。如果我的问题不清楚，请告诉我。谢谢你！！

【问题讨论】：

标签： css html grails layout sitemesh

【解决方案1】：

我怀疑这是因为布局需要了解您希望为 body 标签提供的属性。 Grails documentation 有一个很好的例子，关于使用 page 属性来指定 body 标签的 onload 属性。

这是根据您的需要修改的示例。

布局

    <title><g:layoutTitle default="my website" /></title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon" />
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css" />

    <g:layoutHead />
        <r:layoutResources />

</head>
<body id="mainContainer" class="${pageProperty(name:'body.class')">

    <g:render template="/templates/headerTemplate"></g:render>
    <g:render template="/templates/menuTemplate"></g:render>
    <g:layoutBody />
    <r:layoutResources />

</body>

【讨论】：

没问题。很高兴能提供帮助。
我使用了${pageProperty(name:'body.class') 和${pageProperty(name:'body.onload')。但这增加了我的页面加载时间。为什么这样？我用过 jQuery 和 javascript。
我认为这是一个新问题，当您提出问题时，请确保您在页面和布局中发布您正在执行的操作。如果您在帖子中说明如何测量页面的加载时间，这也会很有帮助。