Add: 归档页面按年份分类,完成基础样式
This commit is contained in:
parent
c932dd1258
commit
75d18040ef
|
@ -1,11 +1,42 @@
|
|||
<!-- 归档页面 内容 -->
|
||||
<ul class="archive-post-container">
|
||||
<% site.posts.forEach(post => { %>
|
||||
<li class="post-item">
|
||||
<div> 文章标题:<%= post.title %> </div>
|
||||
<div> 建立日期:<%= date(post.date, 'YYYY-MM-DD HH:MM:SS') %> </div>
|
||||
<div> 更新日期:<%= date(post.updated, 'YYYY-MM-DD HH:MM:SS') %> </div>
|
||||
<div> 页面摘要:<%= post.excerpt ? post.excerpt : '页面无摘要' %> </div>
|
||||
</li>
|
||||
<% if (is_archive()) { %>
|
||||
|
||||
<div class="archive-container">
|
||||
|
||||
<!-- 把所有文章按年份分类显示 -->
|
||||
<% let last; %>
|
||||
<% site.posts.each(function(post, i){ %>
|
||||
<% let year = post.date.year(); %>
|
||||
<% if (last != year) { %>
|
||||
<% if (last != null){ %>
|
||||
</div></section>
|
||||
<% } %>
|
||||
<% last = year; %>
|
||||
<section class="archives-wrap">
|
||||
<div class="archive-year">
|
||||
<%= year %>
|
||||
</div>
|
||||
<div class="archive-article-list">
|
||||
<% } %>
|
||||
<div class="archive-article-item">
|
||||
<a class="archive-article-title" href="<%- url_for(post.path) %>"><%= post.title %></a>
|
||||
<span class="archive-article-date"> <%= date(post.date, 'MM-DD') %> </span>
|
||||
</div>
|
||||
<% }) %>
|
||||
</ul>
|
||||
<% if (site.posts.length){ %>
|
||||
</div>
|
||||
</section>
|
||||
<% } %>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<% } %>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<!-- 页面模板 -->
|
||||
<!-- 通用页面模板 -->
|
||||
<div class="page-container">
|
||||
<div class="page-left">
|
||||
<%- partial('left-side') %>
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Hexo 扩展:辅助函数(Helper)
|
||||
* 补充复杂的业务逻辑
|
||||
* https://hexo.io/zh-cn/api/helper.html
|
||||
* 用法:<%= helper_test('xxx') %>
|
||||
*/
|
||||
hexo.extend.helper.register('helper_test', function (character) {
|
||||
return character + '😁';
|
||||
});
|
|
@ -0,0 +1,36 @@
|
|||
.archive-container {
|
||||
background: #fff
|
||||
padding 30px
|
||||
|
||||
.archives-wrap {
|
||||
margin-bottom 20px
|
||||
|
||||
.archive-year {
|
||||
font-size: 24px;
|
||||
color: #666;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.archive-article-list {
|
||||
|
||||
.archive-article-item {
|
||||
margin 10px 0
|
||||
font-size 16px
|
||||
|
||||
a.archive-article-title {
|
||||
color #8f8f8f
|
||||
|
||||
&:hover {
|
||||
color: #4786D6;
|
||||
}
|
||||
}
|
||||
|
||||
.archive-article-date {
|
||||
float right
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
.avatar {
|
||||
padding 2px
|
||||
border-radius 50%
|
||||
border-radius 10%
|
||||
border 1px solid #ddd
|
||||
width: 50%;
|
||||
}
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
@import "footer.styl"
|
||||
@import "common/nav.styl"
|
||||
@import "common/article-post.styl"
|
||||
@import "common/archive-post.styl"
|
||||
@import "common/site-info.styl"
|
||||
|
||||
.header {
|
||||
|
|
|
@ -6,3 +6,9 @@ console.log('this is main.js');
|
|||
e.setAttribute('role', 'navigation');
|
||||
});
|
||||
})();
|
||||
|
||||
// app.locals.structureArchiveList = function (posts) {
|
||||
// posts.forEach(post => {
|
||||
// console.log('post: ', post);
|
||||
// });
|
||||
// };
|
|
@ -1,3 +1,4 @@
|
|||
export const addClass = (element, className) => {
|
||||
element.classList.add(className)
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue