web analytics

ALLES ÜBER adx_less UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

adx_less

TYPO3-adx_less

Übersicht

Diese TYPO3-Erweiterung enthält den LESS-Compiler http://lessphp.gpeasy.com/, der mit Bootstrap 3.3.x kompatibel ist.

  • Unterstützt einen Haken für \TYPO3\CMS\Core\Page\Page\PageRenderer, der LESS-Dateien für includeCSS kompiliert
  • eine Funktion für USER-Objekt
  • haken für rtehtmlarea, tinymce_rte und tinymce4_rte
  • und ein ViewHelper für Fluid.

Um kompilierte Dateien zu löschen oder zu regenerieren, gehen Sie zu den "Flush general Caches".

TypoScript

TypoScript-Eigenschaften

eigentumbeschreibungtypstandard
variablenArray von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @.reiheNULL
importDirectoriesKommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte. Siehe http://lessphp.gpeasy.com/array|stringNULL
targetFilenameWenn gesetzt, speichert der Compiler die Datei unter diesem Namen.zeichenketteNULL
returnUriWenn das Schlüsselwort absolut gesetzt ist, gibt der Compiler den absoluten Pfad zur Datei zurück. Wenn auf siteURL gesetzt, gibt es die komplette URL mit TYPO3_SITE_URL zurück. Wenn TRUE, ist der zurückgegebene Wert der relative Pfad, andernfalls, wenn FALSE, wird der geparste Inhalt zurückgegeben.boolean|stringNULL
komprimierenAuf TRUE setzen, wenn kompiliertes CSS komprimiert werden soll.booleschWAHR
relativeUrlsOb die URL's so angepasst werden sollen, dass sie relativ sind.booleschWAHR
strictUnitsOb Einheiten richtig bewertet werden müssen.booleschFALSCH
strictMathOb Mathematik in Klammern stehen muss.booleschFALSCH

Konfiguration

plugin.tx_adxless {

    variablen {
        schön blau = #5B83AD
        hellblau = @nice-blau + #111
    }

    # Kommagetrennte Zeichenkette oder Array mit Pfad => Verzeichnis.
    # @see http://lessphp.gpeasy.com/
    importDirectories = 
}

Wichtig! Die Eigenschaft lessphp wurde seit v1.1.1.1 entfernt. Setzen Sie plugin.tx_adxless < plugin.tx_adxless.lessphp im TypoScript für Abwärtskompatibilität.

USER-Objekt

seite.headerData.1367742474 = COA
seite.headerData.1367742474 {

    # Setzen Sie das USER-Inhaltsobjekt an die gewünschte Stelle. Die Funktion includeCss erzeugt die CSS-Datei und hängt sie mit dem PageRenderer an.
    10 = BENUTZER
    10.userFunc = AdGrafik\AdxLess\Utility\LessUtility->includeCss enthalten
    10.compilerSettings =< plugin.tx_adxless
    10.includeCssSettings {
        material = Druck
    }
    10.datei = EXT:adx_less/Ressourcen/Private/LESS/Example/Styles.less
    10.daten (
körper {
  grenze: 1px solid @nice-blue;
}
)
}

ViewHelper

Gibt geparstes LESS als CSS zurück.

{namespace less=AdGrafik\AdxLess\ViewHelpers}
<less:comple data="[string]" variables="[array]""[array]" />
<less:compileAndInclude data="[string]" variables="[array]"[array]"" />

ViewHelper Eigenschaften

für weniger:compile

eigentumbeschreibungtypstandard
datenWENIGERe Daten oder Pfad und Dateiname zur LESS-Datei.zeichenketteNULL
variablenArray von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @.reiheNULL
importDirectoriesKommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte.array|stringNULL
targetFilenameWenn gesetzt, speichert der Compiler die Datei unter diesem Namen.zeichenketteNULL
returnUriWenn das Schlüsselwort absolut gesetzt ist, gibt der Compiler den absoluten Pfad zur Datei zurück. Wenn auf siteURL gesetzt, gibt es die komplette URL mit TYPO3_SITE_URL zurück. Wenn TRUE, ist der zurückgegebene Wert der relative Pfad, andernfalls, wenn FALSE, wird der geparste Inhalt zurückgegeben.boolean|stringNULL
komprimierenAuf TRUE setzen, wenn kompiliertes CSS komprimiert werden soll.booleschWAHR
relativeUrlsOb die URL's so angepasst werden sollen, dass sie relativ sind.booleschWAHR
strictUnitsOb Einheiten richtig bewertet werden müssen.booleschFALSCH
strictMathOb Mathematik in Klammern stehen muss.booleschFALSCH

zusätzlich für weniger:compileAndInclude

eigentumbeschreibungtypstandard
includeCssSettingsWie TYPO3-Eigenschaft page.includeCss, jedoch ohne stdWrap.reiheNULL

Haken

PageRenderer

page.includeCSS.styles = Pfad/zu/my/style-file.less

tinymce_rte

RTE.default.init.content_css = path/to/my/style-file.less

oder anhängen von multiplizierten Dateien

RTE.default.init.content_css = Pfad/zu/my/style-file-1.less,Pfad/zu/my/style-file-2.less,Pfad/zu/my/style-file-3.less

tinymce4_rte

RTE.default.contentCSS = Pfad/zu/my/style-file.less

oder anhängen von multiplizierten Dateien mit kommagetrennten Zeichenketten

RTE.default.contentCSS = Pfad/zu/my/style-file-1.less,Pfad/zu/my/style-file-2.less,Pfad/zu/my/style-file-3.less

oder anhängen von multiplizierten Dateien mit dem Schlüssel

RTE.default.contentCSS {
    file1 = Pfad/zu/mir/style-file-1.less
    file2 = Pfad/zu/mir/style-file-2.less
    file3 = Pfad/zu/mir/style-file-3.less
}

rtehtmlarea

RTE.default.contentCSS = Pfad/zu/my/style-file.less

Verwendung in Erweiterungen

// Objekt erstellen
$less = GeneralUtility::makeInstance('AdGrafik\\AdxLess\\Less');
/ / Holt die Konfiguration der Erweiterung. Erlaubte Parameter sind cObject oder PID.
$configuration = AdGrafik\AdxLess\Utility\LessUtility::getConfiguration($GLOBALS['TSFE']->cObj);
// Kompilieren Sie die LESS-Datei. Gibt den Dateipfad der geparsten LESS-Datei zurück.
$pathAndFilename = 'path/to/my/style-file.less';
$compiledPathAndFilename = $less->compile($pathAndFilename, $configuration);

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:ADX_LESS ist auf

0.07 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 8.7.x Installationen installiert
  • 0.41 % aller TYPO3 7.6.x Installationen installiert

responsive - image 4

Gosign-Responsive Index: TYPO3 Installationen nutzen ADX_LESS zu

  • 64 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 36 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

speed test - image 5

Pagespeed: TYPO3 Installationen nutzen ADX_LESS zu

  • 56 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 28 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 16 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 4 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 8 % wenn der Pagespeed zwischen 0 % und 20 % ist

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.