增加文章左侧标题导航

public/static/css/index.articles.css

@@ -7,20 +7,20 @@
 }
 
 .nav-left-list {
-    text-align: center;
+    text-align: left;
 }
 
 .nav-left-list a {
-    display      : block;
+    display: block;
-    padding      : 10px 15px;
+    padding: 10px 15px;
     border-radius: 5px;
-    margin       : 5px 20px;
+    margin: 5px 0;
 }
 
 .nav-left-list a:hover,
 .nav-left-list a.current {
     background-color: #6699CC;
-    color           : #fff;
+    color: #fff;
 }
 
 .logo {
@@ -32,9 +32,9 @@
 }
 
 .session {
-    margin-top      : 15px;
+    margin-top: 15px;
     background-color: #99CCFF;
-    padding         : 15px;
+    padding: 15px;
 }
 
 .session.border {
@@ -42,9 +42,9 @@
 }
 
 .session .header {
-    font-size  : 18px;
+    font-size: 18px;
     font-weight: 600;
-    color      : #036;
+    color: #036;
 }
 
 .search-container {
@@ -56,11 +56,11 @@
 }
 
 .nav-more-list a {
-    display     : inline-block;
+    display: inline-block;
-    white-space : nowrap;
+    white-space: nowrap;
-    color       : #036;
+    color: #036;
     margin-right: 15px;
-    margin-top  : 15px;
+    margin-top: 15px;
 }
 
 .session .info p {
@@ -73,15 +73,15 @@
 
 .tab-list {
     border-bottom: 1px solid #ddd;
-    margin-top   : 15px;
+    margin-top: 15px;
-    font-size    : 16px;
+    font-size: 16px;
 }
 
 .tab-list a {
-    margin-right  : 15px;
+    margin-right: 15px;
-    border-bottom : 2px solid transparent;
+    border-bottom: 2px solid transparent;
     padding-bottom: 10px;
-    display       : inline-block;
+    display: inline-block;
 }
 
 .tab-list a.current {
@@ -90,12 +90,12 @@
 
 .post-item,
 .plus-post-item {
-    display        : flex;
+    display: flex;
     justify-content: flex-start;
-    align-items    : center;
+    align-items: center;
-    margin-top     : 15px;
+    margin-top: 15px;
-    padding-bottom : 15px;
+    padding-bottom: 15px;
-    border-bottom  : 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
 }
 
 .post-item>div:nth-child(2) {
@@ -104,16 +104,16 @@
 
 .post-item .poster,
 .plus-post-item .poster {
-    width              : 160px;
+    width: 160px;
-    height             : 100px;
+    height: 100px;
-    background-size    : cover;
+    background-size: cover;
     background-position: center;
-    background-repeat  : no-repeat;
+    background-repeat: no-repeat;
-    margin-right       : 15px;
+    margin-right: 15px;
 }
 
 .plus-post-item .poster {
-    width : 60px;
+    width: 60px;
     height: 60px;
 }
 
@@ -122,21 +122,21 @@
 }
 
 .post-item .info .title {
-    font-size            : 21px;
+    font-size: 21px;
-    line-height          : 1.3;
+    line-height: 1.3;
-    margin-bottom        : 4px;
+    margin-bottom: 4px;
     /* max-height        : 52px; */
-    display              : -webkit-box;
+    display: -webkit-box;
-    -webkit-line-clamp   : 2;
+    -webkit-line-clamp: 2;
-    overflow             : hidden;
+    overflow: hidden;
-    text-overflow        : ellipsis;
+    text-overflow: ellipsis;
 }
 
 .post-item .info .desc {
-    margin     : 0 0 8px;
+    margin: 0 0 8px;
-    font-size  : 13px;
+    font-size: 13px;
     line-height: 24px;
-    color      : #999;
+    color: #999;
 }
 
 .post-item .info .plus-info {
@@ -144,22 +144,22 @@
 }
 
 .nodata {
-    margin : 60px auto;
+    margin: 60px auto;
     display: block;
-    width  : 40%;
+    width: 40%;
 }
 
 .content-container .title {
-    font-size  : 34px;
+    font-size: 34px;
     font-weight: 700;
     line-height: 44px;
-    color      : #222;
+    color: #222;
 }
 
 .content-container .info {
     margin-top: 12px;
-    font-size : 13px;
+    font-size: 13px;
-    color     : #777;
+    color: #777;
 }
 
 .content-container .info span {
@@ -168,11 +168,11 @@
 }
 
 .content-container .desc {
-    margin     : 0 0 8px;
+    margin: 0 0 8px;
-    font-size  : 13px;
+    font-size: 13px;
     line-height: 24px;
-    color      : #999;
+    color: #999;
-    margin-top : 15px;
+    margin-top: 15px;
 }
 
 .content-container .jump-container {
@@ -188,12 +188,12 @@
 
     .nav-left-list a {
         display: inline-block;
-        margin : 5px;
+        margin: 5px;
     }
 
     .post-item .poster,
     .plus-post-item .poster {
-        width : 80px;
+        width: 80px;
         height: 60px;
     }
 
@@ -203,11 +203,11 @@
 
     .post-item .info .title {
         font-weight: 500;
-        font-size  : 14px;
+        font-size: 14px;
     }
 
     .content-container .title {
-        font-size  : 18px;
+        font-size: 18px;
         line-height: 28px;
     }
 }
@@ -300,13 +300,13 @@ a.post-item:visited {
 
 .ul-content code {
     background-color: #f5f2f0;
-    border-radius   : 3px;
+    border-radius: 3px;
-    font-family     : monospace;
+    font-family: monospace;
-    padding         : 3px;
+    padding: 3px;
 }
 
 .copyright {
-    margin-top : 15px;
+    margin-top: 15px;
     padding-top: 20px;
 }
 
@@ -316,27 +316,27 @@ a.post-item:visited {
 }
 
 #banner .panel {
-    display        : flex;
+    display: flex;
-    align-items    : center;
+    align-items: center;
     justify-content: center;
-    text-align     : center;
+    text-align: center;
-    text-shadow    : 0 0 2px #333;
+    text-shadow: 0 0 2px #333;
-    color          : #fff;
+    color: #fff;
-    z-index        : 99;
+    z-index: 99;
-    height         : 100%;
+    height: 100%;
-    position       : absolute;
+    position: absolute;
-    top            : 0;
+    top: 0;
-    left           : 0;
+    left: 0;
-    width          : 100%;
+    width: 100%;
 }
 
 #banner .index-poster {
-    height             : 100%;
+    height: 100%;
-    width              : 100%;
+    width: 100%;
-    background-size    : cover;
+    background-size: cover;
     background-position: center;
-    position           : absolute;
+    position: absolute;
-    z-index            : 0;
+    z-index: 0;
 }
 
 #banner .title {
@@ -353,29 +353,29 @@ a.post-item:visited {
 }
 
 .post-event {
-    padding      : 10px 0;
+    padding: 10px 0;
     border-bottom: 1px solid #ddd;
 }
 
 .post-event-header {
-    display        : flex;
+    display: flex;
-    align-items    : center;
+    align-items: center;
     justify-content: flex-start;
 }
 
 .post-event-nickname {
-    font-size  : 14px;
+    font-size: 14px;
     font-weight: 600;
     margin-left: 15px;
 }
 
 .post-event-avatar {
-    width              : 40px;
+    width: 40px;
-    height             : 40px;
+    height: 40px;
-    background-size    : cover;
+    background-size: cover;
     background-position: left;
-    border-radius      : 50%;
+    border-radius: 50%;
-    border             : 1px solid #bbb;
+    border: 1px solid #bbb;
 }
 
 .post-event-body {
@@ -388,12 +388,16 @@ a.post-item:visited {
 }
 
 .post-content-inner-copyright {
-    height            : 0;
+    height: 0;
-    line-height       : 0;
+    line-height: 0;
-    margin            : 0;
+    margin: 0;
-    padding           : 0;
+    padding: 0;
-    overflow          : hidden;
+    overflow: hidden;
     margin-block-start: 0;
-    margin-block-end  : 0;
+    margin-block-end: 0;
-    position          : absolute;
+    position: absolute;
+}
+
+#post-titles{
+    
 }

view/index/common/_left.html

@@ -6,13 +6,21 @@
     </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>
+            <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>
+            <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>