vuepress修改源码增加首页文章封面图（移动端适配）

港控/mmm° 2022-10-28 10:13 312阅读 0赞

最终效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70 1][]

在`node_modules`中找到主题源码包

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70 2][]

然后找到 `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の博客`

[https://hearling.github.io/][https_hearling.github.io]

【作者Chocolate】[https://chocolate.blog.csdn.net/][https_chocolate.blog.csdn.net]

学如逆水行舟，不进则退

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70]: /images/20221024/b3dbdb9f0aa247d983f971bee9cf57e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70 1]: /images/20221024/9c32a02765c84ca5a5a1f41fe6a8327b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjQyOTcxOA_size_16_color_FFFFFF_t_70 2]: /images/20221024/b327eb176d814d979a6c26d79f61c7c5.png
[https_hearling.github.io]: https://hearling.github.io/
[https_chocolate.blog.csdn.net]: https://chocolate.blog.csdn.net/