工作上遇到的問題 , 我有一個 api , 裡面有個 post 方法
這個方法接收惡夢的 JObject , 然後依照不同型別參數去呼叫內部的實作
本來想說看看能否用 Swashbuckle.Examples 去解 , 不過研究一陣子發現暫時無解
後來我發現可以用 remarks 去寫註解豐富範例
因為我有 6 x 6 36 個類型要寫範例 , 如果全部插在 api 上面只能說讀起來噁心 , 所以研究看看怎麼折疊 remarks
首先在 EnableSwaggerUi 找到 InjectJavaScript 開啟註解
1
| c.InjectJavaScript(thisAssembly, "yourjs.js");
|
接著在 Script 資料夾加入 yourjs.js 記得要設定 Embedded Resource 不然吃不到
然後學在 api method 老外打上註解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| ///<remarks>
/// First Schema:
///
/// GET /Todo
/// {
/// "flatId": "62a05ac8-f131-44c1-8e48-f23744289e55",
/// "name": "Name",
/// "surname": "Surname",
/// "personalCode": "12345",
/// "dateOfBirth": "2020-03-30T00:00:00",
/// "phoneNumber": "+37122345678",
/// "email": "email@mail.com"
/// }
///
/// Second Schema:
///
/// GET /Todo
/// {
/// "name": "Name",
/// "surname": "Surname",
/// "personalCode": "12345",
/// "dateOfBirth": "2020-03-30T00:00:00",
/// "phoneNumber": "+37122345678",
/// "email": "email@mail.com"
/// }
///
/// </remarks>
|
實際上解析出來會長這樣的結構
1
2
3
4
5
6
| <div class="markdown">
<pSecond Schema</p>
<pre>
<code>xxxxxxxx</code>
</pre>
</div>
|
接著開始補 js , 這樣一來就可以摺疊了 , api 看起來也比較整潔 , 其他細部怎麼設定產 xml 網路上有一堆我就爛得寫啦 XD
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| //取得 markdown 裡面的 p (asus jaguar 等說明 title)
var titles = document.querySelectorAll('.markdown p')
titles.forEach(function (title) {
console.log(title)
title.addEventListener('click', function () {
//取得下個子項目
var pre = title.nextElementSibling
if (pre.getAttribute('style') === null || pre.getAttribute('style') === 'display: none')
pre.setAttribute('style', 'display: block');
else {
pre.setAttribute('style', 'display: none');
}
})
})
|
後來懶得每次都手動複製很累 , 所以補個偽元素按鈕想說可以吃 click event 沒想到不行
看老外先把主體的 pointer-events 關了 , 然後開啟 before or after 的 pointer-events 就可以模擬這個效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.markdown pre code { pointer-events: none; }
.markdown pre code::before { pointer-events: all; }
.markdown code {
position: relative;
}
.markdown pre code::before {
width: 40px;
height: 40px;
content: '📋';
position: absolute;
top: 10px;
right: 10px;
font-size: 30px;
line-height: 40px;
cursor: pointer;
}
.markdown pre code:active::before{
content: '✔️';
}
|
js
1
2
3
4
5
6
7
8
9
|
var codes = document.querySelectorAll('.markdown pre code')
codes.forEach(function(code) {
code.addEventListener('click', function () {
var testJson = code.innerText;
console.log(testJson);
navigator.clipboard.writeText(testJson);
});
});
|