add title for coloring page image

config/meta.js

@@ -130,9 +130,9 @@ let designersDescription = {
 let designerTitle = {
   zh: '填色页艺术家',
   en: 'Coloring Page Artists',
-  es: 'Artistas de páginas de colorear',
-  pt: 'Artistas de páginas de colorir',
-  ja: '着色用ページのアーティスト',
+  es: 'Artista de páginas de colorear',
+  pt: 'Artista de páginas de colorir',
+  ja: '着色ページのアーティスト',
 }
 
 let designerDescription = {

config/translate.js

@@ -95,7 +95,7 @@ let feedback = {
   ja: 'ご意見・ご感想',
 }
 
-let designer = {
+let artist = {
   zh: '艺术家',
   en: 'Artist',
   es: 'Artista',
@@ -103,7 +103,7 @@ let designer = {
   ja: 'アーティスト',
 }
 
-let designerColumn = {
+let coloringPageArtists = {
   zh: '填色页艺术家',
   en: 'Coloring Page Artists',
   es: 'Artistas de páginas de colorear',
@@ -111,13 +111,6 @@ let designerColumn = {
   ja: '着色用ページのアーティスト',
 }
 
-let coloringPageDesigner = {
-  zh: '艺术填色设计师',
-  en: 'Coloring Page Designer',
-  es: 'Diseñadora de coloreado artístico',
-  pt: 'Designer (a) de coloração artística',
-  ja: 'アート着色デザイナー',
-}
 
 let publishTime = {
   zh: '发布时间',
@@ -504,9 +497,8 @@ let translate = {
   about,
   feedback,
   contactUs,
-  designer,
-  designerColumn,
-  coloringPageDesigner,
+  artist,
+  coloringPageArtists,
   publishTime,
   app,
   appDownload,

dist/stylesheets/styles.css

@@ -35,11 +35,34 @@ body {
 .content {
   margin-top: 20px;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
 
 }
 
+.image-card {
+  padding: 5px;
+  border: 1px solid #ccc; /* 卡片边框 */
+  border-radius: 8px;     /* 卡片圆角 */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
+}
+
+.card-title {
+  white-space: nowrap; /* 禁止文本换行 */
+  overflow-x: auto;    /* 允许水平滚动 */
+  -ms-overflow-style: none;  /* IE和Edge浏览器隐藏滚动条 */
+  scrollbar-width: none;  /* Firefox浏览器隐藏滚动条 */
+  padding: 5px 4px 0px 4px;
+  text-align: center;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.card-title::-webkit-scrollbar {
+  display: none; /* Chrome, Safari和Opera浏览器隐藏滚动条 */
+}
+
 .image-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
@@ -54,8 +77,6 @@ body {
   aspect-ratio: 1;
   display: block;
   cursor: pointer;
-  border-radius: 8px; /* 可选，添加圆角效果 */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可选，添加阴影效果 */
 }
 
 
@@ -67,6 +88,7 @@ body {
 }
 
 .album-grid-card {
+  padding: 5px 0px 5px 0px;
   border: 1px solid #ccc;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

routes/index.js

@@ -660,7 +660,7 @@ router.get('/:lang/coloring-page-album/:id', function (req, res, next) {
 
 
 // 设计师专栏路由
-router.get('/:lang/designers', function (req, res, next) {
+router.get('/:lang/artists', function (req, res, next) {
   (async function () {
     let lang = utils.lang.ensureLanguage(req.params.lang);
     if (!req.cookies.lang || req.cookies.lang != lang) {
@@ -714,9 +714,10 @@ router.get('/:lang/designers', function (req, res, next) {
         data: docs,
         length: docs.length,
         translate,
+        meta,
         languages,
         lang,
-        uri: `/${lang}/designers`,
+        uri: `/${lang}/artists`,
       };
 
       // 渲染EJS模板到内存中
@@ -748,7 +749,7 @@ router.get('/:lang/designers', function (req, res, next) {
 
 
 // 设计师详情页路由
-router.get('/:lang/designer/:id', function (req, res, next) {
+router.get('/:lang/artist/:id', function (req, res, next) {
   (async function () {
     let lang = utils.lang.ensureLanguage(req.params.lang);
     if (!req.cookies.lang || req.cookies.lang != lang) {
@@ -796,9 +797,10 @@ router.get('/:lang/designer/:id', function (req, res, next) {
         recordsFiltered: result.recordsFiltered,
         recordsTotal: result.recordsTotal,
         translate,
+        meta,
         lang,
         languages,
-        uri: `/${lang}/designer/${id}`,
+        uri: `/${lang}/artist/${id}`,
       };
 
       // 渲染EJS模板到内存中

service/cron-jobs/sitemap.js

@@ -54,7 +54,7 @@ async function generateSitemap() {
     '    <priority>0.8</priority>',
     '  </url>',
     '  <url>',
-    '    <loc>https://art.pcoloring.com/en/designers</loc>',
+    '    <loc>https://art.pcoloring.com/en/artists</loc>',
     `    <lastmod>${date}</lastmod>`,
     '    <changefreq>monthly</changefreq>',
     '    <priority>0.8</priority>',
@@ -143,7 +143,7 @@ async function generateSitemap() {
   designers.forEach(e => {
     designersXml = designersXml.concat([
       '  <url>',
-      `    <loc>https://art.pcoloring.com/en/designer/${e._id}</loc>`,
+      `    <loc>https://art.pcoloring.com/en/artist/${e._id}</loc>`,
       `    <lastmod>${date}</lastmod>`,
       '  </url>',
     ])

views/album-section.ejs

@@ -12,12 +12,12 @@
     <div class="album-icon-grid">
       <% albums.forEach(album=> { %>
         <div class="album-grid-card">
-          <div style="padding: 2px; font-size: 14px; color: grey;">
+          <div style="padding: 2px; font-size: 14px; color: grey; text-align: center; white-space: nowrap;">
             <%= translate.coloringPageAlbum[lang] %>
           </div>
           <a href="/<%= lang %>/coloring-page-album/<%= album._id %>"><img src="<%= album.icon %>"
               class="album-icon-img" alt="<%= translate.coloringPageAlbum[lang] %>: <%= album.title %>"></a>
-          <div style="padding: 2px; font-weight: bold;">
+          <div class="card-title">
             <%= album.title %>
           </div>
         </div>

views/album.ejs

@@ -69,7 +69,10 @@
     <div class="content">
       <div class="image-grid">
         <% data.contents.forEach(item=> { %>
-          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="image-card">
+            <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+            <div class="card-title"><%= item.title %></div>
+          </div>
           <% }); %>
       </div>
     </div>

views/category.ejs

@@ -81,7 +81,10 @@
     <div class="content">
       <div class="image-grid">
         <% data.forEach(item=> { %>
-          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="image-card">
+            <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+            <div class="card-title"><%= item.title %></div>
+          </div>
           <% }); %>
       </div>
     </div>

views/designer-section.ejs

@@ -3,9 +3,9 @@
 <div class="content-wrapper">
   <div class="content-title">
     <h2>
-      <%= translate.designerColumn[lang] %>:
+      <%= translate.coloringPageArtists[lang] %>:
     </h2>
-    <a href="<%= lang %>/designers">
+    <a href="<%= lang %>/artists">
       <%= translate.more[lang] %> >>>
     </a>
   </div>
@@ -13,7 +13,7 @@
   <div class="container">
     <% designers.forEach(item=> { %>
       <div class="card">
-        <a href="/<%= lang %>/designer/<%= item._id %>"><img src="<%= item.avatar %>" loading="lazy"
+        <a href="/<%= lang %>/artist/<%= item._id %>"><img src="<%= item.avatar %>" loading="lazy"
             alt="<%= item.username %>"></a>
         <div class="info">
           <p><strong>

views/designer.ejs

@@ -22,7 +22,7 @@
 
     <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
       <div class="card" style="width: 200px;">
-        <a href="/<%= lang %>/designer/<%= user._id %>"><img src="<%= user.avatar %>" alt="<%= user.username %>"></a>
+        <a href="/<%= lang %>/artist/<%= user._id %>"><img src="<%= user.avatar %>" alt="<%= user.username %>"></a>
         <div class="info">
           <p><strong>
               <%= user.username %>
@@ -39,7 +39,10 @@
     <div class="content">
       <div class="image-grid">
         <% data.forEach(item=> { %>
-          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="image-card">
+            <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+            <div class="card-title"><%= item.title %></div>
+          </div>
           <% }); %>
       </div>
     </div>

views/designers.ejs

@@ -37,7 +37,7 @@
   <div class="container">
     <% data.forEach(item=> { %>
       <div class="card">
-        <a href="/<%= lang %>/designer/<%= item._id %>"><img src="<%= item.avatar %>" alt="<%= item.username %>"></a>
+        <a href="/<%= lang %>/artist/<%= item._id %>"><img src="<%= item.avatar %>" alt="<%= meta.designerTitle[lang] %>: <%= item.username %>"></a>
         <div class="info">
           <p><strong>
               <%= item.username %>

views/detail.ejs

@@ -74,7 +74,7 @@
                     <%= detail.title %>
                 </h1>
                 <p>
-                    <%= translate.designer[lang] %>: <a href="/<%= lang %>/designer/<%= detail.user._id %>"
+                    <%= translate.artist[lang] %>: <a href="/<%= lang %>/artist/<%= detail.user._id %>"
                             class="tag-button">
                             <%= detail.user.username %>
                         </a>
@@ -111,7 +111,12 @@
         <div class="content" style="margin-bottom: 40px;">
             <div class="image-grid">
                 <% relates.forEach(item=> { %>
-                    <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+                    <div class="image-card">
+                        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+                        <div class="card-title">
+                            <%= item.title %>
+                        </div>
+                    </div>
                     <% }); %>
             </div>
         </div>

views/header.ejs

@@ -26,8 +26,8 @@
         <a href="/<%= lang %>/special" class="<%= uri.includes(`/${lang}/special`) ? 'selected' : '' %>">
           <%= translate.special[lang] %>
         </a>
-        <a href="/<%= lang %>/designers" class="<%= uri.includes(`/${lang}/designers`) ? 'selected' : '' %>">
-          <%= translate.designerColumn[lang] %>
+        <a href="/<%= lang %>/artists" class="<%= uri.includes(`/${lang}/artist`) ? 'selected' : '' %>">
+          <%= translate.coloringPageArtists[lang] %>
         </a>
         <div class="divider"></div>
         <!--
@@ -56,7 +56,8 @@
 
     <!-- <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , alt="Art Number Coloring"></a> -->
 
-    <a href="/<%= lang %>"><img src="/assets/icon/icon.webp" , class="logo" , width="42px" height="42px" alt="Art Number Coloring Logo"></a>
+    <a href="/<%= lang %>"><img src="/assets/icon/icon.webp" , class="logo" , width="42px" height="42px"
+        alt="Art Number Coloring Logo"></a>
     <a href="/<%= lang %>"><img src="/assets/svg/logo.svg" , width="160px" height="60px" alt="Art Number Coloring"></a>
 
   </div>

views/hot-section.ejs

@@ -11,7 +11,10 @@
   <div class="content">
     <div class="image-grid">
       <% recommend.forEach(item=> { %>
-        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+        <div class="image-card">
+          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="card-title"><%= item.title %></div>
+        </div>
         <% }); %>
     </div>
   </div>

views/latest-section.ejs

@@ -11,7 +11,10 @@
   <div class="content">
     <div class="image-grid">
       <% latest.forEach(item=> { %>
-        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+        <div class="image-card">
+          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="card-title"><%= item.title %></div>
+        </div>
         <% }); %>
     </div>
   </div>

views/special-section.ejs

@@ -11,7 +11,10 @@
   <div class="content">
     <div class="image-grid">
       <% special.forEach(item=> { %>
-        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+        <div class="image-card">
+          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="card-title"><%= item.title %></div>
+        </div>
         <% }); %>
     </div>
   </div>

views/special.ejs

@@ -35,7 +35,10 @@
   <div class="content">
     <div class="image-grid">
       <% data.forEach(item=> { %>
-        <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+        <div class="image-card">
+          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="card-title"><%= item.title %></div>
+        </div>
         <% }); %>
     </div>
   </div>

views/tag.ejs

@@ -76,7 +76,10 @@
     <div class="content">
       <div class="image-grid">
         <% data.forEach(item=> { %>
-          <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+          <div class="image-card">
+            <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
+            <div class="card-title"><%= item.title %></div>
+          </div>
           <% }); %>
       </div>
     </div>