如何在 TYPO3 中包含自定义 CSS 文件

Question

我需要在 typo3 7 中构建一个扩展。6.I 使用

在 setup.txt 中包含一个 css 文件

page.IncludeCSS = Ext.Path_to_css_file.css

但是我的 css 文件中的样式被其他一些自定义覆盖 styles.How 我可以阻止 this.Any 想法吗？我是新手typo3.Please提前帮me.Thank你

Answer 1

您必须为每个 css 文件提供一个唯一的密钥（例如 myCssFile1）。在 EXT: 之后也使用冒号。因此，使用 TypoScript 包含 CSS 文件的正确方法是

page.includeCSS.myCssFile1 = EXT:my_ext/Path/to/css_file.css

Answer 2

"page.IncludeCSS" 是错误的，应该是 "page.includeCSS" 后跟您自定义的唯一数组名称，例如：

page.includeCSS {
    styles=Resources/Public/Stylesheets/style.css
    form=fileadmin/css/form.css
    jqueryui=Resources/Public/Javascript/ui/jquery-ui.min.css  
}

问候皮特

Answer 3

另一种方法，很脏但没有编辑扩展模板：

lib.additionalStyles = HMENU
lib.additionalStyles {
  special = rootline
  special.range = 0|-1
  includeNotInMenu = 1
  1 = TMENU
  1.NO {
    doNotShowLink = 1
    before.cObject = FILES
    before.cObject {
      references {
        table = pages
        uid.data = field:uid
        fieldName = media
      }
      renderObj = TEXT
      renderObj {
        if.value = css
        if.equals.data = file:current:extension
        dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
      }
    }
  }
}

这里使用 HMENU 是因为 FILES 对象不能提供与通过模板方法包含相同的继承。但是如果你不需要继承你可以这样做：

lib.additionalStyles = FILES
lib.additionalStyles {
  references {
    # To use media from current page only
    table = pages
    uid.data = field:uid
    fieldName = media
    # To add some inheritance if media for current page wasn't set
    data = levelmedia: level[, slide]
    # depending on level value you can take media from root page,
    # from current page, from any level upper in tree, or first
    # existing media item starting from current page to root.
    # So you can't collect media from all parent pages, only
    # from current or one of the parents.
  }
  renderObj = TEXT
  renderObj {
    if.value = css
    if.equals.data = file:current:extension
    dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
  }
}

然后将对象导入headerData：

page.headerData.10 < lib.additionalStyles

或（如果您包括 JS）

page.footerData.10 < lib.additionalJS

现在您只需在页面设置的“资源”选项卡上创建与所需文件的关系即可。不确定是否所有版本的 Typo3 都允许 css 和 js 的关系，但 6.2-8.7 允许）

如何在 TYPO3 中包含自定义 CSS 文件

How to include a custom CSS file in TYPO3

css

typo3

typoscript

typo3-7.6.x