's'

feat: 不显示error
2025-09-09 14:12:29 +08:00 · 2025-09-02 21:12:32 +08:00 · 2025-04-15 14:09:06 +08:00 · 2025-04-10 11:37:47 +08:00 · 2025-04-07 06:50:04 -05:00 · 2025-04-07 06:49:57 -05:00
29 changed files with 6881 additions and 4627 deletions
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-process.env.TARO_API_API="https://web.hackrobot.cn"
+process.env.TARO_API_API="https://api.nomadcna.com"
--- a/.eslintrc
+++ b/.eslintrc
@@ -0,0 +1,13 @@
+{
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "parserOptions": {
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "env": {
+      "browser": true,
+      "node": true,
+      "es2021": true
+    }
+  }
+  
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-# dist/
+dist/
 deploy_versions/
 .temp/
 .rn_temp/
--- a/config/index.js
+++ b/config/index.js
@@ -1,3 +1,7 @@
+import path from "path";
+// const { GenerateSW } = require("workbox-webpack-plugin");
+
+const WebpackObfuscator = require("webpack-obfuscator");
 const config = {
  projectName: "cityh5",

@@ -21,38 +25,61 @@ const config = {
  cache: {
    enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
-  mini: {
-    postcss: {
-      pxtransform: {
-        enable: true,
-        config: {},
-      },
-      url: {
-        enable: true,
-        config: {
-          limit: 1024, // 设定转换尺寸上限
-        },
-      },
-      cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-        config: {
-          namingPattern: "module", // 转换模式，取值为 global/module
-          generateScopedName: "[name]__[local]___[hash:base64:5]",
-        },
-      },
-    },
-  },
+
  h5: {
-    webpackChain (chain) {
+    webpackChain(chain) {
+      chain.output.filename("static/js/[name].[contenthash:8].js");
+      chain.output.chunkFilename("static/js/[name].[contenthash:8].js");
+      chain
+        .plugin("MiniCssExtractPlugin")
+        .use(require("mini-css-extract-plugin"), [
+          {
+            filename: "static/css/[name].[contenthash:8].css",
+            chunkFilename: "static/css/[name].[contenthash:8].css",
+          },
+        ]);
+      if (process.env.NODE_ENV === "production") {
+        // js代码混淆
+        chain.plugin("obfuscator").use(WebpackObfuscator, [
+          {
+            rotateStringArray: true,
+            stringArray: true,
+            stringArrayThreshold: 0.5, // 降低比例，提高速度
+            compact: true,
+            controlFlowFlattening: false, // 关闭，提高速度
+            deadCodeInjection: false, // 关闭，提高速度
+            debugProtection: false,
+            disableConsoleOutput: true,
+            selfDefending: false, // 关闭，提高速度
+            simplify: true, // 开启简化，提高性能
+            // 禁用对 async/await 的转换
+            target: "browser", // 或设置为适合目标环境的 ECMAScript 版本
+            disableOptimizations: true, // 禁用某些优化来避免处理 async/await
+          },
+          ["**/*.js", "!node_modules/**"], // 避免对 node_modules 进行混淆
+        ]);
+      }
+
      chain.module
-        .rule('markdown')
+        .rule("markdown")
        .test(/\.md$/)
-        .use('raw-loader')
-          .loader('raw-loader')
-          .end();
+        .use("raw-loader")
+        .loader("raw-loader")
+        .end();
+      chain.module
+        .rule("ico")
+        .test(/\.ico$/)
+        .use("file-loader")
+        .loader("file-loader")
+        .options({
+          name: "static/images/[name].[ext]",
+        });
    },
+
    esnextModules: ["taro-ui"],
    publicPath: "/",
+    // publicPath: `/v${new Date().getTime()}/`,
+
    staticDirectory: "static",
    postcss: {
      autoprefixer: {
@@ -67,17 +94,19 @@ const config = {
        },
      },
    },
-    // customRoutes: {
-    //   // "页面路径": "自定义路由"
-    //   "/pages/index/index": "/index",
-    //   // '/pages/detail/index': ['/detail'], // 可以通过数组为页面配置多个自定义路由
-    //   "pages/my/index": "/my",
-    //   "pages/meetup/index": "/meetup",
-    //   "pages/meetup/Detail/index": "/detail",
-    // },
+
    router: {
      // basename: '/myapp',
-      mode: "hash", // 或者是 'browser'
+      mode: "browser", // 或者是 'hash'
+      customRoutes: {
+        // "页面路径": "自定义路由"
+        "/pages/index/index": "/",
+        "/pages/book/index": "/book",
+        // '/pages/detail/index': ['/detail'], // 可以通过数组为页面配置多个自定义路由
+        // "pages/my/index": "/my",
+        // "pages/meetup/index": "/meetup",
+        // "pages/meetup/Detail/index": "/detail",
+      },
    },
    // defineConstants: {
    //   HOST: '"/api"'
@@ -86,20 +115,30 @@ const config = {
      // host: 'nomad.hackrobot.cn', // 替换为您的域名
      // port: 10087,            // 选择一个适当的端口号
      proxy: {
-        '/api/': {
+        "/api/": {
          target: JSON.parse('"http://localhost:8700"'), //本地调试端口
          pathRewrite: {
-            '^/api/': '/'
+            "^/api/": "/",
          },
-          changeOrigin: true
-        }
+          changeOrigin: true,
+        },
      },
      // 允许特定域名访问
-      allowedHosts: [
-        // 'bot.hackrobot.cn'
-        'nomadyt.com'
-      ],
-    }
+      allowedHosts: ["nomadyt.com", "localhost", ".nomadyt.com"], // 允许所有 *.nomadyt.com 子域访问
+      client: {
+        overlay: false,
+      },
+    },
+    htmlPluginOption: {
+      favicon: path.resolve(__dirname, "..", "src", "images", "youtube.ico"), // 同样处理 favicon 路径
+      meta: {
+        "cache-control": "no-cache, no-store, must-revalidate",
+        pragma: "no-cache",
+        expires: "0",
+      },
+    },
+
+    target: ["web", "browserslist:> 0.25%, not dead"],
  },
 };

--- a/package.json
+++ b/package.json
@@ -51,7 +51,8 @@
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "sr-sdk-h5": "^1.3.1",
-    "taro-ui": "^3.2.0"
+    "taro-ui": "^3.2.0",
+    "webpack-obfuscator": "^3.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
@@ -68,11 +69,13 @@
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^1.6.1",
+    "javascript-obfuscator": "^4.1.1",
    "postcss": "^8.4.18",
    "react-refresh": "^0.11.0",
    "stylelint": "9.3.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.1.0",
-    "webpack": "^5.78.0"
+    "webpack": "^5.78.0",
+    "workbox-webpack-plugin": "^7.3.0"
  }
 }
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,21 @@
+{
+    "name": "Youtube运营笔记",
+    "short_name": "YT笔记",
+    "start_url": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#ff0000",
+    "icons": [
+      {
+        "src": "/static/images/youtube-192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+      },
+      {
+        "src": "/static/images/youtube-512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+      }
+    ]
+  }
+  
--- a/src/app.js
+++ b/src/app.js
@@ -2,6 +2,7 @@ import { Component } from 'react'
 import SDK from 'sr-sdk-h5'

 import './app.scss'
+import 'animate.css';
 import 'taro-ui/dist/style/index.scss' // 全局引入一次即可

 /**
--- a/src/images/book.svg
+++ b/src/images/book.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
+<g>
+	<path fill="#F9EBB2" d="M56,62H10c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z"/>
+	<g>
+		<path fill="#45AAB8" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
+		<path fill="#45AAB8" d="M56,2H14v50h42h2v-2V4C58,2.896,57.104,2,56,2z"/>
+	</g>
+	<g>
+		<path fill="#394240" d="M60,52V4c0-2.211-1.789-4-4-4H8C5.789,0,4,1.789,4,4v54c0,3.313,2.687,6,6,6h49c0.553,0,1-0.447,1-1
+			s-0.447-1-1-1h-1v-8C59.104,54,60,53.104,60,52z M6,4c0-1.104,0.896-2,2-2h4v50h-2c-1.539,0-2.938,0.584-4,1.537V4z M56,62H10
+			c-2.209,0-4-1.791-4-4s1.791-4,4-4h46V62z M56,52H14V2h42c1.104,0,2,0.896,2,2v46v2H56z"/>
+		<path fill="#394240" d="M43,26H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h20c0.553,0,1-0.447,1-1S43.553,26,43,26z"/>
+		<path fill="#394240" d="M49,20H23c-0.553,0-1,0.447-1,1s0.447,1,1,1h26c0.553,0,1-0.447,1-1S49.553,20,49,20z"/>
+		<path fill="#394240" d="M23,16h12c0.553,0,1-0.447,1-1s-0.447-1-1-1H23c-0.553,0-1,0.447-1,1S22.447,16,23,16z"/>
+	</g>
+	<path opacity="0.2" fill="#231F20" d="M6,4v49.537C7.062,52.584,8.461,52,10,52h2V2H8C6.896,2,6,2.896,6,4z"/>
+</g>
+</svg>
--- a/src/images/demo.svg
+++ b/src/images/demo.svg
--- a/src/images/group.svg
+++ b/src/images/group.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" ?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" id="Layer_1" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+
+<style type="text/css">
+	.st0{fill:#E6E6E6;}
+	.st1{fill:#69C9C9;}
+	.st2{fill:#4D5152;}
+</style>
+
+<g>
+
+<path class="st0" d="M56.3,322.3v-10h-26c3.5-49.6,32.8-94,77.1-116.7c16.2,17.2,39.3,28,64.8,28c2.3,0,4.6-0.1,6.9-0.3   c2,16.9,7.7,32.7,16.4,46.5c-25.3,13.1-47.3,31.1-64.9,52.4L56.3,322.3z"/>
+
+</g>
+
+<g>
+
+<path class="st1" d="M262.1,446.4H102.4c3.6-68.3,43.9-129.7,105.3-160.2c20.8,23,50.9,37.5,84.4,37.5c33.4,0,63.5-14.5,84.4-37.5   c61.4,30.5,101.7,91.9,105.3,160.2H322.1v10h-60V446.4z"/>
--- a/src/images/youtube.ico
+++ b/src/images/youtube.ico
--- a/src/images/youtube.png
+++ b/src/images/youtube.png
--- a/src/images/youtube.svg
+++ b/src/images/youtube.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="red" d="M14.712 4.633a1.754 1.754 0 00-1.234-1.234C12.382 3.11 8 3.11 8 3.11s-4.382 0-5.478.289c-.6.161-1.072.634-1.234 1.234C1 5.728 1 8 1 8s0 2.283.288 3.367c.162.6.635 1.073 1.234 1.234C3.618 12.89 8 12.89 8 12.89s4.382 0 5.478-.289a1.754 1.754 0 001.234-1.234C15 10.272 15 8 15 8s0-2.272-.288-3.367z"/><path fill="#ffffff" d="M6.593 10.11l3.644-2.098-3.644-2.11v4.208z"/></svg>
--- a/src/images/youtube192.png
+++ b/src/images/youtube192.png
--- a/src/images/yt2.svg
+++ b/src/images/yt2.svg
@@ -0,0 +1,106 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<rect x="64" style="fill:#FFFFFF;" width="384" height="512"/>
+<rect id="SVGCleanerId_0" x="106.672" y="370.08" style="fill:#415E72;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_1" x="106.672" y="412.784" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_2" x="106.672" y="434.08" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<rect id="SVGCleanerId_3" x="106.672" y="455.448" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+<path style="fill:#25B6D2;" d="M391.992,338.224H120.008c-8.8,0-16-7.2-16-16V124.888c0-8.8,7.2-16,16-16h272c8.8,0,16,7.2,16,16
+	v197.336C408,331.024,400.8,338.224,391.992,338.224z"/>
+<rect x="66" y="2" style="fill:#FFFFFF;" width="380" height="508"/>
+<path style="fill:#C7D5DD;" d="M444,4v504H68V4H444 M448,0H64v512h384V0L448,0z"/>
+<g>
+	<rect id="SVGCleanerId_0_1_" x="106.672" y="370.08" style="fill:#415E72;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_1_1_" x="106.672" y="412.784" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_2_1_" x="106.672" y="434.08" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<g>
+	<rect id="SVGCleanerId_3_1_" x="106.672" y="455.448" style="fill:#CFDCE5;" width="133.032" height="10.896"/>
+</g>
+<path style="fill:#E04F5F;" d="M391.992,338.224H120.008c-8.8,0-16-7.2-16-16V124.888c0-8.8,7.2-16,16-16h272c8.8,0,16,7.2,16,16
+	v197.336C408,331.024,400.8,338.224,391.992,338.224z"/>
+<g>
+	<rect x="274.96" y="369.04" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+	<rect x="274.96" y="405.272" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+	<rect x="274.96" y="441.52" style="fill:#CFDCE5;" width="133.032" height="25.896"/>
+</g>
+<g>
+	<rect x="274.96" y="441.52" style="fill:#415E72;" width="27.648" height="25.896"/>
+	<rect x="274.96" y="405.272" style="fill:#415E72;" width="27.648" height="25.896"/>
+	<rect x="274.96" y="369.04" style="fill:#415E72;" width="27.648" height="25.896"/>
+</g>
+<g>
+	<path style="fill:#CFDCE5;" d="M405.328,43.672v26.712h-184.16V43.672H405.328 M408,41H218.504v32.048H408V41L408,41z"/>
+	<rect x="372.168" y="41" style="fill:#CFDCE5;" width="35.832" height="32.08"/>
+</g>
+<path style="fill:#E04F5F;" d="M190.168,73.056h-46.92c-1.784,0-3.248-1.456-3.248-3.248v-25.56c0-1.784,1.456-3.248,3.248-3.248
+	h46.92c1.784,0,3.248,1.456,3.248,3.248v25.56C193.416,71.592,191.944,73.056,190.168,73.056z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M149.8,53.464h-3.792V51.44h10.056v2.024h-3.832v11.272H149.8L149.8,53.464z"/>
+	<path style="fill:#FFFFFF;" d="M165.144,61.856c0,1.144,0.04,2.104,0.08,2.888h-2.136l-0.12-1.472h-0.032
+		c-0.416,0.688-1.36,1.68-3.08,1.68c-1.752,0-3.352-1.048-3.352-4.184V55.12h2.432v5.232c0,1.6,0.52,2.64,1.8,2.64
+		c0.968,0,1.6-0.688,1.848-1.304c0.088-0.216,0.144-0.472,0.144-0.752V55.12h2.432v6.736H165.144z"/>
+	<path style="fill:#FFFFFF;" d="M167.688,64.744c0.04-0.656,0.088-1.72,0.088-2.704V50.72h2.432v5.72h0.04
+		c0.592-0.912,1.632-1.536,3.072-1.536c2.352,0,4.032,1.952,4.008,4.88c0,3.456-2.192,5.176-4.368,5.176
+		c-1.24,0-2.352-0.48-3.04-1.656h-0.04l-0.12,1.44C169.76,64.744,167.688,64.744,167.688,64.744z M170.2,60.776
+		c0,0.208,0.024,0.392,0.056,0.576c0.264,0.968,1.104,1.712,2.16,1.712c1.528,0,2.448-1.232,2.448-3.16
+		c0-1.712-0.808-3.08-2.432-3.08c-0.984,0-1.872,0.72-2.16,1.776c-0.032,0.176-0.08,0.392-0.08,0.632v1.544
+		C170.192,60.776,170.2,60.776,170.2,60.776z"/>
+	<path style="fill:#FFFFFF;" d="M181.04,60.616c0.056,1.744,1.416,2.496,2.96,2.496c1.12,0,1.928-0.16,2.672-0.432l0.36,1.68
+		c-0.84,0.336-1.984,0.6-3.368,0.6c-3.112,0-4.96-1.92-4.96-4.872c0-2.656,1.624-5.176,4.696-5.176c3.128,0,4.152,2.568,4.152,4.688
+		c0,0.456-0.04,0.808-0.08,1.024L181.04,60.616z M185.264,58.912c0.024-0.88-0.368-2.352-1.992-2.352
+		c-1.504,0-2.136,1.376-2.232,2.352H185.264z"/>
+</g>
+<g>
+	<path style="fill:#415E72;" d="M108.208,64.744v-5.552L104,51.44h2.768l1.6,3.408c0.456,0.992,0.792,1.744,1.152,2.648h0.032
+		c0.336-0.848,0.712-1.68,1.168-2.648l1.6-3.408h2.744l-4.424,7.704v5.6H108.208z"/>
+	<path style="fill:#415E72;" d="M123.728,59.84c0,3.544-2.48,5.12-4.936,5.12c-2.72,0-4.816-1.872-4.816-4.944
+		c0-3.168,2.072-5.096,4.976-5.096C121.824,54.904,123.728,56.92,123.728,59.84z M116.488,59.944c0,1.848,0.904,3.256,2.384,3.256
+		c1.384,0,2.352-1.36,2.352-3.304c0-1.504-0.672-3.224-2.328-3.224C117.184,56.68,116.488,58.336,116.488,59.944z"/>
+	<path style="fill:#415E72;" d="M134.344,61.856c0,1.144,0.04,2.104,0.08,2.888h-2.136l-0.128-1.472h-0.032
+		c-0.416,0.688-1.36,1.68-3.08,1.68c-1.752,0-3.352-1.048-3.352-4.184V55.12h2.432v5.232c0,1.6,0.52,2.64,1.8,2.64
+		c0.968,0,1.6-0.688,1.848-1.304c0.088-0.216,0.144-0.472,0.144-0.752V55.12h2.432v6.736H134.344z"/>
+	<path style="fill:#415E72;" d="M389.36,62.336c-4.216,0-7.648-3.432-7.648-7.648s3.432-7.648,7.648-7.648
+		c4.216,0,7.648,3.432,7.648,7.648S393.576,62.336,389.36,62.336z M389.36,48.768c-3.256,0-5.912,2.656-5.912,5.912
+		s2.656,5.912,5.912,5.912c3.256,0,5.912-2.656,5.912-5.912S392.616,48.768,389.36,48.768z"/>
+	
+		<rect x="395.373" y="59.304" transform="matrix(0.7967 -0.6044 0.6044 0.7967 42.2993 252.3526)" style="fill:#415E72;" width="1.728" height="8"/>
+</g>
+<g>
+	<path style="fill:#FFFFFF;" d="M234.336,61.504c0.656,0.4,1.616,0.744,2.616,0.744c1.496,0,2.36-0.784,2.36-1.928
+		c0-1.048-0.6-1.656-2.128-2.248c-1.84-0.656-2.984-1.616-2.984-3.2c0-1.768,1.456-3.064,3.648-3.064
+		c1.152,0,1.992,0.264,2.496,0.544l-0.4,1.184C239.576,53.328,238.824,53,237.8,53c-1.544,0-2.128,0.912-2.128,1.688
+		c0,1.056,0.688,1.568,2.248,2.176c1.904,0.752,2.88,1.664,2.88,3.32c0,1.744-1.296,3.256-3.952,3.256
+		c-1.088,0-2.288-0.328-2.888-0.72L234.336,61.504z"/>
+	<path style="fill:#FFFFFF;" d="M243.72,59.488c0.032,2.008,1.304,2.808,2.792,2.808c1.056,0,1.688-0.176,2.248-0.416l0.248,1.056
+		c-0.52,0.24-1.408,0.504-2.704,0.504c-2.496,0-3.984-1.648-3.984-4.088s1.44-4.376,3.8-4.376c2.656,0,3.352,2.32,3.352,3.824
+		c0,0.296-0.032,0.536-0.056,0.672h-5.696C243.72,59.472,243.72,59.488,243.72,59.488z M248.048,58.448
+		c0.024-0.936-0.392-2.4-2.048-2.4c-1.496,0-2.144,1.376-2.264,2.4H248.048z"/>
+	<path style="fill:#FFFFFF;" d="M255.84,63.28l-0.12-1.024h-0.04c-0.456,0.64-1.32,1.208-2.48,1.208c-1.648,0-2.48-1.152-2.48-2.32
+		c0-1.968,1.744-3.04,4.88-3.016v-0.176c0-0.664-0.184-1.888-1.848-1.888c-0.752,0-1.536,0.24-2.112,0.608l-0.36-0.976
+		c0.664-0.424,1.648-0.72,2.672-0.72c2.48,0,3.08,1.688,3.08,3.312v3.04c0,0.712,0.032,1.392,0.144,1.936h-1.336V63.28z
+		 M255.616,59.152c-1.616-0.032-3.44,0.248-3.44,1.816c0,0.96,0.64,1.408,1.392,1.408c1.056,0,1.736-0.664,1.96-1.36
+		c0.056-0.152,0.088-0.328,0.088-0.472V59.152z"/>
+	<path style="fill:#FFFFFF;" d="M259.472,57.704c0-0.96-0.024-1.776-0.08-2.536h1.288l0.056,1.6h0.056
+		c0.368-1.088,1.264-1.776,2.256-1.776c0.16,0,0.272,0.008,0.416,0.04v1.392c-0.152-0.032-0.304-0.04-0.504-0.04
+		c-1.048,0-1.784,0.784-1.984,1.896c-0.032,0.2-0.08,0.424-0.08,0.672v4.328h-1.456v-5.576H259.472z"/>
+	<path style="fill:#FFFFFF;" d="M270.6,62.984c-0.392,0.208-1.24,0.472-2.344,0.472c-2.44,0-4.04-1.656-4.04-4.136
+		c0-2.504,1.72-4.312,4.368-4.312c0.872,0,1.648,0.232,2.048,0.416l-0.336,1.136c-0.36-0.208-0.904-0.384-1.72-0.384
+		c-1.864,0-2.864,1.376-2.864,3.064c0,1.888,1.208,3.04,2.808,3.04c0.84,0,1.392-0.232,1.808-0.4L270.6,62.984z"/>
+	<path style="fill:#FFFFFF;" d="M272.36,51.384h1.472v5.056h0.032c0.24-0.416,0.608-0.784,1.056-1.032
+		c0.424-0.248,0.96-0.416,1.504-0.416c1.104,0,2.832,0.664,2.832,3.464v4.824h-1.472v-4.664c0-1.304-0.48-2.408-1.872-2.408
+		c-0.96,0-1.72,0.664-1.984,1.472c-0.088,0.208-0.112,0.416-0.112,0.712v4.904h-1.472V51.384H272.36z"/>
+</g>
+<rect x="155.224" y="264" style="fill:#415E72;" width="21.592" height="34.912"/>
+<rect x="191.216" y="240.08" style="fill:#FFFFFF;" width="21.592" height="59.064"/>
+<rect x="227.208" y="207.248" style="fill:#415E72;" width="21.592" height="91.888"/>
+<rect x="263.2" y="148.184" style="fill:#FFFFFF;" width="21.592" height="150.952"/>
+<rect x="299.2" y="178.632" style="fill:#415E72;" width="21.592" height="120.48"/>
+<rect x="335.184" y="226.944" style="fill:#FFFFFF;" width="21.592" height="72.16"/>
+</svg>
--- a/src/images/yt3.svg
+++ b/src/images/yt3.svg
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#415E72;" d="M0,355.2v-324c0.104-5.704,4.696-10.296,10.4-10.4h491.2c5.704,0.104,10.296,4.696,10.4,10.4v324H0z"
+	/>
+<g>
+	<path style="fill:#CFDCE5;" d="M512,355.2v41.6c-0.104,5.704-4.696,10.296-10.4,10.4H10.4c-5.704-0.104-10.296-4.696-10.4-10.4
+		v-41.6H512z"/>
+	<rect x="146.4" y="480.8" style="fill:#CFDCE5;" width="219.2" height="10.4"/>
+</g>
+<polygon style="fill:#AAC1CE;" points="328.8,480.8 183.2,480.8 193.6,407.2 318.4,407.2 "/>
+<rect x="20.8" y="41.6" style="fill:#FFFFFF;" width="470.4" height="292.8"/>
+<polygon style="fill:#8BA0AE;" points="318.4,407.2 193.6,407.2 187.792,448.28 320.272,420.424 "/>
+<path style="fill:#E04F5F;" d="M84.368,64.8h149.728c10.336,0,18.72,8.384,18.72,18.72v99.68c0,10.336-8.384,18.72-18.72,18.72
+	H84.368c-10.336,0-18.72-8.384-18.72-18.72V83.52C65.648,73.184,74.032,64.8,84.368,64.8z"/>
+<polygon style="fill:#FFFFFF;" points="136.56,97.544 198.6,133.36 136.56,169.184 "/>
+<g>
+	<rect x="71.824" y="237.576" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="257.76" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="277.952" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="71.824" y="298.16" style="fill:#CFDCE5;" width="176.24" height="6.616"/>
+	<rect x="291.04" y="152.8" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+</g>
+<rect x="291.04" y="152.8" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="109.344" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="109.344" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+<rect x="291.04" y="65.888" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="65.888" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="283.192" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="283.192" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+<rect x="291.04" y="239.728" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="239.728" style="fill:#415E72;" width="32.32" height="30.232"/>
+<rect x="291.04" y="196.264" style="fill:#CFDCE5;" width="155.336" height="30.232"/>
+<rect x="291.04" y="196.264" style="fill:#E04F5F;" width="32.32" height="30.232"/>
+</svg>
--- a/src/images/yt4.svg
+++ b/src/images/yt4.svg
@@ -0,0 +1,99 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<circle style="fill:#E8E8E8;" cx="256" cy="256" r="256"/>
+<rect id="SVGCleanerId_0" x="115" y="68" style="fill:#FFFFFF;" width="282" height="376"/>
+<path id="SVGCleanerId_1" style="fill:#DB2B42;" d="M355.872,316.384H156.128c-6.464,0-11.752-5.288-11.752-11.752v-144.92
+	c0-6.464,5.288-11.752,11.752-11.752H355.88c6.464,0,11.752,5.288,11.752,11.752v144.92
+	C367.624,311.096,362.336,316.384,355.872,316.384z"/>
+<g>
+	<rect id="SVGCleanerId_0_1_" x="115" y="68" style="fill:#FFFFFF;" width="282" height="376"/>
+</g>
+<g>
+	<path id="SVGCleanerId_1_1_" style="fill:#DB2B42;" d="M355.872,316.384H156.128c-6.464,0-11.752-5.288-11.752-11.752v-144.92
+		c0-6.464,5.288-11.752,11.752-11.752H355.88c6.464,0,11.752,5.288,11.752,11.752v144.92
+		C367.624,311.096,362.336,316.384,355.872,316.384z"/>
+</g>
+<g>
+	<path style="fill:#E0E0E0;" d="M365.664,100.072v19.616h-135.24v-19.616H365.664 M367.624,98.112h-139.16v23.536h139.16
+		L367.624,98.112L367.624,98.112z"/>
+	<rect x="341.312" y="98.112" style="fill:#E0E0E0;" width="26.312" height="23.536"/>
+</g>
+<path style="fill:#DB2B42;" d="M207.656,121.648H173.2c-1.312,0-2.384-1.072-2.384-2.384v-18.768c0-1.312,1.072-2.384,2.384-2.384
+	h34.456c1.312,0,2.384,1.072,2.384,2.384v18.768C210.04,120.576,208.96,121.648,207.656,121.648z"/>
+<g>
+	<path style="fill:#FFFFFF;" d="M178.008,107.264h-2.784v-1.488h7.384v1.488h-2.816v8.28h-1.784L178.008,107.264L178.008,107.264z"
+		/>
+	<path style="fill:#FFFFFF;" d="M189.28,113.424c0,0.84,0.032,1.544,0.056,2.12h-1.568l-0.088-1.08h-0.024
+		c-0.304,0.504-1,1.232-2.264,1.232c-1.288,0-2.464-0.768-2.464-3.072v-4.144h1.784v3.84c0,1.176,0.384,1.936,1.32,1.936
+		c0.712,0,1.176-0.504,1.36-0.96c0.064-0.16,0.104-0.344,0.104-0.552v-4.264h1.784V113.424z"/>
+	<path style="fill:#FFFFFF;" d="M191.144,115.544c0.032-0.48,0.064-1.264,0.064-1.984v-8.312h1.784v4.2h0.032
+		c0.432-0.672,1.2-1.128,2.256-1.128c1.728,0,2.96,1.432,2.944,3.584c0,2.536-1.608,3.8-3.208,3.8c-0.912,0-1.728-0.352-2.232-1.216
+		h-0.032l-0.088,1.056H191.144z M192.992,112.632c0,0.152,0.016,0.288,0.04,0.424c0.192,0.712,0.808,1.256,1.584,1.256
+		c1.12,0,1.8-0.904,1.8-2.32c0-1.256-0.592-2.264-1.784-2.264c-0.72,0-1.376,0.528-1.584,1.304
+		c-0.024,0.128-0.056,0.288-0.056,0.464V112.632z"/>
+	<path style="fill:#FFFFFF;" d="M200.952,112.512c0.04,1.28,1.04,1.832,2.176,1.832c0.824,0,1.416-0.12,1.96-0.32l0.264,1.232
+		c-0.616,0.248-1.456,0.44-2.472,0.44c-2.288,0-3.64-1.408-3.64-3.576c0-1.952,1.192-3.8,3.448-3.8c2.296,0,3.048,1.888,3.048,3.44
+		c0,0.336-0.032,0.592-0.056,0.752C205.68,112.512,200.952,112.512,200.952,112.512z M204.056,111.264
+		c0.016-0.648-0.272-1.728-1.464-1.728c-1.104,0-1.568,1.008-1.64,1.728H204.056z"/>
+</g>
+<g>
+	<path style="fill:#2D2D2D;" d="M147.464,115.544v-4.072l-3.088-5.696h2.032l1.176,2.504c0.336,0.728,0.584,1.28,0.848,1.944h0.024
+		c0.248-0.624,0.52-1.232,0.856-1.944l1.176-2.504h2.016l-3.248,5.656v4.112H147.464z"/>
+	<path style="fill:#2D2D2D;" d="M158.864,111.944c0,2.6-1.824,3.76-3.624,3.76c-2,0-3.536-1.376-3.536-3.632
+		c0-2.328,1.52-3.744,3.656-3.744C157.464,108.32,158.864,109.8,158.864,111.944z M153.544,112.024c0,1.36,0.664,2.392,1.752,2.392
+		c1.016,0,1.728-1,1.728-2.424c0-1.104-0.496-2.368-1.712-2.368C154.056,109.624,153.544,110.84,153.544,112.024z"/>
+	<path style="fill:#2D2D2D;" d="M166.656,113.424c0,0.84,0.032,1.544,0.056,2.12h-1.568l-0.088-1.08h-0.024
+		c-0.304,0.504-1,1.232-2.264,1.232c-1.288,0-2.464-0.768-2.464-3.072v-4.144h1.784v3.84c0,1.176,0.384,1.936,1.32,1.936
+		c0.712,0,1.176-0.504,1.36-0.96c0.064-0.16,0.104-0.344,0.104-0.552v-4.264h1.784V113.424z"/>
+	<path style="fill:#2D2D2D;" d="M353.936,113.776c-3.096,0-5.616-2.52-5.616-5.616s2.52-5.616,5.616-5.616s5.616,2.52,5.616,5.616
+		C359.552,111.256,357.032,113.776,353.936,113.776z M353.936,103.816c-2.392,0-4.344,1.952-4.344,4.344s1.952,4.344,4.344,4.344
+		s4.344-1.952,4.344-4.344S356.328,103.816,353.936,103.816z"/>
+	
+		<rect x="356.02" y="113.813" transform="matrix(-0.6044 -0.7967 0.7967 -0.6044 484.7665 469.5985)" style="fill:#2D2D2D;" width="5.896" height="1.272"/>
+	<path style="fill:#2D2D2D;" d="M240.088,113.168c0.48,0.296,1.184,0.544,1.92,0.544c1.096,0,1.736-0.576,1.736-1.416
+		c0-0.768-0.44-1.216-1.56-1.648c-1.352-0.48-2.192-1.184-2.192-2.352c0-1.296,1.072-2.248,2.68-2.248
+		c0.848,0,1.464,0.192,1.832,0.4l-0.296,0.872c-0.272-0.152-0.824-0.392-1.576-0.392c-1.136,0-1.56,0.672-1.56,1.24
+		c0,0.776,0.504,1.152,1.648,1.6c1.4,0.544,2.12,1.216,2.12,2.432c0,1.28-0.952,2.392-2.904,2.392c-0.8,0-1.68-0.24-2.12-0.528
+		L240.088,113.168z"/>
+	<path style="fill:#2D2D2D;" d="M246.984,111.688c0.024,1.472,0.96,2.064,2.048,2.064c0.776,0,1.24-0.128,1.648-0.304l0.184,0.776
+		c-0.384,0.176-1.032,0.368-1.984,0.368c-1.832,0-2.928-1.208-2.928-3s1.056-3.216,2.792-3.216c1.952,0,2.464,1.704,2.464,2.808
+		c0,0.216-0.024,0.392-0.04,0.496h-4.184V111.688z M250.16,110.92c0.016-0.688-0.288-1.76-1.504-1.76
+		c-1.096,0-1.576,1.008-1.664,1.76H250.16z"/>
+	<path style="fill:#2D2D2D;" d="M255.88,114.472l-0.088-0.752h-0.032c-0.336,0.472-0.968,0.888-1.824,0.888
+		c-1.208,0-1.824-0.848-1.824-1.704c0-1.448,1.28-2.232,3.584-2.216v-0.128c0-0.488-0.136-1.384-1.36-1.384
+		c-0.552,0-1.128,0.176-1.552,0.448l-0.248-0.72c0.488-0.312,1.208-0.528,1.96-0.528c1.824,0,2.264,1.24,2.264,2.432v2.232
+		c0,0.52,0.024,1.024,0.104,1.424h-0.984V114.472z M255.72,111.44c-1.184-0.024-2.528,0.184-2.528,1.336
+		c0,0.704,0.472,1.032,1.024,1.032c0.776,0,1.272-0.488,1.44-1c0.04-0.112,0.064-0.24,0.064-0.344V111.44z"/>
+	<path style="fill:#2D2D2D;" d="M258.552,110.376c0-0.704-0.016-1.304-0.056-1.864h0.944l0.04,1.176h0.04
+		c0.272-0.8,0.928-1.304,1.656-1.304c0.12,0,0.2,0.008,0.304,0.032v1.024c-0.112-0.024-0.224-0.032-0.368-0.032
+		c-0.768,0-1.312,0.576-1.456,1.392c-0.024,0.144-0.056,0.312-0.056,0.496v3.176h-1.072v-4.096H258.552z"/>
+	<path style="fill:#2D2D2D;" d="M266.72,114.256c-0.288,0.152-0.912,0.344-1.72,0.344c-1.792,0-2.968-1.216-2.968-3.04
+		c0-1.84,1.264-3.168,3.208-3.168c0.64,0,1.208,0.168,1.504,0.304l-0.248,0.84c-0.264-0.152-0.664-0.28-1.264-0.28
+		c-1.368,0-2.104,1.008-2.104,2.248c0,1.384,0.888,2.232,2.064,2.232c0.616,0,1.024-0.168,1.328-0.296L266.72,114.256z"/>
+	<path style="fill:#2D2D2D;" d="M268.016,105.736h1.08v3.712h0.024c0.176-0.304,0.448-0.576,0.776-0.76
+		c0.312-0.184,0.704-0.304,1.104-0.304c0.808,0,2.08,0.488,2.08,2.544v3.544H272v-3.424c0-0.96-0.352-1.768-1.376-1.768
+		c-0.704,0-1.264,0.488-1.456,1.08c-0.064,0.152-0.08,0.304-0.08,0.52v3.6h-1.08v-8.744H268.016z"/>
+	<rect x="146.312" y="340.304" style="fill:#2D2D2D;" width="219.336" height="8"/>
+</g>
+<g>
+	<rect x="146.312" y="371.6" style="fill:#E0E0E0;" width="219.336" height="8"/>
+	<rect x="146.312" y="387.28" style="fill:#E0E0E0;" width="219.336" height="8"/>
+	<rect x="146.312" y="402.96" style="fill:#E0E0E0;" width="219.336" height="8"/>
+</g>
+<circle style="fill:#FFFFFF;" cx="201.52" cy="212.16" r="17.248"/>
+<g>
+	<path style="fill:#2D2D2D;" d="M200.696,269.496l-16.664-36.128c0,0-17.48,0.232-17.48,16.32s0,19.816,0,19.816
+		S200.816,269.496,200.696,269.496z"/>
+	<path style="fill:#2D2D2D;" d="M202.328,269.496l16.664-36.128c0,0,17.48,0.232,17.48,16.32s0,19.816,0,19.816
+		S202.216,269.496,202.328,269.496z"/>
+</g>
+<polygon style="fill:#8AD5DD;" points="201.512,235.144 191.112,235.144 201.512,258.168 211.92,235.144 "/>
+<g>
+	<path style="fill:#FFFFFF;" d="M313.512,259.488h-50.928c-2.848,0-5.168-2.328-5.168-5.168v-45.248
+		c0-2.848,2.328-5.168,5.168-5.168h50.928c2.848,0,5.168,2.328,5.168,5.168v45.248C318.68,257.16,316.352,259.488,313.512,259.488z"
+		/>
+	<polygon style="fill:#FFFFFF;" points="344.296,259.488 325.872,243.976 325.872,219.416 344.296,203.896 	"/>
+</g>
+</svg>
--- a/src/images/ytGpt.png
+++ b/src/images/ytGpt.png
--- a/src/index.html
+++ b/src/index.html
@@ -1,30 +1,39 @@
 <!DOCTYPE html>
 <html>
+
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-touch-fullscreen" content="yes">
+  <!-- <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes"> -->
+  <!-- 安卓webapp -->
+  <!-- <meta name="mobile-web-app-capable" content="yes">
+  <meta name="theme-color" content="#ffffff">
+  <meta name="application-name" content="Youtube运营"> -->
+
  <meta name="format-detection" content="telephone=no,address=no">
  <meta name="apple-mobile-web-app-status-bar-style" content="white">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
-  <link rel="apple-touch-icon" href="/static/images/images/touxiang.png" />
-  <link
-    rel="icon"
-    sizes="192x192"
-    href="/static/images/images/touxiang.png"
-  />
-  <title>异度星球</title>
-  <meta name="description" content="折腾技术,数字游民社区">
-  <meta property="og:description" content="折腾技术,数字游民社区">
-  <meta name="twitter:description" content="折腾技术,数字游民社区">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <!-- 添加icon图标 -->
+  <!-- <link rel="apple-touch-icon" href="/static/images/images/youtube192.png" />
+  <link rel="icon" sizes="192x192" href="/static/images/images/youtube192.png" />
+  -->
+
+  <!-- <link rel="icon" type="image/x-icon" href="/static/images/youtube.ico"> -->
+  <title>Youtube运营</title>
+  <meta name="description" content="Youtube运营笔记">
+  <meta property="og:description" content="Youtube运营笔记">
+  <meta name="twitter:description" content="Youtube运营笔记">
+
  <script><%= htmlWebpackPlugin.options.script %></script>
  <!-- 禁止缓存 -->
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
 </head>
+
 <body>
  <div id="app"></div>
 </body>
-</html>
+
+</html>
--- a/src/pages/book/book.md
+++ b/src/pages/book/book.md
@@ -1,43 +1,616 @@
-## 一人公司方法论
+# 前言

-> 公司化运营业务,但并不是注册企业主体
+> 本文是在线电子书,不定时更新

-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/book.png?imageSlim" title="" alt="book.png" width="248">
+你看到的`电子书`,一个在线的网页

-这本书是基于H5页面的`单页书籍`,会不定时更新
+内容会根据作者的经历和心得,不定时更新

-本主要基于个人的学习,实践,总结一套方法论,包含了`道`和`术`
+当然,如果你也可以关注公众号:

-读者可以参考借鉴
+`Eric的云游日记`

-主题包含并不限于以下:
+加群交流

- 云手机+微信机器人+AIGC+边缘计算
+一个人走得开,一群人走的远

- youtube频道获利

- 独立开发者

- 跨境电商
+> 声明:

- 旅行+远程办公
+本人不会针对Youtube内容进行收费
+
+也不进行账号买卖
+
+文中内容`仅供参考`

 ---

-## 简介

-> 数字游民实践者

-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/avatar.jpg?imageSlim" title="" alt="avatar.jpg" width="254">
+油管适合做为`副业`尝试

-曾经是程序员,业余开发软件工具
+申请ypp通过后,就可以设置视频播放广告,产生美金收益

-有公司主体,运营跨境电商亚马逊
+# 为什么选择Youtube?
+
+
+
+
+
+## Youtube运营笔记
+
+> 媒体是普通人的最好的杠杆
+
+从佛系到认真的运营youtube(油管),也快有1年的时间了
+
+在这里分享一些心得,以及踩过的坑
+
+> 成本低
+
+自媒体是普通人最好的杠杆,只需要1部手机,就可以拍摄vlog,也可以剪辑影片
+
+现在的剪辑软件,不仅在手机端可以方便操作,还结合的ai功能,比如
+
+- 语音翻译/克隆
+
+- 自动生成双语字幕
+
+- 特效/音效
+
+随时随地都可以剪辑+上传
+
+> 赚美金,回报高
+
+同样的视频,在不同的平台上传后,收益汇率不一样
+
+油管结算是美金,换成人民,就有7倍左右的购买力
+
+而如果你居住下三四线城市,或者县城,那么由于生活成本低
+
+每月即使1000$的收益,都可以过的不错了
+
+> 商业模式健康
+
+youtube给创作者的收益,长视频是`55%`,短视频shorts是`45%`
+
+可以说是世界上很慷慨的公司了
+
+仅仅是平台广告,就能够带来巨大的收益
+
+不用去接`业配/商单`,以及自己带货,纯粹的视频不会让人厌恶
+
+---
+
+# 开通YPP(合作伙伴计划)
+
+> 1000粉丝和4000小时观看时长
+
+
+
+
+
+开通ypp的`基础`门槛是:1000个粉丝和4000小时观看时长
+
+之所以说是基础,是因为最后还要被`审核`
+
+如果人工审核不通过,那么一切努力都是徒劳
+
+> ypp是youtube官方的`合作伙伴计划`
+
+开通之后,无论是直播/短视频shorts还是长视频,都可以自动或者手动投放广告
+
+从而赚取收益
+
+> 快速开通的方式
+
+- 1.直接买号
+
+- 2.刷粉刷量
+
+- 3.制造爆款视频
+
+- 4.直播引流,计算时长
+
+youtube买号的方式,是最快的,极限情况
+
+- 3天左右,就可以上传视频
+
+- 7天就可以完全迁移管理员
+
+这已经是最快的速度了,毕竟ip更换和`品牌频道`交易的规则就是这样
+
+> 在哪里买号?
+
+
+
+
+
+一个youtube账号的正常报价在2k-3k左右,具体看交易平台,以及托管人出价
+
+在这里本人不做推荐,因为有被骗过
+
+海外网站无序备案,大多是利用wordpress建站+信用卡收款,你根本不知道背后运营的人是谁
+
+而且即便是有信誉的交易
+
+无一例外,都会提醒你:如果交易账号,导致`ypp被收回`,购买者自行承担风险
+
+想想你花了2-3k人民币,结果最后买了一个最终时区没有获利资格的账号
+
+> 刷粉刷量
+
+
+
+
+
+如果你不想买卖账号,也可以选择刷量的方式,而这个成本,其实也在2k左右
+
+平台会利用第三方国家,提供的`电子农场`,给账号点击关注,和播放,积累粉丝和观看时长
+
+但是一般该国家都是极度落后,且货币价值低
+
+youtube官方,算法会检测到刷量行为,不仅会有清空,还有封号的风险
+
+即便是没有处理,粉丝的质量,也决定的账号的权重,youtube限流,0播放,ypp的rpm单价极低
+
+所以结论是,刷量和买卖账号一样,风险很大,代价很大
+
+唯一的好处,就是快,刷量7天,待数据同步更新要7天,审核1-3天,半个月就能起号
+
+就看你能不能抗住试错成本
+
+> 爆款视频
+
+
+
+
+
+
+如果某个视频,击中了youtube官方的爆款算法,那么就会像病毒一样
+
+凭借1视频,快速涨粉,积累播放时长
+
+爆款除了当前的热点事件,也有长期的流量词
+
+一个新人,本身就在摸索运营,所以做好,是要赌概率的
+
+很多都是3-6个月,才勉强达到开通ypp的资格
+
+也以为者,之前没有开通ypp的流量,都是无法变现
+
+> 直播引流
+
+
+
+
+
+这个是我比较推荐的1个,因为`直播权重高`
+
+所以可以快速积累观看时长
+
+注意,我说的直播,并不是依赖`ffmpeg`或者`OBS`的推流直播
+
+而是手机+实时摄像头
+
+只有真实的场景和互动,youtube的推荐就会极高
+
+# 网络与环境
+
+## 出海赚美金,ip不行,都是白塔
+
+> 普通ip
+
+科学上网,如果只是为了增长眼界,可以使用`搬瓦工`推出的[just m socks](https://justmysocks.net/members/aff.php?aff=12475)
+
+
+
+
+但`机场`的坏处就是,ip并不是纯净,也不是独享的
+
+会有很多人共用,一旦你经营社交媒体,就会被限流,甚至封号
+
+那么just m socks值不值的购买呢?-值得,在`速度快,稳定`的前提下,它可以作为`前置代理`
+
+后续会讲讲`前置代理+落地代理`
+
+> 独立ip
+
+
+
+
+但如果是为了`收益`,做自媒体,最基本要使用`独立ip`
+
+独立的意思,就是独享,不与他人共同使用
+
+最简单的方案,就是购买vps服务器,比如
+
+- [vultr](https://www.vultr.com/?ref=8985003)
+
+- [搬瓦工-bandwagonhost](https://bandwagonhost.com/aff.php?aff=25463)
+
+前者支持`支付宝`,且按分钟计算,可随时停用
+
+后者针对国内线路做优化,速度快,稳定
+
+具体的方式就是,开通vps服务器后,使用`xx`一键脚本,安装代理服务
+
+可自行谷歌,不在此推荐
+
+> 静态住宅ip
+
+
+
+
+
+无论是youtube还是tiktok,社交媒体,都会检查ip
+
+一旦发现是机房ip,而不是住宅ip,就会降权
+
+所以出海赚赚美金的第一步,就是`静态住宅ip`
+
+这里推荐 [proxy-cehap](https://app.proxy-cheap.com/r/bmcMoY),只需要3$/m,就可以拥有可靠的ip地址
+
+但它只提供`http`和socks`2种基本协议
+
+如果直接使用,是没有办法正常科学的上网的,必须使用`链式代理`
+
+也就是把之前提到[just m socks](https://www.vultr.com/?ref=8985003)自部署的代理,作为前置节点
+
+而它作为落地节点
+
+`链式代理`,是成本最低的方案,后续会展开如何操作
+
+> 住宅ip-vps服务器
+
+
+
+
+
+前面提到了`机场`/`独立ip`/`静态住宅ip`
+
+那么能不能让vps服务器的ip本身就是静态住宅ip呢?
+
+有,但是相比之前的方案,会贵一些,需25$-30$最低
+
+但是能就解决非常核心的应用场景
+
+- 直播推流
+
+- 协议提速
+
+毕竟链式代理,经过中转之后,有2层,会慢太多
+
+## 链式代理如何操作?
+
+> 软件方案
+
+安卓或者电脑,都可以使用支持singbox的客户端,比如
+
+- [nekobox](https://github.com/MatsuriDayo/NekoBoxForAndroid)
+
+新建2个分组, 在其中的分支,设置landProxy(落地节点),即可
+
+> 硬件方案
+
+买一个支持openwrt的开发板,比如nanopi
+
+然后刷固件,包含`passwall2`
+
+使用xray进行节点分流即可,也是设置`落地节点`
+
+---
+
+# 硬件设备与剪辑软件
+
+## 4k高清
+
+> 使用`剪映`进行剪辑
+
+在商业软件中,剪映,已对普通创者者做了优化
+
+不用像专业的剪辑师一样,了解adobe的各种理念和操作
+
+
+
+运营youtube的细节是
+
+- 输出成4K高清,AI 补帧
+
+- 生成srt字幕 (支持双语)
+
+当然,开源免费的剪辑软件也有[shotcut](https://github.com/mltframework/shotcut)
+
+
+
+---
+
+## 游戏笔记本
+
+> 使用`显卡`渲染
+
+
+
+建议入手一个`游戏笔记本`,其最低可以包含
+
+- 8GB显卡
+
+- 1TB固态硬盘
+
+- 2k高清显示屏
+
+这对剪辑视频来说,可以大大节省时间,也避免了硬盘空间的不足的情况
+
+当然,从性价比来说,品牌肯定不是适合电竞的`外星人`,而是`机械革命`之类
+
+> 配件:`视频采集卡`
+
+如果不是拍摄,而是录制屏幕,制作教程类
+
+可以准备1个视频采集卡,最好有hdml`环出`功能
+
+这样可以在硬件间进行录制,而不影响主屏幕
+
+---
+
+# Adsense账号与PIN实体信件
+
+adsense是googel的收益账户,与gmail,youtube等谷歌旗下应用是独立的
+
+所以开通adsense后,再手动与频道进行绑定
+
+
+
+其中adsense又分为`site`和`youtube`
+
+查看收益数据的时候.点击`adsense for youube`进入后台
+
+一般油管会在每月6号左右,完成上个月数据统计
+
+打款会在月末
+
+最低打款金额是100$,大多数人,可能没那么快达到
+
+## PIN码接收
+
+> 验证真实地址
+
+谷歌会要求输入PIN code,也就是6位数验证码
+
+才会正式开通adsense收款
+
+
+
+在经营youtube频道的时候,你可以给频道设置国家`美国`,它与adsense没有关系
+
+如果在中国国内
+
+可以填写真实的住址,但是谨记:一定在末尾添加`(+86手机号)`
+
+不然邮政的快递员没有办法联系上你,就会退回
+
+当然如果忘记了,也可以联系所在城市的邮政客服,确认是否国际信件
+
+收到PIN码的时候,与所在国家位置相关,国内半个月也能收到  
+
+
+---
+
+# 收款与结汇
+
+> 招商银行储蓄卡
+
+
+
+
+
+做出海业务,大家其实很关心怎么收款
+
+而youtube的adsense是可以`直接打款`到招商银行卡的外汇
+
+如果需要转换成人民币,在招商app里进行`结汇`就可以了
+
+那么,其他银行卡可以吗?,答案是`可以`
+
+但是建议用招商,毕竟`商业银行`里,它的服务态度和开放性是比较好的
+
+> wise
+
+
+
+
+
+如果你有`护照`,那么就可以注册[wise]()账号
+
+它会给你开通多个国家的银行账号,就算个户,而是公户,也可以解决外汇收款
+
+但除了护照,还有1个难点是`入金激活`
+
+这个可以自行谷歌相关的教程,一旦激活成功,收款就多一个选择
+
+## 税务证明
+
+如果收款数额较大,银行也会要求出具相关的税务证明
+
+这个也可以在网上搜索相关详细的教程
+
+值得注意的是,adsense打款前,要把美国/新加坡的税务资料进行填写
+
+不然会按最大扣税率进行打款,少了30%的收益,可就很难受喽
+
+---
+
+# 24小时无人直播
+
+>  使用ffmpeg推流
+
+
+
+油管有3种视频形式
+
+- 直播live
+
+- 长视频video
+
+- 短视频shorts
+
+直播live,就可以借助ffmpeg进行24小时推流直播,只要准备一段素材循环播放就好了
+
+比如有的频道是`助眠`,有的是`知识科普`
+
+之前在`网络`一章提到过使用vps服务器-[vultr](https://www.vultr.com/?ref=8985003)搭建独立ip
+
+如果仅仅是代理,科学的上网,云端的服务器闲置有些浪费
+
+只需要一行代码,就可以24小时直播
+
+```
+ffmpeg -re -stream_loop -1 -i xx.mp4 \
+    -c:v libx264 -preset veryfast -b:v 4500k -maxrate 4500k -bufsize 9000k \
+    -c:a aac -b:a 128k -ar 44100 -ac 2 \
+    -f flv "rtmp://a.rtmp.youtube.com/live2/YOUR_STREAM_KEY"
+
+```
+
+> OBS推流直播
+
+
+
+同ffmpeg一样,obs也是开源免费,但区别在于它是客户端
+
+需要在图形操作系统使用,比如windows,mac os
+
+由于是GUI界面,只需要再设置里,输入youtube的推流url和密钥
+
+就可以无限直播了
+
+> 安卓开发板
+
+
+
+
+
+
+前端提到了ffmpeg和obs,它们适合在PC直播-长视频
+
+那如果直播形式,类似tiktok或者抖音的9:16比例呢?
+
+那么安卓开发板,没有 电池,就不用担心发热爆炸事故
+
+也可以利用xposed的camera模块,替换uvc摄像头的实时视频流
+
+手机短视频直播,油管的`权重更高`
+
+记住,直播的收益不高,但是它的观看时长是记入统计的,可以累积申请ypp合作后半计划
+
+---
+
+# 扩展获利方案
+
+> wordpress建站,接入`adsense广告`
+
+
+
+
+
+在前面的`开通ypp`一章,已经强调过adsense其实区分了网站和youtube
+
+利用开源的`wordpress建站`,就可以轻松接入谷歌广告
+
+只需要后台安装google插件即可,自动关联,审核
+
+> 宝塔面板
+
+前面针对vps服务器 [vultr](https://www.vultr.com/?ref=8985003) 的使用,提到以下方式
+
+- 独立ip,科学代理脚本
+
+- 24小时ffmpeg命令,推流直播
+
+那么安装`宝塔面板`之后,就可以立马安装`wordpress程序`
+
+- 新建一个wordpress网站
+
+当用户观看视频后,也会查看`简介`里的网址
+
+这样除了视频广告,网站的广告也可以增加一份收益
+
+> 知识产品: 电子书/视频教程
+
+
+
+如果你自身的专业领域,有知识底蕴
+
+那么可以总结后,发布到`kindle`或者`udmey`
+
+以电子书和视频教程的形式,教授学习
+
+> sass网站或者ios app
+
+
+
+由于AI的普及,编程已经不是程序员的专利
+
+小白也可以借助`vscode`或`cursor`等编辑器,借助内置AI插件,开发产品
+
+
+如果有兴趣,可以去搜索创始人的故事,非常有启发性
+
+
+---
+
+# 展望和结束语
+
+> 为什么我要写这本小书?
+
+
+
+如果你去电商或者实体书店,寻找youtube运营的书籍,几乎没有
+
+大多都是tiktok电商/直播带货相关的
+
+而互联网的在线资料,也大多是寥寥无几的博客,中文更是匮乏
+
+在此分享一些经历,供大家参考,避免踩坑
+
+> 不会完结,持续更新
+
+这是初版的目录
+
+
+
+后续我会更新内容,比如:
+
+- 如何选题,制作封面?
+
+- 好用的chrome插件
+
+- 搬运/二创/与AIGC
+
+- 等等
+
+内容都是纯手写编辑,没有借助AI,当然也是随性分享
+
+暂时没有做整理
+
+后续会根据读者的反馈,进行梳理,拓展
+
+## 数字游民
+
+youtube运营,作为`副业`,在下班后尝试,也一个很有性价比的选择
+
+一部手机就以足够进行实验
+
+如果你也想成为一个`数字游民`,从自媒体入手,低成本,收益高
+
+我个人也不段尝试成为一个数字游民
+
+
+
+
+
+有兴趣的可以去阅读

-平时爱折腾技术,以`树莓派`为主

-目前方向是偏户外/旅行

-以youtube频道作为副资产获利

-最近在策划`coffeechat以及小型沙龙`
--- a/src/pages/book/index.config.js
+++ b/src/pages/book/index.config.js
@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '一人公司方法论'
+  navigationBarTitleText: 'Youtube运营笔记'
 }
--- a/src/pages/book/index.scss
+++ b/src/pages/book/index.scss
@@ -1,37 +1,125 @@
-
 // 在 src/index.scss 中引入 GitHub Markdown 主题
-@import 'github-markdown-css/github-markdown.css';
+@import "github-markdown-css/github-markdown.css";

-.Book {
-  padding: 40px;
-//   font-size: 30px !important;
-  // color: #666;

-  .markdown-body{
-    font-size: 30px !important;
-  }
-  img {
-    max-width: 100%;
-    height: auto; /* 保持图像的纵横比 */
-  }
-  .formCode {
+// 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;
+}
+
+
+.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;
-    .codeBtn {
-      background-color: aquamarine;
-      // height: 80px;
-      // color: red;
+    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;
+  }
+
+  img {
+    max-width: 100%;
+    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) {
+  .Book {
+    width: 100%;
+    // height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    // background-color: yellow;
+    .book_left {
+      width: 400px;
+      height: 100%;
+      background-color: red;
+    }
+
+    .markdown-body {
+      width: 100%;
+      max-width: 1400px;
+      font-size: 22px;
+      // color: red;
+      // background-color: #72d572;
+    }
+
+    .book_right {
+      width: 400px;
+      height: 100%;
+      background-color: greenyellow;
    }
  }
-
-  .joinSalon {
-    // position: relative;
-    // bottom: 20px;
-    // position: fixed;
-    width: 700px;
-    font-weight: 600;
-    background-color:#72D572 ;
-    border-color: #72D572 ;;
-  }
-
 }
--- 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,45 @@ 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(() => {
+    //  window.localStorage.removeItem("book");
    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.trim() === text.trim()) {
+        // if (h1.textContent === text) {
+        h1.scrollIntoView({ behavior: "smooth" });
+        break;
+      }
+    }
+  };
+
  // const handleClick = (value) => {
  //   // 跳转到目的页面，在当前页面打开
  //   Taro.navigateTo({
