如何将外部JavaScript或CSS文件添加到Tridion页面?

Cod*_*der 8 tridion tridion-2011

我有一个外部JavaScript和一个CSS文件.我不知道如何将此文件添加到我的页面.我正在为CT和PT使用DWT TBB.

我正在我的页面TBB中编写内部CSS以暂时获取输出.但我没有得到如何实现JavaScript.有人能帮助我吗?

我应该将这些文件作为组件并在我的页面上呈现它们吗?这是正确的方法吗?如果是,请告诉我要遵循的步骤.

Nun*_*res 11

这是一个广泛讨论的主题,我将尝试概述各种可能性:

  1. 创建CSS和JS作为二进制组件,从DWT模板链接到这些组件
  2. 创建CSS和JS作为二进制组件,作为DCP发布到服务器,与url链接到二进制
  3. 创建CSS&JS作为文本组件,放置在页面中,发布到服务器,将URL链接到页面
  4. 将CSS和JS复制到传递服务器(不是Tridion),将URL与URL连接到css和js

选项#1是最简单的,有很多缺点.

  • 使用您需要的CSS和JS文件在Tridion中创建多媒体组件.
  • 记下URI,然后在DWT中使用类似的东西:
<link href="tcm:27-2762" rel="stylesheet" type="text/css" />
<script src="tcm:27-2763" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)

如果您的模板使用默认完成操作构建块,则Tridion将解析对这些二进制文件的引用并将其与您的页面一起发布.这具有副作用,即这些二进制文件将与使用相同模板的所有页面一起发布.

选项#2要求您编写动态组件模板,可能带有一些代码来确定文件的发布位置.这更符合我通常实现的内容,但此时我不建议你这样做.随着你对Tridion知识的增长,你会觉得自己很舒服.使用此选项,您可以将CSS/JS文件发布到给定位置,然后使用DWT中的引用而不是使用TCM URI(如上所述)将使用文件发布到的URL.

选项#3要求您创建"代码组件和模板",这意味着只有一个大文本字段(非富文本)的简单模式,其中复制/粘贴CSS或JS的内容.然后编写一个简单的组件模板,它将按原样输出内容.有点像@@Fields.Code@@.最后,您创建了2个页面模板(一个扩展名为.js,另一个扩展名为.css),只有一个DW模板:

<!-- TemplateBeginRepeat name="Components" -->
@@RenderComponentPresentation()@@
<!-- TemplateEndRepeat -->
Run Code Online (Sandbox Code Playgroud)

最后,并且绝对不是最不重要的(有很多方法可以使这只猫皮肤化)你可以直接将这些CSS/JS文件放在你的网络服务器上,并在你的DWT中添加一个链接到这些文件可用的URL.

希望这能为您提供一些选择.请记住,包括CSS/JS应该在页面模板级别(理想情况下在<head>页面部分)完成,而不是在组件模板中完成.

  • 防止与这些技术中的一些相关联的过度发布的一种常见方法是在头元素中使用服务器端包括CSS和JS链接. (2认同)

Chr*_*ers 5

有很多关于构建模块的文章如何解释这一点

看看这些链接:

  1. http://blog.building-blocks.com/publishing-code-files-from-sdl-tridion
  2. http://blog.building-blocks.com/css-in-sdl-tridion-part-2-handling-image-references
  3. http://blog.building-blocks.com/tridion-tbb-automatically-minify-css-javascript-on-publish

如果你想让事情变得非常简单(但我不建议这样做,因为它会在你每次发布页面时重新发布你的CSS或JS).您可以将CSS存储为多媒体组件(并记下其URI),并在DWT页面布局中将其引用为:

<link rel="stylesheet" href="tcm:1-2-16" />

    or

<script type="text/javascript" src="tcm:1-2-16"></script>
Run Code Online (Sandbox Code Playgroud)

然后使用Default Finish Actions确保发布二进制文件并解析链接.