Skip to content

Commit b4183be

Browse files
author
reco_luan
committed
fix: Optimize HomeBlog.vue
1 parent e217dd5 commit b4183be

File tree

7 files changed

+70
-38
lines changed

7 files changed

+70
-38
lines changed

‎components/Home.vue‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,33 +3,33 @@
33
<div class="hero">
44
<ModuleTransition>
55
<img
6-
v-if="data.isShowHeroImage !== false && recoShowModule"
6+
v-if="recoShowModule && $frontmatter.isShowHeroImage !== false"
77
:style="heroImageStyle"
8-
:src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
8+
:src="$frontmatter.heroImage ? $withBase($frontmatter.heroImage) : require('../images/icon_vuepress_reco.png')"
99
alt="hero">
1010
</ModuleTransition>
1111
<ModuleTransition delay="0.08">
12-
<h1 v-if="data.isShowTitleInHome !== false && recoShowModule">{{ data.heroText || $title || '午后南杂' }}</h1>
12+
<h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
1313
</ModuleTransition>
1414
<ModuleTransition delay="0.16">
1515
<p v-if="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
1616
</ModuleTransition>
1717
<ModuleTransition delay="0.24">
18-
<p class="huawei" v-if="$themeConfig.huawei === true && recoShowModule">
18+
<p class="huawei" v-if="recoShowModule && $themeConfig.huawei === true">
1919
<i class="iconfont reco-huawei" style="color: #fc2d38"></i>
2020
&nbsp;&nbsp;&nbsp;华为，为中华而为之！
2121
</p>
2222
</ModuleTransition>
2323
<ModuleTransition delay="0.32">
24-
<p class="action" v-if="data.actionText && data.actionLink && recoShowModule">
24+
<p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
2525
<NavLink class="action-button" :item="actionLink"/>
2626
</p>
2727
</ModuleTransition>
2828
</div>
2929