@@ -55,18 +86,18 @@ const Book = () => {
  //   });
  // };

-    // 是否在微信客户端
-    const isWeChatFun = () => {
-      var ua = navigator.userAgent.toLowerCase();
-      if (ua.indexOf("micromessenger") != -1) {
-        setisWeChat(true);
-        return true;
-      } else {
-        setisWeChat(false);
-        return false;
-      }
-    };
-  
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
  const payh5 = (type, total_fee = 1000) => {
    // console.log("111");
    Taro.request({
@@ -110,20 +141,91 @@ const Book = () => {
    });
  };

-
  return (
-    <View className="Book">
-      <View
-        className="markdown-body" // 添加 GitHub Markdown 主题类
-        dangerouslySetInnerHTML={{
-          __html: marked(book == 1 ? bookText : infoText),
-        }}
-      ></View>
+    <>
+      <View className="book_header_div"></View>
+      <View className="book_header">
+        <View
+          className="book_header_left"
+          onClick={() => {
+            Taro.redirectTo({
+              url: `/`,
+            });
+            // Taro.navigateBack({
+            //   delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
+            // });
+          }}
+        >
+          <AtIcon value="chevron-left"></AtIcon>
+        </View>
+        <View className="book_header_middle">{`Youtube运营`}</View>
+        <View
+          className="book_header_right"
+          onClick={() => {
+            setshow(!show);
+          }}
+        >
+          <AtIcon value="bullet-list"></AtIcon>
+        </View>
+      </View>
+      <View className="Book">
+        <View
+          ref={contentRef}
+          className="markdown-body" // 添加 GitHub Markdown 主题类
+          dangerouslySetInnerHTML={{
+            // __html: marked(markText),
+            __html: marked(book == 1 ? bookText : infoText),
+          }}
+        ></View>

-      <View className="bottomDiv"></View>
-      {/* 判断有没有wxid,是否女性 */}
-      {book != 1 ? (
-        <AtButton
+        <AtDrawer
+          className="book_AtDrawer"
+          show={show}
+          mask
+          items={headers}
+          onItemClick={(index) => {
+            handleJump(headers[index]);
+          }}
+          onClose={() => {
+            setshow(false);
+          }}
+        >
+          <View className="drawer-item"></View>
+          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+          {/* <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View> */}
+        </AtDrawer>
+
+        {/* 判断是否是微信 */}
+        {!isWeChat && <div style={{ color: "red" }}>请在手机微信打开</div>}
+
+        {/* 判断有没有wxid */}
+        {book != 1 ? (
+          <AtButton
+            type="primary"
+            size="normal"
+            className="joinSalon"
+            onClick={() => {
+              if (book == 1) {
+                return false;
+              } else {
+                if (!!isWeChat) {
+                  //98元
+                  payh5("book", 9800);
+                } else {
+                  window.location.href = `https://mp.weixin.qq.com/s/16xcMIgxEEGBPY7fanNq0g`;
+                }
+              }
+            }}
+          >
+            {`阅读更多`}
+          </AtButton>
+        ) : (
+          <span style={{ color: "green" }}>持续更新中....</span>
+        )}
+
+        {/* <AtButton
          type="primary"
          size="normal"
          className="joinSalon"
@@ -132,19 +234,18 @@ const Book = () => {
              return false;
            } else {
              if (!!isWeChat) {
-                // 19.8元
-                payh5("book", 1980);
+                // 198元
+                payh5("group", 29800);
              } else {
-                // setmeetupQR(true);
+                window.location.href = `https://mp.weixin.qq.com/s/GBU3THKaXRRkdpZXH_18jw`;
              }
            }
          }}
        >
-          {/* {meetup == 1 ? "已加入" : `立即加入`} */}
-          {`阅读更多`}
-        </AtButton>
-      ) : null}
-    </View>
+          {`游民社群`}
+        </AtButton> */}
+      </View>
+    </>
  );
 };

