category.ejs 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. <!DOCTYPE html>
  2. <html lang="<%= lang %>">
  3. <head>
  4. <%- include('common-meta') %>
  5. <link rel="stylesheet" href="/stylesheets/styles.css">
  6. <link rel="stylesheet" href="/stylesheets/header.css">
  7. <link rel="stylesheet" href="/stylesheets/category.css">
  8. <% if (data.length> 0) { %>
  9. <script type="application/ld+json">
  10. {
  11. "@context": "https://schema.org",
  12. "@type": "WebPage",
  13. "name": "<%= title %>",
  14. "description": "<%= description %>",
  15. "url": "https://art.pcoloring.com<%= uri %>",
  16. "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
  17. "publisher": {
  18. "@type": "Organization",
  19. "name": "JCCY",
  20. "logo": {
  21. "@type": "ImageObject",
  22. "url": "https://art.pcoloring.com/assets/icon/icon.webp"
  23. }
  24. },
  25. "image": "<%= data[0].thumb %>",
  26. "thumbnailUrl": "<%= data[0].thumb %>",
  27. "keywords": "coloring pages categories, animal coloring page, plant coloring page, people coloring page, fantasy coloring page, famous coloring page, printable, free coloring pages, art, color by number, paint by number",
  28. "contentRating": "General Audience",
  29. "hasPart": [
  30. <% for(let i = 0; i < Math.min(6, data.length); i++) { %>
  31. {
  32. "@type": "ImageObject",
  33. "name": "<%= data[i].title %>",
  34. "url": "https://art.pcoloring.com<%= data[i].uri %>",
  35. "contentUrl": "<%= data[i].thumb %>",
  36. "thumbnailUrl": "<%= data[i].thumb %>",
  37. "height": "480",
  38. "width": "480"
  39. }<%= i < Math.min(6, data.length) - 1 ? ',' : '' %>
  40. <% }; %>
  41. ]
  42. }
  43. </script>
  44. <% } %>
  45. </head>
  46. <!-- Google tag (gtag.js) -->
  47. <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
  48. <script>
  49. window.dataLayer = window.dataLayer || [];
  50. function gtag() { dataLayer.push(arguments); }
  51. gtag('js', new Date());
  52. gtag('config', 'G-JBGGVGLHTP');
  53. </script>
  54. <body>
  55. <%- include('header') %>
  56. <h1 style="display: flex; justify-content: center; padding: 10px; color: purple">
  57. <%= h1title %>
  58. </h1>
  59. <div class="category">
  60. <% categories.forEach(item=> { %>
  61. <a href="/<%= lang %>/category/<%= item.id %>" class="<%= tag == item.id ? 'selected' : '' %>">
  62. <%= item[lang] %>
  63. </a>
  64. <% }); %>
  65. <a href="/<%= lang %>/tag" style="color: #ff4081">
  66. <%= translate.more[lang] %>>>>
  67. </a>
  68. </div>
  69. <div class="content">
  70. <div class="image-grid">
  71. <% data.forEach(item=> { %>
  72. <div class="image-card">
  73. <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
  74. <div class="card-title">
  75. <%= item.title %>
  76. </div>
  77. </div>
  78. <% }); %>
  79. </div>
  80. </div>
  81. <%- include('pagination') %>
  82. </body>
  83. </html>