vuepress-theme-reco/components/HomeBlog.vue
2019-08-16 13:23:30 +08:00

482 lines
11 KiB
Vue

<template>
<div class="home-blog" :class="recoShow?'reco-show': 'reco-hide'">
<div class="hero" :style="{background: `url(${$withBase($frontmatter.bgImage) || require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
<h1>{{ data.heroText || $title || '午后南杂' }}</h1>
<p class="description">{{ data.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}</p>
<p class="huawei" v-if="$themeConfig.huawei === true"><i class="iconfont reco-huawei" style="color: #fc2d38"></i>&nbsp;&nbsp;&nbsp;华为,为中华而为之!</p>
</div>
<div class="home-blog-wrapper">
<!-- 博客列表 -->
<note-abstract
class="blog-list"
:data="posts"
:isHome="true"
:currentPage="1"></note-abstract>
<div class="info-wrapper">
<img class="personal-img" :src="$withBase($frontmatter.faceImage || $themeConfig.logo)" alt="hero">
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
<div class="num">
<div>
<h3>{{getPagesLength}}</h3>
<h6>文章</h6>
</div>
<div>
<h3>{{$tags.length}}</h3>
<h6>标签</h6>
</div>
</div>
<hr>
<h4><i class="iconfont reco-category"></i> 分类</h4>
<ul class="category-wrapper">
<li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
<router-link :to="item.path">
<span class="category-name">{{ item.name }}</span>
<span class="post-num">{{ item.posts.length }}</span>
</router-link>
</li>
</ul>
<hr>
<h4><i class="iconfont reco-tag"></i> 标签</h4>
<div class="tags">
<span
v-for="(item, index) in tags"
:key="index"
:style="{ 'backgroundColor': item.color }"
@click="getPagesByTags(item.name)">{{item.name}}</span>
</div>
</div>
</div>
<Content class="home-center" custom/>
<div class="footer">
<span>
<i class="iconfont reco-theme"></i>
<a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
</span>
<span v-if="$themeConfig.record">
<i class="iconfont reco-beian"></i>
<a>{{ $themeConfig.record }}</a>
</span>
<span>
<i class="iconfont reco-copyright"></i>
<a>
<span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
{{ year }}
&nbsp;&nbsp;
<span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
</a>
</span>
<span>
<AccessNumber idVal="/"></AccessNumber>
</span>
</div>
</div>
</template>
<script>
import NavLink from "@theme/components/NavLink/";
import AccessNumber from '@theme/components/Valine/AccessNumber'
import NoteAbstract from '@theme/components/NoteAbstract.vue'
import { constants } from 'fs';
export default {
components: { NavLink, AccessNumber, NoteAbstract },
data () {
return {
recoShow: false,
tags: [],
}
},
computed: {
// 时间降序后的博客列表
posts () {
let posts = this.$site.pages
posts = posts.filter(item => {
const { home, isTimeLine, date } = item.frontmatter
return !(home == true || isTimeLine == true || date === undefined)
})
posts.sort((a, b) => {
return this._getTimeNum(b) - this._getTimeNum(a)
})
return posts
},
// 分类信息
getPagesLength () {
let num = 0
this.$categories.list.map(v => {
num += v.posts.length
})
return num
},
year () {
return new Date().getFullYear()
},
data() {
return this.$frontmatter;
},
actionLink() {
return {
link: this.data.actionLink,
text: this.data.actionText
};
},
heroImageStyle () {
return this.data.heroImageStyle || {
maxHeight: '200px',
margin: '6rem auto 1.5rem'
}
},
bgImageStyle () {
const bgImageStyle = {
height: '350px',
textAlign: 'center',
overflow: 'hidden'
}
return this.data.bgImageStyle ? { ...bgImageStyle, ...this.data.bgImageStyle } : bgImageStyle
}
},
created () {
if (this.$tags.list.length > 0) {
let tags = this.$tags.list
tags.map(item => {
const color = this._tagColor()
item.color = color
return tags
})
this.tags = tags
}
},
mounted () {
this.recoShow = true
},
methods: {
// 根据分类获取页面数据
getPages () {
let pages = this.$site.pages
pages = pages.filter(item => {
const { home, isTimeLine, date } = item.frontmatter
return !(home == true || isTimeLine == true || date === undefined)
})
// reverse()是为了按时间最近排序排序
this.pages = pages.length == 0 ? [] : pages
},
getPagesByTags (currentTag) {
const base = this.$site.base
window.location.href = `${base}tag/#?tag=${currentTag}`
},
// 获取时间的数字类型
_getTimeNum (data) {
return parseInt(new Date(data.frontmatter.date).getTime())
},
_tagColor () {
// 红、蓝、绿、橙、灰
const tagColorArr = ['#f26d6d', '#3498db', '#67cc86', '#fb9b5f', '#838282']
const index = Math.floor(Math.random() * tagColorArr.length)
return tagColorArr[index]
},
}
};
</script>
<style lang="stylus">
@require '../styles/loadMixin.styl'
.home-blog {
padding: $navbarHeight 0 0;
margin: 0px auto;
.hero {
figure {
position absolute
background yellow
}
h1 {
margin:7rem auto 1.8rem;
font-size: 2.5rem;
color #fff;
}
h1, .description, .action, .huawei {
color #fff!important
}
.description {
margin: 1.8rem auto;
font-size: 1.6rem;
line-height: 1.3;
color: lighten($textColor, 20%);
}
}
.home-blog-wrapper {
display flex
align-items: flex-start;
margin 20px auto 0
max-width 1126px
.info-wrapper {
transition all .3s
margin-left 15px;
width 380px;
height auto;
box-shadow 0 2px 10px rgba(0,0,0,0.2);
box-sizing border-box
padding 0 15px
&:hover {
box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
}
.personal-img {
display block
margin 2rem auto
width 8rem
height 8rem
}
.name {
text-align center
}
.num {
display flex
margin 0 auto 1rem
width 80%
> div {
text-align center
flex auto
&:first-child {
border-right 1px solid #333
}
h3 {
line-height auto
margin 0 0 .6rem
color $textColor
}
h6 {
line-height auto
margin 0
}
}
}
.category-wrapper {
list-style none
padding-left 0
.category-item {
padding: .4rem .8rem;
border: 1px solid #999;
transition: all .5s
&:first-child {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
}
&:not(:first-child) {
border-top: none;
}
&:hover {
background #d3d3d3
}
a {
display flex
justify-content: space-between
.post-num {
width 1.6rem;
height 1.6rem
text-align center
line-height 1.6rem
border-radius 50%
background #eee
font-size .6rem
color $textColor
}
}
}
}
.tags {
margin-bottom 30px
span {
vertical-align: middle;
margin: 4px 4px 10px;
padding: 4px 8px;
display: inline-flex;
cursor: pointer;
border-radius: 2px;
background: #fff;
color: #fff;
font-size: 13px;
box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
transition: all .5s
&:hover {
transform scale(1.04)
}
&.active {
transform scale(1.2)
}
}
}
}
}
.footer {
padding: 2.5rem;
border-top: 1px solid $borderColor;
text-align: center;
color: lighten($textColor, 25%);
> span {
margin-left 1rem
> i {
margin-right .5rem
}
}
}
}
.reco-hide {
.hero {
img {
load-start()
}
h1 {
load-start()
color red
}
.description {
load-start()
}
.huawei {
load-start()
}
.action-button {
load-start()
}
}
.home-blog-wrapper {
load-start()
}
.home-center {
load-start()
padding 0
}
.footer {
load-start()
}
}
.reco-show {
.hero {
img {
load-end(0.08s)
}
h1 {
load-end(0.16s)
}
.description {
load-end(0.24s)
}
.huawei {
load-end(0.32s)
}
.action-button {
load-end(0.4s)
}
}
.home-blog-wrapper {
load-end(0.48s)
}
.home-center {
load-end(0.56s)
}
.footer {
load-end(0.64s)
}
}
@media (max-width: $MQMobile) {
.home-blog {
padding-left: 1.5rem;
padding-right: 1.5rem;
.hero {
margin 0 -1.5rem
height 350px
img {
max-height: 210px;
margin: 2rem auto 1.2rem;
}
h1 {
margin: 6rem auto 1.8rem ;
font-size: 2rem;
}
h1, .description, .action {
// margin: 1.2rem auto;
}
.description {
font-size: 1.2rem;
}
.action-button {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
}
.home-blog-wrapper {
.info-wrapper {
display none!important
}
}
}
.footer {
text-align: left!important;
> span {
display block
margin-left 0
line-height 2rem
}
}
}
@media (max-width: $MQMobileNarrow) {
.home-blog {
padding-left: 1.5rem;
padding-right: 1.5rem;
.hero {
margin 0 -1.5rem
height 350px
img {
max-height: 210px;
margin: 2rem auto 1.2rem;
}
h1 {
margin: 6rem auto 1.8rem ;
font-size: 2rem;
}
h1, .description, .action {
// margin: 1.2rem auto;
}
.description {
font-size: 1.2rem;
}
.action-button {
font-size: 1rem;
padding: 0.6rem 1.2rem;
}
}
.home-blog-wrapper {
.info-wrapper {
display none!important
}
}
}
}
</style>