--- a/src/pages/book/index2.tsx
+++ b/src/pages/book/index2.tsx
@@ -0,0 +1,248 @@
+// @ts-nocheck
+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, useRef } from "react";
+import { AtGrid } from "taro-ui";
+import { Swiper, SwiperItem } from "@tarojs/components";
+import { AtCard } from "taro-ui";
+import { AtImagePicker } from "taro-ui";
+import Taro from "@tarojs/taro";
+import { AtAvatar } from "taro-ui";
+import { AtTag } from "taro-ui";
+import { AtList, AtListItem } from "taro-ui";
+import {
+  AtForm,
+  AtMessage,
+  AtDrawer,
+  AtIcon,
+  AtTimeline,
+  AtDivider,
+} 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) 规范
+  // 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;
+  // },
+});
+
+// const renderer = new marked.Renderer();
+// // 使用拓展
+// marked.use({ renderer });
+
+// export default class Index extends Component {
+const Book = () => {
+  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.trim() === text.trim()) {
+        console.log("Current h1 text:", h1.textContent); // 输出每个 h1 的文本
+        // if (h1.textContent === text) {
+        h1.scrollIntoView({ behavior: "smooth" });
+        break;
+      }
+    }
+  };
+
+  // const handleClick = (value) => {
+  //   // 跳转到目的页面，在当前页面打开_
+  //   Taro.navigateTo({
+  //     url: "/pages/index/index",
+  //   });
+  // };
+
+  // 是否在微信客户端
+  const isWeChatFun = () => {
+    var ua = navigator.userAgent.toLowerCase();
+    if (ua.indexOf("micromessenger") != -1) {
+      setisWeChat(true);
+      return true;
+    } else {
+      setisWeChat(false);
+      return false;
+    }
+  };
+
+  const payh5 = (type, total_fee = 1000) => {
+    // console.log("111");
+    Taro.request({
+      method: "POST",
+      url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
+      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
+
+      data: {
+        callback_url: window.location.href,
+        openid: window.localStorage.getItem("openid"),
+        total_fee: total_fee, // 金额,单位:分
+        type: type, //订单类型 book/meetup/video/vip
+      },
+      header: {
+        "content-type": "application/json", // 默认值
+      },
+      success: function (res) {
+        console.log(res.data);
+        // window.alert(res.data.jsapi);
+        WeixinJSBridge.invoke(
+          "getBrandWCPayRequest",
+          {
+            // 以下6个支付参数通过payjs的jsapi接口获取
+            // appId: "wxc5205a653b0259bf",
+            // timeStamp: "1701401644",
+            // nonceStr: "KhOYB0wFV6j9qyQK",
+            // package: "prepay_id=wx01113404850024729b35f4d69b73500000",
+            // signType: "MD5",
+            // paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
+            ...(res?.data?.jsapi ?? {}),
+          },
+          function (res) {
+            // 支付成功
+            if (res.err_msg == "get_brand_wcpay_request:ok") {
+              window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
+              WeixinJSBridge.call("closeWindow");
+            }
+          }
+        );
+      },
+    });
+  };
+
+  return (
+    <>
+      <View className="book_header_div"></View>
+      <View className="book_header">
+        <View
+          className="book_header_left"
+          onClick={() => {
+            Taro.redirectTo({
+              url: `/`,
+            });
+            // Taro.navigateBack({
+            //   delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
+            // });
+          }}
+        >
+          <AtIcon value="chevron-left"></AtIcon>
+        </View>
+        <View className="book_header_middle">{`📗 Youtube运营日记`}</View>
+        <View
+          className="book_header_right"
+          onClick={() => {
+            setshow(!show);
+          }}
+        >
+          <AtIcon value="bullet-list"></AtIcon>
+        </View>
+      </View>
+      <View className="Book">
+        <View
+          ref={contentRef}
+          className="markdown-body" // 添加 GitHub Markdown 主题类
+          dangerouslySetInnerHTML={{
+            __html: marked(markText),
+            // __html: marked(book == 1 ? bookText : infoText),
+          }}
+        ></View>
+
+        {/* 目录 */}
+        <AtDrawer
+          className="book_AtDrawer"
+          show={show}
+          mask
+          items={headers}
+          onItemClick={(index) => {
+            handleJump(headers[index]);
+          }}
+          onClose={() => {
+            setshow(false);
+          }}
+        >
+          <View className="drawer-item"></View>
+          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+          {/* <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View> */}
+        </AtDrawer>
+
+        {/* 分割线 */}
+        <AtDivider>
+          {/* <AtIcon value="check-circle"></AtIcon> */}
+          <span> 更新日志</span>
+          {/* <AtIcon value="check-circle"></AtIcon> */}
+        </AtDivider>
+
+        {/* 更新日志 */}
+        <View className="log">
+          <AtTimeline
+            pending
+            items={[
+              {
+                title: "新建电子书",
+                content: ["2025年4月4日"],
+                icon: "check-circle",
+              },
+              {
+                title: "目录大纲",
+                content: ["2025年4月5日"],
+                icon: "clock",
+              },
+              {
+                title: "核心内容",
+                content: ["2025年4月6日"],
+                icon: "clock",
+              },
+              {
+                title: "新增日志log",
+                content: ["2025年4月7日"],
+                icon: "clock",
+              },
+            ]}
+          ></AtTimeline>
+        </View>
+      </View>
+    </>
+  );
+};
+
+export default Book;
--- a/src/pages/book/info.md
+++ b/src/pages/book/info.md
@@ -1,43 +1,39 @@
-## 一人公司方法论

