你好 ![]()
我今天开始在论坛中实施问题收集器,并想分享我创建的超级简单的主题组件。
最终效果如下。
所需内容
- 一个 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]
就是这样!现在您拥有一个作为按钮嵌入帖子中的可用问题收集器!

