...
Assets sind Dateien wie CSS, Javascript, Bilder oder Schriften. Diese sollten nicht über den tatsächlichen Dateipfad aufgerufen werden, sondern über ein öffentliches Verzeichnis an den Browser ausgeliefert werden.
Assets für ein Plugin definieren
Alle Assets für ein Plugin sollten in der asset.json
definiert werden.
Codeblock | ||||
---|---|---|---|---|
| ||||
{ "my/plugin" : [ // asset from path my/plugin/css/button.css "./css/button.css", // all files from path my/plugin/js "./js/*.*", // all files with the extension .png from folder my/plugin/images "./images/*.png", // all files and folders from folder my/plugin/images "./images/*/*.*", // assets not from this plugin "plugin/remote/web_component/font_awesome/css/font-awesome.min.css", "plugin/remote/web_component/font_awesome/fonts/*.*" ], // additional assets for some other plugin "some/other": [ // all images from my/plugin "public/remote/my/plugin/images/*/*.*" ] } |
Assets verwenden
Das definierte Asset können Sie mit dem Template-Helper asset
verwenden. Dieser liefert eine URL zum Asset im Asset-Ordner.
view.hbs
Codeblock | ||||||
---|---|---|---|---|---|---|
| ||||||
// href from link <link rel="stylesheet" href="{{asset "my/plugin" "css/style.css" }}" type="text/css"> // image <img src="{{asset "my/plugin" "images/logo.png"}}" /> |
CSS und Javascript
Diese Dateien werden pro Plugin gesammelt und mit jeweils einer Datei ausgeliefert. CSS wird dabei unter css/style.css
zusammengeführt und Javascript unter js/script.js
.
Cache
Die Assets werden unter temp/cache/assets
abgelegt. Dieser Ordner dient als öffentliches Verzeichnis für das Web. Die Logik für das Sammeln der Assets wird dabei nur einmal pro Cache-Generierung ausgeführt, was dazu führt, dass für neue Assets der Cache geleert werden muss.