-> 公司化运营业务,但并不是注册企业主体

-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/book.png?imageSlim" title="" alt="book.png" width="248">
+# 目录

-这本书是基于H5页面的`单页书籍`,会不定时更新
+> 🚀 为什么选择Youtube?

-本主要基于个人的学习,实践,总结一套方法论,包含了`道`和`术`
+- 开通YPP(合作伙伴计划)
+- Adsense账号注册
+- PIN挂号信验证
+- 外汇收款

-读者可以参考借鉴
+> 🚫 风控设置

-主题包含并不限于以下:
+- 网络:静态住宅ip (链式代理)
+- gps定位
+- 环境设置:指纹浏览器

- 云手机+微信机器人+AIGC+边缘计算
+> 💰 邪修进阶

- youtube频道获利
+- 刷粉刷量
+- 直接购买ypp账号

- 独立开发者
+> 💻 技术运营

- 跨境电商
+- 24小时无人直播
+- 硬件:运营相机/拇指相机/AI眼镜
+- 剪辑:字幕翻译/语音克隆
+- AIGC:数字化生成

- 旅行+远程办公

---

-## 简介
+> 💡 疑难杂症

-> 数字游民实践者
+- 未通过ypp申请:如何申诉
+- 搬运侵权处理
+- 限流如何解决

