清理评论加载的代码

content/search.md

@@ -1,6 +1,5 @@
 ---
 title: 搜索
-date: '2009-03-15T23:48:26+00:00'
 weight: 8
 menu: main
 ---

layouts/partials/comments.html

@@ -4,39 +4,11 @@
 </section>
 
 <div id="comment-box">
-    <iframe id="forum-frame" style="visibility:hidden;border:none;display:block;width:100%;height:0;"></iframe>
+    <iframe id="forum-frame"></iframe>
 </div>
 
+<script type="text/javascript" src="/js/comments.js"></script>
 <script type="text/javascript">
-function show_comment_box() {
-    var frame = document.getElementById("forum-frame");
-    frame.src = "{{ .Site.Params.comment_embed_url }}{{ .Params.forum_id }}";
-    frame.style.height = "800px";
-    frame.style.visibility = "visible";
-}
-
-// https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073
-function is_visible(elem) {
-    var elem_top = elem.getBoundingClientRect().top;
-    var elem_bot = elem.getBoundingClientRect().bottom;
-    var is_vis = (elem_top >= 0) && (elem_bot <= window.innerHeight);
-    return is_vis;
-}
-
-var comment_box = document.getElementById("comment-box");
-// If the comment box is already in the current screen, start loading comments
-if(is_visible(comment_box)) {
-    show_comment_box()
-} else {
-    // Otherwise, attach the action to the scroll event
-    document.body.onscroll = function() {
-        var comment_box = document.getElementById("comment-box");
-        if(is_visible(comment_box)) {
-            // Run only once
-            document.body.onscroll = null;
-            show_comment_box();
-        }
-    }
-}
+    comments_delayed_loading("comment-box", "forum-frame", "{{ .Site.Params.comment_embed_url }}{{ .Params.forum_id }}");
 </script>
 {{ end }}

static/css/custom.css

@@ -27,3 +27,13 @@ a { color: #f05948; }
 }
 .post-nav a, .pagination a { text-decoration: none; }
 .active a { text-decoration: underline; }
+
+/* iframe of Flarum page */
+#forum-frame {
+  display: block;
+  border: none;
+  width: 100%;
+  /* height and visibility will be changed by Javascript on loading */
+  visibility: hidden;
+  height: 0;
+}

static/js/comments.js

@@ -0,0 +1,34 @@
+function comments_delayed_loading(box_id, iframe_id, iframe_url) {
+
+    function show_comment_box() {
+        var frame = document.getElementById(iframe_id);
+        frame.src = iframe_url;
+        frame.style.height = "800px";
+        frame.style.visibility = "visible";
+    }
+
+    // https://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling/488073#488073
+    function is_visible(elem) {
+        var elem_top = elem.getBoundingClientRect().top;
+        var elem_bot = elem.getBoundingClientRect().bottom;
+        var is_vis = (elem_top >= 0) && (elem_bot <= window.innerHeight);
+        return is_vis;
+    }
+
+    var comment_box = document.getElementById(box_id);
+    // If the comment box is already in the current screen, start loading comments
+    if(is_visible(comment_box)) {
+        show_comment_box();
+    } else {
+        // Otherwise, attach the action to the scroll event
+        document.body.onscroll = function() {
+            var comment_box = document.getElementById(box_id);
+            if(is_visible(comment_box)) {
+                // Run only once
+                document.body.onscroll = null;
+                show_comment_box();
+            }
+        }
+    }
+
+}