Zum Inhalt springen

Neos Stylesheet über TypoScript einbinden

Erstellt am 24. März 2014 · 2 Antworten · letzte Antwort am 26. März 2014

Tags: Templates & Layouts, Frage

tobla ·

Hallo Zusammen

Ich stehe vor einem kleinen Problem, das wohl in den NeosDocs noch nicht dokumentiert wurde, aber vielleicht weis es ja jemand von euch.

Unter Typo3 CMS konnten im Typoscript mit page.includeCSS.... Stylesheets eingebunden werden.

Für Neos hab ich bis jetzt nur die Möglichkeit gefunden Styles im Template direkt einzubinden.

Root.ts2

page = Page {
  head {
    stylesheets = TYPO3.TypoScript:Template
    stylesheets {
      templatePath = 'resource://MyVendor.MySite/Private/Templates/Page/Default.html'
      sectionName = 'stylesheets'
    }
  }
}

Templates/Page/Default.html

<f:section name="stylesheets">
    <link rel="stylesheet" href="{f:uri.resource(path: 'Styles/page.css', package: 'MH.DemoSite')}" />
    <link rel="stylesheet" href="{f:uri.resource(path: 'Styles/font.css', package: 'MH.DemoSite')}" />
</f:section>

Auch andere Entwickler scheinen das gleiche Problem zu haben. Ansonsten würde z.B. lelesys im Readme nicht explizit darauf hinweise, das man styles und scripts manuell einbinden muss: https://github.com/lelesys/Lelesys.Plugin.Products.

Zusätzlich wäre es nett, wenn man über Typoscript steuern könnte, ob alle Files zusammengemergt werden und ob sie gecached werden, damit man das ganze zum Entwickeln abschalten könnte.

Hintergrundinfo: Warum will ich Styles über TS einbinden? Styles und Scripts sollten beim installieren von Extensions automatisch mitkommen (allenfalls aber über Typoscript wieder excluded werden können analog Typo3 CMS). Das manuelle Nachführen des Templates nach jeder Plugininstallation/Deinstallation ist extrem mühsam, fehleranfällig und führt zwangsweise irgendwann zu Deadcode.

Weis hier jemand einen Rat?

Gruss aus der Schweiz

Unbekannter Benutzer · · Beste Antwort

Hi,

doch das geht, allerdings nicht mehr wenn Du dein Site Stylesheet so einbindest wie oben in deinem Code.

Siehe Demosite, dort wird das so eingebunden:

page = Page {
	head {
		stylesheets {
			site = TypoScript:Template
...

D.h. ein Plugin könnte sein eigenes CSS so registrieren:

prototype(TYPO3.Neos:Page) {
  head {
    stylesheets {
      myPluginNameStylesheets = TYPO3.TypoScript:Tag {
        tagName = 'link'
        attributes {
          rel = 'stylesheet'
          href = TYPO3.TypoScript:ResourceUri {
            path = 'resource://MyVendor.MyPluginPackage/StyleSheets/plugin.css'
          }
        }
      }
    }
  }
}