-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/avatar.jpg?imageSlim" title="" alt="avatar.jpg" width="254">

-曾经是程序员,业余开发软件工具

-有公司主体,运营跨境电商亚马逊
-
-平时爱折腾技术,以`树莓派`为主
-
-目前方向是偏户外/旅行
-
-以youtube频道作为副资产获利
-
-最近在策划`coffeechat以及小型沙龙`
--- a/src/pages/index/index.config.js
+++ b/src/pages/index/index.config.js
@@ -1,3 +1,3 @@
 export default {
-  navigationBarTitleText: '异度星球'
+  navigationBarTitleText: 'Youtube运营笔记'
 }
--- a/src/pages/index/index.jsx
+++ b/src/pages/index/index.jsx
@@ -32,7 +32,7 @@ import emoji from "../../images/emoji.png";
 import phone from "../../images/phone.png";
 import robot from "../../images/robot.png";
 import nomad from "../../images/nomad.png";
-import book from "../../images/book.png";
+// import book from "../../images/book.png";
 import qrcode from "../../images/qrcode.png";

 import meetup from "../../images/meetup.jpg";
@@ -40,6 +40,19 @@ import bookqr from "../../images/bookqr.jpg";
 import loft from "../../images/loft.png";
 import AIGC from "../../images/AIGC.png";
 import robot192 from "../../images/robot192.png";
