meme还在开发,暂不可用

Shua-github · Jan 23, 2025 · e9284e9 · e9284e9
1 parent 5c647a2
commit e9284e9
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 141 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 ## 功能
 - [x] 下载/复制表情
 - [x] 预览表情 
-- [ ] 通过api方式调用[meme-generator](https://github.com/MemeCrafters/meme-generator)生成表情(等好心人pr)
+- [ ] 通过api方式调用[meme-generator](https://github.com/MemeCrafters/meme-generator)生成表情(在开发了)
 
 ## 谢谢他们和它们
 - [Arcaea Stickers](https://github.com/Rosemoe/arcaea-stickers)

diff --git a/public/index.html b/public/index.html
@@ -3,22 +3,14 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/stickers-zh/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/stickers-zh/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/stickers-zh/favicon-16x16.png" />
-    <link rel="manifest" href="/stickers-zh/site.webmanifest" />
-    <link rel="mask-icon" href="/stickers-zh/safari-pinned-tab.svg" color="#5bbad5" />
+    <!-- 动态插入的标签会替换以下内容 -->
     <meta name="msapplication-TileColor" content="#2196f3" />
     <meta name="theme-color" content="#2196f3" />
     <meta name="description" content="表情制作器" />
     <title>Stickers</title>
 
     <meta property="og:title" content="表情制作器" />
-    <meta
-      property="og:description"
-      content="制作你的Arcaea和初音未来:缤纷舞台表情"
-    />
-    <meta property="og:image" content="/stickers-zh/og-image.png" />
+    <meta property="og:description" content="制作你的Arcaea和初音未来:缤纷舞台表情" />
     <meta property="og:url" content="https://shua-github.github.io/" />
     <meta property="og:site_name" content="表情制作器" />
     <meta property="og:type" content="website" />
@@ -27,5 +19,40 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+
+    <script>
+      // 动态插入标签
+      function addDynamicTags() {
+        const basePath = location.pathname; // 获取当前页面的 URL
+
+        // 创建并插入 <link> 标签
+        const links = [
+          { rel: "apple-touch-icon", sizes: "180x180", href: "apple-touch-icon.png" },
+          { rel: "icon", type: "image/png", sizes: "32x32", href: "favicon-32x32.png" },
+          { rel: "icon", type: "image/png", sizes: "16x16", href: "favicon-16x16.png" },
+          { rel: "manifest", href: "site.webmanifest" },
+          { rel: "mask-icon", href: "safari-pinned-tab.svg", color: "#5bbad5" },
+        ];
+
+        links.forEach((link) => {
+          const tag = document.createElement("link");
+          tag.rel = link.rel;
+          if (link.type) tag.type = link.type;
+          if (link.sizes) tag.sizes = link.sizes;
+          tag.href = basePath + link.href;
+          if (link.color) tag.color = link.color;
+          document.head.appendChild(tag);
+        });
+
+        // 插入 og:image 标签
+        const ogImage = document.createElement("meta");
+        ogImage.setAttribute("property", "og:image");
+        ogImage.content = basePath + "og-image.png";
+        document.head.appendChild(ogImage);
+      }
+
+      // 调用函数
+      addDynamicTags();
+    </script>
   </body>
-</html>
+</html>
diff --git a/src/App.css b/src/App.css
@@ -70,6 +70,18 @@
   border-radius: 0.25rem;
 }
 
+.actions {
+  display: flex;
+  justify-content: space-between; /* 子元素之间分开 */
+  align-items: center; /* 子元素在垂直方向上居中 *//* 设置容器的高度以便查看居中效果 */
+}
+.下载 {
+  height: 30px;
+}
+.复制 {
+  height: 30px;
+}
+
 .buttons {
   display: flex;
   align-items: center;