summaryrefslogtreecommitdiff
path: root/layout
diff options
context:
space:
mode:
authorDoge <[email protected]>2021-05-09 17:48:44 +0800
committerDoge <[email protected]>2021-05-09 17:48:44 +0800
commite17c8354fcc5fdb3e7d66363e0acc79650577af3 (patch)
treea153c9a381e99f4382b3837b3826f6d960597684 /layout
parent33c134891460fcc379dc5d835299a95c4aad0710 (diff)
downloadchromate-e17c8354fcc5fdb3e7d66363e0acc79650577af3.tar.gz
chromate-e17c8354fcc5fdb3e7d66363e0acc79650577af3.tar.bz2
chromate-e17c8354fcc5fdb3e7d66363e0acc79650577af3.zip
Code enhancement
Diffstat (limited to 'layout')
-rw-r--r--layout/index.ejs198
-rw-r--r--layout/layout.ejs8
-rw-r--r--layout/post.ejs114
3 files changed, 157 insertions, 163 deletions
diff --git a/layout/index.ejs b/layout/index.ejs
index 7b91e49..cfb032a 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,117 +1,111 @@
-<section class="hero">
- <div class="hero-body">
- <div class="container">
- <% page.posts.each(function (post) { %>
- <div class="columns post-entry">
- <div class="column is-8 is-offset-2">
- <div class="card">
- <!-- Post thumbnail with lazayload support -->
- <% if (post.thumbnail) { %>
- <div class="card-iamge">
- <figure class="image is-16by9">
- <% if (post.thumbnail) { %>
- <% if (theme.lazyload === true) { %>
- <img class="lazy" data-src="<%= post.thumbnail %>" />
- <% } else { %>
- <img src="<%= post.thumbnail %>" />
- <% } %>
- <% } %>
- </figure>
- </div>
+<% page.posts.each(function (post) { %>
+ <div class="columns ">
+ <div class="column is-8 is-offset-2">
+ <div class="card post-entry">
+ <!-- Post thumbnail with lazayload support -->
+ <% if (post.thumbnail) { %>
+ <div class="card-iamge">
+ <figure class="image is-16by9">
+ <% if (post.thumbnail) { %>
+ <% if (theme.lazyload === true) { %>
+ <img class="lazy" data-src="<%= post.thumbnail %>" />
+ <% } else { %>
+ <img src="<%= post.thumbnail %>" />
+ <% } %>
<% } %>
+ </figure>
+ </div>
+ <% } %>
- <div class="card-content">
-
- <!-- Post title -->
- <p class="title is-4">
- <%= post.title %>
- </p>
-
- <!-- Post meta info -->
- <div class="level">
- <div class="level-left">
- <div class="level-item">
+ <div class="card-content">
+
+ <!-- Post title -->
+ <p class="title is-4">
+ <%= post.title %>
+ </p>
- <!-- Podcast duration with post date -->
- <% if (post.podcast && theme.podcast) { %>
- <div class="tags has-addons">
- <%
- const duration = post.podcast.duration;
- const hour = Math.floor(duration / 3600);
- const minute = Math.floor((duration / 60) % 60);
- const second = Math.floor(duration % 60);
- const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
- %>
- <span class="tag is-danger"><%- viewstr %></span>
- <span class="tag"><%- date(post.date, theme.timeformat) %></span>
- </div>
- <% } else { %>
- <div class="tags">
- <span class="tag is-danger">
- <%- date(post.date, theme.timeformat) %>
- </span>
- </div>
- <% } %>
- </div>
-
- <!-- Post tags -->
- <div class="level-item">
- <% if (post.tags) { %>
- <div class="tags">
- <% (post.tags).forEach(function(item) { %>
- <span class="tag"># <%= item.name %></span>
- <% }); %>
- </div>
- <% } %>
- </div>
+ <!-- Post meta info -->
+ <div class="level">
+ <div class="level-left">
+ <div class="level-item">
+ <!-- Podcast duration with post date -->
+ <% if (post.podcast && theme.podcast) { %>
+ <div class="tags has-addons">
+ <%
+ const duration = post.podcast.duration;
+ const hour = Math.floor(duration / 3600);
+ const minute = Math.floor((duration / 60) % 60);
+ const second = Math.floor(duration % 60);
+ const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+ %>
+ <span class="tag is-danger"><%- viewstr %></span>
+ <span class="tag"><%- date(post.date, theme.timeformat) %></span>
</div>
- </div>
-
- <!-- Post content or excerpt -->
- <section class="content has-text-weight-light is-size-6">
- <% if (post.excerpt) { %>
- <p><%- post.excerpt %></p>
- <% } else { %>
- <p><%- post.content %></p>
- <% } %>
- </section>
+ <% } else { %>
+ <div class="tags">
+ <span class="tag is-danger">
+ <%- date(post.date, theme.timeformat) %>
+ </span>
+ </div>
+ <% } %>
</div>
-
- <div class="card-footer">
- <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
- <% if (post.podcast && theme.podcast) { %>
- <%- __("listen") %>
- <% } else { %>
- <%- __("read") %>
- <% } %>
- </a>
+
+ <!-- Post tags -->
+ <div class="level-item">
+ <% if (post.tags) { %>
+ <div class="tags">
+ <% (post.tags).forEach(function(item) { %>
+ <span class="tag"># <%= item.name %></span>
+ <% }); %>
+ </div>
+ <% } %>
</div>
</div>
</div>
+
+ <!-- Post content or excerpt -->
+ <section class="content has-text-weight-light is-size-6">
+ <% if (post.excerpt) { %>
+ <p><%- post.excerpt %></p>
+ <% } else { %>
+ <p><%- post.content %></p>
+ <% } %>
+ </section>
</div>
- <% }); %>
- <!-- Page navigation -->
- <% if (page.prev || page.next) { %>
- <div class="columns pagination-bar">
- <div class="column is-8 is-offset-2">
- <nav class="pagination is-centered" role="navigation" aria-label="pagination">
- <% if (page.prev) { %>
- <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
- <% } else { %>
- <a class="button is-disabled is-light" disabled><%- __("prev") %></a>
- <% } %>
- <% if (page.next) { %>
- <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
- <% } else { %>
- <a class="button is-disabled is-light" disabled><%- __("next") %></a>
- <% } %>
- </nav>
- </div>
+ <div class="card-footer">
+ <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
+ <% if (post.podcast && theme.podcast) { %>
+ <%- __("listen") %>
+ <% } else { %>
+ <%- __("read") %>
+ <% } %>
+ </a>
</div>
- <% } %>
+
+ </div>
+ </div>
+ </div>
+<% }); %>
+
+<!-- Page navigation -->
+<% if (page.prev || page.next) { %>
+ <div class="columns pagination-bar">
+ <div class="column is-8 is-offset-2">
+ <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+ <% if (page.prev) { %>
+ <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
+ <% } else { %>
+ <a class="button is-disabled is-light" disabled><%- __("prev") %></a>
+ <% } %>
+ <% if (page.next) { %>
+ <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
+ <% } else { %>
+ <a class="button is-disabled is-light" disabled><%- __("next") %></a>
+ <% } %>
+ </nav>
</div>
</div>
-</section>
+<% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 96d7f6a..d204ff4 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -4,7 +4,13 @@
<body>
<%- partial('_partial/header') %>
<div class="wrapper">
- <%- body %>
+ <section class="hero">
+ <div class="hero-body">
+ <div class="container">
+ <%- body %>
+ </div>
+ </div>
+ </section>
</div>
<%- partial('_partial/footer') %>
</body>
diff --git a/layout/post.ejs b/layout/post.ejs
index 6b8ba67..9c04e82 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -1,67 +1,61 @@
-<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="columns">
+ <div class="column is-8 is-offset-2">
+ <div class="card post-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 %>" />
<% } %>
- <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>
+ </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>
- </section>
+ <% } %>
+ </div>
</div>
</div>
- </div>
+ </section>
</div>
</div>
</div>
-</section> \ No newline at end of file
+</div> \ No newline at end of file