fix

dist/stylesheets/v2/styles.css

@@ -484,7 +484,12 @@ header {
     font-size: 1.3rem;
   }
 
+  .container {
+    padding: 10px;
+  }
+
   section {
+    margin-bottom: 20px;
     padding: 20px;
   }
 

routes/v2/detail.js

@@ -21,9 +21,9 @@ router.get('/:id', function (req, res, next) {
     let id = req.params.id;
     utils.validators.validateId(id);
 
-    let cacheKey = `${CACHE_PREFIX}_detail_${id}`;
-    let htmlData = await redis.getAsync(cacheKey);
-    htmlData = null;
+    // let cacheKey = `${CACHE_PREFIX}_detail_${id}`;
+    // let htmlData = await redis.getAsync(cacheKey);
+    let htmlData = null;
     if (!htmlData) {
       // 详情
       let doc = await models.Art
@@ -53,7 +53,7 @@ router.get('/:id', function (req, res, next) {
         filters: { tags: mytags },
       }
 
-      let result = await getListBuilder(query, models.Art);
+      let result = await getListBuilder(query, models.Art, [{ path: 'user', select: 'username' }]);
       common.organizeData(result.data);
 
       // 填色页合集推荐
@@ -62,6 +62,22 @@ router.get('/:id', function (req, res, next) {
       // 评论
       const comments = await models.Comment.find({ approved: true, page: doc._id }).sort({ createdAt: -1 });
 
+      // deeplink 相关
+      let applink = `https://art.pcoloring.com${req.originalUrl}`;
+      let downlink = `https://pcoloring.com/anc/`;
+
+
+      const userAgent = req.headers['user-agent'];
+      console.log('User-Agent:', userAgent);
+      if (userAgent) {
+        const ua = userAgent.toLowerCase();
+        if (ua.includes('iphone') || ua.includes('ipad') || ua.includes('ipod')) {
+          downlink = 'itms-apps://itunes.apple.com/app/id1575480118';
+        } else if (ua.includes('android')) {
+          downlink = 'https://play.google.com/store/apps/details?id=com.pcoloring.art.puzzle.color.by.number&pcampaignid=web_share';
+        }
+      }
+
       let data = {
         title: `${doc.seoTitle}`,
         description: `${doc.seoDescription}`,
@@ -79,6 +95,8 @@ router.get('/:id', function (req, res, next) {
         comments,
         dateFormat: common.dateFormat,
         collections: recmCollections,
+        applink,
+        downlink,
       };
 
       // 渲染EJS模板到内存中
@@ -90,11 +108,11 @@ router.get('/:id', function (req, res, next) {
 
         // 渲染成功，存redis, 发送数据到客户端
         htmlData = html;
-        try {
-          await redis.set(cacheKey, htmlData, 'EX', CACHE_EXPIRES);
-        } catch (e) {
-          console.error(e);
-        }
+        // try {
+        //   await redis.set(cacheKey, htmlData, 'EX', CACHE_EXPIRES);
+        // } catch (e) {
+        //   console.error(e);
+        // }
 
         res.send(htmlData);
       });

routes/v2/gallery.js

@@ -30,7 +30,7 @@ router.get('/', function (req, res, next) {
 
     let cacheKey = `${CACHE_PREFIX}_${req.originalUrl}`;
     let htmlData = await redis.getAsync(cacheKey);
-    // htmlData = null;
+    htmlData = null;
     if (!htmlData) {
       let query = {
         page: req.query.page,

routes/v2/index.js

@@ -20,12 +20,13 @@ router.get('/', function (req, res, next) {  // 限制严格一点
   (async function () {
     let cacheKey = `${CACHE_PREFIX}_/`;
     let htmlData = await redis.getAsync(cacheKey);
-    // htmlData = null;
+    htmlData = null;
     if (!htmlData) {
       // 最新上线
       let latest = await models.Art
         .find({ status: 9000 })
         .select(artSelect)
+        .populate('user', 'username name')
         .sort({ publishTime: 'desc' })
         .limit(12)
         .lean()

views/v2/detail.ejs

@@ -16,15 +16,15 @@
 
   <!-- MARK: Universal Link / Android App Link 的核心配置 -->
   <!-- 这些 meta 标签的值应该是完整的 HTTPS 链接，Facebook 会识别并尝试拉起 App -->
-  <meta property="og:url" content="https://art.pcoloring.com/coloring-page/<%= detail._id %>" />
+  <meta property="og:url" content="<%= applink %>" />
   <!-- **Universal Link 路径** -->
-  <meta property="al:ios:url" content="https://art.pcoloring.com/coloring-page/<%= detail._id %>" />
+  <meta property="al:ios:url" content="<%= applink %>" />
   <!-- **Universal Link 路径** -->
   <meta property="al:ios:app_store_id" content="1575480118" /> <!-- **iOS App Store ID** -->
   <meta property="al:ios:app_name" content="Art Number Coloring Book" /> <!-- **iOS 应用名称** -->
 
   <meta property="al:android:package" content="com.pcoloring.art.puzzle.color.by.number" /> <!-- **Android 包名** -->
-  <meta property="al:android:url" content="https://art.pcoloring.com/coloring-page/<%= detail._id %>" />
+  <meta property="al:android:url" content="<%= applink %>>" />
   <!-- ** Universal Link 路径** -->
   <meta property="al:android:app_name" content="Art Number Coloring Book" /> <!-- **Android 应用名称** -->
 
@@ -70,7 +70,7 @@
       opacity: 0.85;
     }
 
-    .tag {
+    .detail-tag {
       display: inline-block;
       background-color: var(--background-color);
       color: var(--light-text);
@@ -82,8 +82,8 @@
       transition: background-color 0.3s ease;
     }
 
-    .tag:hover {
-      background-color: var(--border-color);
+    .detail-tag:hover {
+      background-color: var(--secondary-color);
     }
 
     .poster {
@@ -267,7 +267,8 @@
     }
   </script>
 
-  <script>
+  
+  <!-- <script>
     const baseUniversalLink = 'https://art.pcoloring.com';
     const currentPageLink = baseUniversalLink + window.location.pathname + window.location.search;
     const appDeeplink = baseUniversalLink + window.location.pathname.replace('coloring-page', 'share') + window.location.search;
@@ -304,7 +305,8 @@
       }
     }
 
-  </script>
+  </script> -->
+
 </head>
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
@@ -348,9 +350,7 @@
 
         <div class="tags">
           <% detail.tags.forEach(tag=> { %>
-            <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag">
-                <%= tag %>
-              </span></a>
+            <a href="/coloring-page-gallery?category=<%= tag %>"><span class="detail-tag"><%= tag %></span></a>
             <% }); %>
         </div>
 
@@ -364,7 +364,7 @@
           <a id="repaintBtn" onclick="onRepaint('<%= detail._id %>')" class="btn" style="display: none;">Repaint</a>
           <a id="reviewBtn" href="/play/<%= detail._id %>" class="btn"
             style="background-color: orange; display: none;">Review</a>
-          <a id="appBtn" class="btn" href="#" onclick="functionDownload()"
+          <a id="appBtn" class="btn" href="<%= downlink %>"
             style="background-color: darkolivegreen;">Paint on APP</a>
           <a href="/download/pdf/page/<%= detail._id %>" class="btn"
             style="background-color: lightseagreen;">Download</a>
@@ -398,8 +398,16 @@
                 <a href="<%= item.uri %>"><img src="<%= item.thumb %>" loading="lazy" alt="<%= item.title %>"></a>
               </div>
               <div class="coloring-content">
-                <div class="coloring-title">
-                  <%= item.title %>
+                <div class="coloring-title"><%= item.title %></div>
+                <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>"><%= item.user.username %></a></div>
+                <div class="coloring-meta">
+                  <div class="date"><%= item.publishTime %></div>
+                  <div class="views"><%= item.totalStartCount %></div>
+                </div>
+                <div class="coloring-tags">
+                  <% item.tags.forEach(tag=> { %>
+                    <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>"><%= tag %></span></a>
+                  <% }); %>
                 </div>
               </div>
             </div>

views/v2/gallery.ejs

@@ -218,6 +218,9 @@
 
 
   @media (max-width: 768px) {
+    .container {
+      padding: 0;
+    }
     .category-filters {
       justify-content: flex-start;
     }

views/v2/index.ejs

@@ -55,7 +55,7 @@
     }
 
     .collection-image {
-      height: 360px;
+      max-height: 360px;
       background-color: #f0f0f0;
       overflow: hidden;
       position: relative;
@@ -377,6 +377,11 @@
 
       .content-container {
         grid-template-columns: 1fr;
+        gap: 10px;
+      }
+
+      .video-section {
+        padding: 20px;
       }
 
       .video-section h2 {
@@ -658,6 +663,16 @@
             </div>
             <div class="coloring-content">
               <div class="coloring-title"><%= item.title %></div>
+              <div class="coloring-author">by <a href="/coloring-page-gallery?author=<%= item.user.username %>"><%= item.user.username %></a></div>
+              <div class="coloring-meta">
+                <div class="date"><%= item.publishTime %></div>
+                <div class="views"><%= item.totalStartCount %></div>
+              </div>
+              <div class="coloring-tags">
+                <% item.tags.forEach(tag=> { %>
+                  <a href="/coloring-page-gallery?category=<%= tag %>"><span class="tag" data-tag="<%= tag %>"><%= tag %></span></a>
+                <% }); %>
+              </div>
             </div>
           </div>
         <% }); %>

views/v2/myworks.ejs

@@ -62,6 +62,7 @@
     /* 响应式设计, 如果是手机屏幕 */
     @media (max-width: 768px) {
       .tab-button  {
+        font-size: 1.0rem;
         padding: 1rem 1rem;
       }
     }