improvement: make blog more like mockups
This commit is contained in:
parent
9b13b6544e
commit
48cd967795
4 changed files with 65 additions and 15 deletions
|
@ -1,6 +1,6 @@
|
||||||
<% if (pagination == 2){ %>
|
<% if (pagination == 2){ %>
|
||||||
<% page.posts.each(function(post){ %>
|
<% page.posts.each(function(post){ %>
|
||||||
<%- partial('article', {post: post, index: true}) %>
|
<%- partial('article-preview', {post: post, index: true}) %>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } else { %>
|
<% } else { %>
|
||||||
<% var last; %>
|
<% var last; %>
|
||||||
|
@ -17,7 +17,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="archives">
|
<div class="archives">
|
||||||
<% } %>
|
<% } %>
|
||||||
<%- partial('article', {post: post, index: true}) %>
|
<%- partial('article-preview', {post: post, index: true}) %>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% if (page.posts.length){ %>
|
<% if (page.posts.length){ %>
|
||||||
</div></section>
|
</div></section>
|
||||||
|
|
45
src/blog/themes/blog/layout/_partial/article-preview.ejs
Normal file
45
src/blog/themes/blog/layout/_partial/article-preview.ejs
Normal file
|
@ -0,0 +1,45 @@
|
||||||
|
<article id="<%= post.layout %>-<%= post.slug %>" class="card card-primary article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
|
||||||
|
<div class="article-inner">
|
||||||
|
<%- partial('post/gallery') %>
|
||||||
|
<% if (post.link || post.title){ %>
|
||||||
|
<header class="article-header">
|
||||||
|
<%- partial('post/title', {class_name: 'article-title'}) %>
|
||||||
|
</header>
|
||||||
|
<% } %>
|
||||||
|
<div class="article-meta">
|
||||||
|
<%- partial('post/category') %>
|
||||||
|
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
|
||||||
|
</div>
|
||||||
|
<div class="article-entry" itemprop="articleBody">
|
||||||
|
<% if (post.excerpt && index){ %>
|
||||||
|
<%- post.excerpt %>
|
||||||
|
<% if (theme.excerpt_link){ %>
|
||||||
|
<p class="article-more-link">
|
||||||
|
<a href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %></a>
|
||||||
|
</p>
|
||||||
|
<% } %>
|
||||||
|
<% } else { %>
|
||||||
|
<%- post.content %>
|
||||||
|
<% } %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<footer class="article-footer">
|
||||||
|
<% if (post.comments && config.disqus_shortname){ %>
|
||||||
|
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
|
||||||
|
<% } %>
|
||||||
|
<%- partial('post/tag') %>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<% if (!index){ %>
|
||||||
|
<%- partial('post/nav') %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% if (!index && post.comments && config.disqus_shortname){ %>
|
||||||
|
<section id="comments">
|
||||||
|
<div id="disqus_thread">
|
||||||
|
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<% } %>
|
|
@ -1,15 +1,9 @@
|
||||||
<article id="<%= post.layout %>-<%= post.slug %>" class="card card-primary article article-type-<%= post.layout %>" itemscope itemprop="blogPost">
|
<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> mb" itemscope itemprop="blogPost">
|
||||||
<div class="article-inner">
|
<div class="article-inner">
|
||||||
<%- partial('post/gallery') %>
|
<%- partial('post/gallery') %>
|
||||||
<% if (post.link || post.title){ %>
|
<% if (post.link || post.title){ %>
|
||||||
<header class="article-header">
|
<h1 class="page-title"><%= post.title %></h1>
|
||||||
<%- partial('post/title', {class_name: 'article-title'}) %>
|
|
||||||
</header>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
<div class="article-meta">
|
|
||||||
<%- partial('post/category') %>
|
|
||||||
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
|
|
||||||
</div>
|
|
||||||
<div class="article-entry" itemprop="articleBody">
|
<div class="article-entry" itemprop="articleBody">
|
||||||
<% if (post.excerpt && index){ %>
|
<% if (post.excerpt && index){ %>
|
||||||
<%- post.excerpt %>
|
<%- post.excerpt %>
|
||||||
|
@ -25,6 +19,21 @@
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<% if (!index){ %>
|
||||||
|
<%- partial('post/nav') %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<section class="card card-noheader">
|
||||||
|
<div class="author-area">
|
||||||
|
<img src="/img/avatar.png" class="author-avatar" alt="avatar">
|
||||||
|
<div class="author-metadata">
|
||||||
|
<div class="author-pseudo">Écrit par <a href="https://kazhnuz.space">Kazhnuz</a></div>
|
||||||
|
<small class="author-date">Le <%= date(post.date, "dddd DD MMMM YYYY, hh:mm:ss") %></small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<%- partial('post/category') %>
|
||||||
|
</section>
|
||||||
|
|
||||||
<footer class="article-footer">
|
<footer class="article-footer">
|
||||||
<% if (post.comments && config.disqus_shortname){ %>
|
<% if (post.comments && config.disqus_shortname){ %>
|
||||||
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
|
<a href="<%- post.permalink %>#disqus_thread" class="article-comment-link"><%= __('comment') %></a>
|
||||||
|
@ -32,10 +41,6 @@
|
||||||
<%- partial('post/tag') %>
|
<%- partial('post/tag') %>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<% if (!index){ %>
|
|
||||||
<%- partial('post/nav') %>
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
<% if (!index && post.comments && config.disqus_shortname){ %>
|
<% if (!index && post.comments && config.disqus_shortname){ %>
|
||||||
<section id="comments">
|
<section id="comments">
|
||||||
<div id="disqus_thread">
|
<div id="disqus_thread">
|
||||||
|
|
|
@ -67,7 +67,7 @@ a.article-nav-link-wrap {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.pigimg {
|
.pigimg, .mb {
|
||||||
padding-bottom:1.5rem;
|
padding-bottom:1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in a new issue