增加文章左侧标题导航

view/index/post/read.html

@@ -71,7 +71,7 @@
             <div class="layui-col-md7">
                 <div class="main-container">
                     <div class="content-container">
-                        <h1 class="title">
+                        <h1 class="title" id="title">
                             {$post.title}
                         </h1>
                         <div class="info">
@@ -217,6 +217,19 @@
         const heti = new Heti('.heti');
         heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
     </script>
+    <script type="html" id="title-group">
+        <div class="ul-nav-tree-2-group">
+            <a class="ul-nav-tree-2-group-title"></a>
+            <div class="ul-nav-tree-2-group-main">
+                
+            </div>
+        </div>
+    </script>
+    <script type="html" id="title-item">
+        <a href="" class="ul-nav-tree-2-item">
+            <div class="ul-nav-tree-2-item-title"></div>
+        </a>
+    </script>
     <script>
 
         layui.use(['form'], function () {
@@ -287,6 +300,64 @@
             layer.msg('复制成功')
         });
     </script>
+
+    <!-- 处理左侧子导航 -->
+    <script>
+        $('.ul-group-title').text('{$post.title}').attr('href', '#title')
+
+        var listPostSubTitle = [];
+        $('.ul-content').find('h1,h2,h3').each(function (index, elem) {
+            var id = 'sub-title-' + index
+            var text = $(elem).text();
+            var type = 'title';
+
+            $(elem).attr('id', id)
+
+            if (elem.nodeName == 'H3') {
+                type = 'item'
+            }
+
+            listPostSubTitle.push({
+                id: id,
+                text: text,
+                type: type
+            });
+        })
+
+
+        listPostSubTitle.forEach(item => {
+            if (item.type == 'title') {
+                var titleGroupElem = $($('#title-group').html())
+                titleGroupElem.appendTo('#post-titles .ul-nav-tree-2')
+                titleGroupElem.find('.ul-nav-tree-2-group-title').text(item.text).attr('href', '#' + item.id)
+            } else if (item.type == 'item') {
+                var titleItemElem = $($('#title-item').html())
+                titleItemElem.appendTo($('#post-titles').find('.ul-nav-tree-2-group').last().find('.ul-nav-tree-2-group-main'))
+                titleItemElem.find('.ul-nav-tree-2-item-title').text(item.text)
+                titleItemElem.attr('href', '#' + item.id)
+            }
+        });
+
+    </script>
+    {if !$Request.isMobile }
+
+    <script>
+
+        var titleTopRange = $('.nav-left-list').outerHeight() + $('.logo').outerHeight() + 30
+
+        $(window).scroll(function () {
+            var st = $(window).scrollTop();
+
+            if (st > titleTopRange) {
+                $('#post-titles').css('position', 'fixed');
+                $('#post-titles').css('top', '10px');
+                $('#post-titles').css('width', $('.nav-left-list').outerWidth() + 'px');
+            } else {
+                $('#post-titles').css('position', 'unset');
+            }
+        });
+    </script>
+    {/if}
 </body>
 
 </html>