增加文章左侧标题导航

view/index/common/_left.html

@@ -1,18 +1,26 @@
 <div class="layui-col-md2">
-  <div class="logo">
-    <a href="/">
-      <img src="{:get_source_link(get_system_config('site_logo'))}" alt="">
-    </a>
-  </div>
-  <div class="nav-left-container">
-    <div class="nav-left-list">
-      <a href="/" {eq name='$Request.param.category_id|default=0' value='0'} class="current" {/eq}>全部</a>
-      {volist name='list_header_nav' id='nav'}
-      <a href="{$nav.value}" target="{$nav.target}">{$nav.title}</a>
-      {/volist}
-      {volist name='list_category_first_level' id='category'}
-      <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 class="logo">
+        <a href="/">
+            <img src="{:get_source_link(get_system_config('site_logo'))}" alt="">
+        </a>
+    </div>
+    <div class="nav-left-container">
+        <div class="nav-left-list">
+            <a href="/" {eq name='$Request.param.category_id|default=0' value='0' } class="current" {/eq}>全部</a>
+            {volist name='list_header_nav' id='nav'}
+            <a href="{$nav.value}" target="{$nav.target}">{$nav.title}</a>
+            {/volist}
+            {volist name='list_category_first_level' id='category'}
+            <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>
 </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>