'ss'

src/pages/index/index.jsx

@@ -3,7 +3,7 @@ import Taro from "@tarojs/taro";
 import { View, Text, Image, Button } from "@tarojs/components";
 import "./index.scss";
 import { 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,6 +12,11 @@ import { AtButton } from "taro-ui";
 import { AtSearchBar } from "taro-ui";
 import { Picker } from "@tarojs/components";
 import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
+import { marked } from "marked";
+import infoText from "../book/info.md";
+import bookText from "../book/book.md";
+import index from "./index.md";
+
 import {
   AtModal,
   AtModalHeader,
@@ -80,7 +85,39 @@ const Index = () => {
   const [bookpay, setbookpay] = useState(0);
 
   const [isWeChat, setisWeChat] = useState(false);
+  const [markText, setmarkText] = useState(vip == 1 ? index : index);
+  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
+  const contentRef = useRef(null); // 用于获取渲染后的 DOM
 
+  marked.setOptions({
+    breaks: true, // 是否回车换行
+    gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
+    // pedantic: true, //严格模式
+    // highlight(code:any, lang:any) {
+    //   //  语法高亮
+    //   let val = code;
+    //   if (lang) {
+    //     val = hljs.highlight(lang, code).value;
+    //   } else {
+    //     val = hljs.highlightAuto(code).value;
+    //   }
+    //   return val;
+    // },
+  });
+  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 getOpenidFromUrl = (url) => {
     const pattern = /[?&]openid=([^&#]+)/;
     const match = url.match(pattern);
@@ -400,13 +437,21 @@ const Index = () => {
                   <Image className="cardItem_left_img" src={group}></Image>
                 </View>
                 <View className="cardItem_right">
-                  <View className="cardItem_rightUp">聊天机器人</View>
+                  <View className="cardItem_rightUp">不只云手机</View>
-                  <View className="cardItem_rightDown">智能AI回复/加群</View>
+                  <View className="cardItem_rightDown">折腾技术</View>
                 </View>
               </View>
             </View>
+            <View
+              ref={contentRef}
+              className="markdown-body  markVip" // 添加 GitHub Markdown 主题类
+              dangerouslySetInnerHTML={{
+                // __html: marked(markText),
+                __html: marked(vip == 1 ? index : index),
+              }}
+            ></View>
 
-            <View className="left_btn ">
+            <View className="left_btn">
               {vip != 1 ? (
                 <AtButton
                   onClick={() => {
@@ -416,8 +461,8 @@ const Index = () => {
                       return false;
                     } else {
                       if (!!isWeChat) {
-                        //98元
+                        //58元
-                        payh5("vip", 9800);
+                        payh5("vip", 5800);
                       } else {
                         window.location.href = `https://mp.weixin.qq.com/s/16xcMIgxEEGBPY7fanNq0g`;
                       }
@@ -428,18 +473,24 @@ const Index = () => {
                   size="small"
                   circle
                 >
-                  加群
+                  {`${"加 入 交 流"}`}
                 </AtButton>
               ) : (
                 <View className="vipcode">
                   <Image className="vipcodeImg" src={hackrobot}></Image>
-                  <View onClick={()=>{
+                  <View
-                    window.location.href = `https://memos.hackrobot.org`;
+                    onClick={() => {
-                  }}>👉星球地址: memos.hackrobot.org</View>
+                      window.location.href = `https://memos.hackrobot.org`;
+                    }}
+                  >
+                    👉星球地址: memos.hackrobot.org
+                  </View>
 
-                  <View>添加<span style={{color:'green'}}>微信好友: hackrobot</span></View>
+                  <View>
+                    添加
+                    <span style={{ color: "green" }}>微信好友: hackrobot</span>
+                  </View>
                   <View>获取 账号</View>
-
                 </View>
               )}
             </View>

src/pages/index/index.md

@@ -0,0 +1,6 @@
+👋 还在一个人摸索吗？
+📚 资源共享 & 问答，遇到问题,即时响应
+🌟 在这里，你能得到：
+✅ 业务方向（无人直播, RPA自动化,聊天机器人）
+✅ 技术杠杆（云手机,PVE虚拟化,服务器集群）
+✅ 海外平台（YouTube、TikTok、Saas）

src/pages/index/index.scss

@@ -1,3 +1,71 @@
+// 在 src/index.scss 中引入 GitHub Markdown 主题
+@import "github-markdown-css/github-markdown.css";
+// marktext的换行处理
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-bottom: 10px;
+}
+
+.markdown-body li > p {
+  margin-top: 0px;
+}
+.markVip {
+  padding-left: 100px;
+  padding-right: 100px;
+}
+.markdown-body p {
+  font-size: 30px;
+}
+.book_header_div {
+  width: 100%;
+  height: 80px;
+}
+.book_header {
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 80px;
+  // background-color: aquamarine;
+  // background-color: #f0f5ff;
+  border-bottom: 2px solid #f0f5ff;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .book_header_left {
+    width: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+  .book_header_middle {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+  .book_header_right {
+    width: 100px;
+    // background-color: yellow;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+}
 .index {
   // background-color: #002329;
   // width: 100vw;
@@ -135,7 +203,7 @@
 
       .left_btn {
         // position: fixed;
-        // bottom: 10px;
+        // bottom: -10px;
 
         margin-top: 40px;
         // background-color: aqua;