如何将自定义CSS / JS添加到Grails 2.4.x布局/模板?

me

在这里,我相信Grails 2.4.5 (如果我错了,请纠正我),该asset-pipeline插件是管理CSS / JS资源的默认/理想方法。

我有一些自定义CSS / JS文件,希望将它们包含在我的GSP页面的很大一部分中,并且想知道如何添加它们:

  1. 使用asset-pipeline插件;但...
  2. 通过这种方式,我可以(以某种方式)从中引用它们grails-app/views/layouts/special.gsp,然后special.gsp在每个所需的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页面中,都只需像正常一样<meta name="layout" content="special"><header>标签中添加一个即可

如何asset-pipeline互相配合使用和布局?我在哪里放置my-custom.cssmy-custom.js这里有什么特别说明吗?

泰勒

如果您要离开special.gsp原样,请执行以下操作:

  • 您将放置my-custom.cssgrails-app\assets\stylesheets文件夹中
  • 您将放置my-custom.jsgrails-app\assets\javascripts文件夹中

根据您的IDE,该assets文件夹可能位于顶层,并且该文件夹位于其中的事实grails-app可能会被抽象化。例如,使用GGTS中的“项目资源管理器”视图,assets在我的项目正下方有一个文件夹。

通过资产管道,您还可以使用以下语法将这些文件包括在“父”文件中:

//= my-custom.js

或者

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

就像您一样,此“父”文件也需要包含在布局中。

附加信息:
我提到过require_selfrequire_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
*/

随您去,现在仅使用它们的父级和require_tree语法就将所有3个CSS文件和2个js文件都拉入了

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将自定义单元格模板添加到Ember表表

来自分类Dev

如何将自定义模板添加到Word主屏幕功能区?

来自分类Dev

SSRS 2008 R2-将自定义模板添加到新报告向导

来自分类Dev

如何将自定义内容类型字段添加到 SharePoint 加载项中的模板

来自分类Dev

如何将自己的元素(文本等)添加到 Azure AD B2C 语言自定义?

来自分类Dev

如何将自定义 js 文件添加到 css 文件等角度组件

来自分类Dev

如何将自定义字体添加到react-native v0.61.x?

来自分类Dev

将自定义视图(tileview)添加到布局?

来自分类Dev

将自定义页脚添加到页面模板

来自分类Dev

在Wordpress中将自定义CSS添加到页面模板

来自分类Dev

如何将自定义模板标签传递给Jinja2 Template类?

来自分类Dev

如何使用菜单布局将自定义项目添加到NavigationView?

来自分类Dev

如何仅将自定义渲染器添加到某些特定的布局?

来自分类Dev

如何将HTML5自定义data- *属性添加到Laravel 4刀片模板?

来自分类Dev

如何将自定义CSS文件添加到Ofbiz的小部件中

来自分类Dev

如何将自定义css文件添加到asp.net mvc中?

来自分类Dev

Select2:如何将自定义样式添加到下拉菜单中不存在的选项?

来自分类Dev

如何将自定义控制器(如按钮)添加到Google Map Android API v2?

来自分类Dev

如何动态地在滚动视图中将自定义布局添加到线性布局

来自分类Dev

如何将自定义JS添加到Django模型管理员

来自分类Dev

如何将自定义数据注释添加到dc.js图表?

来自分类Dev

如何将自定义地图和自定义数据添加到Highmaps?

来自分类Dev

如何将自定义文件添加到自定义文章列表页面

来自分类Dev

如何将自定义 Neo4j 浏览器指南添加为内置指南?

来自分类Dev

如何通过API C#和模板将自定义变量添加到SendGrid电子邮件

来自分类Dev

如何使用辅助函数将自定义类名称添加到Handlebars模板中的元素?

来自分类Dev

如何在Symfony 2 Form Builder中将自定义属性添加到选项元素

来自分类Dev

在MVC 4中将自定义类添加到DropDownList

来自分类Dev

将自定义登录配置添加到neo4j非托管扩展

Related 相关文章

  1. 1

    如何将自定义单元格模板添加到Ember表表

  2. 2

    如何将自定义模板添加到Word主屏幕功能区?

  3. 3

    SSRS 2008 R2-将自定义模板添加到新报告向导

  4. 4

    如何将自定义内容类型字段添加到 SharePoint 加载项中的模板

  5. 5

    如何将自己的元素(文本等)添加到 Azure AD B2C 语言自定义?

  6. 6

    如何将自定义 js 文件添加到 css 文件等角度组件

  7. 7

    如何将自定义字体添加到react-native v0.61.x?

  8. 8

    将自定义视图(tileview)添加到布局?

  9. 9

    将自定义页脚添加到页面模板

  10. 10

    在Wordpress中将自定义CSS添加到页面模板

  11. 11

    如何将自定义模板标签传递给Jinja2 Template类?

  12. 12

    如何使用菜单布局将自定义项目添加到NavigationView?

  13. 13

    如何仅将自定义渲染器添加到某些特定的布局?

  14. 14

    如何将HTML5自定义data- *属性添加到Laravel 4刀片模板?

  15. 15

    如何将自定义CSS文件添加到Ofbiz的小部件中

  16. 16

    如何将自定义css文件添加到asp.net mvc中?

  17. 17

    Select2:如何将自定义样式添加到下拉菜单中不存在的选项?

  18. 18

    如何将自定义控制器(如按钮)添加到Google Map Android API v2?

  19. 19

    如何动态地在滚动视图中将自定义布局添加到线性布局

  20. 20

    如何将自定义JS添加到Django模型管理员

  21. 21

    如何将自定义数据注释添加到dc.js图表?

  22. 22

    如何将自定义地图和自定义数据添加到Highmaps?

  23. 23

    如何将自定义文件添加到自定义文章列表页面

  24. 24

    如何将自定义 Neo4j 浏览器指南添加为内置指南?

  25. 25

    如何通过API C#和模板将自定义变量添加到SendGrid电子邮件

  26. 26

    如何使用辅助函数将自定义类名称添加到Handlebars模板中的元素?

  27. 27

    如何在Symfony 2 Form Builder中将自定义属性添加到选项元素

  28. 28

    在MVC 4中将自定义类添加到DropDownList

  29. 29

    将自定义登录配置添加到neo4j非托管扩展

热门标签

归档