+import youtubesvg from "../../images/youtube.svg";
+import youtube2 from "../../images/yt2.svg";
+import youtube3 from "../../images/yt3.svg";
+import youtube4 from "../../images/yt4.svg";
+import ytGpt from "../../images/ytGpt.png";
+
+import demo from "../../images/demo.svg";
+import group from "../../images/group.svg";
+import book from "../../images/book.svg";
+
+import youtubeIco from "../../images/youtube.ico";
+import youtube from "../../images/youtube.png";
+import youtube192 from "../../images/youtube192.png";

 // export default class Index extends Component {
 const Index = () => {
@@ -83,6 +96,18 @@ const Index = () => {
    }
  };

+  // pwa安装弹窗
+  // useEffect(() => {
+  //   window.addEventListener("beforeinstallprompt", (event) => {
+  //     event.preventDefault();
+  //     let installPrompt = event;
+  //     // 显示安装按钮
+  //     document.getElementById("install-btn").addEventListener("click", () => {
+  //       installPrompt.prompt();
+  //     });
+  //   });
+  // }, []);
+
  // 获取openid
  const getOpenid = () => {
    // let newparams = Taro.getCurrentInstance().router.params;
@@ -249,13 +274,25 @@ const Index = () => {
      }/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
      // url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
      success: function (res) {
-        console.log("访问提醒发送成功");
+        // console.log("访问提醒发送成功");
      },
    });
  };

