diff --git a/src/images/youtube.ico b/src/images/youtube.ico new file mode 100644 index 0000000..7240597 Binary files /dev/null and b/src/images/youtube.ico differ diff --git a/src/pages/book/index.scss b/src/pages/book/index.scss index 51d2e08..9ecf6c8 100644 --- a/src/pages/book/index.scss +++ b/src/pages/book/index.scss @@ -1,8 +1,58 @@ // 在 src/index.scss 中引入 GitHub Markdown 主题 @import "github-markdown-css/github-markdown.css"; +.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; + + + } + +} .Book { padding: 40px; + .markdown-body { font-size: 30px; // color: #72d572; @@ -10,8 +60,24 @@ img { max-width: 100%; - height: auto; /* 保持图像的纵横比 */ + height: auto; + /* 保持图像的纵横比 */ } + + .at-drawer__content { + .at-list { + .at-list__item { + font-size: 30px; + + // background-color: aqua; + .at-list__item-container { + .at-list__item-content {} + } + } + } + } + + } @media (min-width: 1536px) { @@ -26,9 +92,10 @@ // background-color: yellow; .book_left { width: 400px; - height:100%; + height: 100%; background-color: red; } + .markdown-body { width: 100%; max-width: 1400px; @@ -36,10 +103,11 @@ // color: red; // background-color: #72d572; } + .book_right { width: 400px; height: 100%; background-color: greenyellow; } } -} +} \ No newline at end of file diff --git a/src/pages/book/index.tsx b/src/pages/book/index.tsx index 2608fdb..f2bfecf 100644 --- a/src/pages/book/index.tsx +++ b/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,10 +12,11 @@ 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, // 是否回车换行 @@ -39,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([]); // 存储所有

的内容 + 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({ @@ -111,18 +140,59 @@ const Book = () => { }; return ( - - {/* 1 */} - - {/* 22 */} + <> + + + { + Taro.navigateBack({ + delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页 + }); + }} + > + + + {`📗 数字游民`} + { + setshow(!show); + }} + > + + + + + - {/* */} - + { + handleJump(headers[index]); + }} + onClose={() => { + setshow(false); + }} + > + + {/* 如果items没有数据就会展示children */} + {/* + 这是自定义内容 + */} + + + ); }; diff --git a/src/pages/book/info.md b/src/pages/book/info.md index 9780e8f..aac98bf 100644 --- a/src/pages/book/info.md +++ b/src/pages/book/info.md @@ -1,8 +1,6 @@ -🚀 技术杠杆与变现 -1️⃣ PVE: 压榨硬件,超融合,虚拟机 -2️⃣ frp: 内网穿透 -3️⃣ Docker 与 K8S:容器化部署 -4️⃣ GPU:本地大模型,私有化部署 -5️⃣ OTG:边缘计算 npu 与机器视觉 -内容待更新,目录已上线 +# 前言 +## 🚀 一人公司方法论 +对于普通人而言,最好的杠杆依然是`媒体`和`代码` +如今有了AIGC的加持 +以前创作的门槛,已经不再是`门槛`