最终效果如下:
在node_modules
中找到主题源码包
然后找到 NoteAbstractItem.vue
文件,用以下代码进行替换
<template>
<div
class="abstract-item"
@click="$router.push(item.path)">
<i v-if="item.frontmatter.sticky" class="iconfont reco-sticky"></i>
<div class="cover">
<img class="cover-img" :src="item.frontmatter.cover
|| 'https://pan.zealsay.com/zealsay/cover/1.jpg'" :alt="item.title"/>
</div>
<div class="info">
<div class="title">
<i v-if="item.frontmatter.keys" class="iconfont reco-lock"></i>
<router-link :to="item.path">{{item.title}}</router-link>
</div>
<div class="abstract" v-html="item.excerpt"></div>
<PageInfo
:pageInfo="item"
:currentTag="currentTag">
</PageInfo>
</div>
</div>
</template>
<script>
import PageInfo from './PageInfo'
export default {
components: {PageInfo},
props: ['item', 'currentPage', 'currentTag']
}
</script>
<style lang="stylus" scoped>
@require '../styles/mode.styl'
.abstract-item
position relative
display inline-flex
margin: 0 auto 20px;
padding: 16px 20px;
width 100%
overflow: hidden;
border-radius: $borderRadius
box-shadow: var(--box-shadow);
box-sizing: border-box;
transition all .3s
background-color var(--background-color)
cursor: pointer;
.abstract
margin 0 1rem
> * {
pointer-events: auto;
}
.cover
max-width 320px
flex 1
overflow hidden
border-radius .5rem
.cover-img
border-radius .5rem
max-width 320px
transition: 1s ease-out;
.cover-img:hover
transform: scale3d(1.1, 1.1, 1);
.info
flex 1
display: flex;
flex-direction: column;
justify-content: center;
.reco-sticky
position absolute
top 0
left 0
display inline-block
color $accentColor
font-size 2.4rem
&:hover
box-shadow: var(--box-shadow-hover)
.title
position: relative;
font-size: 1.28rem;
line-height: 46px;
display: inline-block;
margin 0 2rem
a
color: var(--text-color);
.reco-lock
font-size 1.28rem
color $accentColor
&:after
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: $accentColor;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
transition: .3s ease-in-out;
&:hover a
color $accentColor
&:hover:after
visibility visible
-webkit-transform: scaleX(1);
transform: scaleX(1);
.tags
.tag-item
&.active
color $accentColor
&:hover
color $accentColor
@media (max-width: $homePageWidth)
.cover
max-width 200px
flex 1
overflow hidden
border-radius .5rem
display flex
align-items: center
.cover-img
border-radius .5rem
max-width 200px
transition: 1s ease-out;
.info
flex 2 !important
@media (max-width: 1080px)
.cover
display none
@media (max-width: $MQMobile)
.tags
display block
margin-top 1rem;
margin-left: 0 !important;
.abstract-item
display block
text-align center
.cover
width 100%
display inline-flex
max-width 320px
.cover-img
max-width 320px
width inherit
.info
.title
margin 0
</style>
找到PageInfo.vue
文件,用以下代码进行替换
<template>
<div class="page-info">
<i
class="iconfont reco-account"
v-if="pageInfo.frontmatter.author || $themeConfig.author || $site.title">
<span>{{ pageInfo.frontmatter.author || $themeConfig.author || $site.title }}</span>
</i>
<i
v-if="pageInfo.frontmatter.date"
class="iconfont reco-date">
<span>{{ pageInfo.frontmatter.date | formatDateValue }}</span>
</i>
<i
v-if="showAccessNumber === true"
class="iconfont reco-eye">
<AccessNumber
:idVal="pageInfo.path"
:numStyle="numStyle"/>
</i>
<i
v-if="pageInfo.frontmatter.tags"
class="iconfont reco-tag tags">
<span
v-for="(subItem, subIndex) in pageInfo.frontmatter.tags"
:key="subIndex"
class="tag-item"
:class="{ 'active': currentTag == subItem }"
@click.stop="goTags(subItem)">{{subItem}}</span>
</i>
</div>
</template>
<script>
// 引入时间格式化js文件
import {formatDate} from '@theme/helpers/utils'
export default {
props: {
pageInfo: {
type: Object,
default() {
return {}
}
},
currentTag: {
type: String,
default: ''
},
showAccessNumber: {
type: Boolean,
default: false
}
},
data() {
return {
numStyle: {
fontSize: '.9rem',
fontWeight: 'normal',
color: '#999'
}
}
},
filters: {
formatDateValue(value) {
if (!value) return ''
// 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
// 对value进行处理
value = value.replace('T', ' ').slice(0, value.lastIndexOf('.'))
// 转化后的value 2019-09-20 18:22:30
// 获取到时分秒
const h = Number(value.substr(11, 2))
const m = Number(value.substr(14, 2))
const s = Number(value.substr(17, 2))
// 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
if (h > 0 || m > 0 || s > 0) {
// 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
return formatDate(value)
} else {
// 用户没有输入或者输入了 00:00:00
return formatDate(value, 'yyyy-MM-dd')
}
}
},
methods: {
goTags(tag) {
if (this.$route.path !== `/tag/${tag}/`) {
this.$router.push({path: `/tag/${tag}/`})
}
}
}
}
</script>
<style lang="stylus" scoped>
.page-info
margin 0 2rem
display inline-flex
flex-wrap wrap
.iconfont
display inline-block
line-height 1.5rem
&:not(:last-child)
margin-right 1rem
span
margin-left 0.5rem
.tags
.tag-item
font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
cursor pointer
&.active
color $accentColor
&:hover
color $accentColor
@media (max-width: $MQMobile)
.tags
display block
margin-left 0 !important
.page-info
margin 0
justify-content center
</style>
具体实现效果可查看 HearLingの博客
【作者Chocolate】https://chocolate.blog.csdn.net/
学如逆水行舟,不进则退