Konfiguration

Links

IntegratorGuide Die ersten Schritte nach der Installation zum Erstellen einer Website
IntegratorsCookbook Einige Detail-Lösungen
UserInterface Namenskonventionen

Neue Site anlegen

Im Backend zu Administration / Sites Management: Create a blank site.

Danach hat man eine minimale Website mit folgenden zwei wichtigen Dateien:

Packages/Sites/RSYS.DefaultSite/Resources/Private/TypoScripts/Library/Root.ts2
Packages/Sites/RSYS.DefaultSite/Resources/Private/Templates/Page/Default.html

Die Berechtigungen muss man nun nochmal setzen:

./flow core:setfilepermissions erwin www www

 HTML Template

Das Template Default.html sieht folgendermaßen aus:

<!DOCTYPE html>
{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace ts=TYPO3\TypoScript\ViewHelpers}
<html>
<head>
    <f:section name="stylesheets">
        <!-- put your stylesheet inclusions here, they will be included in your website by TypoScript -->
    </f:section>
    <f:section name="javascripts"> <!-- rsys: replaced scripts by javascripts -->
        <!-- put your scripts inclusions here, they will be included in your website by TypoScript -->
    </f:section>
</head>
<body>
<f:section name="body">
    <nav class="menu">
        {parts.menu -> f:format.raw()}
    </nav>
    <nav class="breadcrumb">
        {parts.breadcrumb -> f:format.raw()}
    </nav>
    <div class="content">
        {content.main -> f:format.raw()}
    </div>
</f:section>
</body>
</html>

Die Sektion scripts habe ich umbenannt in javascripts, ich vermute das ist ein Bug hier.

Die Keywords hier sind:

  • section
  • parts
  • content

sowie die einzelnen section names:

  • stylesheets
  • javascripts
  • body

und die parts der section body:

  • menu
  • breadcrumb

sowie der content

  • main

Diese werden definiert in Typoscript2, teils in der Root.ts2 und teils sind es in Neos vordefinierte.

Typoscript2 Template Root.ts2

Das Template sieht so aus:

namespace: TypoScript=TYPO3.TypoScript

/**
 * Root TypoScript template for the Default Site NEOS Site
 */
page = Page {
    head {
        stylesheets = TypoScript:Template
        stylesheets {
            templatePath = 'resource://RSYS.DefaultSite/Private/Templates/Page/Default.html'
            sectionName = 'stylesheets'
        }

        javascripts = TypoScript:Template
        javascripts {
            templatePath = 'resource://RSYS.DefaultSite/Private/Templates/Page/Default.html'
            sectionName = 'javascripts'
        }
    }

    body {
        templatePath = 'resource://RSYS.DefaultSite/Private/Templates/Page/Default.html'
        sectionName = 'body'
        parts {
            menu = Menu
            breadcrumb = Breadcrumb
        }
            // These are your content areas, you can define as many as you want, just name them and the nodePath.
        content {
            // Default content section
            main = PrimaryContent {
                nodePath = 'main'
            }
        }
    }
}

Hier wird nun definiert (auch hier habe ich scripts mit javascripts ersetzt):

page = Page

Page ist ein Typoscript Objekt, definiert in Packages/Application/TYPO3.Neos/Resources/Private/TypoScript/Prototypes/Page.ts2 mit prototype(TYPO3.Neos:Page). Alle folgenden Unter-Objekte sind ebenfalls dort definiert und werden im folgenden überschrieben oder ergänzt:

page.head.stylesheets

templatePath gibt an, in welcher HTML Template Datei es sich die Inhalte holt und sectionName gibt an aus welcher section dort ('stylesheets'). Damit wird der Text, der oben in Default.html in <f:section name="stylesheets"> steht im Header der Seite im Frontend stehen.

page.head.javascripts

dasselbe gilt hier.

page.body

templatePath gibt an, in welcher HTML Template Datei es sich die Inhalte holt und sectionName gibt an aus welcher section dort ('body').

page.body.parts.menu = Menu

Menu ist ein Typoscript Objekt, definiert in Packages/Application/TYPO3.Neos/Resources/Private/TypoScript/Prototypes/Menu.ts2 mit prototype(TYPO3.Neos:Menu).  Dies rendert ein simples Menu mit ul/li mit dem Template Packages/Application/TYPO3.Neos/Resources/Private/Templates/TypoScriptObjects/Menu.html.

page.body.parts.breadcrumb = Breadcrumb

dasselbe gilt hier.

content.main = PrimaryContent

PrimaryContent ist ein Typoscript Objekt, definiert in Packages/Application/TYPO3.Neos/Resources/Private/TypoScript/Prototypes/PrimaryContent.ts2 mit prototype(TYPO3.Neos:PrimaryContent). Hier muss der nodePath = 'main' gesetzt sein, das ist wohl der Standard Content Bereich.

Einen weiteren kann man hinzufügen, indem man die Datei Packages/Sites/RSYS.DefaultSite/Configuration/NodeTypes.yaml editiert:

'TYPO3.Neos.NodeTypes:Page':
  childNodes:
    sidebar:
      type: 'TYPO3.Neos:ContentCollection'

Dann hat man zusätzlich sidebar als nodePath.Und kann in Default.html einfügen:

<div class="sidebar">
    {content.sidebar -> f:format.raw()}
</div>

Und in Root.ts2:

sidebar = ContentCollection {
                nodePath = 'sidebar'
            }

Aber hier gibt's den ersten fetten Bug -> siehe The "node" property did not resolve to a NodeInterface

Ggf. noch den Cache löschen mit:

./flow flow:cache:flush

Erstellt: 03/2014| Geändert: 10/2015

Sass

Das Verzeichnis Resources/Public/Styles anlegen und dort das Config file config.rb:

if RUBY_VERSION =~ /1.9/
    Encoding.default_external = Encoding::UTF_8
    Encoding.default_internal = Encoding::UTF_8
end
relative_assets = true
css_dir = "../../Public/Styles"
sass_dir = "."
images_dir = "Images"
images_path = "../Images"
output_style = :compact
environment = :production

Und die Datei Styles.scss. Diese importiert:

// Include libraries for mixins
@import "compass";

// Include modules
@import "Variables";
@import "Typeplate"; // see http://typeplate.com
@import "VarsTypeplate";
@import "Layout";
@import "Navigation";
@import "Breadcrumb";

Das Verzeichnis Resources/Private/Styles anlegen und mit der Konsole zu Resources/Public/Styles wechseln und folgendes eingeben:

compass watch
# oder für firesass:
compass watch --debug-info

 Und dann inkludieren in Default.html mit

<link rel="stylesheet" href="{f:uri.resource(path: 'Styles/Screen.css', package: 'RSYS.DefaultSite')}" media="all" />

Erstellt: 03/2014| Geändert: 10/2015

Aber...

...mir gefällt diese Struktur nicht. Warum? Es wird Bootstrap eingebunden, aber dann wird mit den Css Styles die ganze Responsive Sache, selbst die ganze Grid Konfiguration selbst gestrickt. Ich möchte die in Bootstrap bereits vorhandene nutzen, wieso alles neu erfinden?

Also habe ich letzlich die ganze Site von Hand neu aufgebaut statt die generierte Vorlage zu verwenden.

Erstellt: 03/2014| Geändert: 10/2015