'demo'

src/pages/book/book.md

@@ -1,43 +1,45 @@
-## 一人公司方法论
+## Youtube运营笔记
 
-> 公司化运营业务,但并不是注册企业主体
+> 媒体是普通人的最好的杠杆
 
-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/book.png?imageSlim" title="" alt="book.png" width="248">
+从佛系到认真的运营youtube(油管),也快有1年的时间了
 
-这本书是基于H5页面的`单页书籍`,会不定时更新
+在这里分享一些心得,以及踩过的坑
-
-本主要基于个人的学习,实践,总结一套方法论,包含了`道`和`术`
-
-读者可以参考借鉴
-
-主题包含并不限于以下:
-
-- 云手机+微信机器人+AIGC+边缘计算
-
-- youtube频道获利
-
-- 独立开发者
-
-- 跨境电商
-
-- 旅行+远程办公
 
 ---
 
-## 简介
+## 为什么youtube值得做?
 
-> 数字游民实践者
+> 成本低
 
-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/avatar.jpg?imageSlim" title="" alt="avatar.jpg" width="254">
+自媒体是普通人最好的杠杆,只需要1部手机,就可以拍摄vlog,也可以剪辑影片
+现在的剪辑软件,不仅在手机端可以方便操作,还结合的ai功能,比如
 
-曾经是程序员,业余开发软件工具
+- 语音翻译/克隆
   
-有公司主体,运营跨境电商亚马逊
+- 自动生成双语字幕
   
-平时爱折腾技术,以`树莓派`为主
+- 特效/音效
   
-目前方向是偏户外/旅行
 
-以youtube频道作为副资产获利
+随时随地都可以剪辑+上传
 
-最近在策划`coffeechat以及小型沙龙`
+> 赚美金,回报高
+
+同样的视频,在不同的平台上传后,收益汇率不一样
+
+油管结算是美金,换成人民,就有7倍左右的购买力
+
+而如果你居住下三四线城市,或者县城,那么由于生活成本低
+
+每月即使1000$的收益,都可以过的不错了
+
+> 商业模式健康
+
+youtube给创作者的收益,长视频是`55%`,短视频shorts是`45%`
+
+可以说是世界上很慷慨的公司了
+
+仅仅是平台广告,就能够带来巨大的收益
+
+不用去接`业配/商单`,以及自己带货,纯粹的视频不会让人厌恶

src/pages/book/index.scss

@@ -12,25 +12,34 @@
     max-width: 100%;
     height: auto; /* 保持图像的纵横比 */
   }
-  .formCode {
-    display: flex;
-    flex-direction: row;
-    .codeBtn {
-      background-color: aquamarine;
-    }
-  }
-
-  .joinSalon {
-    width: 700px;
-    font-weight: 600;
-    background-color: #72d572;
-    border-color: #72d572;
-  }
 }
 
 @media (min-width: 1536px) {
-  .Book .markdown-body {
+  .Book {
-    font-size: 20px;
+    width: 100%;
-    // color: red;
+    // 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;
+    }
   }
 }

src/pages/book/index.tsx

@@ -55,17 +55,17 @@ const Book = () => {
   //   });
   // };
 
-    // 是否在微信客户端
+  // 是否在微信客户端
-    const isWeChatFun = () => {
+  const isWeChatFun = () => {
-      var ua = navigator.userAgent.toLowerCase();
+    var ua = navigator.userAgent.toLowerCase();
-      if (ua.indexOf("micromessenger") != -1) {
+    if (ua.indexOf("micromessenger") != -1) {
-        setisWeChat(true);
+      setisWeChat(true);
-        return true;
+      return true;
-      } else {
+    } else {
-        setisWeChat(false);
+      setisWeChat(false);
-        return false;
+      return false;
-      }
+    }
-    };
+  };
 
   const payh5 = (type, total_fee = 1000) => {
     // console.log("111");
@@ -110,18 +110,18 @@ const Book = () => {
     });
   };
 
-
   return (
     <View className="Book">
+      {/* <View className="book_left">1 </View> */}
       <View
         className="markdown-body" // 添加 GitHub Markdown 主题类
         dangerouslySetInnerHTML={{
           __html: marked(book == 1 ? bookText : infoText),
         }}
       ></View>
+      {/* <View className="book_right"> 22</View> */}
 
-      <View className="bottomDiv"></View>
+      {/* <View className="bottomDiv"></View> */}
-
     </View>
   );
 };

