first commit

2019-02-07 16:26:17 +08:00
commit ab3e337e60
117 changed files with 17487 additions and 0 deletions
--- a/pages/_terms/index.vue
+++ b/pages/_terms/index.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/_terms/page/_page.vue
+++ b/pages/_terms/page/_page.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : ''", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -0,0 +1,107 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData(inject) {
+    const { app, params, $axios } = inject
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const data = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const data = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/page/_page.vue
+++ b/pages/page/_page.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        category: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/post/_id.vue
+++ b/pages/post/_id.vue
@ -0,0 +1,344 @@
+<template lang="pug">
+div
+  article.articleDetails
+    .articleTitle
+      | {{ Articels.post_title }}
+    .articalMeta
+      ul
+        li
+          Icon(:icon="['far', 'calendar-alt']")
+          | &nbsp; {{ Articels.post_date }}
+        li
+          Icon(:icon="['far', 'bookmark']")
+          nuxt-link(v-for='(relationships, index) in Articels.term_relationships', :key='index', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+            span
+              | &nbsp; {{ relationships.term_taxonomy.term.name }}
+        li(v-if='Articels.postmetum.meta_value !== 0')
+          Icon(:icon="['fas', 'thermometer-' + Articels.hotValue]")
+          | &nbsp; {{ Articels.postmetum.meta_value }}
+    #articelToc.articelToc(v-if="Articels.post_toc_show")
+      .articelTitle 目录
+      .articelTocList(v-html="Articels.post_toc")
+    .articelContent(v-html='Articels.post_content')
+    .articelRightToc(v-show="Articels.post_toc_show && showRightToc", @click="articelRightTocClick")
+      .articelTitle 目录
+      .articelTocList(v-html="Articels.post_toc")
+  nuxt-link(:to="Articels.last ? '/post/' + Articels.last.ID : ''")
+    .btnFooter.btnPrevt(:style="'color: ' + (Articels.last ? '#333' : '#ccc')")
+      Icon(:icon="['fas', 'chevron-left']")
+      | &nbsp; 上一篇 {{ Articels.last ? '(' + decodeURIComponent(Articels.last.post_name) + ')' : ''}}
+  nuxt-link(:to="Articels.next ? '/post/' + Articels.next.ID : ''")
+    .btnFooter.btnNext(:style="'color: ' + (Articels.next ? '#333' : '#ccc')")
+      | 下一篇 {{ Articels.next ? '(' + decodeURIComponent(Articels.next.post_name) + ')' : ''}} &nbsp;
+      Icon(:icon="['fas', 'chevron-right']")
+  .comment
+
+</template>
+
+<script>
+export default {
+  async asyncData({ route, app, $axios }) {
+    const { data } = await $axios.$get(`/public/article/details?id=${route.params.id}`)
+    const result = data.result
+    result.post_date = app.$moment(result.post_date).utc().format('lll')// 格式化时间
+    // 热度值计算
+    if (result.postmetum !== null && result.postmetum !== '') {
+      result.hotValue = app.$getHatValue(result.postmetum.meta_value)
+    } else {
+      result.hotValue = 0
+      result.postmetum = {}
+      result.postmetum.meta_value = 0
+    }
+
+    return {
+      Articels: result,
+      showRightToc: false,
+      tocIds: result.post_toc_ids
+    }
+  },
+  head() {
+    return {
+      title: `${this.Articels.post_title} - 轶哥博客`
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+
+    if (this.Articels.post_toc_show) {
+      const tocShow = () => {
+        if (window.addEvent) {
+          window.addEvent(window, 'scroll', () => {
+            const windowWidth = window.innerWidth || document.documentElement.clientWidth
+            if (document.getElementById('articelToc') && !this.isOnScreen(document.getElementById('articelToc'))) {
+              if (windowWidth < 768) {
+                this.showRightToc = false
+                document.getElementById('mobileToc').style.display = 'block'
+              } else {
+                this.showRightToc = true
+              }
+            } else {
+              this.showRightToc = false
+              if (windowWidth < 768) {
+                document.getElementById('mobileToc').style.display = 'none'
+              }
+            }
+          })
+        } else {
+          setTimeout(() => {
+            tocShow()
+          }, 50)
+        }
+      }
+      tocShow()
+
+      const tocIdsTop = []
+      const tocIdsTopMap = new Map()
+      for (const n in this.tocIds) {
+        const tTop = document.getElementById(this.tocIds[n]).offsetTop
+        tocIdsTop.push(tTop)
+        tocIdsTopMap.set(tTop, '#' + this.tocIds[n])
+      }
+      console.log(tocIdsTop)
+
+      const findInIds = (arr, num) => { for (let x = 0; x < arr.length; x++) { if (arr[x] > num) { return x - 1 } } }
+
+      let debounce = null
+      let lastIdInx = null
+
+      const scrollToc = () => {
+        let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth
+        if (windowWidth < 768) scrollTop = scrollTop * 2.7 + 175
+        const tocIdsInx = findInIds(tocIdsTop, scrollTop + 130)
+        if (tocIdsInx !== -1 && lastIdInx !== tocIdsInx && document.getElementsByClassName('articelRightToc')[0]) {
+          const tocAList = document.getElementsByClassName('articelRightToc')[0].getElementsByTagName('a')
+          const nowId = tocIdsTopMap.get(tocIdsTop[tocIdsInx])
+          for (const i in tocAList) {
+            if (tocAList[i] && tocAList[i].getAttribute && tocAList[i].getAttribute('href') === nowId) {
+              tocAList[i].style.color = '#ff8a8a'
+            } else if (tocAList[i] && tocAList[i].style) {
+              tocAList[i].style.color = '#bbb'
+            }
+          }
+          lastIdInx = tocIdsInx
+        }
+      }
+      window.addEvent(window, 'scroll', () => {
+        clearTimeout(debounce)
+        debounce = setTimeout(() => {
+          scrollToc()
+        }, 20)
+      })
+
+      document.getElementById('mobileToc').onclick = () => {
+        this.showRightToc = !this.showRightToc
+      }
+    }
+  },
+  methods: {
+    articelRightTocClick() {
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth
+      if (windowWidth < 768) {
+        this.showRightToc = false
+      }
+    },
+    isOnScreen(element) {
+      const ON_SCREEN_HEIGHT = 50
+      const ON_SCREEN_WIDTH = 50
+
+      const rect = element.getBoundingClientRect()
+      const windowHeight = window.innerHeight || document.documentElement.clientHeight
+      const windowWidth = window.innerWidth || document.documentElement.clientWidth
+
+      const elementHeight = element.offsetHeight
+      const elementWidth = element.offsetWidth
+
+      const onScreenHeight = ON_SCREEN_HEIGHT > elementHeight ? elementHeight : ON_SCREEN_HEIGHT
+      const onScreenWidth = ON_SCREEN_WIDTH > elementWidth ? elementWidth : ON_SCREEN_WIDTH
+
+      // 元素在屏幕上方
+      const elementBottomToWindowTop = rect.top + elementHeight
+      const bottomBoundingOnScreen = elementBottomToWindowTop >= onScreenHeight
+
+      // 元素在屏幕下方
+      const elementTopToWindowBottom = windowHeight - (rect.bottom - elementHeight)
+      const topBoundingOnScreen = elementTopToWindowBottom >= onScreenHeight
+
+      // 元素在屏幕左侧
+      const elementRightToWindowLeft = rect.left + elementWidth
+      const rightBoundingOnScreen = elementRightToWindowLeft >= onScreenWidth
+
+      // 元素在屏幕右侧
+      const elementLeftToWindowRight = windowWidth - (rect.right - elementWidth)
+      const leftBoundingOnScreen = elementLeftToWindowRight >= onScreenWidth
+
+      return bottomBoundingOnScreen && topBoundingOnScreen && rightBoundingOnScreen && leftBoundingOnScreen
+    }
+  }
+}
+</script>
+
+<style lang="stylus" socped>
+.articleDetails
+  margin-top 30px
+  background-color #fff
+  padding 50px 10px
+
+  .articleTitle
+    text-align center
+    font-size 24px
+
+  .articalMeta
+    text-align center
+    padding 20px 0
+    font-size 12px
+    color #a1887f
+
+    ul
+      list-style none
+      padding-right 20px
+
+      > li
+        display inline-block
+        margin-left 20px
+        line-height 2
+
+        > i
+          margin-right 8px
+
+        > span a
+          color #a1887f
+          margin-left 10px
+
+        a span
+          color #a1887f
+
+        > span a:first-child
+          margin-left 0
+
+      > li :first-child
+        margin-left 0
+
+  .articelContent
+    margin-top 20px
+    line-height 2
+    font-weight 300
+    font-size responsive
+
+    pre
+      text-align 0.16rem
+      overflow-x auto
+      line-height 1
+
+      code
+        padding 16px
+
+    code
+      color #24292e
+      background-color rgba(27, 31, 35, 0.05)
+      border-radius 3px
+      font-size 85%
+      padding 2px 5px
+
+.comment
+  width 100%
+
+.btnFooter
+  font-size 12px
+  margin-top 50px
+
+  i
+    margin 10px
+
+.btnPrevt
+  float left
+
+.btnNext
+  float right
+
+footer .footer
+  color #cccccc
+  text-align left
+  line-height 1.5
+  margin 20px 0
+
+.anchor-fix
+  display block
+  height 70px /* same height as header */
+  margin-top -70px /* same height as header */
+  visibility hidden
+
+.articelRightToc
+  position fixed
+  width 15%
+  top 0
+  right 0
+  overflow-y auto
+  background-color #000
+  padding 10px
+  box-shadow 0 0 8px #000
+
+.articelToc
+  width 100%
+
+.articelToc, .articelRightToc
+  color #bbb
+  user-select none
+
+  .articelTitle
+    font-weight 400
+    margin-bottom 10px
+
+  .articelTocList
+    color #bbb
+
+    a
+      color #bbb
+
+      &:visited
+        color #bbb
+
+      &:hover
+        color #d01c2e
+
+    ol.toc, ol.toc ol
+      counter-reset toc
+      list-style none
+
+    ol li
+      counter-increment toc
+
+    .toc li:before
+      content counters(toc, '.') ' '
+
+    ol
+      margin-left 20px
+
+      li
+        font-weight 400
+
+        ol
+          margin-left 20px
+
+          li
+            font-weight 300
+
+@media (max-width: 768px)
+  .articleDetails
+    padding 20px
+    margin-top 50px
+
+  .articelRightToc
+    position fixed
+    width 80%
+    top 100px
+    bottom 95px
+    right 10px
+    background-color #000
+    padding 10px
+    overflow-y auto
+    box-shadow 0 0 8px #000
+
+  .mobileToc
+    bottom 48px
+</style>
--- a/pages/search/index.vue
+++ b/pages/search/index.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, query, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        search: query.q
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/tag/_terms/index.vue
+++ b/pages/tag/_terms/index.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        tag: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>
--- a/pages/tag/_terms/page/_page.vue
+++ b/pages/tag/_terms/page/_page.vue
@ -0,0 +1,106 @@
+<template lang="pug">
+.pageList
+  .articleContent(ref='articleImgs', v-if='Articels')
+    article.articleList(v-for='(post, index) in Articels', :key='index')
+      .articleImgs(v-if='post.postImages.length')
+        nuxt-link(:to="'/post/' + post.ID")
+          Swiper(:style="'height: ' + imageHeight + 'px'")
+            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
+              img(:src='imgUrl')
+      .articleAbstract
+        nuxt-link(:to="'/post/' + post.ID")
+          .articleTitle(v-html='post.post_title')
+        .articalMeta
+          ul
+            li
+              Icon(:icon="['far', 'calendar-alt']")
+              | &nbsp; {{ post.post_date }}
+            li
+              Icon(:icon="['far', 'bookmark']")
+              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
+                span
+                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
+            li(v-if='post.postmetum.meta_value !== 0')
+              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
+              | &nbsp; {{ post.postmetum.meta_value }}
+        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
+        .readMore
+          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
+            | READ MORE
+  .Info(v-if='Info')
+    | {{ Info }}
+  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
+    Icon(:icon="['fas', 'chevron-left']")
+    | &nbsp; 上一页
+  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
+    | 下一页 &nbsp;
+    Icon(:icon="['fas', 'chevron-right']")
+</template>
+
+<script>
+export default {
+  async asyncData({ app, params, $axios }) {
+    let Info = null
+    let Articels = []
+    const nowPage = params.page ? parseInt(params.page) : 1
+
+    const { data } = await $axios.$get('/public/article/list', {
+      params: {
+        page: nowPage,
+        num: 8,
+        tag: params.terms || ''
+      }
+    })
+
+    if (data.status === 1) {
+      Articels = data.result.list
+      for (const n in Articels) {
+        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
+        // 热度值计算
+        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
+          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
+        } else {
+          Articels[n].hotValue = 0
+          Articels[n].postmetum = {}
+          Articels[n].postmetum.meta_value = 0
+        }
+
+        Articels[n].postImages = []
+      }
+    } else if (data.status === 404) {
+      Info = '未找到文章。'
+    }
+
+    return {
+      Articels,
+      imageHeight: 0,
+      Info,
+      nowPage,
+      ArticelsCount: data.result.count || 0,
+      nowPath: params.terms ? '/' + params.terms : ''
+    }
+  },
+  mounted() {
+    this.$finishLoad()
+    this.analyseImages()
+  },
+  methods: {
+    async analyseImages() { // 图片大小分析及处理
+      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
+      this.imageHeight = articleImgsWidth * 0.5625
+      for (const n in this.Articels) {
+        if (this.Articels[n].postimages.length !== 0) {
+          for (const i in this.Articels[n].postimages) {
+            const { data } = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
+            const widthValue = data.ImageWidth.value
+            const heightValue = data.ImageHeight.value
+            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
+              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</script>