文章/答案/技术大牛

发布

社区首页 >问答首页 >如何向Grails2.4.x布局/模板中添加自定义CSS/JS？

问如何向Grails2.4.x布局/模板中添加自定义CSS/JS？
EN

Stack Overflow用户

提问于 2015-10-22 14:52:07

回答 1查看 1.2K关注 0票数 2

这里是grails2.4.5，在这里，我相信(如果我错了) asset-pipeline插件是管理CSS/JS资源的默认/理想方法。

我有一些定制的CSS/JS文件，我希望这些文件包含在我的GSP页面的很大一部分中，并想知道如何添加它们：

使用asset-pipeline插件；但是.
以这样的方式，我可以(以某种方式)从grails-app/views/layouts/special.gsp引用它们，然后在每个想要的special.gsp页面中引用该special.gsp布局。

因此，所需的功能是：

grails-app/views/layouts/special.gsp:
-------------------------------------
<!DOCTYPE html>
<html>
    <head>
        <title><g:layoutTitle default="My app!"/></title>
        <asset:stylesheet src="my-custom.css"/>
        <g:layoutHead/>
    </head>
    <body>
        <g:layoutBody/>
        <asset:javascript src="my-custom.js"/>
    </body>
</html>

然后，在我想要使用这个布局的任何GSP页面中，我只需在<header>标记中添加一个<header>，就像平常一样。

asset-pipeline 如何使用和布局相互协调？在哪里放置my-custom.css和my-custom.js？这里有什么特别的说明吗？

javascript

css

grails

asset-pipeline

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-10-22 17:36:38

如果您离开您的special.gsp是-是：

您可以将my-custom.css放在grails-app\assets\stylesheets文件夹中
您可以将my-custom.js放在grails-app\assets\javascripts文件夹中

根据您的IDE，assets文件夹可能位于顶层，并且它位于grails-app中的事实可能是抽象的。例如，使用GGTS中的“project”视图，我的项目直接下面有一个assets文件夹。

使用资产管道，还可以使用以下语法将这些文件包含在“父”文件中：

//= my-custom.js

或

/*
*= require my-custom.css
*/

这个‘父’文件将需要包括在布局中，就像你已经做的一样。

附加信息：

我在下面的评论中提到了require_self和require_tree，我将进一步详细介绍它们的使用。

require_self

myLayout.gsp

<asset:javascript src="myParent.js"/>

myParent.js

//= myCustom.js
//= require_self
console.log("This code runs because of the require_self and after myCustom.js");

myCustom.js

console.log("My require_self is optional because I'm not using the asset-pipeline.");

require_self用于包含存在于特定文件中的js/css；对于使用资产管道导入其他js/css文件的文件来说，它是必需的。它是可选的，当文件是严格的js/css，已经导入。这就是您可以使用asset-pipeline导入尚未修改的文件(例如jquery.js)的原因，否则需要将require_self放在所有文件中。

require_tree

目录结构

grails-app/assets/
   |
   +--javascripts/
   |   |
   |   +--js-parent.js
   |   |
   |   +--myCustomJs
   |      |
   |      +--script1.js
   |      |
   |      +--script1.js
   |
   +--stylesheets/
       |
       +--css-parent.css
       |
       +--myCustomCss
          |
          +--sheet1.css
          |
          +--sheet2.css
          |
          +--sheet3.css

myLayout.gsp

<asset:javascript src="js-parent.js"/>
<asset:stylesheet src="css-parent.css"/>

js-parent.js

//= require_tree myCustomJs

csss-parent.css

/*
*= require_tree myCustomCss
*/

现在，您可以使用所有的3个css文件和2个js文件，只使用他们的父母和require_tree语法。

票数 1

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

原文链接：

https://stackoverflow.com/questions/33284024

复制

相似问题

问如何向Grails2.4.x布局/模板中添加自定义CSS/JS？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向Grails2.4.x布局/模板中添加自定义CSS/JS？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何向Grails2.4.x布局/模板中添加自定义CSS/JS？
EN