URL-Kodierung in Plugin-Outlets

Entwickler
1

Ich versuche, einen LinkedIn-Teilen-Button zu Badges in einer Discourse-gehosteten Community hinzuzufügen, in der ich Administrator bin.

Zu diesem Zweck versuche ich, diesen Plugin Outlet zu verwenden. Ich habe den folgenden Code in den Kopfbereich eines Themes eingefügt.

<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>

Bitte beachten Sie das href-Attribut: https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}.
Der Wert von @outletArgs.url sieht ungefähr so aus: https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>. Ich möchte mich auf den Teil username=<username> konzentrieren.

Die URL ist nicht kodiert, das Gleichheitszeichen wird buchstäblich übergeben, sodass der Browser, wenn er https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username> verarbeitet, =<username> ignoriert.

Wie kodiert man die URL hier?

2

Ich habe dies mit Discourse Theme CLI auf folgende Weise gelöst:

  • Ein neues Theme erstellt und es zu einer Komponente gemacht ( discourse_theme new ausgeführt und den Anweisungen gefolgt).

  • In javascripts/discourse/connectors/badge-contents-top eine JavaScript-Datei mit Inhalten erstellt, die denen ähneln. . .

    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);
  }
}

  • Im selben Verzeichnis wie oben eine Handlebars-Datei erstellt, die ungefähr den inneren HTML-Code aus dem Skript-Tag in der Frage enthält.

    • Ich habe dieser und der vorherigen Datei denselben Namen gegeben, abgesehen von ihrer Endung, das heißt, was es auch wert ist.
3

Ich sehe keine Anwendung dafür? Ist es überflüssig?

4

Ja! Danke, dass Sie das bemerkt haben.