全站通知:

勾勾册/目录形式

阅读

    

2021-10-21更新

    

最新编辑:顾小满real

阅读:

  

更新日期:2021-10-21

  

最新编辑:顾小满real

来自bilibili游戏中心 - WIKI
跳到导航 跳到搜索
页面贡献者 :
顾小满real

源码

首先使用模板: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:after {
    content: "√";
    background: #90de90;
    color: white;
    padding: 0 4px;
    zoom: 0.7;
    margin-left: 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 可以根据情况自行定义。

实际效果


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

测试1

测试2

测试3

测试4