src/pages/book/info.md

@@ -1,43 +1,80 @@
-## 一人公司方法论
+## 前言
 
-> 公司化运营业务,但并不是注册企业主体
+> 本文是在线电子书,不定时更新
 
-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/book.png?imageSlim" title="" alt="book.png" width="248">
+你看到的`电子书`,一个在线的网页
 
-这本书是基于H5页面的`单页书籍`,会不定时更新
+内容会根据作者的经历和心得,不定时更新
 
-本主要基于个人的学习,实践,总结一套方法论,包含了`道`和`术`
+当然,如果你也可以关注公众号: Eric的云游日记, 加群交流
 
-读者可以参考借鉴
+一个人走得开,一群人走的远
 
-主题包含并不限于以下:
+<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/ytGpt.png?imageSlim" title="" alt="ytGpt.png" width="235">
 
-- 云手机+微信机器人+AIGC+边缘计算
+> 声明:
 
-- youtube频道获利
+本人不会针对Youtube内容进行收费
 
-- 独立开发者
+也不进行账号买卖
 
-- 跨境电商
+文中内容仅供参考
-
-- 旅行+远程办公
 
 ---
 
-## 简介
+> nomadyt.com
 
-> 数字游民实践者
+[nomadyt.com](nomadyt.com) 是`nomad`+`yt`的缩写组合,意思是以油管为收益的数字游民
 
-<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/avatar.jpg?imageSlim" title="" alt="avatar.jpg" width="254">
+油管适合做为`副业`尝试
 
-曾经是程序员,业余开发软件工具
+申请ypp通过后,就可以设置视频播放广告,产生美金收益
 
-有公司主体,运营跨境电商亚马逊
 
-平时爱折腾技术,以`树莓派`为主
 
-目前方向是偏户外/旅行
 
-以youtube频道作为副资产获利
+## Youtube运营笔记
 
-最近在策划`coffeechat以及小型沙龙`
+> 媒体是普通人的最好的杠杆
+
+从佛系到认真的运营youtube(油管),也快有1年的时间了
+
+在这里分享一些心得,以及踩过的坑
+
+---
+
+## 为什么youtube值得做?
+
+> 成本低
+
+自媒体是普通人最好的杠杆,只需要1部手机,就可以拍摄vlog,也可以剪辑影片
+现在的剪辑软件,不仅在手机端可以方便操作,还结合的ai功能,比如
+
+- 语音翻译/克隆
+  
+- 自动生成双语字幕
+  
+- 特效/音效
+  
+
+随时随地都可以剪辑+上传
+
+> 赚美金,回报高
+
+同样的视频,在不同的平台上传后,收益汇率不一样
+
+油管结算是美金,换成人民,就有7倍左右的购买力
+
+而如果你居住下三四线城市,或者县城,那么由于生活成本低
+
+每月即使1000$的收益,都可以过的不错了
+
+> 商业模式健康
+
+youtube给创作者的收益,长视频是`55%`,短视频shorts是`45%`
+
+可以说是世界上很慷慨的公司了
+
+仅仅是平台广告,就能够带来巨大的收益
+
+不用去接`业配/商单`,以及自己带货,纯粹的视频不会让人厌恶

src/pages/index/index.jsx

@@ -44,6 +44,8 @@ import youtube 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";
 
 // export default class Index extends Component {
