¿Qué te gustaría hacer?
En este tema expliqué que estaba intentando añadir un simple script de JavaScript para rotar entre algunas imágenes aleatorias con api.createWidget, y recibí ayuda para usar correctamente api.onPageChange. También planeo hacer algo similar basado en api.decorateWidget usando la solución aquí. Este es el código final que terminé usando para la ubicación above-main-container:
HTML/CSS personalizado en el componente de tema
Head
<script type="text/discourse-plugin" version="0.8">
const h = require("virtual-dom").h;
api.createWidget("top-banner-widget", {
tagName: "div.top-banner",
html() {
let banners = new Array();
let goTo = new Array();
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let bannerCount = 2;
banners[0]="https://example.com/0.jpg";
banners[1]="https://example.com/1.jpg";
goTo[0]="https://google.com";
goTo[1]="https://brave.com";
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
bannerCount-=1;
let randPick = Math.round(bannerCount * Math.random());
let theLink = goTo[randPick];
let theImage = banners[randPick];
api.onPageChange(() => {
this.scheduleRerender();
});
return h("div#top-banner", [
h(
"a.custom-ad-link",
{ href: theLink },
h("img", { src: theImage})
)
]);
}
});
</script>
<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/inject-widget">
{{mount-widget widget="top-banner-widget"}}
</script>
CSS
.top-banner {
padding-bottom: 1em;
display: flex;
clear: both;
max-width: 100%;
background-color: #FFFFFF;
border: none;
box-sizing: border-box;
img {
max-width: 100%;
&.desktop {
display: block;
}
&.mobile {
display: none;
}
}
}
El problema que tengo con estos métodos es que requiere que los usuarios hagan una recarga completa de la página cuando se cambia la URL de origen de la imagen y/o la URL href, ya que todo el script se almacena en caché en el código SPA de Discourse. Por lo tanto, me gustaría aprender un método flexible para realizar el cache busting para este tipo de script, para que obtenga la última versión del JavaScript personalizado en la próxima carga de página del usuario. Prefiero implementarlo como lo estoy haciendo actualmente a través de un componente de tema que creo y añado CSS y JavaScript con el botón Editar CSS/HTML (y no a través de un plugin definido en app.yml o un componente Ember o un repositorio GIT externo). Me pregunto si el plugin oficial de Anuncios de Discourse contendría algún código reutilizable para lograr esto, ya que los cambios en el HTML de los Anuncios de la Casa definidos por el administrador se reflejan inmediatamente en la próxima página a la que navega el usuario.
¿Cuándo lo necesitas?
Muy flexible.
¿Cuál es tu presupuesto, en USD, que puedes ofrecer por esta tarea?
$150 o menos.