blog-client/components/LeftContent.vue

<template lang="pug">
#leftcontent
  #wrap
    #leftMain
      h1.title
        nuxt-link(to='/') 轶哥博客
      .widget.avatar
        .widgetTitle
          label 关于作者
        img(src='https://data.sercretcore.cn/new_avatar.jpeg')
        p.aboutMe
          | 妄图改变世界的全栈程序员。
        .social
          ul
            li
              a(href='https://github.com/yi-ge', target='_blank')
                Icon(:icon="['fab', 'github']")
            li
              Icon(:icon="['fab', 'qq']" @click="info('qq')")
            li
              Icon(:icon="['fab', 'weixin']" @click="info('weixin')")
            li
              a(href='http://weibo.com/syxj', target='_blank')
                Icon(:icon="['fab', 'weibo']")
            li
              a(href='https://twitter.com/FYTencel', target='_blank')
                Icon(:icon="['fab', 'twitter']")
            li
              a(href='https://www.facebook.com/cnyige', target='_blank')
                Icon(:icon="['fab', 'facebook']")
            li
              a(href='https://plus.google.com/u/0/101716298673782941484', target='_blank')
                Icon(:icon="['fab', 'google-plus']")
            li
              a(href='https://t.me/cnyige', target='_blank')
                Icon(:icon="['fab', 'telegram']")
            li
              Icon(:icon="['fas', 'envelope']" @click="info('email')")
          .social-info-box(v-if='socialInfo')
            | {{ socialInfo }}
      #navication.widget.navication
        .widgetTitle
          label 导航
        ul
          li
            nuxt-link(to='/') 主页
          li(v-for='(categorys, index) in $store.state.categorys', :key='index', v-show="categorys.name !== '未分类'")
            nuxt-link(:to="'/' + categorys.slug") {{ categorys.name }}
          li
            a(:href="'https://driver.wyr.me/'" target="_blank") MAC N卡驱动更新提示
        .search-box
          input.search(type='text', placeholder='搜索', v-model='searchVal', @keyup.enter='search')
          Icon(:icon="['fas', 'search']" @click="search")
      .widget.comment
        .widgetTitle
          label 最新评论
        ul
          li(v-for='(newComment, index) in $store.state.newComments', :key='index')
            strong {{ newComment.comment_author }}：
            span
              nuxt-link(:to="'/post/' + newComment.post.ID + '#comments'") {{ newComment.comment_content }}
            .meta
              span
                Icon(:icon="['far', 'clock']")
                | &nbsp; {{ newComment.comment_date }}
              span
                | —
                nuxt-link(:to="'/post/' + newComment.post.ID") {{ newComment.post.post_title }}
      .widget.posts
        .widgetTitle
          label 热门文章
        ul
          li(v-for='(hotArticle, index) in $store.state.hotArticle', :key='index')
            .thumbnail
              img(width='150', :src="hotArticle.postimages[0].guid + '?x-oss-process=image/resize,m_lfit,h_150,w_150'")
            .detail
              nuxt-link(:to="'/post/' + hotArticle.ID", :title='hotArticle.post_title') {{ hotArticle.post_title }}
              .meta {{ hotArticle.post_modified }}
      .widget.links(v-if="$route.path === '/'")
        .widgetTitle
          label 友情链接
        .links
          a(href="https://johnsonlee.site/" target="_blank") Johnson Blog
          | &nbsp;&nbsp;
          a(href="https://8code.net/" target="_blank") 前端视角
      #tags.widget.tags
        .widgetTitle
          label 标签
        .tagcloud
          nuxt-link(:to="'/tag/' + tag.slug", :title='tag.name', v-for='tag in $store.state.tags', :key='tag.term_id') {{ tag.name }}
</template>

<script>
export default {
  data () {
    return {
      socialInfo: false,
      searchVal: ''
    }
  },
  methods: {
    info (type) {
      if (type === 'qq') {
        this.socialInfo = 'QQ: 373226722'
      } else if (type === 'weixin') {
        this.socialInfo = '微信: wy373226722'
      } else if (type === 'email') {
        this.socialInfo = 'Email: a@wyr.me'
      }

      setTimeout(() => {
        this.socialInfo = false
      }, 3000)
    },
    search () {
      if (this.searchVal !== '') { this.$router.push({ path: 'search?q=' + this.searchVal }) }
    }
  }
}
</script>