2019年7月1日
Jerry
5185
2021年1月13日
博客里有个标签云模块，对文章打上对应的标签，更为方便的归档分类。标签云怎么实现多种色彩的展示呢？这里写一下博主用过的两种方法。
一、利用CSS实现
博主前端不是很懂，在网上看到的别人的一个实现。利用CSS的 nth-child，关于 nth-child 的描述如下：
比如我们现在要实现5个为一组的标签云，我们只需要设置为nth-child（5n+xxx）来控制标签的背景颜色就可以。代码如下：
<style>
/*云标签颜色*/
.my-badge:nth-child(5n+1) {
background:#78BBE6;
}
.my-badge:nth-child(5n+2){
background:#FF895D;
}
.my-badge:nth-child(5n+3) {
background:#A3DE83;
}
.my-badge:nth-child(5n+4) {
background:#00BBF0;
}
.my-badge:nth-child(5n+5) {
background:#FF2E63;
}
</style>
<div class="card">
<div class="card-header">
标签云测试1 CSS控制
</div>
<div class="card-body">
<span class="badge my-badge">标签1</span>
<span class="badge my-badge">标签2</span>
<span class="badge my-badge">标签3</span>
<span class="badge my-badge">标签4</span>
<span class="badge my-badge">标签5</span>
<span class="badge my-badge">标签6</span>
<span class="badge my-badge">标签7</span>
<span class="badge my-badge">标签8</span>
<span class="badge my-badge">标签9</span>
<span class="badge my-badge">标签10</span>
</div>
</div>
这样的话，标签就会实现多种色彩，五个一轮。
二、利用bootstrap自带的badge-xxxxx类实现
bootstrap3 和 boostrap4 中都有一个badge组件，而且还有多彩的背景色，用来制作这个标签非常合适：
于是，接下来怎么搞就很明显了：假设也是5个颜色一轮，我们只需要将展现的tags排列起来，索引为index，如果index%5==1 则设置为badge-primary，index%5==2 则设置为badge-secondary。。。以此类推。
算法其实很简单，就是个普通的取余，但是在前端怎么实现呢？博主利用django的模板过滤器，尝试着搞了下面这个办法：
- {% forloop.counter %} 这个可以获取到当前标签的索引。
- {{ value|add:"n" }} 表示给value加上一个数值n，当然n可以为负数，相当于减法。
- {{ value | divisibleby:arg}} 输出value能否被arg整出。
我们把这三个条件糅合在一起即可输出我们的表达式：
<!--
{% if forloop.counter|add:0|divisibleby:5 %} 表示index对5取余获得0
{% if forloop.counter|add:-1|divisibleby:5 %} 表示index对5取余获得1
{% if forloop.counter|add:-2|divisibleby:5 %} 表示index对5取余获得2
{% if forloop.counter|add:-3|divisibleby:5 %} 表示index对5取余获得3
{% if forloop.counter|add:-4|divisibleby:5 %} 表示index对5取余获得4
-->
<div class="card-body">
{% for each in tags %}
{% if forloop.counter|add:0|divisibleby:5 %}
<a href="{% url 'mainapp:tag_detail_url' each.slug %}" target="_blank">
<span class="badge badge-pill badge-danger">{{each.name}}</span></a>
{% endif %}
{% if forloop.counter|add:-1|divisibleby:5 %}
<a href="{% url 'mainapp:tag_detail_url' each.slug %}" target="_blank">
<span class="badge badge-pill badge-primary">{{each.name}}</span></a>
{% endif %}
{% if forloop.counter|add:-2|divisibleby:5 %}
<a href="{% url 'mainapp:tag_detail_url' each.slug %}" target="_blank">
<span class="badge badge-pill badge-secondary">{{each.name}}</span></a>
{% endif %}
{% if forloop.counter|add:-3|divisibleby:5 %}
<a href="{% url 'mainapp:tag_detail_url' each.slug %}" target="_blank">
<span class="badge badge-pill badge-success">{{each.name}}</span></a>
{% endif %}
{% if forloop.counter|add:-4|divisibleby:5 %}
<a href="{% url 'mainapp:tag_detail_url' each.slug %}" target="_blank">
<span class="badge badge-pill badge-warning">{{each.name}}</span></a>
{% endif %}
{% endfor %}
</div>
效果呢，就是博客主页的效果。是不是很简单呢？
原创文章，转载请注明出处：
https://jerrycoding.com/article/colorful-tags
《网站建设》
0
微信
支付宝
