提交 044af0e5 编写于 作者: EvanOne(文一)'s avatar EvanOne(文一)

refactor: Tag & category & archive page

上级 2b9a641f
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
使用 `stun` 主题运行后,浏览器里显示: 使用 `stun` 主题运行后,浏览器里显示:
` `
n/layout.pug block content include ./_mixins/posts-sort.pug include ./_mixins/post-header.pug div.content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/pagination.pug else include ./_components/recent-posts.pug n/layout.pug block content include ./_mixins/post-list.pug include ./_mixins/post-header.pug div.content.code-highlight if theme.post_list_paged.home include ./_components/recent-posts.pug include ./_components/pagination.pug else include ./_components/recent-posts.pug
` `
原因是没有安装对 `pug` 的支持。文档和 READMD 都有提到: 原因是没有安装对 `pug` 的支持。文档和 READMD 都有提到:
......
...@@ -22,8 +22,8 @@ menu: ...@@ -22,8 +22,8 @@ menu:
page: page:
tags: Tags tags: Tags
categories: Categories categories: Categories
articles-empty: No articles posts-empty: No articles
articles-total: Total %s Articles, Go on! posts-total: Total %s Articles, Go on!
# Sidebarupdated # Sidebarupdated
sidebar: sidebar:
......
...@@ -22,8 +22,8 @@ menu: ...@@ -22,8 +22,8 @@ menu:
page: page:
tags: 标签 tags: 标签
categories: 分类 categories: 分类
articles-empty: 目前还没有文章哦! posts-empty: 目前还没有文章哦!
articles-total: 目前共计 %s 篇文章,继续加油! posts-total: 目前共计 %s 篇文章,继续加油!
# 侧边栏 # 侧边栏
sidebar: sidebar:
......
mixin postSort(posts) mixin postList(posts)
section.archive-post section.post-list
- var year, tmpYear - var year, tmpYear
- posts.each(function (post) { - posts.each(function (post) {
if post.date if post.date
...@@ -7,17 +7,14 @@ mixin postSort(posts) ...@@ -7,17 +7,14 @@ mixin postSort(posts)
if tmpYear !== year if tmpYear !== year
- year = tmpYear - year = tmpYear
time.archive-post-item.year= year time.post-list-item.year= year
post.archive-post-item post.post-list-item
if post.date if post.date
time.archive-post-item__time= full_date(post.date, "MM-DD") time.post-list-item__time= full_date(post.date, "MM-DD")
h2.archive-post-item-title h2.post-list-item-title
if post.link if post.link
a.archive-post-item-title__a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link a.post-list-item-title__a(href=url_for(post.link) target="_blank" rel="noopener")= post.title || post.link
else else
a.archive-post-item-title__a(href=url_for(post.path))= post.title || _p("post.untitled") a.post-list-item-title__a(href=url_for(post.path))= post.title || __("post.untitled")
if post.top
include ../_partials/widgets/sticky-top.pug
- }) - })
extends ./_layout.pug extends ./_layout.pug
include ./_mixins/posts-sort.pug include ./_mixins/post-list.pug
block content block content
div.archive div.archive
div.archive-total= site.posts.length === 0 ? __("page.articles-empty") : _p("page.articles-total", site.posts.length) div.archive-total= site.posts.length === 0 ? __("page.posts-empty") : _p("page.posts-total", site.posts.length)
+postSort(theme.post_list.paginate.archives ? page.posts : site.posts) +postList(theme.post_list.paginate.archives ? page.posts : site.posts)
//- if theme.post_list.paginate.archives //- if theme.post_list.paginate.archives
//- include ./_components/pagination.pug //- include ./_components/pagination.pug
extends ./_layout.pug extends ./_layout.pug
include ./_mixins/posts-sort.pug include ./_mixins/post-list.pug
block content block content
div.category div.single-category
div.article-sort-title= __("page.categories") + " - " + page.category div.single-category-name
+postSort(page.posts) span= __("page.categories") + " -- "
span= page.category
+postList(page.posts)
//- include ./_components/pagination.pug //- include ./_components/pagination.pug
...@@ -5,7 +5,7 @@ block content ...@@ -5,7 +5,7 @@ block content
if (page.type === "tags") if (page.type === "tags")
div.tagcloud div.tagcloud
div.tagcloud-title= _p("page.tags") + " - " div.tagcloud-total= __("page.tags") + " - "
span= site.tags.length span= site.tags.length
- var min_font = theme.tag_cloud ? theme.tag_cloud.min_size : 14 - var min_font = theme.tag_cloud ? theme.tag_cloud.min_size : 14
- var max_font = theme.tag_cloud ? theme.tag_cloud.max_size : 24 - var max_font = theme.tag_cloud ? theme.tag_cloud.max_size : 24
...@@ -14,7 +14,7 @@ block content ...@@ -14,7 +14,7 @@ block content
div.tagcloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color}) div.tagcloud-item!= tagcloud({min_font: min_font, max_font: max_font, amount: theme.tag_cloud.max_amount, color: true, start_color, end_color})
else if (page.type === "categories") else if (page.type === "categories")
div.category div.category
div.category-title= _p("page.categories") + " - " div.category-total= __("page.categories") + " - "
span= site.categories.length span= site.categories.length
!= list_categories() != list_categories()
else if (page.type === "about") else if (page.type === "about")
......
extends ./_layout.pug extends ./_layout.pug
include ./_mixins/post-list.pug
block content block content
include ./_mixins/posts-sort.pug div.single-tag
div.single-tag-name
span= __("page.tags") + " -- "
span= page.tag
div.content +postList(page.posts)
div.tag-inner
div.article-sort-title= _p("page.tags") + " - " + page.tag
+articleSort(page.posts)
include ./_components/pagination.pug //- include ./_components/pagination.pug
.archive { .archive {
position: relative; position: relative;
margin-left: 1rem; margin: 0 0 0 1rem;
&::before { &::before {
content: ''; content: '';
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
top: $font-size-main; top: $font-size-main;
bottom: $font-size-main; bottom: $font-size-main;
left: 0; left: 0;
border-left: .3rem solid $archive-timeline-line-color; border-left: .3rem dashed $post-list-line-color;
transform: translateX(-50%); transform: translateX(-50%);
} }
...@@ -24,78 +24,17 @@ ...@@ -24,78 +24,17 @@
top: 50%; top: 50%;
left: 0; left: 0;
z-index: $z-index0; z-index: $z-index0;
border: .2rem solid $archive-timeline-dot-color; border: .2rem solid $post-list-dot-color;
border-radius: 50%; border-radius: 50%;
width: .9rem; width: .9rem;
height: .9rem; height: .9rem;
background-color: $white; background-color: $white;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
}
&-post-item {
display: block;
position: relative;
margin-bottom: .8rem;
padding-left: 1.5rem;
width: 100%;
align-items: center;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
z-index: $z-index0;
border: .15rem solid $archive-timeline-dot-color;
border-radius: 50%;
width: .6rem;
height: .6rem;
background-color: $white;
transition-property: border-color;
transition-ease();
transform: translate(-50%, -50%);
}
&:hover { &:hover {
&::before { &::before {
border-color: $archive-timeline-dot-hover-color; border-color: $post-list-dot-hover-color;
}
}
&:last-child {
margin-bottom: 0;
}
&.year {
font-weight: $font-weight-bolder;
}
&__time {
display: inline-block;
padding-right: 1rem;
width: 3rem;
vertical-align: middle;
color: $archive-timeline-time-color;
transform: translateY(3%);
}
&-title {
display: inline-block;
margin: 0;
width: calc(100% - 4.5rem);
font-size: $font-size-main + 2px;
font-weight: normal;
vertical-align: middle;
&__a {
color: $font-color;
transition-property: color;
transition-ease();
&:hover {
color: $blue-light;
}
} }
} }
} }
...@@ -103,7 +42,7 @@ ...@@ -103,7 +42,7 @@
.tagcloud, .tagcloud,
.category { .category {
&-title { &-total {
font-size: $font-size-base + 10px; font-size: $font-size-base + 10px;
text-align: center; text-align: center;
cursor: default; cursor: default;
...@@ -113,29 +52,21 @@ ...@@ -113,29 +52,21 @@
.tagcloud { .tagcloud {
text-align: center; text-align: center;
&-item a { &-item {
margin: 0 .4rem; a {
transition-property: color; margin: 0 .4rem;
transition-ease(); transition-property: color;
transition-ease();
&:hover { &:hover {
color: $tag-hover-color !important; color: $tag-hover-color !important;
}
} }
} }
} }
.category { .category {
&-list-item a {
color: $category-link-color;
&:hover {
color: $category-link-hover-color;
}
}
&-list { &-list {
margin-top: 0 !important;
&-item { &-item {
&::before { &::before {
color: $category-list-dot-color; color: $category-list-dot-color;
...@@ -149,8 +80,14 @@ ...@@ -149,8 +80,14 @@
} }
&-link { &-link {
font-size: $font-size-main + 2px;
color: $category-link-color;
transition-property: color; transition-property: color;
transition-ease(); transition-ease();
&:hover {
color: $category-link-hover-color;
}
} }
&-count { &-count {
...@@ -168,3 +105,16 @@ ...@@ -168,3 +105,16 @@
} }
} }
} }
.single-category,
.single-tag {
&-name {
font-size: $font-size-base + 10px;
text-align: center;
cursor: default;
& > span:last-child {
color: $blue-light;
}
}
}
...@@ -8,8 +8,9 @@ ...@@ -8,8 +8,9 @@
// @import './recent-posts.styl' // @import './recent-posts.styl'
// @import './pagination.styl' // @import './pagination.styl'
// @import './comments.styl' // @import './comments.styl'
@import './sticky-top.styl' @import './sticky-top.styl';
// @import './copy.styl' // @import './copy.styl'
// @import './analytics/index.styl' // @import './analytics/index.styl'
// @import './search/index.styl' // @import './search/index.styl'
// @import './tag-plugin/index.styl' // @import './tag-plugin/index.styl'
@import './post-list.styl';
.post-list {
position: relative;
&::before {
content: '';
position: absolute;
top: $font-size-main;
bottom: $font-size-main;
left: 0;
border-left: .3rem solid $post-list-line-color;
transform: translateX(-50%);
}
&-item {
display: block;
position: relative;
margin-bottom: .8rem;
padding-left: 1.5rem;
width: 100%;
align-items: center;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
z-index: $z-index0;
border: .15rem solid $post-list-dot-color;
border-radius: 50%;
width: .6rem;
height: .6rem;
background-color: $white;
transition-property: border-color;
transition-ease();
transform: translate(-50%, -50%);
}
&:hover {
&::before {
border-color: $post-list-dot-hover-color;
}
}
&:last-child {
margin-bottom: 0;
}
&.year {
font-weight: $font-weight-bolder;
}
&__time {
display: inline-block;
padding-right: 1rem;
width: 3rem;
vertical-align: middle;
color: $post-list-time-color;
transform: translateY(3%);
}
&-title {
display: inline-block;
margin: 0;
width: calc(100% - 3rem);
font-size: $font-size-main + 2px;
font-weight: normal;
vertical-align: middle;
&__a {
color: $font-color;
transition-property: color;
transition-ease();
&:hover {
color: $blue-light;
}
}
}
}
}
...@@ -131,12 +131,6 @@ $footer-link-hover-color = #ed0b0b ...@@ -131,12 +131,6 @@ $footer-link-hover-color = #ed0b0b
$home-readmore-bg-color = #73c8ff $home-readmore-bg-color = #73c8ff
$home-readmore-bg-hover-color = $blue-light $home-readmore-bg-hover-color = $blue-light
// Archive page
$archive-timeline-line-color = #c8edff
$archive-timeline-dot-color = #6ec5ff
$archive-timeline-dot-hover-color = $orange-dark
$archive-timeline-time-color = #99a9bf
// Category page // Category page
$category-list-dot-color = $blue-light $category-list-dot-color = $blue-light
$category-list-dot-hover-color = $orange-dark $category-list-dot-hover-color = $orange-dark
...@@ -168,6 +162,12 @@ $post-info-reading-time-color = $blue-light ...@@ -168,6 +162,12 @@ $post-info-reading-time-color = $blue-light
$post-info-reading-count-color = $orange-dark $post-info-reading-count-color = $orange-dark
$post-tags-icon-color = $blue-light $post-tags-icon-color = $blue-light
// Post list (In the archive/tag/category page.)
$post-list-line-color = #c8edff
$post-list-dot-color = #6ec5ff
$post-list-dot-hover-color = $orange-dark
$post-list-time-color = #99a9bf
// Pagination // Pagination
$pagination-item-color = $blue-light $pagination-item-color = $blue-light
$pagination-item-bg-color = #fff $pagination-item-bg-color = #fff
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册