feat: add article toc (#121)

assets/css/kratos.css

@@ -2125,6 +2125,97 @@ ol {
   padding-left: 25px;
 }
 
+.k-main .sidebar .w-toc .item {
+  margin-left: 10px;
+}
+
+.k-main .sidebar .w-toc .item .ul-toc {
+  position: relative;
+  margin: 10px 0;
+  padding: 20px 10px 20px 0;
+  border-left: 1px solid #eee;
+}
+
+.k-main .sidebar .w-toc .item .ul-toc::before,
+.k-main .sidebar .w-toc .item .ul-toc::after {
+  position: absolute;
+  bottom: 0;
+  left: -6px;
+  width: 11px;
+  height: 11px;
+  border: 2px solid #00a2ff;
+  border-radius: 15px;
+  background-color: #fff;
+  content: "";
+}
+
+.k-main .sidebar .w-toc .item .ul-toc::before {
+  top: 0;
+}
+
+.k-main .sidebar .w-toc .item ul li {
+  position: relative;
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+}
+
+.k-main .sidebar .w-toc .item ul li a {
+  display: block;
+  margin: 0 10px;
+  padding: 8px;
+  border-radius: 4px;
+  color: #333;
+}
+
+.k-main .sidebar .w-toc .item ul li a:hover {
+  background-color: #f7f6f6;
+}
+
+.k-main .sidebar .w-toc .item .ul-3 {
+  padding-left: 0;
+}
+
+.k-main .sidebar .w-toc .item ul li::before {
+  position: absolute;
+  bottom: 0;
+  border: 3px solid #fff;
+  border-radius: 15px;
+  background: #a7a7a7;
+  content: "";
+}
+
+.k-main .sidebar .w-toc .item .li-2::before {
+  top: 10%;
+  left: -6px;
+  width: 11px;
+  height: 11px;
+  border-width: 2px;
+}
+
+.k-main .sidebar .w-toc .item .li-2 a {
+  font-weight: 500;
+  font-size: 15px;
+}
+
+.k-main .sidebar .w-toc .item .li-3::before {
+  top: 30%;
+  left: -6px;
+  width: 11px;
+  height: 11px;
+}
+
+.k-main .sidebar .w-toc .item .li-3 a {
+  padding-left: 25px;
+  font-weight: 400;
+  font-size: 14px;
+}
+
+.k-main .sidebar .w-toc .item .li-2:hover::before,
+.k-main .sidebar .w-toc .item .li-3:hover::before {
+  background: #00a2ff;
+}
+
 @media screen and (max-width: 1310px) {
   .nav-tabs .nav-link {
     padding: 8px 22px;

inc/theme-article.php

@@ -3,7 +3,7 @@
  * 文章相关函数
  * @author Seaton Jiang <seaton@vtrois.com>
  * @license MIT License
- * @version 2021.02.18
+ * @version 2021.05.22
  */
 
 // 文章链接添加 target 和 rel
@@ -521,4 +521,76 @@ function findSinglecomments($postid=0,$which=0){
         return $output[$which];
     }
     return 0;
+}
+
+// 文章目录功能
+function toc_content($content)
+{
+    if (is_singular()) {
+        global $toc_count;
+        global $toc;
+
+        $toc = array();
+        $toc_count = 0;
+        $toc_depth = 3;
+
+        $regex = '#<h([1-' . $toc_depth . '])(.*?)>(.*?)</h\\1>#';
+        $content = preg_replace_callback($regex, 'toc_replace_heading', $content);
+    }
+    return $content;
+}
+add_filter('the_content', 'toc_content');
+
+function toc_replace_heading($content)
+{
+    global $toc_count;
+    global $toc;
+
+    $toc_count++;
+
+    $toc[] = array('text' => trim(strip_tags($content[3])), 'depth' => $content[1], 'count' => $toc_count);
+
+    return "<h{$content[1]} {$content[2]}><a name=\"toc-{$toc_count}\"></a>{$content[3]}</h{$content[1]}>";
+}
+
+function article_toc()
+{
+    global $toc;
+
+    $index = wp_cache_get(get_the_ID(), 'toc');
+
+    if ($index === false && $toc) {
+        $index = '<ul class="ul-toc">' . "\n";
+        $prev_depth = '';
+        $to_depth = 0;
+        foreach ($toc as $toc_item) {
+            $toc_depth = $toc_item['depth'];
+            if ($prev_depth) {
+                if ($toc_depth == $prev_depth) {
+                    $index .= '</li>' . "\n";
+                } elseif ($toc_depth > $prev_depth) {
+                    $to_depth++;
+                    $index .= '<ul class="ul-'.$toc_depth.'">' . "\n";
+                } else {
+                    $to_depth2 = $to_depth > $prev_depth - $toc_depth ? $prev_depth - $toc_depth : $to_depth;
+                    if ($to_depth2) {
+                        for ($i = 0; $i < $to_depth2; $i++) {
+                            $index .= '</li>' . "\n" . '</ul>' . "\n";
+                            $to_depth--;
+                        }
+                    }
+                    $index .= '</li>';
+                }
+            }
+            $index .= '<li class="li-'.$toc_depth.'"><a href="#toc-' . $toc_item['count'] . '">' . $toc_item['text'] . '</a>';
+            $prev_depth = $toc_item['depth'];
+        }
+        for ($i = 0; $i <= $to_depth; $i++) {
+            $index .= '</li>' . "\n" . '</ul>' . "\n";
+        }
+        wp_cache_set(get_the_ID(), $index, 'toc', 360000);
+        $index = '<div class="widget w-toc">' . "\n" . '<div class="title">文章目录</div>' . "\n" . '<div class="item">' . $index . '</div>' . "\n" . '</div>';
+    }
+
+    return $index;
 }

inc/theme-options.php

@@ -529,6 +529,14 @@ function kratos_options()
         'std' => '1',
     );
 
+    $options[] = array(
+        'name' => __('文章目录', 'kratos'),
+        'desc' => __('开启文章页面目录功能，将自动识别到 h3 的标题，并在侧边栏生成文章目录', 'kratos'),
+        'id' => 'g_post_toc',
+        'type' => 'checkbox',
+        'std' => '1',
+    );
+
     $options[] = array(
         'name' => __('文章打赏', 'kratos'),
         'desc' => __('开启文章页面打赏功能', 'kratos'),

single.php

@@ -3,7 +3,7 @@
  * 文章内容
  * @author Seaton Jiang <seaton@vtrois.com>
  * @license MIT License
- * @version 2021.05.18
+ * @version 2021.05.22
  */
 
 get_header();
@@ -146,7 +146,7 @@ $select_col = $col_array[kratos_option('g_article_widgets', 'two_side')];
             </div>
             <?php if (kratos_option('g_article_widgets', 'two_side') == 'two_side'){ ?>
             <div class="col-lg-4 sidebar sticky-sidebar d-none d-lg-block">
-                <?php dynamic_sidebar('sidebar_tool'); ?>
+                <?php dynamic_sidebar('sidebar_tool'); if (kratos_option('g_post_toc', true)) echo article_toc(); ?>
             </div>
             <?php } ?>
         </div>