Codifica URL negli Outlets dei Plugin

Sviluppatore
1

Sto cercando di aggiungere un pulsante di condivisione LinkedIn ai badge in una community ospitata su Discourse di cui sono amministratore.

A tal fine, sto cercando di utilizzare questo Plugin Outlet. Ho incluso il seguente codice nella sezione head di un tema.

<script type='text/x-handlebars' data-template-name='/connectors/badge-contents-top/linkedin-button'>
  <a href="https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io{{@outletArgs.url}}" class="linkedin-share-button">
    <img src="https://download.linkedin.com/desktop/add2profile/buttons/en_US.png " alt="LinkedIn Add to Profile button">
  </a>
</script>

Si noti l’attributo href: https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}.
Il valore di @outletArgs.url assomiglia a https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>. Voglio concentrarmi sulla parte username=<username>.

L’URL non è codificato, il segno di uguale viene passato letteralmente, quindi quando il browser elabora https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>, ignora =\u003cusername\u003e.

Come codifico l’URL qui?

2

Ho gestito questo utilizzando Discourse Theme CLI nel modo seguente:

  • Creato un nuovo tema e l’ho reso un componente (eseguito discourse_theme new e seguito le istruzioni).

  • In javascripts/discourse/connectors/badge-contents-top creato un file JavaScript con contenuto non dissimile da. . .

    import Component from "@glimmer/component";
import { inject as service } from "@ember/service";

export default class LinkedinButton extends Component {
  @service siteSettings;

  get encodedUrl() {
    return encodeURIComponent(this.args.outletArgs.url);
  }
}

  • Nella stessa directory di cui sopra, creato un file Handlebars che contiene approssimativamente l’HTML interno dal tag script nella domanda.

    • Ho dato a questo e al file precedente lo stesso nome, a parte la loro estensione, cioè, per quello che vale.
1 Mi Piace
3

Non vedo un’applicazione di questo? È ridondante?

4

Sì! Grazie per averlo notato.

1 Mi Piace
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.