插件接口的URL编码

[bruno_at_dq]

我正试图在Discourse托管社区的徽章中添加一个领英分享按钮，我是该社区的管理员。

为此，我正尝试使用此插件出口。我在主题的head部分包含了以下代码。

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

请注意href属性：https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/{{@outletArgs.url}}。
@outletArgs.url的值看起来像https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>。我想关注username=<username>部分。

URL未编码，等号被字面传递，因此当浏览器处理https://www.linkedin.com/profile/add?certUrl=https://community.my_community.io/https://community.my_community.io/badges/<badge_id>/<badge_name>?username=<username>时，它会忽略=<username>。

我该如何在这里编码URL？

[bruno_at_dq]

我通过使用 Discourse Theme CLI 并按以下方式操作来处理此问题：

• 创建了一个新主题并将其设为一个组件（运行 discourse_theme new 并按照提示操作）。

• 在 javascripts/discourse/connectors/badge-contents-top 中创建了一个 JavaScript 文件，其内容大致如下：. . .

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

• 在与上面相同的目录中，创建了一个 Handlebars 文件，其中大致包含问题中脚本标签的内部 HTML。

  • 我给这个文件和上一个文件起了相同的名字，只是后缀不同，仅供参考。

[merefield (Robert)]

@bruno_at_dq

@service siteSettings;

我没看到它的应用？它是多余的吗？

[bruno_at_dq]

是的！感谢您发现这一点。