@@ -338,69 +340,79 @@ const Index = () => {
 
   return (
     <>
-    <View className="index">
+      <View className="index">
-      {/* 在线图书 */}
+        {/* 在线图书 */}
 
-      {/* 参考资料https://readmake.com/ */}
+        {/* 参考资料https://readmake.com/ */}
-      <View className="index-book">
+        <View className="index-book">
-        <View className="index_book_left">
+          <View className="index_book_left">
-          <View className="left_title">《Youtube运营笔记》</View>
+            <View className="left_title">《Youtube运营笔记》</View>
-          <View className="left_text">数字游民-手册1</View>
+            <View className="left_text">数字游民-手册1</View>
-          <View className="left_btn">
+            <View className="left_mobile">
-            <AtButton
+              <Text>🚀 油管踩坑笔记</Text>
-              onClick={() => {
+              <Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
-                goRead();
+              <Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
-              }}
+              <Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
-              className="startRead"
+              <Text>4️⃣ AI:辅助剪辑/生成视频</Text>
-              type="primary"
+              {/* <Text>5️⃣ -----------------</Text> */}
-              size="small"
+
-              circle
+              <Text>🔥 一起实践,交流</Text>
-            >
+            </View>
-              开始阅读
+
-            </AtButton>
+            <View className="left_btn">
+              <AtButton
+                onClick={() => {
+                  goRead();
+                }}
+                className="startRead"
+                type="primary"
+                size="small"
+                circle
+              >
+                开始阅读
+              </AtButton>
+            </View>
+          </View>
+          <View className="index_book_img">
+            <Image
+              // style="width: 40%px;height:100%;background: #fff;"
+              src={ytGpt}
+            />
           </View>
         </View>
-        <View className="index_book_img">
+
-          <Image
+        <View className="svgItems">
-            // style="width: 40%px;height:100%;background: #fff;"
+          <View className="svgItem">
-            src={demo}
+            {" "}
-          />
+            <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="footer_div"></View> */}
-      <View className="svgItems">
+      <View className="footer">
-        <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="footer_div"></View> */}
-          <View className="footer">
         {/* <View>《Youtube运营笔记》</View> */}
         <View>Copyright © 2025 </View>
       </View>

src/pages/index/index.scss

@@ -6,7 +6,7 @@
   // padding-right: 100px;
 
   .index-book {
-    margin-top: 60px;
+    margin-top: 80px;
     // width: 100%;
     min-height: 300px;
     // padding: 20px;
@@ -19,30 +19,43 @@
     // background-color: yellow;
     .index_book_left {
       width: 600px;
-      height: 300px;
+      min-height: 300px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-around;
       // background-color: rgb(208, 255, 0); 
       .left_title {
-        font-size: 40px;
+        font-size: 50px;
         font-weight: 700;
         color: #69b1ff;
       }
       .left_text {
-        font-size: 24px;
+        font-size: 30px;
+      }
+      .left_mobile {
+        margin-top: 20px;
+        width: 100%;
+        font-size: 30px;
+        display: flex;
+        flex-direction: column;
+        // align-items: center;
+        // justify-content: space-around;
+        // background-color: yellow;
+
       }
       .left_btn {
+        margin-top: 40px;
         // background-color: aqua;
         // display: none;
         .startRead {
+          width: 200px;
         }
       }
     }
     .index_book_img {
-      width: 300px;
+      width: 400px;
-      height: 300px;
+      height: 400px;
     }
   }
 
@@ -67,98 +80,98 @@
 }
 
 @media (min-width: 1536px) {
+  .index {
+    padding: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    // background-color: aqua;
 
-    .index {
+    .index-book {
-     padding: 100px;
+      width: 100%;
+      max-width: 1400px;
+
+      // max-width: 2000px;
+      // padding: 20px;
       display: flex;
-      flex-direction: column;
+      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;
+        .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;
+      }
+    }
+
+    .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: aqua;
+      // background-color: #69b1ff;
-
+      // background-color: yellow;
-      .index-book {
+      // background-color: brown;
+      .svgItem {
+        // min-width: 1400px;
         width: 100%;
-        max-width: 1400px;
-
-        // max-width: 2000px;
-        // padding: 20px;
         display: flex;
         flex-direction: row;
         align-items: center;
-        // justify-content: center;
+        justify-content: space-around;
-        justify-content: space-between;
+        // background-color: #69b1ff;
-        background-color: #f0f5ff;
+        .bookImg {
-        border-radius: 20px;
-
-        .index_book_left {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-around;
-          // background-color: yellow;
-          // background-color: #69b1ff;
-          .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;
-        }
+          .bookImg_text {
-      }
+            margin-top: 20px;
-
+            font-size: 30px;
-      .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 {
-      .index_btn {
+      .startRead {
-        .startRead {
+        display: none;
-          display: none;
-        }
       }
     }
   }
-
+}
 
 .footer {
   position: absolute;