feat: 自定义目录

src/pages/book/index.tsx

@@ -3,7 +3,7 @@ import { Component } from "react";
 import { View, Text, Image } from "@tarojs/components";
 import "./index.scss";
 import { AtButton, AtInput, AtTabBar } from "taro-ui";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import { AtGrid } from "taro-ui";
 import { Swiper, SwiperItem } from "@tarojs/components";
 import { AtCard } from "taro-ui";
@@ -12,13 +12,12 @@ import Taro from "@tarojs/taro";
 import { AtAvatar } from "taro-ui";
 import { AtTag } from "taro-ui";
 import { AtList, AtListItem } from "taro-ui";
-import { AtForm, AtMessage } from "taro-ui";
+import { AtForm, AtMessage, AtDrawer, AtIcon } from "taro-ui";
 import { marked } from "marked";
 import infoText from "./info.md";
 import bookText from "./book.md";
 import youtubeIco from "../../images/youtube.ico";
 
-
 marked.setOptions({
   breaks: true, // 是否回车换行
   gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
@@ -41,15 +40,43 @@ marked.setOptions({
 
 // export default class Index extends Component {
 const Book = () => {
-  const [markText, setmarkText] = useState();
-  const [isWeChat, setisWeChat] = useState(false);
-
   const [book, setbook] = useState(window.localStorage.getItem("book"));
+  const [markText, setmarkText] = useState(book == 1 ? bookText : infoText);
+  const [isWeChat, setisWeChat] = useState(false);
+  const [show, setshow] = useState(false);
+
+  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
+  const contentRef = useRef(null); // 用于获取渲染后的 DOM
 
   useEffect(() => {
     isWeChatFun();
   }, []);
 
+  useEffect(() => {
+    if (contentRef.current) {
+      const h1Elements = contentRef.current.querySelectorAll("h1");
+      const h2Elements = contentRef.current.querySelectorAll("h2");
+
+      const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
+      const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
+
+      setHeaders(h1Texts);
+      // console.log("获取到的 H1 标题:"); // 控制台查看
+      console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
+      console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
+    }
+  }, [markText]); // 监听 HTML 内容变化
+
+  const handleJump = (text) => {
+    const h1Elements = contentRef.current.querySelectorAll("h1");
+    for (let h1 of h1Elements) {
+      if (h1.textContent === text) {
+        h1.scrollIntoView({ behavior: "smooth" });
+        break;
+      }
+    }
+  };
+
   // const handleClick = (value) => {
   //   // 跳转到目的页面，在当前页面打开
   //   Taro.navigateTo({
@@ -114,16 +141,39 @@ const Book = () => {
 
   return (
     <View className="Book">
-      {/* <View className="book_left">1 </View> */}
+      <AtButton
+        onClick={() => {
+          setshow(!show);
+        }}
+      >
+        目录
+      </AtButton>
       <View
+        ref={contentRef}
         className="markdown-body" // 添加 GitHub Markdown 主题类
         dangerouslySetInnerHTML={{
-          __html: marked(book == 1 ? bookText : infoText),
+          __html: marked(markText),
+          // __html: marked(book == 1 ? bookText : infoText),
         }}
       ></View>
-      {/* <View className="book_right"> 22</View> */}
 
-      {/* <View className="bottomDiv"></View> */}
+      <AtDrawer
+        show={show}
+        mask
+        // items={headers}
+        // onItemClick={(index) => {
+        //   handleJump(headers[index]);
+        // }}
+        onClose={() => {
+          setshow(false);
+        }}
+      >
+        {/* <View className="drawer-item">优先展示items里的数据</View> */}
+        {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+        <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View>
+      </AtDrawer>
     </View>
   );
 };

src/pages/book/info.md

@@ -1,3 +1,5 @@
+
+# 第一章
 ## 前言
 
 > 本文是在线电子书,不定时更新
@@ -31,7 +33,7 @@
 申请ypp通过后,就可以设置视频播放广告,产生美金收益
 
 
-
+# 第二章
 
 ## Youtube运营笔记