勾勾册/目录形式

源码

首先使用模板:JS载入mediawiki:bikit-collection.js

{{JS|bikit-collection.js}}

第一个样式：用于定义目录上的勾选状态，可通过background，来定义勾选后背景颜色。注意.mw-editsection {display:none}此行用于隐藏标题自带的编辑按钮

<div class="bwiki-collection-toc" style="display:none">
{{#css:span.toctext.checked:before {
    content: "√";
    background: #90de90;
    color: white;
    padding: 0 4px;
    zoom: 0.7;
    margin-right: 6px;
} 
.mw-editsection {display:none}
}}</div>

第二个样式：用于定义标题上的选择按钮。content文案可根据需求自定义

{{#css:
.bwiki-collection .bwiki-collection-checkbox > div{
display: inline-block;
}
.bwiki-collection .bwiki-collection-checkbox > div:before{
content:"【未完成】";
   color:gray;
   font-size:0.6em;
   cursor:pointer;
}
.bwiki-collection.checked .bwiki-collection-checkbox > div:before{content:"【已完成】";
   color:green;
}
.bwiki-collection.checked + p, 
.bwiki-collection.checked + p + center, 
.bwiki-collection.checked + p + center + p, 
.bwiki-collection.checked + p + center + center, 
.bwiki-collection.checked .mw-headline {
    opacity: 0.5;
}
}}

输出方法：以下文本为输出内容，用于输出计数。

本页面共收录成就 <span class="bwiki-collection-totalnum-achievement"><small style="color:#9a9a9a;font-size:0.6em">统计中...</small></span> 个，<br>
<big>'''你已经完成了 <span class="bwiki-collection-checknum-achievement"><small style="color:#9a9a9a;font-size:0.6em">统计中...</small></span> 个啦！'''</big>

以下代码为记录功能，点击完成与未完成状态。

<div class="bwiki-collection" data-collectionlist="achievement" data-collection="测试1">
====测试1<span class="bwiki-collection-checkbox"></span>====
</div>

<div class="bwiki-collection" data-collectionlist="achievement" data-collection="测试2">
====测试2<span class="bwiki-collection-checkbox"></span>====
</div>

<div class="bwiki-collection" data-collectionlist="achievement" data-collection="测试3">
====测试3<span class="bwiki-collection-checkbox"></span>====
</div>

<div class="bwiki-collection" data-collectionlist="achievement" data-collection="测试4">
====测试4<span class="bwiki-collection-checkbox"></span>====
</div>

※注意 data-collectionlist="achievement" 和 class="bwiki-collection-totalnum-achievement" 中的 achievement 可以根据情况自行定义。

实际效果

本页面共收录成就统计中... 个，
你已经完成了统计中... 个啦！