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

前端之家收集整理的这篇文章主要介绍了javascript-TYPO3:如何在后端添加CSS和JS 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如何在后端添加CSS和JavaScript文件

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

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

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

的CSS

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

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

JS

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

参数:

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

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

附加信息:

如果要使用TYPO3的jQuery(强烈建议使用jQuery,以避免发生冲突),则还应使用以下内容

  1. require(["jquery"],function($) {
  2. //your awesome function
  3. }

您也可以使用条件来确保它在后端加载:

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

猜你在找的CSS相关文章