TYPO3：如何在后端添加 css 和 JS答案

【问题标题】：TYPO3: How to add a css and JS on the backendTYPO3：如何在后端添加 css 和 JS
【发布时间】：2019-05-03 12:24:40
【问题描述】：

如何在后端添加 css 和 javascript 文件？

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

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

【问题讨论】：

How to include a custom CSS file in TYPO3的可能重复
@chris G 甚至没有接近复制。再次仔细阅读内容

标签： javascript php css typo3 element

【解决方案1】：

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

CSS

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

这里的路径（CSS）是一个目录，所以它会读取指定目录下的所有文件。

$renderer = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\Page\PageRenderer::class);
$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\PageRenderer::class);
   ...
}

【讨论】：