-  // 入群申请
+  const sendNtfy = () => {
+    // fetch("https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1", {
+    //   method: "POST", // PUT works too
+    //   body: "Backup successful 😀",
+    // });

+    Taro.request({
+      method: "POST",
+      url: `${`https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1`}`,
+      success: function (res) {
+        console.log("访问提醒发送成功");
+      },
+    });
+  };
  useEffect(() => {
    let inwechat = isWeChatFun();
    if (inwechat) {
@@ -325,489 +362,146 @@ const Index = () => {
    });
  };

+  const goRead = () => {
+    Taro.navigateTo({
+      url: "/pages/book/index",
+    });
+  };
+
  return (
-    <View className="index">
-      {/* <Button
-        onClick={() => {
-          // 跳转到目的页面，在当前页面打开
-          Taro.navigateTo({
-            url: "/pages/group/index",
-          });
-        }}
-      >
-        111
-      </Button> */}
+    <>
+      <View className="index">
+        {/* 在线图书 */}

-      {/* 公众号 */}
-      <View
-        className="index-title"
-        onClick={() => {
-          // window.location.href=""
-        }}
-      >
-        <AtAvatar
-          size="small"
-          circle
-          // image="https://www.hackrobot.cn/wp-content/uploads/2023/05/cropped-cropped-Screenshot-2023-05-22-at-17.26.38.png"
-          image={touxiang}
-        ></AtAvatar>
-        <View className="yidooplanet">异度世界</View>
-      </View>
+        {/* 参考资料https://readmake.com/ */}
+        <View className="index_book  animate__animated animate__pulse">
+          <View className="index_book_left">
+            <View className="left_title">《Youtube运营笔记》</View>
+            {/* <View className="left_text">数字游民-手册1</View> */}

-      {/* 标签 */}
-      <View className="index-tags animate__animated animate__pulse">
-        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
-          独立开发者
-        </AtTag>
-        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
-          跨境电商
-        </AtTag>
-        <AtTag className="index-AtTag" type="primary" AtNavBar={true} circle>
-          树莓派
-        </AtTag>
-      </View>
+            {/* 卡片 */}
+            <View className="card">
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image
+                    className="cardItem_left_img youtubeSvg"
+                    src={youtubesvg}
+                  ></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">出海赚美金</View>
+                  <View className="cardItem_rightDown">
+                    开通YPP合作伙伴计划
+                  </View>
+                </View>
+              </View>
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image className="cardItem_left_img" src={book}></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">持续更新</View>
+                  <View className="cardItem_rightDown">在线电子书-免费</View>
+                </View>
+              </View>
+              <View className="cardItem">
+                <View className="cardItem_left">
+                  <Image className="cardItem_left_img" src={group}></Image>
+                </View>
+                <View className="cardItem_right">
+                  <View className="cardItem_rightUp">群聊交流</View>
+                  <View className="cardItem_rightDown">
+                    一个人走得快,一群人走的远
+                  </View>
+                </View>
+              </View>
+              {/* <View className="cardItem">
+                <View className="left_mobile">
+                  <Text>🚀 油管踩坑笔记</Text>
+                  <Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
+                  <Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
+                  <Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
+                  <Text>4️⃣ AI:辅助剪辑/生成视频</Text>
+                  <Text>5️⃣ -----------------</Text>

-      <View className="index-article">
-        {/* className="at-article__p" */}
-        <View>
-          普通的独立开发者,平时喜欢折腾树莓派
-          <br />
-          副业是做跨境电商
-          <br />
-          做一个<span className="spanText">数字游民</span>ing
-        </View>
-      </View>
-
-      {/* 付费合集 */}
-      <View className="index-list">
-        <AtList>
-          <AtListItem
-            title="云手机 🔥"
-            arrow="right"
-            // hasBorder={false}
-            thumb={phone}
-            onClick={() => {
-              Taro.navigateTo({
-                url: "/pages/sphone/index",
-              });
-              // window.location.href =
-              //   "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3555705062712901639#wechat_redirect";
-            }}
-          />
-          <AtListItem
-            title="微信机器人"
-            arrow="right"
-            // hasBorder={false}
-            thumb={robot}
-            onClick={() => {
-              window.location.href =
-                // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect";
-                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3629790245010128902#wechat_redirect";
-            }}
-          />
-          <AtListItem
-            title="AIGC"
-            arrow="right"
-            // hasBorder={false}
-            thumb={AIGC}
-            onClick={() => {
-              window.location.href =
-                // "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545545030499270661#wechat_redirect";
-                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3635342254190739460#wechat_redirect";
-            }}
-          />
-          {/* <AtListItem
-            title="数字游民"
-            arrow="right"
-            // hasBorder={false}
-            thumb={nomad}
-            onClick={() => {
-              window.location.href =
-                "https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzU4NTgyNDUxNw==&action=getalbum&album_id=3545541605766168582#wechat_redirect";
-            }}
-          /> */}
-        </AtList>
-      </View>
-
-      {/* 已付费的用户才展示活动 */}
-      <View className="index-meetup animate__animated animate__pulse">
-        <AtCard
-          // note="提示文字"
-          // extra="2024/09/18"
-          // extra="已加入:200+"
-          title="加群"
-          thumb="http://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png"
-        >
-          <View className="meetup-card">
-            {/* 左边 */}
-            <View className="meetup-left">
-              <Image
-                style="width: 100%;height: 100px;background: #fff;"
-                // src={meetup}
-                src={loft}
-              />
+                  <Text>🔥 一起实践,交流</Text>
+                </View>
+              </View> */}
            </View>

-            {/* 右边 */}
-            <View className="meetup-right">
-              <View className="title"> 技术交流:云手机/机器人/AI </View>
-              <View className="address">
-                <AtIcon value="map-pin" size="30" color="#F00"></AtIcon>
-                <span>异度世界</span>
-              </View>
-              <View className="meetBtn">
-                {/* <View>
-                  <AtIcon value="clock" size="30" color="#F00"></AtIcon>
-                  19:00--21:00
-                </View> */}
-                <View className="meetupSrcItem">
-                  {[touxiang, girl, cat].map((item, index) => {
-                    return (
-                      <View className="meetupSrc">
-                        <Image
-                          style="width: 20px;height: 20px;background: #fff;"
-                          src={item}
-                        />
-                      </View>
-                    );
-                  })}
-                </View>
-                <View
-                  className="join"
-                  style={{
-                    backgroundColor: !!userInfo?.activity_status
-                      ? "#1890ff"
-                      : // : null,
-                        "#1890ff",
-                    //
-                  }}
-                  onClick={() => {
-                    Taro.navigateTo({
-                      url: "/pages/salon/index",
-                    });
-                    return false;
-                    if (userInfo?.activity_status == "1") {
-                      // 已预约
-                      Taro.atMessage({
-                        message: "已预约成功",
-                        type: "warning",
-                      });
-                    } else if (userInfo?.activity_status == "2") {
-                      // 已预约
-                      Taro.atMessage({
-                        message: "审核中",
-                        type: "warning",
-                      });
-                    } else {
-                      if (!!wxid) {
-                        // 发起预约
-                        const userUpdateData = {
-                          activity_status: "2", // 审核中
-                        };
-                        Taro.request({
-                          method: "PUT",
-                          // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
-                          url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
-                          data: userUpdateData,
-                          header: {
-                            "Content-Type": "application/json",
-                          },
-                          success: function (res) {
-                            // 预约成功
-                            // Taro.atMessage({
-                            //   message: "预约成功",
-                            //   type: "success",
-                            // });
-                            if (res.data.code == "200") {
-                              setmeetupToast(true);
-                            }
-                          },
-                          fail: function (err) {},
-                          complete: function (finy) {
-                            window.location.reload();
-                          },
-                        });
-                      } else {
-                        setmeetupQR(true);
-                      }
-                    }
-                  }}
-                >
-                  {/* {userInfo?.activity_status == "2"
-                    ? "审核中"
-                    : userInfo?.activity_status == "1"
-                    ? "已报名"
-                    : // : "立即报名"}
-                      "已满"} */}
-                  {`加入`}
-                </View>
-              </View>
+            <View className="left_btn ">
+              <AtButton
+                onClick={() => {
+                  try {
+                    sendNtfy();
+                  } catch (err) {
+                    console.error("Error sending notification:", err);
+                  }
+                  goRead();
+                }}
+                className="startRead"
+                type="primary"
+                size="small"
+                circle
+              >
+                开始阅读
+              </AtButton>
            </View>
          </View>
-        </AtCard>
-      </View>
-
-      {/* 在线图书 */}
-      {/* 参考资料https://readmake.com/ */}
-      <View className="index-book">
-        <View className="bookImg">
-          <Image
-            style="width: 40%px;height:100%;background: #fff;"
-            src={book}
-          />
-        </View>
-        <View className="book-middle"></View>
-        <View className="nomad-right">
-          <View className="nomad-title">
+          <View className="index_book_img">
            <Image
-              style="width: 30px;height:30px;background: #fff;"
-              src={nomad}
+              // style="width: 40%px;height:100%;background: #fff;"
+              src={ytGpt}
            />
-            <View className="bookNmae">一人公司方法论</View>
          </View>
-          <View className="subtitle">多元自动化收入</View>
-          <View className="bookText">
-            {/* 两个核心主题: <br /> */}
-            1. 云手机+微信机器人+AIGC
-            <br />
-            2. youtube获利 <br />
-            3. 跨境电商
-            <br />
-            4. 独立开发者
-            <br />
-            5. 旅行与远程办公
-            <br />
-          </View>
-          <View
-            className="bookPrice"
-            onClick={() => {
-              // 19元解锁书籍
-              // payh5("bookpay", 10);
-              Taro.navigateTo({
-                url: "/pages/book/index",
-              });
+        </View>

-              return false;
-              if (!!userInfo?.ebook) {
-                // 已预约
-                Taro.atMessage({
-                  message: "已预约成功",
-                  type: "warning",
-                });
-              } else {
-                if (!!wxid) {
-                  // 发起预约
-                  const userUpdateData = {
-                    ebook: 1, // 只更新 openid 字段
-                  };
-                  Taro.request({
-                    method: "PUT",
-                    // url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
-                    url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
-                    data: userUpdateData,
-                    header: {
-                      "Content-Type": "application/json",
-                    },
-                    success: function (res) {
-                      // 预约成功
-                      // Taro.atMessage({
-                      //   message: "预约成功",
-                      //   type: "success",
-                      // });
+        {/* <View className="group">
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+          <View className="groupItem"></View>
+        </View> */}

-                      if (res.data.code == "200") {
-                        setbookToast(true);
-                      }
-                    },
-                    fail: function (err) {},
-                    complete: function (finy) {
-                      // setTimeout(() => {
-                      //   window.location.reload();
-                      // }, 2000);
-                      // getUserinfo()
-                    },
-                  });
-                } else {
-                  setmeetupQR(true);
-                }
-              }
-            }}
-          >
-            <View
-              className="join"
-              // style={{ backgroundColor: !!userInfo?.ebook ? "#1890ff" : null }}
-              style={{
-                backgroundColor: !!userInfo?.ebook ? "#1890ff" : "#1890ff",
-              }}
-            >
-              {/* {!!userInfo?.ebook ? "已预约" : "预约"} */}
-              {/* {!!userInfo?.ebook ? "未完结" : "未完结"} */}
-              {bookpay == 1 ? "查看" : "阅读"}
+        <View className="svgItems">
+          <View className="svgItem">
+            {" "}
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={youtube2}
+              />
+              <View className="bookImg_text">YPP(合作伙伴计划)</View>
+            </View>
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={youtube3}
+              />
+              <View className="bookImg_text">💰赚美金</View>
+            </View>
+            <View className="bookImg">
+              <Image
+                // style="width: 40%px;height:100%;background: #fff;"
+                // src={book}
+                src={youtube4}
+              />
+              <View className="bookImg_text">📷自媒体</View>
            </View>
          </View>
        </View>
-      </View>
-
-      {/* 软件下载 */}
-      <View className="software">
-        <View className="emojiTitle">
-          <span style={{ color: "green" }}>|</span> 我写的软件工具
-        </View>
-        <View className="emojitext">
-          <View>
-            <AtIcon value="file-generic" size="30" color="#F00"></AtIcon>{" "}
-            数字游民cna (ios app)
-          </View>
-          {/* <AtIcon
-            value="download-cloud"
-            size="30"
-            color="#F00"
-            onClick={() => {
-              // setisOpened(true);
-            }}
-          ></AtIcon> */}
-          <span>待上架</span>
-        </View>
-        <View className="emojitext">
-          <View>
-            <AtIcon value="file-generic" size="30" color="#F00"></AtIcon>{" "}
-            emoji图文编辑器 (pc客户端)
-          </View>
-          <AtIcon
-            value="download-cloud"
-            size="30"
-            color="#F00"
-            onClick={() => {
-              setisOpened(true);
-            }}
-          ></AtIcon>
-        </View>
-
-        {/* <View className="software-emoji">
-          <Image
-            style="width: 80%;height: 240px;background: #fff;"
-            src={emoji}
-          />
+        {/* <View className="footer_div"></View> */}
+        {/* <View className="footer">
+          <View>Copyright © 2025 </View>
        </View> */}
      </View>
-
-      {/* 付费入群 */}
-      {/* <View>付费入群</View> */}
-
-      {/* 联系我 */}
-      {/* {!wxid && !Object.keys(userInfo)?.length > 0 ? (
-        <View className="contack">
-          <View className="wechatNum">微信号: hackrobot</View>
-          <Image
-            style="width: 185px;height: 200px;background: #fff;"
-            src={qrcode}
-          />
-        </View>
-      ) : null} */}
-
-      {/* <View className="payBtn">
-        <AtButton type="primary">立即购买 -- 29.8元</AtButton>
-      </View> */}
-
-      <View className="emojiModel">
-        {/* 软件下载模态窗 */}
-        <AtModal isOpened={isOpened}>
-          <AtModalHeader>emoji编辑器</AtModalHeader>
-          <AtModalContent>
-            <View className="modelText">
-              emoji编辑器是将markdown转换成标准的emoji格式
-              <br />
-              适用于各种图文场景
-              <br />
-              - 平台:小红书/微博/微信"小绿书"朋友圈
-              <br />- 评论区
-            </View>
-            {/* 软件图片展示 */}
-            <View className="model-emoji">
-              <Image
-                style="width: 100%;height: 240px;background: #fff;"
-                src={emoji}
-              />
-            </View>
-            {/* <View>
-              百度网盘链接：https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo
-              <br />
-              提取码：hqyo
-            </View> */}
-          </AtModalContent>
-          <AtModalAction>
-            <Button
-              onClick={() => {
-                setisOpened(false);
-              }}
-            >
-              取消
-            </Button>
-            <Button
-              onClick={() => {
-                window.location.href =
-                  "https://pan.baidu.com/s/1XXVnMimjUD8qVdmaVhb6rg?pwd=hqyo";
-              }}
-            >
-              下载
-            </Button>
-          </AtModalAction>
-        </AtModal>
-      </View>
-
-      <View className="meetupQR">
-        {/* 软件下载模态窗 */}
-        <AtModal isOpened={meetupQR}>
-          <AtModalHeader>咨询沙龙</AtModalHeader>
-          <AtModalContent>
-            {/* <View className="modelText">
-              1.加微信好友
-              <br />
-              2.发送关键词: 数字游民
-            </View> */}
-            {/* 软件图片展示 */}
-            <View className="model-emoji">
-              <Image
-                // style="width: 100%;height: 240px;background: #fff;"
-                src={qrcode}
-              />
-            </View>
-          </AtModalContent>
-          <AtModalAction>
-            <Button
-              onClick={() => {
-                setmeetupQR(false);
-              }}
-            >
-              知道了
-            </Button>
-          </AtModalAction>
-        </AtModal>
-      </View>
-
-      {/* 腾讯云推广: https://curl.qcloud.com/8bJ1d9U0 */}
-      {/* <View></View> */}
-
-      <AtMessage />
-      <AtToast
-        isOpened={bookToast}
-        hasMask={true}
-        text={"预约成功"}
-        icon={"check"}
-        onClose={() => {
-          window.location.reload();
-        }}
-      ></AtToast>
-      <AtToast
-        isOpened={meetupToast}
-        text={"报名成功"}
-        icon={"check"}
-        hasMask={true}
-        onClose={() => {
-          window.location.reload();
-        }}
-      ></AtToast>
-    </View>
+    </>
  );
 };

--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -2,230 +2,297 @@
  // background-color: #002329;
  // width: 100vw;
  // height: 100vh;
-  padding: 40px;
+  // padding-left: 100px;
+  // padding-right: 100px;
+  display: flex;
+  flex-direction: column;
+  // align-items: center;
+  // justify-content: center;

