有没有办法将样式表或 javascript 文件动态添加到包含插件的 TYPO3 页面?
Is there a way to add a stylesheet or javascript file dynamically to a TYPO3 page which contains a plugin?
有时我需要为特定的 TYPO3 插件添加一些 js 或 css 或两者。到目前为止,我通过扩展特定 setup.txt 包含了它,如下所示:
page.includeJSFooter.js = {$plugin.tx_fox_p1.settings.js}
page.includeCSS.css = {$plugin.tx_fox_p1.settings.css}
但是如果我将这个静态扩展拼写错误添加到根模板中,它将在每个页面上包含 js 和 css,而不管是否需要它。为了避免这种情况,我可以为放置插件的每个页面创建一个扩展模板,但是当插件代表例如侧边栏工具并且站点包含很多使用该工具的页面时,这将不太好设置所有这些页面的扩展模板。
也许有一种方法可以将插件添加到特定页面并且不关心包含 css 和 js 因为它会动态包含它并且只在放置插件的页面上?
可能是打字错误?
确实,您可以将 Includes 包装在 TypoScript 条件中:
[globalVar = TSFE:id = 10|12|15]
page.includeJSFooter.js = {$plugin.tx_fox_p1.settings.js}
page.includeCSS.css = {$plugin.tx_fox_p1.settings.css}
[END]
使用上述 TS,您的 CSS 和 JS 将仅包含在第 10、12 和 15 页。TS 条件有更多可能性,如记录 here。
在控制器的操作中,您可以通过至少两种方式包含 header 部分:
public function yourAction() {
// This will append each to the header
$this->response->addAdditionalHeaderData('<script src="/foo/bar/one.js"></script>');
$this->response->addAdditionalHeaderData('<script src="/foo/bar/two.js"></script>');
// This will override headers with the same key, so make sure if it's absolutely unique
// (usualy some prefix + ext_key creates unique keys...
$GLOBALS['TSFE']->additionalHeaderData['absolutely_unique_key'] = '<script src="/foo/bar/unique.js"></script>';
$GLOBALS['TSFE']->additionalHeaderData['absolutely_unique_key'] = '<script src="/foo/bar/override.js"></script>';
// your other code...
}
我在 Extbase 控制器中使用此代码进行动态 JS 加载:
class ShopController extends \Vendor\Shop\Controller\AbstractController {
/**
* Init
*
* @return void
*/
public function initializeAction() {
$ajax = ExtensionManagementUtility::siteRelPath($this->request->getControllerExtensionKey()).'Resources/Public/JavaScripts/Ajax.js';
$GLOBALS['TSFE']->getPageRenderer()->addJsFooterFile($ajax, 'text/javascript', FALSE, FALSE, '');
parent::initializeAction();
}
}
有时我需要为特定的 TYPO3 插件添加一些 js 或 css 或两者。到目前为止,我通过扩展特定 setup.txt 包含了它,如下所示:
page.includeJSFooter.js = {$plugin.tx_fox_p1.settings.js}
page.includeCSS.css = {$plugin.tx_fox_p1.settings.css}
但是如果我将这个静态扩展拼写错误添加到根模板中,它将在每个页面上包含 js 和 css,而不管是否需要它。为了避免这种情况,我可以为放置插件的每个页面创建一个扩展模板,但是当插件代表例如侧边栏工具并且站点包含很多使用该工具的页面时,这将不太好设置所有这些页面的扩展模板。
也许有一种方法可以将插件添加到特定页面并且不关心包含 css 和 js 因为它会动态包含它并且只在放置插件的页面上?
可能是打字错误?
确实,您可以将 Includes 包装在 TypoScript 条件中:
[globalVar = TSFE:id = 10|12|15]
page.includeJSFooter.js = {$plugin.tx_fox_p1.settings.js}
page.includeCSS.css = {$plugin.tx_fox_p1.settings.css}
[END]
使用上述 TS,您的 CSS 和 JS 将仅包含在第 10、12 和 15 页。TS 条件有更多可能性,如记录 here。
在控制器的操作中,您可以通过至少两种方式包含 header 部分:
public function yourAction() {
// This will append each to the header
$this->response->addAdditionalHeaderData('<script src="/foo/bar/one.js"></script>');
$this->response->addAdditionalHeaderData('<script src="/foo/bar/two.js"></script>');
// This will override headers with the same key, so make sure if it's absolutely unique
// (usualy some prefix + ext_key creates unique keys...
$GLOBALS['TSFE']->additionalHeaderData['absolutely_unique_key'] = '<script src="/foo/bar/unique.js"></script>';
$GLOBALS['TSFE']->additionalHeaderData['absolutely_unique_key'] = '<script src="/foo/bar/override.js"></script>';
// your other code...
}
我在 Extbase 控制器中使用此代码进行动态 JS 加载:
class ShopController extends \Vendor\Shop\Controller\AbstractController {
/**
* Init
*
* @return void
*/
public function initializeAction() {
$ajax = ExtensionManagementUtility::siteRelPath($this->request->getControllerExtensionKey()).'Resources/Public/JavaScripts/Ajax.js';
$GLOBALS['TSFE']->getPageRenderer()->addJsFooterFile($ajax, 'text/javascript', FALSE, FALSE, '');
parent::initializeAction();
}
}