Skip to content

Commit ab94806

Browse files
author
reco_luan
committed
feat(vuepress-theme-reco): optimize blog homepage
1. change style of blog homepage 2. fix some bugs
1 parent b56f3de commit ab94806

File tree

12 files changed

+163
-125
lines changed

12 files changed

+163
-125
lines changed

‎packages/@vuepress-reco/vuepress-plugin-back-to-top/bin/BackToTop.vue‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,36 @@ export default {
1818
}
1919
},
2020
mounted () {
21-
window.addEventListener('scroll', this.handleScroll)
21+
window.addEventListener('scroll', this.throttle(this.handleScroll, 500))
2222
},
2323
beforeDestroy () {
24-
window.removeEventListener('scroll', this.handleScroll)
24+
window.removeEventListener('scroll', this.throttle(this.handleScroll, 500))
2525
},
2626
methods: {
2727
handleScroll () {
2828
this.visible = window.pageYOffset > this.visibilityHeight
2929
},
3030
backToTop () {
3131
window.scrollTo(0, 0)
32+
},
33+
throttle (func, delay) {
34+
let timer = null
35+
let startTime = Date.now()
36+
37+
return function () {
38+
const curTime = Date.now()
39+
const remaining = delay - (curTime - startTime)
40+
const context = this
41+
const args = arguments
42+
43+
clearTimeout(timer)
44+
if (remaining <= 0) {
45+
func.apply(context, args)
46+
startTime = Date.now()
47+
} else {
48+
timer = setTimeout(func, remaining)
49+
}
50+
}
3251
}
3352
}
3453
}

