Grails：如何使用资源插件将 CSS“链接”标签添加到头部？答案

【问题标题】：Grails: How do I use the resources plugin to add a CSS "link" tag into the head?Grails：如何使用资源插件将 CSS“链接”标签添加到头部？
【发布时间】：2012-11-21 08:17:05
【问题描述】：

我有一个使用大量包含文件的页面。它动态选择要使用的正确包含文件。我希望（在包含文件中）能够向 grails 指定我希望它在运行中将特定的 <link rel="stylesheet"/> 标记包含在头部中。

像这样的东西输出..

<html>
  <head>
    <title>My Life :: My Pets</title>
    <link rel="stylesheet" href="style.css" type="text/css"> <!-- Normal Site Style -->
    <link rel="stylesheet" href="include-my-pets" type="text/css"> <!-- Dynamic Style for Include -->
  </head>
  <body>
    <h1>My Pets</h1>
    <!-- This is the include file start -->
       In the GSP here I said something like:
       <r:require disposition="head">
         <link rel="stylesheet" href="include-my-pets" type="text/css"> <!-- Dynamic Style -->
       </r:require>
       to get the CSS link tag pushed into the head.
    <!-- This is the include file end -->
  </body>
</html>

使用<r:script/> 标签对我来说效果很好。我可以在任何包含文件中指定任何位置：

<r:script disposition="head">
  alert ('hello')
</r:script>

我的布局会自动将警报 hello 卡在页面头部的 <script/> 标记内。它也会从身体中移除。

【问题讨论】：

标签： css grails layout plugins resources

【解决方案1】：

资源插件不支持此功能。如果您查看 ResourcesPlugin 中的 r.script 实现：

def script = { attrs, body ->
    def dispos = attrs.remove('disposition') ?: 'defer'
    storePageFragment('script', dispos, body())
}

为“r.stylesheet”标签做类似的事情似乎很容易，但 storePageFragment 和其他辅助方法是私有的，所以你不能在不复制很多东西的情况下从外部做。

我建议你fork the resources plugin，按照脚本标签的行实现样式表标签并发送拉取请求。

【讨论】：

【解决方案2】：

资源插件的优势在于，您可以创建资源的逻辑组（css 和 js）并在需要的地方使用它们。别忘了在head 部分的末尾和body 部分的末尾调用<r:layoutResources />。否则，资源将无法正确生成。

【讨论】：

嗨，汤姆，感谢您的回答。视图都正确呈现布局。这是视图使用包含，并且从包含我试图告诉sitemesh在头部包含一个css资源。我如何从包含中告诉 grails 在头部放置一个标签？我可以为 JavaScript 代码做到这一点。 CSS必须有一种方法。我想象过像

【解决方案3】：

这不是“grails”的做事方式，但这是我实现它的方式。我这样做的部分原因是因为我觉得在 ApplicationResources.groovy 中定义资源对于不熟悉资源插件的非 grails 开发人员来说可能并不明显。我更喜欢在包含文件中具有显式资源链接的想法，这是显而易见的。

我现在的做法就是这样。

Kitty 和 Doggy 需要自定义 CSS 和 JavaScript（它们都是宠物的一部分），但其他链接（例如 MyLife）不需要它们。

在 URLMappings.groovy 中

"/mypets/kitty" {
    controller="pets",
    subpage="kitty.gsp"
    action="index"
    css="kitty.css",
    js="kitty.js",
}
"/mypets/doggy" {
    controller="pets",
    subpage="doggy.gsp"
    action="index"
    css="doggy.css",
    js="doggy.js",
}
"/mylife" {
    controller="life",
    action="index"
}

layout.gsp

...contains all the usual site-wide resources...

在 pets.gsp 中

<html>
  <head>
    <title>${title}</title>
    <link rel="stylesheet" type="text/css" href="${resource(dir: 'resources/modules/css', file: css)}"/>
    <script src="${resource(dir: 'resources/modules/js', file: js)}"></script>
  </head>
  <body>
    Select your pet: <select.../>
    <!-- It's kitty.gsp and doggy.gsp (below) that need access to their own kitty and doggy js and css files -->
    <g:include view="$page"/>
  </body>
</html>

【讨论】：