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/_partial/footer.ejs |  4 +-
 layout/index.ejs           |  2 +-
 layout/post.ejs            | 97 +++++++++++++++++++++++++++++++---------------
 3 files changed, 68 insertions(+), 35 deletions(-)

(limited to 'layout')

diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs
index c17705b..b5fe13e 100644
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@@ -4,9 +4,9 @@
             Copyright © <%= date(Date.now(), 'YYYY' ) %> <%= config.title %>
         </div>
         <div class="footer-power">
-            <p>Powered by <a class="has-text-black" href="https://hexo.io" target="_blank">Hexo</a> 
+            <p>Powered by <a href="https://hexo.io" target="_blank">Hexo</a> 
             <i class="fa fa-heart has-text-danger"></i>
-            Theme <a class="has-text-black" href="https://github.com/guiqiqi/chromate">Chromate</a>
+            Theme <a href="https://github.com/guiqiqi/chromate">Chromate</a>
         </div>
     </div>
 </footer>
\ No newline at end of file
diff --git a/layout/index.ejs b/layout/index.ejs
index 53335fe..7b91e49 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -59,7 +59,7 @@
                                             <% if (post.tags) { %> 
                                                 <div class="tags">
                                                     <% (post.tags).forEach(function(item) { %>
-                                                        <span class="tag"><%= item.name %></span>
+                                                        <span class="tag"># <%= item.name %></span>
                                                     <% }); %>
                                                 </div>
                                             <% } %>
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