Assetbeheer Gids
Welkom bij de Finch Assetbeheer Gids! Deze gids laat zien hoe je assets beheert in je Finch-applicatie. Assets zijn bestanden zoals JavaScript, CSS, afbeeldingen en soortgelijke bestanden die je applicatie nodig heeft.
Wat zijn Assets?
Assets in Finch zijn bestanden die in je applicatie worden gebruikt, zoals JS, CSS en afbeeldingen. Deze worden gebruikt om functionaliteit, styling en content aan je applicatie toe te voegen.
Hoe gebruik je assets in Finch?
Finch biedt een eenvoudige manier om assets te beheren via addAsset. Voorbeeld:
app.get(
path: '/',
index: (rq) async {
rq.addAsset(Asset(path: '/path/to/your/asset.js'));
return rq.renderString(text: 'Hello World');
},
);
Je kunt ook meerdere assets tegelijk toevoegen met addAssets:
app.get(
path: '/',
index: (rq) async {
rq.addAssets([
Asset(path: '/path/to/your/asset.js'),
Asset(path: '/path/to/your/asset.css'),
]);
return rq.renderString(text: 'Hello World');
},
);
Asset types
Finch ondersteunt JavaScript en CSS als types. Geef het type op met type:
app.get(
path: '/',
index: (rq) async {
rq.addAsset(Asset(path: '/path/to/your/asset.js', type: AssetType.js));
rq.addAsset(Asset(path: '/path/to/your/asset.css', type: AssetType.css));
return rq.renderString(text: 'Hello World');
},
);
Assets in templates
Je kunt assets ook in templates opnemen met {{ assets.js() }} en {{ assets.css() }}. Bijvoorbeeld:
<!DOCTYPE html>
<html>
<head>
{{ assets.css() }}
</head>
<body>
{{ assets.js() }}
Hello World
</body>
</html>
Resultaat
Het resultaat van het bovenstaande is een HTML-pagina met:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/path/to/your/asset.css" />
</head>
<body>
<script src="/path/to/your/asset.js"></script>
Hello World
</body>
</html>