diff options
| -rw-r--r-- | layout/_partial/footer.ejs | 4 | ||||
| -rw-r--r-- | layout/index.ejs | 2 | ||||
| -rw-r--r-- | layout/post.ejs | 97 | ||||
| -rw-r--r-- | source/css/style.css | 4 |
4 files changed, 72 insertions, 35 deletions
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 diff --git a/source/css/style.css b/source/css/style.css index f71f302..5596590 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -33,4 +33,8 @@ pre { .footer { padding: 1rem 1rem 1rem; background-color: transparent; +} + +.post-content { + padding-top: 2rem; }
\ No newline at end of file |