add page and change disqus to lazyload mode

alsodzy · Nov 2, 2013 · 33d305f · 33d305f
1 parent c829d1f
commit 33d305f
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 50 deletions.
diff --git a/_includes/disqus.html b/_includes/disqus.html
@@ -1,10 +1 @@
-<hr>
 <div id="disqus_thread"></div>
-<script type="text/javascript">
-    var disqus_shortname = 'suyan-zh';
-    (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-    })();
-</script>
diff --git a/_includes/navside.html b/_includes/navside.html
@@ -35,7 +35,7 @@ <h1>标签云</h1>
             </div>
             <div class="panel-group" id="accordion">
               {% for tag in site.tags %} 
-                <div class="panel panel-success">
+                <div class="panel panel-info">
                   <div class="panel-heading">
                     <h4 class="panel-title">
                       <a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#{{ tag[0] }}">{{ tag[0] }}</a>

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -11,7 +11,6 @@
         <div id="container">
           <div id="pjax">
             {{ content }}
-            {% include disqus.html %}
           </div>
         </div>
       </div>

diff --git a/_layouts/page.html b/_layouts/page.html
@@ -4,11 +4,13 @@
 <div class="row">
   <div class="col-md-12 aside3-title">
     <br>
-    <h2>{{ page.title }}</h2>
+    <h2 id="#identifier">{{ page.title }}</h2>
   </div>
   <div class="col-md-12 aside3-content">
-    <div id="content">
+    <div id="page-content">
       {{ content }}
     </div>
   </div>
-</div>
+</div>
+<hr>
+{% include disqus.html %}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -4,7 +4,7 @@
 <div class="row">
   <div class="col-md-12 aside3-title">
     <br>
-    <h2>{{ page.title }}</h2>
+    <h2 id="#identifier">{{ page.title }}</h2>
     {{ page.date | date:"%Y年%m月%d日" }}
   </div>
   <div class="col-md-12 aside3-content">
@@ -21,16 +21,5 @@ <h4 class="panel-title"><a data-toggle="collapse" data-toggle="collapse" href="#
     </div>
   </div>
 </div>
-<script>
-  $(function(){
-    $("#content > h2,#content > h3,#content > h4,#content > h5,#content > h6").each(function(i) {
-        var current = $(this);
-        current.attr("id", "title" + i);
-        tag = current.prop('tagName').substr(-1);
-        $("#nav").append("<div style='margin-left:"+15*(tag-1)+"px'><a id='link" + i + "' href='#title" +i + "'>" + current.html() + "</a></div>");
-    });
-    $("pre").addClass("prettyprint linenums");
-    prettyPrint();
-    $('#content img').addClass('img-thumbnail').parent('p').addClass('center');
-  });
-</script>
+<hr>
+{% include disqus.html %}
diff --git a/index.html b/index.html
@@ -3,5 +3,33 @@
 title: 首页
 ---
 
-这个是首页
+<div class="row">
+  <div class="col-md-6">
+    <div class="panel panel-primary">
+      <div class="panel-heading">最新技术文章</div>
+      {% for post in paginator.posts %}
+        {% if post.category == "技术技巧" %}
+          <a  href='{{ post.url }}' class="list-group-item pjaxlink">
+            {{post.title}}
+          </a>
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+  <div class="col-md-6">
+    <div class="panel panel-primary">
+      <div class="panel-heading">OpenStack Ceilometer专题</div>
+      {% for tag in site.tags %} 
+        {% if tag[0] == 'Ceilometer' %}
+          {% for post in tag[1] %}
+            <a  href='{{ post.url }}' class="list-group-item pjaxlink">
+              {{post.title}}
+            </a>
+          {% endfor %}
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+
+</div>
 
diff --git a/public/js/base.js b/public/js/base.js
@@ -3,26 +3,44 @@ $(document).ready(function() {
   $('[data-toggle=offcanvas]').click(function() {
     $('.row-offcanvas').toggleClass('active');
   });
+  $(document).pjax('.pjaxlink', '#pjax', { fragment: "#pjax", timeout: 10000 });
+  $(document).on("pjax:end", function() {
+      $('.aside3').scrollTop(0);
+      contentEffects();
+  });
+  contentEffects();
 });
-$(document).pjax('.pjaxlink', '#pjax', { fragment: "#pjax", timeout: 10000 });
-$(document).on("pjax:end", function() {
-    $('#container').scrollTop(0);
-    $('.row-offcanvas').removeClass('active');
-    if($("#nav")){
-      $("#content > h2,#content > h3,#content > h4,#content > h5,#content > h6").each(function(i) {
-          var current = $(this);
-          current.attr("id", "title" + i);
-          tag = current.prop('tagName').substr(-1);
-          $("#nav").append("<div style='margin-left:"+15*(tag-1)+"px'><a id='link" + i + "' href='#title" +i + "'>" + current.html() + "</a></div>");
-      }); 
-      $("pre").addClass("prettyprint linenums");
-      prettyPrint(); 
-    }
+function contentEffects(){
+  $('.row-offcanvas').removeClass('active');
+  if($("#nav")){
+    $("#content > h2,#content > h3,#content > h4,#content > h5,#content > h6").each(function(i) {
+        var current = $(this);
+        current.attr("id", "title" + i);
+        tag = current.prop('tagName').substr(-1);
+        $("#nav").append("<div style='margin-left:"+15*(tag-1)+"px'><a id='link" + i + "' href='#title" +i + "'>" + current.html() + "</a></div>");
+    }); 
+    $("pre").addClass("prettyprint linenums");
+    prettyPrint(); 
     $('#content img').addClass('img-thumbnail').parent('p').addClass('center');
-    var disqus_shortname = 'suyan-zh';
-    (function() {
-        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
-        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
-        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
-    })();
-});
+  }
+  // Lazy loading Disqus
+  var ds_loaded = false;
+  var top = $("#disqus_thread").offset().top;
+  var identifier = $('#identifier').text();
+  window.disqus_shortname = 'suyan-zh';
+  window.disqus_identifier = identifier;
+
+  function check(){
+    if ( !ds_loaded && $('.aside3').scrollTop() + $('.aside3').height() >= top ) {
+      $.ajax({
+        type: "GET",
+        url: "http://" + disqus_shortname + ".disqus.com/embed.js",
+        dataType: "script",
+        cache: true
+      });
+      ds_loaded = true;
+    }
+  }
+  $('.aside3').scroll(check);
+  check();
+}