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',
                rel='external nofollow'
              )
                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',
                rel='external nofollow'
              )
                Icon(:icon='["fab", "weibo"]')
            li
              Icon(:icon='["fas", "envelope"]', @click='info("email")')
            li
              a(
                href='https://www.wyr.me/rss.xml',
                target='_blank',
                rel='external nofollow'
              )
                Icon(:icon='["fas", "rss"]')
          .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"',
                v-html='newComment.comment_content_html'
              )
            .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(
              v-if='hotArticle && hotArticle.postimages && hotArticle.postimages[0]'
            )
              img(
                width='150',
                :src='hotArticle.postimages[0].guid + "?x-oss-process=image/resize,m_lfit,h_150,w_150"'
              )
            .detail(
              :style='hotArticle && hotArticle.postimages && hotArticle.postimages[0] ? "margin-left: 70px" : "margin-left: 0"'
            )
              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
          ul
            li
              a(href='https://wintc.top/', target='_blank') 沐码小站
            li
              a(href='https://johnsonlee.site/', target='_blank') Johnson Blog
            li
              a(href='https://www.lzhpo.com/', target='_blank') 会打篮球的程序猿
            li
              a(href='https://www.lfhacks.com/', target='_blank') LFhacks
            li
              a(href='https://www.ixiqin.com/', target='_blank') 西秦公子
            li
              a(href='https://8code.net/', target='_blank') 前端视角
            li
              a(href='http://www.zzfly.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>