Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Rename macro 'n' to 'mgnl-n'.

您可以在模板原型里定义全局使用的 CSS 和 JavaScript。例如,您可以引用 AngularJS 或 其它 JavaScript 框架、添加一个滑动菜单脚本或执行其它任务。注意在原型里引用这些文件是一个全局变化——这些文件将会被每个网页的每个页面所引用。

默认情况下,Magnolia CMS 不会从原型里引用任何 CSS 和 JavaScript。演示站点在它们的 网站定义 里引用了 pop 主题,pop 主题包含了所有这些资源。参考 主题 和 htmlHeader 区域 以获得更多关于默认配置的信息。

Bestpractice
Title最佳实践
Excerpt

只有在您需要每个页面都使用 CSS 和 JavaScript 并且不打算频繁更改时,才在模板原型里配置它们。但这种情况很少。大多数 JavaScript 框架和功能脚本都最好在您的主题里放置,这更利于变换主题。

例如,您可能不想在原型里引用一个追踪 cookie 脚本,这是因为Magnolia 会为所有的站点提供相同的追踪 ID,而实际上您想要分开追踪每个站点。(Magnolia 的 Google 分析模型将其本身作为插件添加到主题聚合器的脚本里,而不是原型里,所以您不需要担心 Google 分析。)

以下配置样例引用了模板原型里自定义的 JavaScript 和 CSS 文件。

CSS和JavaScript可在必要时添加到模板原型中。这个选项在/default/template/prototype配置中并未使用,因为所有必要的样式表和JavaScripts都包含在缺省的pop主题里了。pop主题引用自网站定义/theme节点。参考主题htmlHeader区域以获得更多关于标准配置的信息。

以下配置样例在模板原型级别添加了一个额外的JavaScript和CSS文件,具体配置是在STK > 网站定义 /default/templates/prototype/cssFiles/jsFiles里。

Advanced Tables - Table Plus
heading0
multiplefalse
enableHeadingAttributesfalse
enableSortingfalse
classm5-configuration-tree
enableHighlightingfalse
节点名

Mgnl n
default

 

Mgnl n
templates

 

Mgnl n
prototype

 

Mgnl n
cssFiles

 

Mgnl n
styles

 

mgnl-p
farFutureCaching

true

mgnl-p
link

/resources/templating-kit/prototype/css/styles.css

mgnl-p
media

screenscreeen

Mgnl n
jsFiles

 

Mgnl n
fireworks

 

mgnl-p
farFutureCaching

true

mgnl-p
link

/resources/templating-kit/prototype/js/fireworks.js

这个JavaScript为页面添加了烟花效果,CSS表改变了页眉背景色。请注意htmlHeader脚本是如何添加额外的JavaScript到head元素的。这个 JavaScript 为页面添加了烟花效果,CSS 将页眉背景色改为绿色。请注意 htmlHeader 区域 找到自定义的 JavaScript,并在页面的 head 元素里绘制它。