-  .index-title {
-    display: flex;
-    flex-direction: row;
-    font-weight: 700;
-    align-items: center;
-    .yidooplanet {
-      margin-left: 20px;
-    }
-  }
-
-  .index-tags {
-    margin-top: 20px;
-    .index-AtTag {
-      background-color: rgb(99 102 241);
-      color: white;
-    }
-  }
-
-  .index-article {
-    margin-top: 60px;
-    // background-color: yellow;
-    font-size: 30px;
-    .spanText {
-      font-weight: 700;
-    }
-  }
-
-  .index-list {
-    margin-top: 60px;
-  }
-
-  .index-book {
-    margin-top: 60px;
+  .index_book {
+    margin-top: 80px;
    // width: 100%;
-    height: 300px;
-    padding: 20px;
+    min-height: 300px;
+    // padding: 20px;
    display: flex;
-    flex-direction: row;
+    flex-direction: column-reverse;
    align-items: center;
-    // justify-content: center;
+    justify-content: space-between;
    // background-color: #f0f0f0;
-    background-color: #f0f5ff;
-    .bookImg {
-      width: 40%;
-      height: 100%;
-      // background-color: #1bb14e;
-    }
-
-    .book-middle {
-      width: 20px;
-      height: 100%;
-    }
-    .nomad-right {
-      // margin-left: 20px;
+    // background-color: #f0f5ff;
+    // background-color: yellow;
+    .index_book_left {
+      width: 600px;
+      min-height: 300px;
      display: flex;
      flex-direction: column;
-      // align-items: center;
-      justify-content: space-between;
-      // background-color: yellow;
-      // width: 100%;
-      flex: 1;
-      height: 100%;
-
-      .nomad-title {
-        font-size: 35px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        // justify-content: space-between;
-        // background-color: red;
-        .bookNmae {
-          margin-left: 10px;
-        }
+      align-items: center;
+      justify-content: space-around;
+      // background-color: rgb(208, 255, 0);
+      .left_title {
+        font-size: 50px;
+        font-weight: 700;
+        color: #69b1ff;
      }
-      .subtitle {
-        font-size: 20px;
-        color: red;
-      }
-      .bookText {
-        font-size: 20px;
-      }
-      .bookPrice {
+      .left_text {
        font-size: 30px;
-        display: flex;
-        flex-direction: row-reverse;
-        .join {
-          font-size: 20px;
-          width: 100px;
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          justify-content: center;
-          background-color: #1bb14e;
-          color: #fff;
-          border-radius: 15%;
-          position: relative;
-          bottom: 10px;
-          right: 10px;
-        }
      }
-    }
-  }

-  .software {
-    margin-top: 60px;
-    font-size: 30px;
-    padding: 30px;
-    .emojiTitle {
-      color: rgb(99 102 241);
-    }
-    .emojitext {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 28px;
-    }
-    .software-emoji {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  .index-meetup {
-    margin-top: 60px;
-
-    .meetup-card {
-      display: flex;
-      flex-direction: row;
-      // background-color: yellow;
-
-      .meetup-left {
-        width: 50%;
-        height: 100%;
+      .card {
+        margin-top: 20px;
        display: flex;
        flex-direction: column;
-        // background-color: red;
-      }
-      .meetup-right {
-        font-size: 20px;
-        margin-left: 10px;
-        display: flex;
-        flex-direction: column;
-        // align-items: center;
-        justify-content: space-between;
-        // background-color: green;
-        flex: 1;
-        .title {
-        }
-        .address {
-          // margin-top: 30px;
-        }
-        .meetBtn {
-          display: flex;
-          // flex-direction: row-reverse;
-          flex-direction: row;
-          align-items: center;
-          justify-content: space-between;
+        align-items: center;
+        justify-content: center;
+        .cardItem {
+          padding: 20px;
+          // padding-top: 20px;
+          width: 500px;
+          // height: 300px;

-          .meetupSrcItem{
+          margin-bottom: 20px;
+          display: flex;
+          flex-direction: row;
+          background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
+          // background-color: yellow;
+          background-color: #f0f5ff;
+          border-radius: 20px;
+
+          // align-items: center;
+          // justify-content: center;
+          .cardItem_left {
+            // width: 100px;
+            // height: 100%;
+            // background-color: #69b1ff;
            display: flex;
-            flex-direction: row;
-            align-items: center;
-            justify-content: space-between;
-            // background-color: red;
-
-            .meetupSrc {
-              // width: 20px;
-              // height:20px;
-              border-radius: 15%;
-              // background-color: yellow;
-              margin-left: 10px;
+            flex-direction: column;
+            // align-items: center;
+            // justify-content: center;
+            margin-right: 40px;
+            .cardItem_left_img {
+              width: 80px;
+              height:80px;
+            }
+            .youtubeSvg{
+              position: relative;
+              top: -5px;
            }
          }
-      
-          .join {
-            width: 100px;
+          .cardItem_right {
+            flex: 1;
            display: flex;
-            flex-direction: row;
+            flex-direction: column;
            align-items: center;
            justify-content: center;
-            background-color: #1bb14e;
-            color: #fff;
-            border-radius: 15%;
-            position: relative;
-            // bottom: 10px;
-            right: -10px;
+            // background-color: red;
+            .cardItem_rightUp {
+              width: 100%;
+              height: 80px;
+              // background-color: aquamarine;
+              display: flex;
+              flex-direction: row;
+              font-weight: 700;
+              font-size: 35px;
+              // align-items: center;
+              // justify-content: center;
+            }
+            .cardItem_rightDown {
+              width: 100%;
+              // height: 200px;
+              flex: 1;
+              // background-color: red;
+              display: flex;
+              flex-direction: row;
+              // align-items: center;
+              // justify-content: center;
+              font-size: 30px;
+              flex-wrap:wrap ;
+              color: #262626;
+
+            }
+          }
+          .left_mobile {
+            margin-top: 20px;
+            // width: 100%;
+            font-size: 30px;
+            display: flex;
+            flex-direction: column;
+            // background-color: aqua;
+            // align-items: center;
+            // justify-content: space-around;
+            // background-color: yellow;
          }
        }
      }
+
+      .left_btn {
+        margin-top: 40px;
+        // background-color: aqua;
+        // display: none;
+        .startRead {
+          width: 500px;
+        }
+      }
+    }
+    .index_book_img {
+      width: 400px;
+      height: 400px;
    }
  }

-  .contack {
-    margin-top: 60px;
+  .group {
+    padding: 20px;
+    // width: 400px;
+    // height: 400px;
+    background-color: yellow;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .groupItem {
+      width: 80px;
+      height: 80px;
+      background-color: aqua;
+      border-radius: 50%;
+      margin-right: -20px;
+      // left: 10px;
+      // position: relative;
+    }
+  }
+
+  .svgItems {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    // background-color: yellow;
+    margin-top: 20px;
+    // padding: 20px;
+    .bookImg {
+      display: none;
+    }
+  }
+  .index_btn {
+    // background-color: yellow;
+    .startRead {
+      width: 200px;
+    }
+  }
+}
+
+@media (min-width: 1536px) {
+  .index {
+    // padding: 100px;
+    // height: 100vh;
+    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    .wechatNum {
-      font-size: 34px;
-      color: #1bb14e;
-    }
-  }
+    // background-color: aqua;

-  .emojiModel {
-    .modelText {
-      font-size: 22px;
+    .index_book {
+      width: 100%;
+      max-width: 1400px;
+
+      // max-width: 2000px;
+      // padding: 20px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      // justify-content: center;
+      justify-content: space-between;
+      background-color: #f0f5ff;
+      border-radius: 20px;
+
+      .index_book_left {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        // background-color: yellow;
+        // background-color: #69b1ff;
+        .card{
+          display: none;
+        }
+        .left_mobile {
+          display: none;
+        }
+        .left_btn {
+          display: flex;
+
+          .startRead {
+            // display: flex;
+            width: 200px;
+          }
+        }
+      }
+      .index_book_img {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        // background-color: yellow;
+      }
    }
-    .model-emoji {
+
+    .group {
+      display: none;
+    }
+    .svgItems {
+      // width: 1400px;
+      width: 100%;
+      max-width: 1400px;
+      margin-top: 80px;
+      // padding: 0px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
+      // background-color: #69b1ff;
+      // background-color: yellow;
+      // background-color: brown;
+      .svgItem {
+        // min-width: 1400px;
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-around;
+        // background-color: #69b1ff;
+        .bookImg {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          // background-color: yellow;
+          .bookImg_text {
+            margin-top: 20px;
+            font-size: 30px;
+          }
+        }
+      }
+    }
+
+    .index_btn {
+      .startRead {
+        display: none;
+      }
+    }
+
+    .footer {
+      // position: absolute;
+      position: fixed;
+      bottom: 0px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 60px;
+      // margin-bottom: 20px;
+      font-size: 14px;
+      background-color: yellow;
    }
  }
-
-  .payBtn {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-  }
 }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
eric	f0f7ece546	's'	2025-09-09 14:12:29 +08:00
eric	cfc8369cf2	's'	2025-09-02 21:12:32 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	f33393c0af	feat: 不显示error	2025-04-15 14:09:06 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	6590defc41	stye: 分割线	2025-04-10 11:37:47 +08:00
hackrobot	f7284e1e30	Merge branch 'dev' of http://gitlab.yidooplanet.com/gitlab-instance-0a899031/nomadyt into dev	2025-04-07 06:50:04 -05:00
hackrobot	1cd4f35774	feat: paujs	2025-04-07 06:49:57 -05:00
$WLT\Eric.hu$ WLT\Eric.hu	e6d7748a41	feat: 新建日志模块	2025-04-07 09:50:22 +08:00
hackrobot	4b6206e2f3	feat: 完结	2025-04-02 11:32:38 -05:00
hackrobot	fd34b7baf6	feat: 内容更新	2025-04-02 10:52:41 -05:00
hackrobot	e4fbf78de2	调试	2025-04-02 06:52:46 -05:00
hackrobot	bd9794d50f	生产	2025-04-02 06:37:39 -05:00
hackrobot	b19329182b	js混淆	2025-04-02 06:35:01 -05:00
hackrobot	77dfe5d60b	update	2025-04-02 06:23:34 -05:00
hackrobot	fec00b86dc	qwqw	2025-04-02 04:51:56 -05:00
hackrobot	f325f66816	feat: 更新图片	2025-04-02 04:49:08 -05:00
hackrobot	87fffa4f37	feat: webpack优化	2025-04-02 04:34:52 -05:00
hackrobot	281780b54f	update	2025-04-02 00:25:04 -05:00
hackrobot	dd101604d7	'ss'	2025-04-02 00:21:24 -05:00
hackrobot	124d493b0e	Merge branch 'dev' of http://gitlab.yidooplanet.com/gitlab-instance-0a899031/nomadyt into dev	2025-03-31 07:12:19 -05:00
hackrobot	cfc1bec08d	'ss	2025-03-31 07:11:58 -05:00
$WLT\Eric.hu$ WLT\Eric.hu	e8dfbf1368	feat: 增加nyft通知	2025-03-31 11:34:55 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	12797d650f	syue: 样式优化	2025-03-28 15:03:27 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	1f4760c30e	feat: 删除webapp	2025-03-28 13:40:06 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	0d4d1937c3	feat: 更新目录	2025-03-28 11:44:23 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	3152cb4547	feat: book_header	2025-03-28 09:28:40 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	423ad11dda	Merge branch 'dev' of http://gitlab.yidooplanet.com/gitlab-instance-0a899031/nomadyt into dev # Conflicts: # dist/index.html # dist/service-worker.js	2025-03-28 08:44:40 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	450b3190ae	feat: merge	2025-03-28 08:44:15 +08:00
hackrobot	77753c8c1b	feat: 自定义目录	2025-03-27 17:43:01 -05:00
hackrobot	851dd2f110	'ss'	2025-03-27 08:09:44 -05:00
hackrobot	8c88eb063d	feat: 手机UI更新	2025-03-27 08:04:09 -05:00
hackrobot	b26cb27740	Merge branch 'dev' of http://gitlab.yidooplanet.com/gitlab-instance-0a899031/nomadyt into dev # Please enter a commit message to explain why this merge is necessary, # especially if it merges an updated upstream into a topic branch. # # Lines starting with '#' will be ignored, and an empty message aborts # the commit.	2025-03-27 07:11:36 -05:00
hackrobot	0274ad8c1a	'ss'	2025-03-27 07:10:42 -05:00
$WLT\Eric.hu$ WLT\Eric.hu	c763bdddc1	'ss'	2025-03-27 17:35:23 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	e9b688e64c	'ss'	2025-03-27 17:23:50 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	0aaa601f4f	'ss'	2025-03-27 17:14:51 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	5f9ee6b27a	'ss'	2025-03-27 17:01:11 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	919fa5769a	'ss'	2025-03-27 16:54:45 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	ea391ecb7b	'ss'	2025-03-27 16:45:45 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	e7f30b902d	'修改路由'	2025-03-27 14:31:32 +08:00
$WLT\Eric.hu$ WLT\Eric.hu	699c2dff06	'修改icon'	2025-03-27 14:26:29 +08:00
hackrobot	7a74bc3c11	'ss''	2025-03-26 18:25:50 -05:00
hackrobot	d94b011163	'webpack设置ico'	2025-03-26 18:15:38 -05:00
hackrobot	af9325bfd9	'css动画'	2025-03-25 06:16:23 -05:00
hackrobot	4018e981d3	'demo'	2025-03-23 11:05:24 -05:00
hackrobot	ca589aa820	'ui'	2025-03-23 09:25:09 -05:00
hackrobot	37d11ab897	'删除多余不发了'	2025-03-23 05:56:56 -05:00