vuepress-theme-reco/layouts/Category.vue

174 lines
3.8 KiB
Vue
Raw Normal View History

2019-04-15 10:35:40 +08:00
<template>
2019-07-20 23:01:42 +08:00
<div class="categories-wrapper" :class="recoShow ?'reco-show' : 'reco-hide'">
2019-04-15 10:35:40 +08:00
<!-- 公共布局 -->
<Common :sidebar="false" :isComment="false">
2019-07-20 23:55:24 +08:00
<!-- 分类集合 -->
<ul class="category-wrapper">
2019-09-20 13:54:13 +08:00
<li
2019-07-20 23:55:24 +08:00
class="category-item"
:class="title == item.name ? 'active': ''"
2019-09-20 13:54:13 +08:00
v-for="(item, index) in this.$categories.list"
2019-07-20 23:55:24 +08:00
:key="index">
2019-07-25 16:23:47 +08:00
<router-link :to="item.path">
2019-07-20 23:55:24 +08:00
<span class="category-name">{{ item.name }}</span>
<span class="post-num">{{ item.pages.length }}</span>
2019-07-25 16:23:47 +08:00
</router-link>
2019-07-20 23:55:24 +08:00
</li>
</ul>
2019-04-15 10:35:40 +08:00
<!-- 博客列表 -->
2019-09-20 13:54:13 +08:00
<note-abstract
2019-07-20 23:01:42 +08:00
class="list"
2019-04-15 10:35:40 +08:00
:data="posts"
:currentPage="currentPage"
@currentTag="getCurrentTag"></note-abstract>
2019-09-20 13:54:13 +08:00
2019-04-15 10:35:40 +08:00
<!-- 分页 -->
2019-09-20 13:54:13 +08:00
<pagation
2019-07-20 23:01:42 +08:00
class="pagation"
2019-09-18 19:39:04 +08:00
:total="posts.length"
2019-04-15 10:35:40 +08:00
:currentPage="currentPage"
@getCurrentPage="getCurrentPage"></pagation>
</Common>
</div>
</template>
<script>
import Common from '@theme/components/Common.vue'
import NoteAbstract from '@theme/components/NoteAbstract.vue'
import mixin from '@theme/mixins/index.js'
2019-04-15 10:35:40 +08:00
export default {
mixins: [mixin],
components: { Common, NoteAbstract },
2019-04-15 10:35:40 +08:00
data () {
return {
// 当前页码
2019-07-20 23:01:42 +08:00
currentPage: 1,
recoShow: false
2019-04-15 10:35:40 +08:00
}
},
computed: {
// 时间降序后的博客列表
posts () {
let posts = this.$currentCategories.pages
this._sortPostData(posts)
posts = this._filterPostData(posts)
2019-09-30 00:49:18 +08:00
this._setPage(1)
2019-04-15 10:35:40 +08:00
return posts
},
// 标题只显示分类名称
title () {
return this.$currentCategories.key
2019-04-15 10:35:40 +08:00
}
},
2019-07-20 23:01:42 +08:00
mounted () {
this.recoShow = true
},
2019-04-15 10:35:40 +08:00
methods: {
// 获取当前tag
getCurrentTag (tag) {
this.$emit('currentTag', tag)
},
// 获取当前页码
getCurrentPage (page) {
2019-09-30 00:49:18 +08:00
this._setPage(page)
setTimeout(() => {
window.scrollTo(0, 0)
}, 100)
},
_setPage (page) {
2019-04-15 10:35:40 +08:00
this.currentPage = page
this.$page.currentPage = page
},
// 获取时间的数字类型
_getTimeNum (date) {
return parseInt(new Date(date.frontmatter.date).getTime())
}
}
}
</script>
<style src="../styles/theme.styl" lang="stylus"></style>
<style lang="stylus" scoped>
@require '../styles/recoConfig.styl'
2019-07-20 23:01:42 +08:00
@require '../styles/loadMixin.styl'
2019-04-15 10:35:40 +08:00
.categories-wrapper
max-width: 740px;
margin: 0 auto;
2019-09-20 13:54:13 +08:00
padding: 4.6rem 2.5rem 0;
2019-07-20 23:55:24 +08:00
.category-wrapper {
list-style none
padding-left 0
.category-item {
vertical-align: middle;
margin: 4px 8px 10px;
display: inline-block;
cursor: pointer;
border-radius: $borderRadius
2019-07-20 23:55:24 +08:00
font-size: 13px;
box-shadow $boxShadow
2019-08-23 19:58:47 +08:00
transition: all .5s
2019-07-20 23:55:24 +08:00
&:hover, &.active {
background $accentColor
a span.category-name {
color #fff
.post-num {
color $accentColor
}
2019-07-20 23:55:24 +08:00
}
}
a {
display flex
2019-08-23 19:58:47 +08:00
box-sizing border-box
width 100%
height 100%
padding: 8px 14px;
2019-07-20 23:55:24 +08:00
justify-content: space-between
align-items center
color: #666
2019-07-20 23:55:24 +08:00
.post-num {
margin-left 4px
width 1.2rem;
height 1.2rem
text-align center
line-height 1.2rem
border-radius $borderRadius
2019-07-20 23:55:24 +08:00
background #eee
2019-10-04 22:50:05 +08:00
font-size .7rem
2019-07-20 23:55:24 +08:00
}
}
}
}
2019-07-20 23:01:42 +08:00
&.reco-hide
2019-07-20 23:55:24 +08:00
.category-wrapper, .list, .pagation
2019-07-20 23:01:42 +08:00
load-start()
&.reco-show {
2019-07-20 23:55:24 +08:00
.category-wrapper {
2019-07-20 23:01:42 +08:00
load-end(0.08s)
}
.list {
load-end(0.16s)
}
.pagation {
load-end(0.24s)
}
2019-09-20 13:54:13 +08:00
}
2019-04-15 10:35:40 +08:00
@media (max-width: $MQMobile)
.categories-wrapper
padding: 4.6rem 1rem 0;
.page-edit
.edit-link
margin-bottom .5rem
.last-updated
font-size .8em
float none
text-align left
</style>