diff options
Diffstat (limited to 'layout/post.ejs')
| -rw-r--r-- | layout/post.ejs | 97 |
1 files changed, 65 insertions, 32 deletions
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 |