增加文章左侧标题导航

public/static/css/index.articles.css

@@ -7,14 +7,14 @@
 }
 
 .nav-left-list {
-    text-align: center;
+    text-align: left;
 }
 
 .nav-left-list a {
     display: block;
     padding: 10px 15px;
     border-radius: 5px;
-    margin       : 5px 20px;
+    margin: 5px 0;
 }
 
 .nav-left-list a:hover,
@@ -397,3 +397,7 @@ a.post-item:visited {
     margin-block-end: 0;
     position: absolute;
 }
+
+#post-titles{
+    
+}

view/index/common/_left.html

@@ -14,5 +14,13 @@
             <a href="{:url('Index/index',['category_id'=>$category.id])}" {eq name='$Request.param.category_id|default=0' value='$category.id' } class="current" {/eq}>{$category.title}</a>
             {/volist}
         </div>
+        <div id="post-titles">
+
+            <a style="display: block;" class="ul-group-title">
+            </a>
+            <div class="ul-nav-tree-2">
+
+            </div>
+        </div>
     </div>
 </div>

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>