Add a tag-cloud widget

Author: yangxueguang

blog/static/blog/css/custom.css

@@ -416,6 +416,18 @@ figure {
 
 /* modified #1 */
 
+/* modified #2 tag */
+.widget-tag {
+    margin-right: -20px;
+}
+
+.widget-tag > a {
+    margin: 0 10px 10px 0;
+    display: inline-block;
+}
+
+/* modified #2 tag end */
+
 .widget-category ul {
     padding: 0;
     margin: 0;

blog/static/blog/js/blog.js

@@ -9,6 +9,7 @@
  * for archive
  *
  * */
+var randomSize = [15, 16, 17, 18, 19, 20, 21, 22];
 $(
     $('.widget-archives .icon').click(function () {
         $(this).next().slideToggle(500);
@@ -37,5 +38,22 @@ $(
             return false
         });
         return false;
+    }),
+
+
+    $.each($('.widget-tag > a'), function () {
+        var size = randomSize[Math.floor(Math.random() * randomSize.length)];
+        $(this).css('font-size', size);
     })
-);
+);
+
+//window.onload = function () {
+//    var widget = document.getElementsByClassName('.widget-tag')[0];
+//
+//    var tags = widget.getElementsByTagName('a');
+//    var randomSize = [15, 17, 19, 21];
+//    for (var i = 0; i < tags.length; i++) {
+//        tags[i].style.fontSize =
+//            randomSize[Math.floor(Math.random() * randomSize.length)]
+//    }
+//};

blog/templates/base.html

@@ -41,7 +41,7 @@ <h1><a href="{% url 'blog:index' %}"><b>Black</b> &amp; White</a></h1>
 
                     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                         <ul class="nav navbar-nav navbar-right">
-                            <li class="cl-effect-11"><a href="index.html" data-hover="Home">首页</a></li>
+                            <li class="cl-effect-11"><a href="{% url 'blog:index' %}" data-hover="Home">首页</a></li>
                             <li class="cl-effect-11"><a href="full-width.html" data-hover="Blog">博客</a></li>
                             <li class="cl-effect-11"><a href="about.html" data-hover="About">关于</a></li>
                             <li class="cl-effect-11"><a href="contact.html" data-hover="Contact">联系我</a></li>

blog/templates/blog/sidebar.html

@@ -39,5 +39,25 @@ <h3 class="widget-title">归档</h3>
         </ul>
     </div>
 
+    <div class="widget widget-tag">
+        <h3 class="widget-title">标签云</h3>
+        <a href="">Django</a>
+        <a href="">Python</a>
+        <a href="">大数据</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编程</a>
+        <a href="">快乐编快编程</a>
+        <a href="">快</a>
+        <a href="">Python</a>
+        <a href="">dasd</a>
+        <a href="">sdas</a>
+        </ul>
+    </div>
+
 
 </aside>