yige/blog-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改友链

Browse Source
This commit is contained in:
yi-ge 2020-09-26 19:03:34 +08:00
parent dbebc68cb0
commit 0e2e8ca254
13 changed files with 100 additions and 631 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/LeftContent.vue
View File

@ -116,16 +116,12 @@
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') 烟花易冷
nuxt-link(to='/links', title='更多友链') 更多友链
#tags.widget.tags
.widgetTitle
label 标签

414
components/Swiper.vue
View File

@ -1,414 +0,0 @@
<template>
<div
class="swiper-container"
@touchmove="fn"
>
<div
class="default-swiper-box"
:class="box"
@transitionend="transitionend"
@touchstart="s"
@touchmove="m"
@touchend="e"
@mousedown="s"
@mousemove="m"
@mouseup="e"
>
<slot />
</div>
<slot name="pagination">
<!-- 默认提供了一个 pagination -->
<div
v-if="pagination"
class="swiper-pagination"
>
<div
v-for="(value, key) in reallySlidesNumber"
:key="key"
class="swiper-dot"
:class="{'swiper-dot-active': currentSlide === key}"
/>
</div>
</slot>
<!-- 这两个就不默认提供了 -->
<slot name="arrowLeft" />
<slot name="arrowRight" />
<!-- 当你需要在全局的内容里面加一些玩意的时候 -->
<slot name="g" />
</div>
</template>
<script>
function toArray (arraylike) {
return Array.prototype.slice.call(arraylike)
}
export default {
name: 'Swiper',
props: {
/* 一次滑动的默认时间 */
duration: {
type: Number,
default: 500
},
/* 两次滑动的间隔时间 */
interval: {
type: Number,
default: 2500
},
/* 是否自动播放 */
autoplay: {
type: Boolean,
default: true
},
/* 用户滑动多少距离, 翻页 */
therehold: {
type: Number,
default: 110
},
defaultSlide: {
type: Number,
default: 0
},
pagination: {
type: Boolean,
default: true
},
/* 有时候全屏滚动, 的确想要禁用垂直方向的滚动的时候 */
vLock: {
type: Boolean,
default: false
}
},
data () {
return {
swiper: null,
swiperWidth: 0,
slides: null,
slidesNumber: 0,
reallySlidesNumber: 0,
currentSlide: 0,
timer: null,
userDuration: 200,
pos: {
startX: 0,
moveX: 0,
endX: 0,
local: 0,
distance: 0
},
moving: false,
unlock: false,
activeId: '',
mousedown: false,
box: '',
isOnly: false
}
},
mounted () {
this.box = 'swiper-box-' + Math.random().toFixed(2) * 1000
setTimeout(() => {
/* 初始化的时候, 拿到所有的 DOM 元素以及相关属性 */
this.initElement()
if (this.isOnly) {
return
}
/* 克隆两个节点, 用来实现 loop 效果 */
this.cloneSlide()
/* 克隆结束之后, 需要设置默认显示的slide */
this.setDefaultSlide()
/*
## start
设置默认slide之后, 就需要开始设置定时器, 自动轮播
*/
if (this.autoplay) {
this.play()
}
}, 100)
},
methods: {
/* 阻止容器的上下滚动, 并且只有在水平方向上面滚动超过 10px 才可以阻止 */
fn (e) {
if (this.vLock || Math.abs(this.pos.startX - this.pos.moveX) > 10) {
e.preventDefault()
}
},
/* 滑动到指定的页面 */
slideTo (index) {
if (!this.moving) {
const currentSlide = Math.round(Math.abs(this.left()) / this.swiperWidth)
/* 如果索引值不合法 或者和目前的值相等 */
if (index > this.slidesNumber - 2 - 1 || index < 0 || currentSlide === index + 1) {
return
}
this.moving = true
clearTimeout(this.timer)
/*
说明要往右边滑动
注意这里不管需要滑动多少个, duration 都是 300, 这个如果需要, 可以
自己根据起点/终点计算出一个合适的值.
*/
this.transitionDuration(300)
this.translateX(-this.swiperWidth * (index + 1))
}
},
next () {
if (!this.moving) {
clearTimeout(this.timer)
this.moving = true
this.transitionDuration(this.userDuration)
this.translateX(this.left() - this.swiperWidth)
}
},
previous () {
if (!this.moving) {
clearTimeout(this.timer)
this.moving = true
this.transitionDuration(this.userDuration)
this.translateX(this.left() + this.swiperWidth)
}
},
initElement () {
/* 因为传递过来的是个字符串, 所以要手动加点 */
this.swiper = document.querySelector('.' + this.box)
this.swiperWidth = this.swiper.clientWidth
this.slides = toArray(this.swiper.children)
this.slidesNumber = this.slides.length
/* 实际的 slide 个数, 因为 slidesNumber 会在后面重新赋值 */
this.reallySlidesNumber = this.slides.length
/* 如果就仅仅只有一个 slide, 那么不克隆, 不绑定, 就纯展示就可以了 */
if (this.reallySlidesNumber === 1) {
this.isOnly = true
}
},
cloneSlide () {
const head = this.slides[0].cloneNode(this.slides[0], true)
const tail = this.slides[this.slidesNumber - 1].cloneNode(this.slides[this.slidesNumber - 1], true)
this.swiper.appendChild(head)
this.swiper.insertBefore(tail, this.slides[0])
/* 克隆节点之后, 需要重置一些属性 */
this.slides = toArray(this.swiper.children)
this.slidesNumber = this.slides.length
},
/* 根据用户给定的 defaultSlide 设置 init slide 的值 */
setDefaultSlide () {
/*
一切用户给定的值, 都是从 0 - x 开始, 比如用户数据里面有 6个数据
那么给定的就是 0 - 5
但是我们内部运算的时候, 实际上我们的索引能到 0 - 7
0 是实际的 5 的拷贝, 7 实际上是实际的0的拷贝
所以当用户给定的 defaultSlide =0, 我们实际上是要让展示内部索引为 1 的元素
*/
/* 如果用户设置了一个非法值, 直接抛出异常 */
if (this.defaultSlide < 0 || this.defaultSlide > this.slidesNumber - 2 - 1) {
throw new Error('[swiper:Error]: You have set a wrong defaultSlide value with defaultSlide = ' + this.defaultSlide)
}
this.translateX(-this.swiperWidth * (this.defaultSlide + 1))
//
// this.currentSlide = this.defaultSlide;
},
/*
## start
*/
play () {
this.timer = setTimeout(() => {
clearTimeout(this.timer)
this.moving = true
this.unlock = false
this.transitionDuration(this.duration)
this.translateX(-(this.swiperWidth + Math.abs(this.left())))
}, this.interval)
},
transitionend () {
this.transitionDuration(0)
/*
一次滑动结束之后, 通过计算, 实际上我们可以拿到当前处于内部索引的第几个 slide
拿到这个 currentSlide 我们就知道当前是不是滚动到最后一个了
*/
const currentSlide = Math.round(Math.abs(this.left()) / this.swiperWidth)
this.currentSlide = currentSlide - 1
/* 如果滚动到最后一个, 那么就要瞬间跳转一下, 到外部看起来的第一个, 内部的 */
if (currentSlide === this.slidesNumber - 1) {
this.translateX(-this.swiperWidth)
this.currentSlide = 0
}
if (currentSlide === 0) {
this.translateX(-this.swiperWidth * (this.slidesNumber - 2))
this.currentSlide = this.slidesNumber - 3
}
this.$emit('transitionend', this.currentSlide)
/*
防止极限操作, 用户在滑动结束之后事件还没发送出去又滑动导致计算
结果错误, 所以等事件发出去之后再解开
*/
this.moving = false
/*
##start
*/
if (this.autoplay) {
this.play()
}
},
/* toushstart handler */
s (e) {
if (this.isOnly) {
return
}
if (e.type === 'mousedown' && !this.moving) {
this.mousedown = true
this.pos.startX = e.pageX
this.pos.local = this.left()
clearTimeout(this.timer)
this.transitionDuration(0)
} else {
this.activeId = toArray(e.changedTouches)[0].identifier
if (!this.moving) {
const active = e.touches.length - 1
clearTimeout(this.timer)
this.transitionDuration(0)
this.unlock = true
this.pos.startX = e.touches[active].clientX
/* 一次 touch 的 起始local 点, 是固定的 */
this.pos.local = this.left()
}
}
},
/* toushmove handler */
m (e) {
if (this.isOnly) {
return
}
if (e.type === 'mousemove' && this.mousedown && !this.moving) {
this.pos.moveX = e.pageX
this.pos.distance = this.pos.moveX - this.pos.startX
this.translateX(this.pos.local + this.pos.distance)
} else if (!this.moving && this.unlock) {
const active = e.touches.length - 1
this.pos.moveX = e.touches[active].clientX
this.pos.distance = this.pos.moveX - this.pos.startX
this.translateX(this.pos.local + this.pos.distance)
}
},
/* toushend handler */
e (e) {
if (this.isOnly) {
return
}
if (e.type === 'mouseup' && this.mousedown && !this.moving) {
this.mousedown = false
this.pos.endX = e.pageX
this.pos.distance = this.pos.endX - this.pos.startX
this.recover()
} else {
const curId = toArray(e.changedTouches)[0].identifier
if (!this.moving && this.unlock && (curId === this.activeId)) {
this.unlock = false
this.pos.endX = e.changedTouches[0].clientX
this.pos.distance = this.pos.endX - this.pos.startX
this.recover()
}
}
},
/* 响应用户滚动行为 */
recover () {
this.transitionDuration(this.userDuration)
const distance = Math.abs(this.left()) % this.swiperWidth
let point = []
let direction = ''
/*
主要是为了拿到当前状态下面, swiper 距离正常状态的, 左右移动的距离分别是多少.
*/
if (this.left() > 0) {
point = [distance, this.swiperWidth - distance]
} else {
point = [this.swiperWidth - distance, distance]
}
if (this.pos.distance > 0) {
direction = 'to-right'
} else if (this.pos.distance < 0) {
direction = 'to-left'
} else {
direction = 'none'
}
if (direction === 'none') {
if (this.autoplay) {
this.play()
}
}
if (direction === 'to-right') {
this.moving = true
/* 说明需要向右边移动 */
if (point[0] > this.therehold) {
this.translateX(this.left() + point[1])
const next = (this.left() + point[1]) / this.swiperWidth
if (Math.abs(next) === 0) {
this.unlock = false
}
} else {
this.translateX(this.left() - point[0])
}
}
if (direction === 'to-left') {
this.moving = true
if (point[1] > this.therehold) {
this.translateX(this.left() - point[0])
const next = (this.left() - point[0]) / this.swiperWidth
if (Math.abs(next) === this.slidesNumber - 1) {
this.unlock = false
}
} else {
this.translateX(this.left() + point[1])
}
}
},
translateX (value) {
this.swiper.style.transform = 'translate3d(' + value + 'px, 0, 0)'
},
transitionDuration (ms) {
this.swiper.style.transitionDuration = ms + 'ms'
},
left () {
return this.swiper.getBoundingClientRect().left
}
}
}
</script>
<style lang="stylus">
.swiper-container
position relative
width 100%
overflow hidden
.default-swiper-box
height 100%
width 100%
display flex
// 分页
.swiper-pagination
position absolute
bottom 10px
height 18px
width 100%
background transparent
display flex
align-items center
justify-content center
.swiper-dot
height 8px
width 8px
background #000
opacity 0.2
margin 0 5px
border-radius 50%
.swiper-dot-active
opacity 1
background #3498db
</style>