3030
<ModuleTransition delay="0.4">
31-
<div class="features" v-if="data.features && data.features.length && recoShowModule">
32-
<div v-for="(feature, index) in data.features" :key="index" class="feature">
31+
<div class="features" v-if="recoShowModule && $frontmatter.features && $frontmatter.features.length">
32+
<div v-for="(feature, index) in $frontmatter.features" :key="index" class="feature">
3333
<h2>{{ feature.title }}</h2>
3434
<p>{{ feature.details }}</p>
3535
</div>
@@ -48,19 +48,16 @@ import ModuleTransition from '@theme/components/ModuleTransition'
4848
export default {
4949
components: { NavLink, ModuleTransition },
5050
computed: {
51-
data () {
52-
return this.$frontmatter
53-
},
5451
5552
actionLink () {
5653
return {
57-
link: this.data.actionLink,
58-
text: this.data.actionText
54+
link: this.$frontmatter.actionLink,
55+
text: this.$frontmatter.actionText
5956
}
6057
},
6158
6259
heroImageStyle () {
63-
return this.data.heroImageStyle || {
60+
return this.$frontmatter.heroImageStyle || {
6461
maxHeight: '200px',
6562
margin: '6rem auto 1.5rem'
6663
}

‎components/HomeBlog.vue‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
11
<template>
22
<div class="home-blog">
3-
<div
4-
class="hero"
5-
:style="{
6-
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
3+
<div class="hero" :style="{ ...bgImageStyle }">
4+
<div
5+
class="mask"
6+
:style="{
7+
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
78
<ModuleTransition>
8-
<h1 v-if="recoShowModule">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
9+
<img
10+
v-if="$frontmatter.isShowHeroImage !== false && recoShowModule"
11+
:style="heroImageStyle"
12+
:src="$frontmatter.heroImage ? $withBase($frontmatter.heroImage) : require('../images/icon_vuepress_reco.png')"
13+
alt="hero">
14+
</ModuleTransition>
15+
<ModuleTransition>
16+
<h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
917
</ModuleTransition>
1018

1119
<ModuleTransition delay="0.08">
@@ -15,8 +23,8 @@
1523
</ModuleTransition>
1624

1725
<ModuleTransition delay="0.16">
18-
<p
19-
class="huawei"
26+
<p
27+
class="huawei"
2028
v-if="recoShowModule && $themeConfig.huawei === true">
2129
<i class="iconfont reco-huawei" style="color: #fc2d38"></i>&nbsp;&nbsp;&nbsp;华为，为中华而为之！
2230
</p>
@@ -169,6 +177,27 @@ export default {
169177
margin: 0px auto;
170178
171179
.hero {
180+
position relative
181+
.mask {
182+
position absolute
183+
top 0
184+
bottom 0
185+
left 0
186+
right 0
187+
z-index 0
188+
&:after {
189+
display block
190+
content ' '
191+
background var(--mask-color)
192+
position absolute
193+
top 0
194+
bottom 0
195+
left 0
196+
right 0
197+
z-index 0
198+
opacity .2
199+
}
200+
}
172201
figure {
173202
position absolute
174203
background yellow
@@ -222,6 +251,7 @@ export default {
222251
margin 2rem auto
223252
width 8rem
224253
height 8rem
254+
border-radius 50%
225255
}
226256
.name {
227257
text-align center

‎components/Mode/modeOptions.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ const modeOptions = {
66
'--text-color': '#2c3e50',
77
'--border-color': '#eaecef',
88
'--bgm-bg-color': 'rgba(255, 255, 255, .7)',
9-
'--code-color': 'rgba(27, 31, 35, 0.05)'
9+
'--code-color': 'rgba(27, 31, 35, 0.05)',
10+
'--mask-color': '#888'
1011
},
1112
dark: {
1213
'--background-color': '#25272a',
@@ -15,7 +16,8 @@ const modeOptions = {
1516
'--text-color': '#aaa',
1617
'--border-color': 'rgba(0, 0, 0, .3)',
1718
'--bgm-bg-color': 'rgba(0, 0, 0, .7)',
18-
'--code-color': 'rgba(0, 0, 0, .3)'
19+
'--code-color': 'rgba(0, 0, 0, .3)',
20+
'--mask-color': '#000'
1921
}
2022
}
2123

‎styles/loadMixin.styl‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎styles/mode.styl‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
--border-color $borderColor
77
--bgm-bg-color $bgmBgColor
88
--code-color $codeColor
9+
--mask-color $maskColor
910
@media (prefers-color-scheme: dark)
1011
--background-color $backgroundColorDark
1112
--box-shadow $boxShadowDark
@@ -14,3 +15,4 @@
1415
--border-color $borderColorDark
1516
--bgm-bg-color $bgmBgColorDark
1617
--code-color $codeColorDark
18+
--mask-color $maskColorDark

‎styles/palette.styl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,6 @@ $codeColorDark ?= rgba(0, 0, 0, .3)
2121

2222
$bgmBgColor ?= rgba(255, 255, 255, .7)
2323
$bgmBgColorDark ?= rgba(0, 0, 0, .7)
24+
25+
$maskColor ?= #888
26+
$maskColorDark ?= #000

‎styles/theme.styl‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -238,12 +238,20 @@ th, td
238238
.comments-wrapper
239239
.valine-wrapper
240240
#valine.v
241+
.vbtn
242+
color: var(--text-color)
243+
border: 1px solid var(--border-color)
244+
&:hover
245+
color: $accentColor
246+
border-color: $accentColor
241247
.vwrap
242248
background: var(--code-color)
243-
// box-shadow: var(--box-shadow)
249+
border: 1px dashed var(--border-color)
244250
.vcontrol
245251
.vsubmit
246252
background: var(--code-color)
253+
.vheader .vinput
254+
border-bottom: 1px dashed var(--border-color)
247255
.vinfo
248256
padding-left: .6rem
249257
.vlist
@@ -254,29 +262,30 @@ th, td
254262
margin-left: 0
255263
border-left: 1px dashed var(--border-color)
256264
.vimg
265+
width: 2.8rem;
266+
height: 2.8rem;
257267
border-radius: $borderRadius
258-
box-shadow: var(--box-shadow)
259268
border: none
260269
.vh
261270
border-bottom: 1px dashed var(--border-color)
262271
.vhead
263272
.vsys
264-
box-shadow: var(--box-shadow)
265273
background: var(--code-color)
266274
color: var(--text-color)
267275
.vmeta
268276
margin-bottom: 1rem
269277
.vat
270278
margin-right: .3rem
271279
background: var(--code-color)
272-
box-shadow: var(--box-shadow)
273280
border-radius: $borderRadius
274281
padding: 0 .4rem
275282
color: var(--text-color)
276283
border: 1px solid var(--border-color)
284+
&:hover
285+
color: $accentColor
286+
border-color: $accentColor
277287
.vcontent
278288
background: var(--code-color)
279-
box-shadow: var(--box-shadow)
280289
border-radius: $borderRadius
281290
margin: 0 .3rem
282291
padding: .1rem .6rem .05rem .6rem

0 commit comments

Comments
 (0)
⚡