如何使用 TypeScript 动态加载文件

Question

我想为每个页面加载正确的关键 CSS 文件。

所以我这样保存它们：

fileadmin/critical1.css 对于 TSFE:id=1

fileadmin/critical2.css 对于 TSFE:id=2

等等。由于有很多页面，我希望 TS 是完全动态的，而不是像这样：

[globalVar = TSFE:id=1]
page {
  cssInline {
    10 = FILE
    10.file = fileadmin/critical1.css
  }
}
[global]

我想要这样：

page {
  cssInline {
    10 = FILE
    10.file= fileadmin/critical{page:uid}.css
  }
}

或这个

page {
  cssInline {
    10 = FILE
    10.file= fileadmin/critical$GLOBALS['TSFE']->id.css
  }
}

但它不是这样工作的。有人知道怎么做吗？

Answer 1

您只需添加 insertData = 1.

检查此代码：

page {
  cssInline {
    10 = FILE
    10.file= fileadmin/critical{page:uid}.css
    10.file.insertData = 1 
  }
}

参考： https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Stdwrap.html?highlight=insertdata#insertdata

或者您可以使用 headerData。

检查此代码：

page {
  headerData {
    10 = TEXT
    10.value = {page:uid}
    10.insertData = 1 
    10.wrap = <link rel="stylesheet" type="text/css" href="fileadmin/critical|.css" media="all" />
  }
}

参考：https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#headerdata

希望对您有所帮助！

如何使用 TypeScript 动态加载文件

How to dynamicly load files with TypoScript

typo3

dynamic

typoscript

critical-css