维护适当的CSS Javascript和使用模板引擎-一个矛盾

Maintaining proper CSS Javascript and using a Template Engine - a contradiction?

本文关键字：引擎矛盾一个 CSS Javascript 维护更新时间：2023-09-26

模板引擎(Velocity, FreeMaker等)可以让你将HTML分割成可重用的块。例如，你有一个<div>显示广告出现在很多地方在你的网站-你可以组成一个文件包含<div>和它的内容一次(与速度:a 'myAd。vm'文件)，并将其加载到所需的任何页面(速度:apply #parse('myAd.vm') .

我喜欢把这些.vm文件想象成函数，它们被"调用"(解析)并输出文本内容。它们可以有"参数"-在Velocity中，您可以在解析"myAd"之前使用#set( $myParam = 'foo' )。

我的问题是:如何在自己的文件中定义CSS和Javascript的正确方法适合于此?

"myAd。vm'需要CSS样式，您可以在该文件中使用<style>标签定义该CSS -这将导致在其<body>中具有样式标签的HTML文档-而不是在其<head>中，当然也不是在单独的文件中。

或者，您可以将CSS定义为'myAd。vm'需要在一个单独的'myAd.css'文件，并要求任何HTML文档解析'myAd.css'。vm'将在其头部标记中有一个<LINK REL="StyleSheet" HREF="myAd.css" TYPE="text/css">。这是一个问题，因为它使事情变得更加复杂和麻烦，并且-您可能想要实际解析'myAd。vm'文件取决于一个条件(例如，在Velocity中，你可以有#if(someCondition) #parse('myAd.vm') #end) -这意味着你实际上不知道是否应该链接到该外部CSS文件的头标签。

任何想法吗?谢谢。

我使用过的大多数框架都让你能够进行某种函数调用，这种调用就像css或js文件的include一样，然后在head中输出到外部文件。在很多情况下，我实际上是通过一个minifier运行所有这些，所以最后只有一个css和一个js文件。

这样你就可以从视图部分中添加到资源堆栈中，并直接将内容放在头部。

Apache Wicket(一个基于组件的框架)允许您通过继承系统添加所谓的"Header贡献" ("renderHead"方法现在在Wicket 1.5中)作为其页面组成的一部分。这意味着，尽管页面只定义了要呈现的全部HTML的一部分，但它仍然可以向标题中添加一些内容。，因此包括<链接>

对于非基于组件的框架，Thymeleaf模板引擎(可以与Spring MVC一起使用)，由于它的"自然模板"功能，允许你通过包含来自其他页面的片段来组合页面(包括在

在中，这在某种程度上解决了你的问题)，而不是像Sitemesh或Tiles这样的组合框架自然采用的"面向继承"方法。

问候,丹尼尔。