lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

抽离出 article-meta-info 组件，优化 CSS

This commit is contained in:
XPoet 2020-03-20 10:58:14 +08:00
parent a5a2d684bf
commit e67890a683
6 changed files with 70 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
layout/common/article-meta-info.ejs Normal file
View File

@ -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>

24
layout/common/article-post.ejs
View File

@ -1,34 +1,18 @@
<!-- is_post() 检查当前页面是否为文章 --> <!-- is_post() 检查当前页面是否为文章 -->
<% if (is_post()) { %> <% if (is_post()) { %>
<!-- 文章内容详情页面 -->
<div class="article-container"> <div class="article-container">
<div class="article-title"> <div class="article-title">
<h3><a><%= page.title %></a></h3> <h3><a><%= page.title %></a></h3>
</div> </div>
<div class="article-meta-info"> <div class="article-meta-info">
<div class="meta"> <%- partial('article-meta-info', {articleData: page, index: true}) %>
<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>
</div> </div>
<div class="article-content"> <div class="article-content">
<%- page.content %> <%- page.content %>
</div> </div>
<div class="article-nav"> <div class="article-nav">
<% if (page.prev) { %> <% if (page.prev) { %>
<div class="article-prev"> <div class="article-prev">

38
layout/common/home-post.ejs
View File

@ -15,42 +15,8 @@
<%- truncate(strip_html(post.content), {length: 80}) %> <%- truncate(strip_html(post.content), {length: 80}) %>
</div> </div>
<!-- date --> <div class="article-meta-info-container">
<div class="article-meta"> <%- partial('article-meta-info', {articleData: post, index: true}) %>
<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> </div>
</li> </li>
<% }) %> <% }) %>

26
source/css/common/article-meta-info.styl Normal file
View File

@ -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;
}
}
}
}

58
source/css/common/home-post.styl
View File

@ -5,6 +5,8 @@
.article-post-item { .article-post-item {
margin-bottom 30px margin-bottom 30px
padding-bottom 20px
border-bottom: 1px solid #f2f2f2;
.article-post-title { .article-post-title {
h1 { h1 {
@ -50,63 +52,9 @@
.article-post-content { .article-post-content {
padding 15px 0 padding 15px 0
line-height 26px
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;
}
}
.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;
}
}
}
}
} }
} }
} }

1
source/css/style.styl
View File

@ -9,6 +9,7 @@
@import "common/home-post.styl" @import "common/home-post.styl"
@import "common/archive-post.styl" @import "common/archive-post.styl"
@import "common/article-post.styl" @import "common/article-post.styl"
@import "common/article-meta-info.styl"
@import "common/category-post.styl" @import "common/category-post.styl"
@import "common/tag-post.styl" @import "common/tag-post.styl"
@import "common/site-info.styl" @import "common/site-info.styl"