From 33c134891460fcc379dc5d835299a95c4aad0710 Mon Sep 17 00:00:00 2001
From: Doge <guiqiqi187@gmail.com>
Date: Sun, 9 May 2021 16:36:17 +0800
Subject: Finish post detail page

---
 layout/post.ejs | 97 ++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 65 insertions(+), 32 deletions(-)

(limited to 'layout/post.ejs')

diff --git a/layout/post.ejs b/layout/post.ejs
index ae30353..6b8ba67 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -1,34 +1,67 @@
-<article class="post content">
-    <!-- Post thumbnail with lazayload support -->
-    <div class="post-thumbnail" style="background-image: url('<%= page.thumbnail %>');"></div>
-
-    <!-- Podcast Player using Shikwasa -->
-    <% if (page.podcast) { %> 
-        <div class="post-podcast-player"></div>
-        <script>
-            window.addEventListener("load", () => {
-                const player = new Shikwasa({
-                    container: () => document.querySelector('.post-podcast-player'),
-                    audio: {
-                        title: "<%= page.title %>",
-                        artist: "<%= page.podcast.author %>",
-                        cover: "<%= page.podcast.thumbnail %>",
-                        src: "<%= page.podcast.media %>"
-                    },
-                    fixed: {
-                        type: "static"
-                    }
-                });
-            }, false);
-        </script>
-    <% } %> 
-
-    <!-- Post title and content -->
-    <div class="post-meta">
-        <div class="post-time">
-            <%- date(page.date, theme.timeformat) %>
+<section class="hero">
+    <div class="hero-body">
+        <div class="container">
+            <div class="columns">
+                <div class="column is-8 is-offset-2">
+                    <div class="card">
+                        <% if (page.thumbnail) { %>
+                            <div class="card-iamge">
+                                <figure class="image is-16by9">
+                                    <% if (theme.lazyload === true) { %>
+                                        <img class="lazy" data-src="<%= page.thumbnail %>" />
+                                    <% } else { %>
+                                        <img src="<%= page.thumbnail %>" />
+                                    <% } %>
+                                </figure>
+                            </div>
+                        <% } %>
+                        <div class="card-content">
+                            <section class="section">
+                                <h2 class="title has-text-centered">
+                                    <%= page.title %>
+                                </h2>
+                                <% if (page.podcast) { %>
+                                    <div class="post-podcast-player"></div>
+                                    <script>
+                                        window.addEventListener("load", () => {
+                                            const player = new Shikwasa({
+                                                container: () => document.querySelector('.post-podcast-player'),
+                                                audio: {
+                                                    title: "<%= page.title %>",
+                                                    artist: "<%= page.podcast.author %>",
+                                                    cover: "<%= page.podcast.cover %>",
+                                                    src: "<%= page.podcast.media %>"
+                                                },
+                                                fixed: {
+                                                    type: "auto",
+                                                    position: "bottom"
+                                                },
+                                                themeColor: "red"
+                                            });
+                                        }, false);
+                                    </script>
+                                <% } %>
+                                <section class="content post-content is-size-6">
+                                    <%- page.content %>
+                                </section>
+                                <div class="level">
+                                    <div class="level-left">
+                                        <div class="level-item">
+                                            <% if (page.tags) { %>
+                                                <div class="tags">
+                                                    <% (page.tags).forEach(function(item) { %>
+                                                        <span class="tag"># <%= item.name %></span>
+                                                        <% }); %>
+                                                </div>
+                                                <% } %>
+                                        </div>
+                                    </div>
+                                </div>
+                            </section>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
-    <h1 class="post-title"><%= page.title %></h1>
-    <div class="post-content"><%- page.content %></div>
-</article>
\ No newline at end of file
+</section>
\ No newline at end of file
-- 
cgit v1.2.3