refactor: better load performance

layouts/partials/comments.html

@@ -1,12 +1,31 @@
-<div id="gitalk-container" style="
-    margin: 20px auto;
-    max-width: 800px;
-    padding: 20px;
-    width: 100%;
-    text-align: left;
-"></div>
-<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
+<div id="gitalk-container"></div>
+<div class='js-toc'></div>
+
 <script>
+    let meta = document.querySelectorAll('.post:not(.on-list) .post-meta')[0];
+    const visitors = `<span id="busuanzi_container_page_pv" style='display:none'> 浏览：<span id="busuanzi_value_page_pv"></span>次</span>`
+    if (meta) meta.innerHTML = meta.innerHTML + visitors
+</script>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
+<script >
+    tocbot.init({
+        // Where to render the table of contents.
+        tocSelector: '.js-toc',
+        // Where to grab the headings to build the table of contents.
+        contentSelector: '.post-content',
+        // Which headings to grab inside of the contentSelector element.
+        headingSelector: 'h1, h2, h3',
+        // For headings inside relative or absolute positioned containers within content.
+        hasInnerContainers: true,
+    });
+</script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
+
+<script defer src="{{ "assets/prism.js" | absURL }}"></script>
+
+<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
+<script >
     const gitalk = new Gitalk({
         clientID: '94eae56b89dcc480bf4d',
         clientSecret: '1e4218c0293a998a9483ab09ba9ace46cabc76b3',