✨ feat: 分享卡片、添加到桌面图标

wallleap · Nov 22, 2023 · 8d802fc · 8d802fc
1 parent d298f0a
commit 8d802fc
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -2,13 +2,32 @@
 <html lang="zh-CN">
   <head>
     <meta charset="UTF-8">
-    <link rel="apple-touch-icon" sizes="180x180" href="<%- favicon %>" />
-    <link rel="icon" sizes="16x16" href="<%- favicon2 %>" />
-    <link rel="icon" sizes="32x32" href="<%- favicon3 %>" />
-    <meta name="description" content="<%- description %>" />
-    <meta name="keywords" content="<%- keywords %>" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="description" content="<%- description %>">
+    <meta name="keywords" content="<%- keywords %>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title><%- title %></title>
+    <!-- 添加到主屏幕/桌面 -->
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-touch-fullscreen" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="<%- title %>">
+    <meta name="theme-color" content="#fff">
+    <meta name="application-name" content="<%- title %>">
+    <link rel="icon" href="<%- logo %>">
+    <link rel="icon" type="image/x-icon" sizes="16x16" href="<%- favicon16 %>">
+    <link rel="icon" type="image/x-icon" sizes="32x32" href="<%- favicon32 %>">
+    <link rel="bookmark" href="<%- logo %>">
+    <link rel="apple-touch-icon" href="<%- logo %>">
+    <link rel="apple-touch-icon-precomposed" sizes="180x180" href="<%- logo %>">
+    <link rel="apple-touch-startup-image" href="<%- logo %>"> 
+    <link rel="manifest" href="./manifest.json">
+    <!-- 分享到xxx 以卡片显示 -->
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="<%- title %>">
+    <meta property="og:description" content="<%- description %>">
+    <meta property="og:image" content="https://cdn.wallleap.cn/wallleap/300.png">
+    <meta property="og:url" content="<%- url %>">
     <% for (var css of css) { %>
       <link href="<%= css %>" rel="stylesheet">
     <% } %>

diff --git a/src/assets/images/logo.svg → public/logo.svg b/src/assets/images/logo.svg → public/logo.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{  
+  "name": "wallleap",  
+  "short_name": "wallleap",  
+  "theme_color": "#ffffff",  
+  "background_color": "#ffffff",  
+  "display": "standalone",  
+  "scope": "/",  
+  "start_url": "/",  
+  "icons": [{
+    "src": "logo.svg",
+    "sizes": "any",
+    "type": "image/svg+xml",
+    "purpose": "any"
+  }]
+}
diff --git a/src/config.js b/src/config.js
@@ -5,7 +5,7 @@
  * @property {String} subtitle      博客副标题
  * @property {String} description   博客描述
  * @property {String} keywords      博客关键字
- * @property {String} favicon       博客图标 180x180
+ * @property {String} logo          博客图标 180x180
  * @property {String} favicon16     博客图标 16x16
  * @property {String} favicon32     博客图标 32x32
  * @property {String} createdTime   博客创建时间
@@ -27,15 +27,16 @@
  * @property {String} pageSize      文章列表每页显示文章数
  * @property {String} defaultCover  文章默认封面图
  */
+
 export default {
   // 博客基础配置
   title: 'wallleap',
   subtitle: 'ルー・ワン',
   description: 'Luwang\'s blog',
   keywords: 'Luwang, blog, wallleap',
-  favicon: '/favicon.ico',
-  favicon16: '/favicon.ico',
-  favicon32: '/favicon.ico',
+  logo: './logo.svg',
+  favicon16: './favicon.ico',
+  favicon32: './favicon.ico',
   createdTime: '2019-08-01',
   icp: '赣ICP备20000895号-1',
   icpLink: '//beian.miit.gov.cn/',

diff --git a/vite.config.js b/vite.config.js
@@ -41,9 +41,10 @@ export default defineConfig({
           title: `${config.title} | ${config.subtitle}`,
           description: config.description,
           keywords: config.keywords,
-          favicon: config.favicon,
-          favicon2: config.favicon16,
-          favicon3: config.favicon32,
+          logo: config.logo,
+          favicon16: config.favicon16,
+          favicon32: config.favicon32,
+          url: config.url,
           css: isProduction ? CDN.css : [],
           js: isProduction ? CDN.js : [config.twikoo.src],
         },