博客动态
Hi!欢迎来到Jerry Coding!喜欢请关注!谢谢!有问题可以留言或者点击下面的QQ交流哦!(最近博主划水中。。更新较慢。。。)
微信扫码

扫一扫关注我

More
关于
New
RSS

实现博客多彩标签云的两种方法

Jerry 2019年7月1日 291  

       博客里有个标签云模块,对文章打上对应的标签,更为方便的归档分类。标签云怎么实现多种色彩的展示呢?这里写一下博主用过的两种方法。

一、利用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 人参与 | 0 条评论

每日一句 (From ONE)
别怕美好的一切消失,咱们先来让它存在。