album.ejs 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  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/album.css">
  8. <script type="application/ld+json">
  9. {
  10. "@context": "https://schema.org",
  11. "@type": "WebPage",
  12. "name": "<%= data.title %>",
  13. "description": "<%= data.slogon %>",
  14. "url": "https://art.pcoloring.com<%= uri %>",
  15. "mainEntityOfPage": "https://art.pcoloring.com<%= uri %>",
  16. "publisher": {
  17. "@type": "Organization",
  18. "name": "JCCY",
  19. "logo": {
  20. "@type": "ImageObject",
  21. "url": "https://art.pcoloring.com/assets/icon/icon.webp"
  22. }
  23. },
  24. "image": "<%= data.cover %>",
  25. "thumbnailUrl": "<%= data.icon %>",
  26. "keywords": "coloring pages album, <%= data.title %>, printable, free coloring pages, album, art, color",
  27. "contentRating": "General Audience",
  28. "hasPart": [
  29. <% for(let i = 0; i < data.contents.length; i++) { %>
  30. {
  31. "@type": "ImageObject",
  32. "name": "<%= data.contents[i].title %>",
  33. "url": "https://art.pcoloring.com<%= data.contents[i].uri %>",
  34. "contentUrl": "<%= data.contents[i].thumb %>",
  35. "thumbnailUrl": "<%= data.contents[i].thumb %>",
  36. "height": "480",
  37. "width": "480"
  38. }<%= i < data.contents.length - 1 ? ',' : '' %>
  39. <% }; %>
  40. ]
  41. }
  42. </script>
  43. </head>
  44. <!-- Google tag (gtag.js) -->
  45. <script async src="https://www.googletagmanager.com/gtag/js?id=G-JBGGVGLHTP"></script>
  46. <script>
  47. window.dataLayer = window.dataLayer || [];
  48. function gtag() { dataLayer.push(arguments); }
  49. gtag('js', new Date());
  50. gtag('config', 'G-JBGGVGLHTP');
  51. </script>
  52. <body>
  53. <%- include('header') %>
  54. <div class="album-header">
  55. <h1 style="color: purple">
  56. <%= data.title %>
  57. </h1>
  58. <img src="<%= data.cover %>" alt="<%= data.title %>">
  59. <h2 style="color: gray; font-size: 18px; padding: 10px">
  60. <%= data.slogon %>
  61. </h2>
  62. </div>
  63. <div class="content">
  64. <div class="image-grid">
  65. <% data.contents.forEach(item=> { %>
  66. <div class="image-card">
  67. <a href="<%= item.uri %>"><img src="<%= item.thumb %>" alt="<%= item.title %>"></a>
  68. <div class="card-title"><%= item.title %></div>
  69. </div>
  70. <% }); %>
  71. </div>
  72. </div>
  73. <div style="padding: 40px"></div>
  74. </body>
  75. </html>