在主题按钮中集成 Jira 问题收集器

你好 :wave:

我今天开始在论坛中实施问题收集器,并想分享我创建的超级简单的主题组件。

最终效果如下。


所需内容

  • 一个 Jira 问题收集器
  • 一些 JavaScript 知识

获取问题收集器 ID

为了让收集器正常工作,我们需要它的 ID。

进入您选择的问题收集器页面,从 URL 中获取 collectorId 参数。

https://tosdr.atlassian.net/secure/ViewCollector!default.jspa?projectKey=BE&collectorId=176cb88e

在我的例子中,它是 176cb88e

创建一个新主题组件

并在 <head> 部分使用以下代码

将以下键替换为其对应的值

  • MY_COLLECTOR_ID → 176cb88e
  • REPLACE_ME_AJAX → 来自“嵌入此问题收集器” → “在 JavaScript 中嵌入”部分的脚本源
  • MY_PROJECT_KEY → 替换为您问题收集器的项目键,如果您打算插入多个问题收集器。
<script type="text/discourse-plugin" version="0.8">
api.decorateCooked(() => {
    window.ATL_JQ_PAGE_PROPS = $.extend(window.ATL_JQ_PAGE_PROPS, {
        'MY_COLLECTOR_ID': {
            "triggerFunction": function(showCollectorDialog) {
                jQuery(document).on('click', "[data-wrap='jira-bug-MY_PROJECT_KEY'] > p", function(e) {
                    e.preventDefault();
                    showCollectorDialog();
                });
            }
        }
    });
});
</script>
<script>
$(document).ready(function() {
    jQuery.ajax({
        url: "REPLACE_ME_AJAX",
        type: "get",
        cache: true,
        dataType: "script"
    });
});
</script>

我只为我的需求创建了两个 CSS 按钮,您可以自由添加更多。

[data-wrap*="jira-bug-"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        font-weight: normal;
        margin: 1px;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--primary-low);
        background: var(--danger);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

[data-wrap*="jira-feature"] {
    p {
        border-radius: 2em;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0.53em 0.8em;
        border: none;
        margin: 1px;
        font-weight: normal;
        font-size: var(--font-0);
        line-height: normal;
        color: var(--secondary-low);
        background: var(--success-medium);
        cursor: pointer;
        transition: all 0.25s;
    }
    p:hover {
        color: #000;
        background: #fff;
        border-color: #0060df;
    }
}

现在将问题收集器嵌入到帖子中:

[wrap=jira-bug-MY_PROJECT_KEY]
:bug: 报告错误
[/wrap]


[wrap=jira-feature-MY_PROJECT_KEY]
:bulb: 建议功能
[/wrap]

就是这样!现在您拥有一个作为按钮嵌入帖子中的可用问题收集器!

3 个赞