抽离出 article-meta-info 组件，优化 CSS
This commit is contained in:
XPoet
parent
a5a2d684bf
commit
e67890a683
|
|
@ -0,0 +1,34 @@
|
|||
<div class="article-meta-info">
|
||||
<!-- date -->
|
||||
<span class="article-date article-meta-item">
|
||||
<i class="fa fa-calendar-o"></i> <%= date(articleData.date, 'YYYY-MM-DD HH:MM:SS') %>
|
||||
</span>
|
||||
|
||||
<!-- categories -->
|
||||
<% if (articleData.categories.length) { %>
|
||||
<span class="article-categories article-meta-item">
|
||||
<i class="fa fa-bookmark"></i>
|
||||
<ul>
|
||||
<% articleData.categories.forEach((category, i) => { %>
|
||||
<li>
|
||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"><%= category.name %></a>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</span>
|
||||
<% } %>
|
||||
|
||||
<!-- tags -->
|
||||
<% if (articleData.tags.length) { %>
|
||||
<span class="article-tags article-meta-item">
|
||||
<i class="fa fa-tags"></i>
|
||||
<ul>
|
||||
<% articleData.tags.forEach((tag, i) => { %>
|
||||
<li>
|
||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"><%= tag.name %></a>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</span>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
@ -1,34 +1,18 @@
|
|||
<!-- is_post() 检查当前页面是否为文章 -->
|
||||
<% if (is_post()) { %>
|
||||
<!-- 文章内容详情页面 -->
|
||||
<div class="article-container">
|
||||
<div class="article-title">
|
||||
<h3><a><%= page.title %></a></h3>
|
||||
</div>
|
||||
|
||||
<div class="article-meta-info">
|
||||
<div class="meta">
|
||||
<div class="info">
|
||||
<span>
|
||||
<i class="fa fa-calendar"></i>
|
||||
<span class="date"><%- date(page.date, 'YYYY-MM-DD') %></span>
|
||||
</span>
|
||||
<span>
|
||||
<i class="fa fa-list"></i>
|
||||
<% page.categories.forEach(category => { %>
|
||||
<a href="<%- url_for(category.path) %>" rel="category"><%= category.name %></a>
|
||||
<% }) %>
|
||||
</span>
|
||||
<span>
|
||||
<% page.tags.forEach(tag => { %>
|
||||
<a href="<%- url_for(tag.path) %>" rel="tag">#<%= tag.name %></a>
|
||||
<% }) %>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<%- partial('article-meta-info', {articleData: page, index: true}) %>
|
||||
</div>
|
||||
|
||||
<div class="article-content">
|
||||
<%- page.content %>
|
||||
</div>
|
||||
|
||||
<div class="article-nav">
|
||||
<% if (page.prev) { %>
|
||||
<div class="article-prev">
|
||||
|
|
|
|||
|
|
@ -15,42 +15,8 @@
|
|||
<%- truncate(strip_html(post.content), {length: 80}) %>
|
||||
</div>
|
||||
|
||||
<!-- date -->
|
||||
<div class="article-meta">
|
||||
<span class="article-date article-item">
|
||||
<i class="fa fa-calendar-o"></i>
|
||||
<%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %>
|
||||
</span>
|
||||
|
||||
<!-- categories -->
|
||||
<% if (post.categories.length) { %>
|
||||
<span class="article-categories article-item">
|
||||
<i class="fa fa-bookmark"></i>
|
||||
<ul>
|
||||
<% post.categories.forEach((category, i) => { %>
|
||||
<li>
|
||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(category.path) %>"
|
||||
rel="tag"><%= category.name %></a>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</span>
|
||||
<% } %>
|
||||
|
||||
<!-- tags -->
|
||||
<% if (post.tags.length) { %>
|
||||
<span class="article-tags article-item">
|
||||
<i class="fa fa-tags"></i>
|
||||
<ul>
|
||||
<% post.tags.forEach((tag, i) => { %>
|
||||
<li>
|
||||
<%= i === 0 ? '' : '| ' %><a href="<%- url_for(tag.path) %>"
|
||||
rel="tag"><%= tag.name %></a>
|
||||
</li>
|
||||
<% }); %>
|
||||
</ul>
|
||||
</span>
|
||||
<% } %>
|
||||
<div class="article-meta-info-container">
|
||||
<%- partial('article-meta-info', {articleData: post, index: true}) %>
|
||||
</div>
|
||||
</li>
|
||||
<% }) %>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.article-meta-info {
|
||||
color: #bbbbbb;
|
||||
font-size: 12px;
|
||||
|
||||
.article-meta-item {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.article-tags, .article-categories {
|
||||
display: inline;
|
||||
|
||||
ul, li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, 0.44);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -5,6 +5,8 @@
|
|||
.article-post-item {
|
||||
|
||||
margin-bottom 30px
|
||||
padding-bottom 20px
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
|
||||
.article-post-title {
|
||||
h1 {
|
||||
|
|
@ -50,63 +52,9 @@
|
|||
|
||||
.article-post-content {
|
||||
padding 15px 0
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
color: #4786D6;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #2F69B3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: #5F5F5F;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #5F5F5F;
|
||||
font-size: 16px;
|
||||
}
|
||||
line-height 26px
|
||||
}
|
||||
|
||||
|
||||
.article-meta {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f2f2f2;
|
||||
color: #bbbbbb;
|
||||
font-size: 12px;
|
||||
position relative
|
||||
|
||||
.article-item {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.article-tags, .article-categories {
|
||||
display: inline;
|
||||
|
||||
ul, li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(0, 0, 0, 0.44);
|
||||
font-weight: 400;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
@import "common/home-post.styl"
|
||||
@import "common/archive-post.styl"
|
||||
@import "common/article-post.styl"
|
||||
@import "common/article-meta-info.styl"
|
||||
@import "common/category-post.styl"
|
||||
@import "common/tag-post.styl"
|
||||
@import "common/site-info.styl"
|
||||
|
|
|
|||
Loading…
Reference in New Issue