‎packages/vuepress-theme-reco/components/FriendLink.vue‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -48,14 +48,14 @@ export default {
4848
data () {
4949
return {
5050
popupWindowStyle: {},
51-
isPC:true,
51+
isPC: true
5252
}
5353
},
54-
mounted(){
55-
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
56-
this.isPC = false
54+
mounted () {
55+
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
56+
this.isPC = false
5757
} else {
58-
this.isPC = true
58+
this.isPC = true
5959
}
6060
},
6161
computed: {
@@ -79,40 +79,40 @@ export default {
7979
const currentDom = e.target
8080
const popupWindowWrapper = currentDom.querySelector('.popup-window-wrapper')
8181
const popupWindow = currentDom.querySelector('.popup-window')
82-
let infoWrapper = document.querySelector(".info-wrapper")
82+
const infoWrapper = document.querySelector('.info-wrapper')
8383
popupWindowWrapper.style.display = 'block'
8484
const { clientWidth } = currentDom
8585
const {
8686
clientWidth: windowWidth,
8787
clientHeight: windowHeight
8888
} = popupWindow
89-
if(this.isPC){
89+
if (this.isPC) {
9090
this.popupWindowStyle = {
9191
left: (clientWidth - windowWidth) / 2 + 'px',
9292
top: -windowHeight + 'px'
9393
}
94-
infoWrapper.style.overflow = "visible"
94+
infoWrapper.style.overflow = 'visible'
9595
this.$nextTick(() => {
9696
this._adjustPosition(currentDom.querySelector('.popup-window'))
9797
})
98-
}else{
99-
const getPosition = function (element){
100-
var dc = document,
101-
rec = element.getBoundingClientRect(),
102-
_x = rec.left,
103-
_y = rec.top
104-
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft
98+
} else {
99+
const getPosition = function (element) {
100+
const dc = document
101+
const rec = element.getBoundingClientRect()
102+
let _x = rec.left
103+
let _y = rec.top
104+
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft
105105
_y += dc.documentElement.scrollTop || dc.body.scrollTop
106-
return {
107-
left: _x,
108-
top: _y,
106+
return {
107+
left: _x,
108+
top: _y
109109
}
110110
}
111-
infoWrapper.style.overflow = "hidden"
111+
infoWrapper.style.overflow = 'hidden'
112112
const left = getPosition(currentDom).left - getPosition(infoWrapper).left
113113
this.popupWindowStyle = {
114-
left: (-left + (infoWrapper.clientWidth - popupWindow.clientWidth)/2 ) + 'px',
115-
top: -windowHeight + 'px',
114+
left: (-left + (infoWrapper.clientWidth - popupWindow.clientWidth) / 2) + 'px',
115+
top: -windowHeight + 'px'
116116
}
117117
}
118118
},

‎packages/vuepress-theme-reco/components/HomeBlog.vue‎

Lines changed: 48 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,29 @@
11
<template>
22
<div class="home-blog">
33
<div class="hero" :style="{ ...bgImageStyle }">
4-
<div
5-
class="mask"
6-
:style="{
7-
background: `
8-
url(${$frontmatter.bgImage ?
9-
$withBase($frontmatter.bgImage) :
10-
require('../images/home-bg.jpg')}) center/cover no-repeat
11-
`
12-
}"
13-
></div>
14-
<ModuleTransition>
15-
<img
16-
v-if="recoShowModule && $frontmatter.heroImage"
17-
:style="heroImageStyle || {}"
18-
:src="$withBase($frontmatter.heroImage)"
19-
alt="hero"
20-
/>
21-
</ModuleTransition>
22-
<ModuleTransition delay="0.04">
23-
<h1 v-if="recoShowModule && $frontmatter.heroText !== null">
24-
{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
25-
</h1>
26-
</ModuleTransition>
4+
<div>
5+
<ModuleTransition>
6+
<img
7+
class="hero-img"
8+
v-if="recoShowModule && $frontmatter.heroImage"
9+
:style="heroImageStyle || {}"
10+
:src="$withBase($frontmatter.heroImage)"
11+
alt="hero"
12+
/>
13+
</ModuleTransition>
2714

28-
<ModuleTransition delay="0.08">
29-
<p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
30-
{{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
31-
</p>
32-
</ModuleTransition>
15+
<ModuleTransition delay="0.04">
16+
<h1 v-if="recoShowModule && $frontmatter.heroText !== null">
17+
{{ $frontmatter.heroText || $title || 'vuePress-theme-reco' }}
18+
</h1>
19+
</ModuleTransition>
20+
21+
<ModuleTransition delay="0.08">
22+
<p v-if="recoShowModule && $frontmatter.tagline !== null" class="description">
23+
{{ $frontmatter.tagline || $description || 'Welcome to your vuePress-theme-reco site' }}
24+
</p>
25+
</ModuleTransition>
26+
</div>
3327
</div>
3428

3529
<ModuleTransition delay="0.16">
@@ -108,16 +102,17 @@ export default {
108102
}
109103
},
110104
heroImageStyle () {
111-
return this.$frontmatter.heroImageStyle || {
112-
maxHeight: '200px',
113-
margin: '6rem auto 1.5rem'
114-
}
105+
return this.$frontmatter.heroImageStyle || {}
115106
},
116107
bgImageStyle () {
117108
const initBgImageStyle = {
118-
height: '350px',
119109
textAlign: 'center',
120-
overflow: 'hidden'
110+
overflow: 'hidden',
111+
background: `
112+
url(${this.$frontmatter.bgImage
113+
? this.$withBase(this.$frontmatter.bgImage)
114+
: require('../images/bg.svg')}) center/cover no-repeat
115+
`
121116
}
122117
const {
123118
bgImageStyle
@@ -166,45 +161,26 @@ export default {
166161

167162
<style lang="stylus">
168163
.home-blog {
169-
padding: $navbarHeight 0 0;
164+
padding: 0;
170165
margin: 0px auto;
171-
172166
.hero {
173167
position relative
174-
.mask {
175-
position absolute
176-
top 0
177-
bottom 0
178-
left 0
179-
right 0
180-
z-index -1
181-
&:after {
182-
display block
183-
content ' '
184-
background var(--mask-color)
185-
position absolute
186-
top 0
187-
bottom 0
188-
left 0
189-
right 0
190-
z-index 0
191-
opacity .2
192-
}
193-
}
194-
figure {
195-
position absolute
196-
background yellow
168+
box-sizing border-box
169+
padding 0 20px
170+
height 100vh
171+
display flex
172+
align-items center
173+
justify-content center
174+
.hero-img {
175+
max-width: 300px;
176+
margin: 0 auto 1.5rem
197177
}
198178
199179
h1 {
200-
margin:7rem auto 1.8rem;
180+
margin:0 auto 1.8rem;
201181
font-size: 2.5rem;
202182
}
203183
204-
h1, .description, .action, .huawei {
205-
color #fff
206-
}
207-
208184
.description {
209185
margin: 1.8rem auto;
210186
font-size: 1.6rem;
@@ -215,6 +191,7 @@ export default {
215191
display flex
216192
align-items: flex-start;
217193
margin 20px auto 0
194+
padding 0 20px
218195
max-width $homePageWidth
219196
.blog-list {
220197
flex auto
@@ -231,7 +208,6 @@ export default {
231208
top 70px
232209
overflow hidden
233210
transition all .3s
234-
margin-top 15px
235211
margin-left 15px
236212
flex 0 0 300px
237213
height auto
@@ -258,10 +234,14 @@ export default {
258234
background-color var(--background-color)
259235
&:hover {
260236
transform scale(1.04)
237+
a {
238+
color $accentColor
239+
}
261240
}
262241
a {
263242
display flex
264243
justify-content: space-between
244+
color var(--text-color)
265245
.post-num {
266246
width 1.6rem;
267247
height 1.6rem
@@ -281,25 +261,18 @@ export default {
281261
282262
@media (max-width: $MQMobile) {
283263
.home-blog {
284-
padding-left: 1.5rem;
285-
padding-right: 1.5rem;
286264
.hero {
287-
margin 0 -1.5rem
288265
height 450px
289266
img {
290267
max-height: 210px;
291268
margin: 2rem auto 1.2rem;
292269
}
293270
294271
h1 {
295-
margin: 6rem auto 1.8rem ;
272+
margin: 0 auto 1.8rem ;
296273
font-size: 2rem;
297274
}
298275
299-
h1, .description, .action {
300-
// margin: 1.2rem auto;
301-
}
302-
303276
.description {
304277
font-size: 1.2rem;
305278
}
@@ -327,19 +300,15 @@ export default {
327300
328301
@media (max-width: $MQMobileNarrow) {
329302
.home-blog {
330-
padding-left: 1.5rem;
331-
padding-right: 1.5rem;
332-
333303
.hero {
334-
margin 0 -1.5rem
335-
height 350px
304+
height 450px
336305
img {
337306
max-height: 210px;
338307
margin: 2rem auto 1.2rem;
339308
}
340309
341310
h1 {
342-
margin: 6rem auto 1.8rem ;
311+
margin: 0 auto 1.8rem ;
343312
font-size: 2rem;
344313
}
345314

‎packages/vuepress-theme-reco/components/NavLinks.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,5 +184,4 @@ export default {
184184
.nav-item > a:not(.external)
185185
&:hover, &.router-link-active
186186
margin-bottom -2px
187-
border-bottom 2px solid lighten($accentColor, 8%)
188187
</style>

‎packages/vuepress-theme-reco/components/Navbar.vue‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,28 @@ export default {
7171
isAlgoliaSearch () {
7272
return this.algolia && this.algolia.apiKey && this.algolia.indexName
7373
}
74+
},
75+
76+
methods: {
77+
throttle (func, delay) {
78+
let timer = null
79+
let startTime = Date.now()
80+
81+
return function () {
82+
const curTime = Date.now()
83+
const remaining = delay - (curTime - startTime)
84+
const context = this
85+
const args = arguments
86+
87+
clearTimeout(timer)
88+
if (remaining <= 0) {
89+
func.apply(context, args)
90+
startTime = Date.now()
91+
} else {
92+
timer = setTimeout(func, remaining)
93+
}
94+
}
95+
}
7496
}
7597
}
7698
@@ -106,7 +128,6 @@ $navbar-horizontal-padding = 1.5rem
106128
font-weight 600
107129
color var(--text-color)
108130
position relative
109-
background var(--background-color)
110131
.links
111132
padding-left 1.5rem
112133
box-sizing border-box

‎packages/vuepress-theme-reco/components/NoteAbstractItem.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
<router-link :to="item.path">{{item.title}}</router-link>
99
</div>
1010
<div class="abstract" v-html="item.excerpt"></div>
11-
<hr class="hr">
1211
<PageInfo
1312
:pageInfo="item"
1413
:currentTag="currentTag">
@@ -53,8 +52,10 @@ export default {
5352
.title
5453
position: relative;
5554
font-size: 1.28rem;
56-
line-height: 36px;
55+
line-height: 46px;
5756
display: inline-block;
57+
a
58+
color: var(--text-color);
5859
.reco-lock
5960
font-size 1.28rem
6061
color $accentColor

0 commit comments

Comments
 (0)
⚡