AddEvent 代码在 Discourse 中不起作用

支持
1

我试图在 Discourse 中添加一个事件日历的代码。我已经使用了四个空格的缩进，但似乎不起作用。

以下是代码片段：

image

我得到的效果是……

image
image764×387 64.9 KB

我不是专业的程序员，所以如果您能用更简单的语言解释，我将不胜感激。:pray:

2

这里的原因是 Discourse 出于安全考虑会对帖子中的用户输入进行过滤。您肯定不希望随机用户在您的网站上运行脚本，因此我们会将其过滤掉。

您可以使用主题组件来实现此功能。如果您在“主题组件”下的“标头”选项卡中添加如下代码，然后将其应用到您的活动主题中，您就可以使用该嵌入内容。

<script type="text/discourse-plugin" version="0.8">
  const  loadScript  = require("discourse/lib/load-script").default;
  const { next } = require("@ember/runloop");

  api.decorateCookedElement(
    post => {
      const calendars = post.querySelectorAll(`[data-wrap="addEvent"]`);
      if (!calendars.length) return;

      calendars.forEach(calendar => {
        const wrapper = document.createElement("div");
        wrapper.dataset.calendar = calendar.dataset.calendar;
        wrapper.dataset.configure = false;
        wrapper.classList.add("ae-emd-cal");
        calendar.append(wrapper);
      });

      next(() =>
        loadScript("https://addevent.com/js/cal.embed.t1.init.js")
      );
    },
    { id: "AddEvent decorator", onlyStream: true }
  );
</script>

完成后，您可以在帖子中添加如下内容来嵌入 AddEvent 日历。

[wrap=addEvent calendar=bJ306355][/wrap]

您可以更改 calendar=bJ306355 属性，以添加您想要嵌入的特定日历标识符。

最后一步是在您的站点设置中 whitelisting（白名单）AddEvent 脚本（这是另一层安全措施）。

在管理后台搜索 content_security_policy_script_src，并在那里添加以下链接：

https://addevent.com

请告诉我这是否对您有效，我可以将其打包为一个主题组件。

3

嗨 @Johani，

你的方案对我很管用。特此告知。

谢谢！

4

因此，我刚刚创建了一个新的主题组件，用于渲染 AddEvent 日历。

:link: GitHub - graydenshand/discourse_upcoming_addevent: Replace the DiscourseEvent "upcoming events" calendar with an AddEvent embed · GitHub

由于嵌入在帖子中的日历太窄，无法显示桌面版本的嵌入内容，因此该主题组件接管了 DiscourseCalendar 插件的“即将发生的事件”页面。

请注意，为了实现这一点，我不得不自定义 AddEvent 脚本（https://addevent.com/js/cal.embed.t1.init.js），以允许在页面切换之间重新渲染。