Here is the main problem I'm having. I want to set social share buttons to an Aurelia application page.
In general, I have to set three meta tags objects:
head title
[property="og:image"]
[property="og:description"]
What is the best way to handle this in Aurelia? Is it possible to do this using the Route object?
I got around this by just writing a service that modifies the head content directly using the DOM API. There is no way to nicely bind to the head content as a view.
Here is a gist of my implementation https://gist.github.com/dpix/6f508727b9d03d692d0659eb1776ad85
Have you looked into using the settings property on a route itself? This is an object where you can specify data for a particular route, I personally use it to specify icons for menus generated using Aurelia, but it can be used for anything.
configureRouter(config, router) {
config.title = 'Test Route';
config.map([
{
route: ['', 'welcome'],
name: 'welcome',
moduleId: './welcome',
title: 'Welcome',
settings: {
image: '/images/someimage.png',
description: 'This is my social share description for this route.'
}
}
]);
this.router = router;
}
Now to access the settings object, inside of your route viewmodel you will define a callback method called activate this method receives 3 parameters. The first one is any route parameters and the second is the route object itself for the current route.
export class MyViewModel {
image = null;
description = null;
activate(params, routeMap) {
if (routeMap.settings) {
this.image = routeMap.settings.image;
this.description = routeMap.settings.description;
}
}
}
Now inside of your view template HTML, you can do this:
${image} and ${description} to get the above values that you set inside of your viewmodel taken directly from the current route.
<head>. That broke me :( –
Compony © 2022 - 2024 — McMap. All rights reserved.
og"tags" Facebook won't read them. – Underhung