4
layouts/common.styl
View File

@ -209,6 +209,10 @@ input:-moz-placeholder
.links
margin-bottom 20px
font-weight 300
li
margin-top 5px
.widgetTitle
font-size 18px

26
pages/_terms/index.vue
View File

@ -2,11 +2,6 @@
.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')
@ -80,8 +75,6 @@ export default {
Articels[n].postmetum = {}
Articels[n].postmetum.meta_value = 0
}
Articels[n].postImages = []
}
} else if (data.status === 404) {
Info = '未找到文章。'
@ -100,25 +93,6 @@ export default {
},
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>

26
pages/_terms/page/_page.vue
View File

@ -2,11 +2,6 @@
.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')
@ -77,8 +72,6 @@ export default {
Articels[n].postmetum = {}
Articels[n].postmetum.meta_value = 0
}
Articels[n].postImages = []
}
} else if (data.status === 404) {
Info = '未找到文章。'
@ -97,25 +90,6 @@ export default {
},
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>

26
pages/index.vue
View File

@ -2,11 +2,6 @@
.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')
@ -78,8 +73,6 @@ export default {
Articels[n].postmetum = {}
Articels[n].postmetum.meta_value = 0
}
Articels[n].postImages = []
}
} else if (data.status === 404) {
Info = '未找到文章。'
@ -98,25 +91,6 @@ export default {
},
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>

63
pages/links.vue Normal file
View File

@ -0,0 +1,63 @@
<template lang="pug">
.links
.Info(v-if='Info')
| {{ Info }}
h1.title
| 首页友链
ul
li
a(href='https://wintc.top/', target='_blank') 沐码小站
li
a(href='https://johnsonlee.site/', target='_blank') Johnson Blog
li
a(href='https://www.lfhacks.com/', target='_blank') LFhacks
li
a(href='https://www.ixiqin.com/', target='_blank') 西秦公子
h1.title
| 内页友链
ul
li
a(href='https://www.lzhpo.com/', target='_blank') 会打篮球的程序猿
li
a(href='http://www.zzfly.net/', target='_blank') 烟花易冷
h1.title
| 暂时取消的友链
ul
li
| 前端视角 （网站无法访问）
h1.title
| 友链说明
p
| 本站友链遵循对等原则，即您的友链放置于首页，我的友链也放置于首页。
p
| 交换友链请通过左侧头像下方的联系方式与我联系。只要网站/博客能正常打开，不定时更新原创文章即可。
</template>
<script>
export default {
asyncData ({ app, params, $axios }) {
return {
Info: ''
}
},
mounted () {
this.$finishLoad()
}
}
</script>
<style lang="stylus" scoped>
.links
width 100%
height 100%
padding 50px
.title
margin-top 60px
margin-bottom 20px
font-weight 500
</style>

26
pages/page/_page.vue
View File

@ -2,11 +2,6 @@
.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')
@ -77,8 +72,6 @@ export default {
Articels[n].postmetum = {}
Articels[n].postmetum.meta_value = 0
}
Articels[n].postImages = []
}
} else if (data.status === 404) {
Info = '未找到文章。'
@ -97,25 +90,6 @@ export default {
},
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>

24
pages/search/index.vue
View File

@ -2,11 +2,6 @@
.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')
@ -97,25 +92,6 @@ export default {
},
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>

26
pages/tag/_terms/index.vue
View File

@ -2,11 +2,6 @@
.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')
@ -77,8 +72,6 @@ export default {
Articels[n].postmetum = {}
Articels[n].postmetum.meta_value = 0
}
Articels[n].postImages = []
}
} else if (data.status === 404) {
Info = '未找到文章。'
@ -97,25 +90,6 @@ export default {
},
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>

24
pages/tag/_terms/page/_page.vue
View File

@ -2,11 +2,6 @@
.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')
@ -97,25 +92,6 @@ export default {
},
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>

64
plugins/browser.js
View File

@ -2,11 +2,11 @@ import '~/layouts/common.styl'
import vditor from 'vditor'
import 'vditor/dist/index.css'
const $tags = document.getElementById('tags')
let floatTop = null
if ($tags) {
floatTop = $tags.offsetTop + $tags.scrollHeight + 30
}
// const $tags = document.getElementById('tags')
// let floatTop = null
// if ($tags) {
// floatTop = $tags.offsetTop + $tags.scrollHeight + 30
// }
function addEvent (obj, type, fn) {
if (obj.attachEvent) {
@ -25,35 +25,35 @@ window.onload = function () {
alert('您的浏览器版本过低，继续访问将会出现问题，请升级浏览器版本！') // eslint-disable-line
}
// 底部返回顶部按钮
const top = document.getElementById('gotop')
if (top) {
// 滚动一屏幕时显示回到顶部
addEvent(window, 'scroll', function () {
const currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition > window.screen.availHeight ? top.style.display = 'block' : top.style.display = 'none'
// // 底部返回顶部按钮
// const top = document.getElementById('gotop')
// if (top) {
// // 滚动一屏幕时显示回到顶部
// addEvent(window, 'scroll', function () {
// const currentPosition = document.documentElement.scrollTop || document.body.scrollTop
// currentPosition > window.screen.availHeight ? top.style.display = 'block' : top.style.display = 'none'
// 左部导航自动浮动
if (currentPosition > floatTop && document.body.clientWidth > 768) {
document.getElementById('navication').style.position = 'fixed'
} else {
document.getElementById('navication').style.position = 'static'
}
})
// // 左部导航自动浮动
// if (currentPosition > floatTop && document.body.clientWidth > 768) {
// document.getElementById('navication').style.position = 'fixed'
// } else {
// document.getElementById('navication').style.position = 'static'
// }
// })
top.onclick = function () {
var timer = setInterval(function () { // eslint-disable-line
let currentPosition = document.documentElement.scrollTop || document.body.scrollTop
currentPosition -= 100
if (currentPosition > 0) {
window.scrollTo(0, currentPosition)
} else {
window.scrollTo(0, 0)
clearInterval(timer)
}
}, 10)
}
}
// top.onclick = function () {
// var timer = setInterval(function () { // eslint-disable-line
// let currentPosition = document.documentElement.scrollTop || document.body.scrollTop
// currentPosition -= 100
// if (currentPosition > 0) {
// window.scrollTo(0, currentPosition)
// } else {
// window.scrollTo(0, 0)
// clearInterval(timer)
// }
// }, 10)
// }
// }
let _hmt = _hmt || [] // eslint-disable-line
const hm = document.createElement('script')

2
plugins/vue.js
View File

@ -31,7 +31,6 @@ import {
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import hljs from 'highlight.js'
import { Loading } from 'element-ui'
import Swiper from '../components/Swiper'
import Slide from '../components/Slide'
library.add(
@ -60,7 +59,6 @@ library.add(
)
Vue.component('Icon', FontAwesomeIcon)
Vue.component('Swiper', Vue.extend(Swiper))
Vue.component('Slide', Vue.extend(Slide))
Vue.use(Loading.directive)