TYPO3:如何在后端添加CSS和JS

时间:2019-05-03 12:24:41

标签: javascript php css typo3 element

如何在后端添加 css javascript 文件?

我想将这些文件用于自定义内容元素,以使它们对用户更具吸引力。

系统:TYPO3 v9
模式:作曲者模式
目标:自定义内容元素

1 个答案:

答案 0 :(得分:2)

在TYPO3 v9中,您必须在每种模式下执行以下操作

CSS

$GLOBALS['TBE_STYLES']['skins']['nameOfContentElement'] = array();
$GLOBALS['TBE_STYLES']['skins']['nameOfContentElement']['name'] = 'My Awesome Name';
$GLOBALS['TBE_STYLES']['skins']['nameOfContentElement']['stylesheetDirectories'] = array(
    'visual' => 'yourextension/Resources/Public/Css/Backend',
    'theme' => 'yourextension/Resources/Public/Css/Monokai'
);

此处的路径(CSS)是一个目录,因此它将读取指向的目录中的所有文件。

JS

$renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRender
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/Backend.js', 'text/javascript', false, false, '', true,  '|', false, '');
$renderer->addJsFile('yourextension/Resources/Public/JavaScript/another.js', 'text/javascript', false, false,  '', false, '|', false, '');

参数:

addJsFile(
       $file, 
       $type = 'text/javascript'
       $compress = true,
       $forceOnTop = false,
       $allWrap = '',
       $excludeFromConcatenation = false,
       $splitChar = '|',
       $async = false,
       $integrity = ''
);

在大文件中,加载可能会有一些问题,但是如果有人可以确认,我将非常感激。

其他信息:

如果您想使用TYPO3的jQuery(为了避免冲突,强烈建议使用),您也应该使用以下内容:

require(["jquery"], function($) {
   //your awesome function
}

您还可以使用条件来确保将其加载到后端:

if (TYPO3_MODE === 'BE') {
   $renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRender
   ...
}