Skip to content

Commit 38c68a2

Browse files
PeachScriptPeachScript
committed
docs: add basic Layout component through extend way
1 parent aab7d1b commit 38c68a2

File tree

5 files changed

+233
-297
lines changed

5 files changed

+233
-297
lines changed

‎docs/.vuepress/theme/Layout.vue

Lines changed: 179 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -1,190 +1,193 @@
11
<template>
2-
<div>
3-
<header>
4-
<div class="container">
5-
<router-link :to="{ path: '/' }" id="logo"></router-link>
6-
<h1>Vue-infinite-loading</h1>
7-
</div>
8-
</header>
9-
<main class="container">
10-
<previewer class="previewer"></previewer>
11-
<div class="intro-container">
12-
<p>An infinite scroll plugin for Vue.js</p>
13-
<button class="button button-large button-basic">Get Started</button>
14-
<button class="button button-large">View GitHub</button>
15-
<ul class="feat-list">
16-
<li>
17-
<h3>Out of the box</h3>
18-
BalabalaBalabalaBalabalaBalabala
19-
</li>
20-
<li>
21-
<h3>2-direction support</h3>
22-
BalabalaBalabalaBalabalaBalabala
23-
</li>
24-
<li>
25-
<h3>Result display</h3>
26-
BalabalaBalabalaBalabalaBalabala
27-
</li>
28-
</ul>
29-
</div>
30-
</main>
2+
<div
3+
class="theme-container"
4+
:class="[{ 'doc-mode': !isHomepage }, ...pageClasses]"
5+
@touchstart="onTouchStart"
6+
@touchend="onTouchEnd"
7+
>
8+
<router-link :to="$localePath" id="logo"></router-link>
9+
<h1 v-text="$siteTitle"></h1>
10+
11+
<Navbar
12+
v-if="shouldShowNavbar"
13+
@toggle-sidebar="toggleSidebar"
14+
/>
15+
16+
<div
17+
class="sidebar-mask"
18+
@click="toggleSidebar(false)"
19+
></div>
20+
21+
<Sidebar
22+
:items="sidebarItems"
23+
@toggle-sidebar="toggleSidebar"
24+
>
25+
<slot
26+
name="sidebar-top"
27+
slot="top"
28+
/>
29+
<slot
30+
name="sidebar-bottom"
31+
slot="bottom"
32+
/>
33+
</Sidebar>
34+
35+
<div
36+
class="custom-layout"
37+
v-if="$page.frontmatter.layout"
38+
>
39+
<component :is="$page.frontmatter.layout"/>
40+
</div>
41+
42+
<Page
43+
v-else
44+
:sidebar-items="sidebarItems"
45+
>
46+
<slot
47+
name="page-top"
48+
slot="top"
49+
/>
50+
<slot
51+
name="page-bottom"
52+
slot="bottom"
53+
/>
54+
</Page>
55+
56+
<Previewer/>
57+
<Intro/>
58+
59+
<SWUpdatePopup :updateEvent="swUpdateEvent"/>
60+
<footer class="footer">
61+
<p>Released under the MIT License</p>
62+
<p>&copy;2016-present Made with ♥ under Vuepress by PeachScript</p>
63+
</footer>
3164
</div>
3265
</template>
3366

3467
<script>
3568
import 'focus-visible';
36-
import Previewer from './Previewer';
69+
import OfficialLayout from 'vuepress/lib/default-theme/Layout';
70+
import Intro from './components/Intro';
71+
import Previewer from './components/Previewer';
3772
3873
export default {
74+
extends: OfficialLayout,
75+
computed: {
76+
isHomepage() {
77+
return this.$page.frontmatter.home;
78+
},
79+
},
3980
components: {
81+
Intro,
4082
Previewer,
41-
}
83+
},
4284
};
4385
</script>
4486

45-
<style lang="less">
46-
@import './less/button.less';
47-
48-
body {
49-
margin: 0;
50-
font: 16px/1.42857 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
51-
background-color: #f9fbfd;
52-
}
53-
</style>
54-
55-
<style lang="less" scoped>
56-
@import './less/variables.less';
57-
58-
.container {
59-
margin: 0 auto;
60-
width: 1200px;
61-
}
62-
63-
header .container,
64-
main.container {
65-
position: relative;
66-
}
67-
68-
#logo {
69-
position: absolute;
70-
z-index: 10;
71-
top: 10px;
72-
left: 50%;
73-
margin-left: -600px;
74-
display: inline-block;
75-
width: 60px;
76-
height: 60px;
77-
background: url('./assets/images/logo.png') no-repeat center/100%;
78-
79-
+ h1 {
80-
position: absolute;
81-
top: 10px;
82-
left: 50%;
83-
margin: 12px 0 0 -520px;
84-
z-index: 10;
85-
color: @c-basic;
86-
font-size: 24px;
87-
88-
}
89-
90-
&,
91-
+ h1 {
92-
transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
93-
}
94-
95-
&.router-link-active {
96-
top: 100px;
97-
left: 38%;
98-
margin-left: 236px;
99-
width: 200px;
100-
height: 200px;
101-
102-
+ h1 {
103-
top: 280px;
104-
left: 38%;
105-
margin-left: 179px;
106-
font-size: 32px;
107-
}
108-
}
109-
}
110-
111-
.previewer {
112-
position: absolute;
113-
z-index: 10;
114-
top: 80px;
115-
right: 62%;
116-
margin-right: 20px;
117-
}
118-
119-
.intro-container {
120-
position: absolute;
121-
z-index: 10;
122-
left: 38%;
123-
margin-top: 338px;
124-
margin-left: 20px;
125-
width: 640px;
126-
text-align: center;
127-
128-
> p {
129-
margin: 0 0 40px;
130-
color: @c-basic-light;
131-
}
132-
133-
.button + .button {
134-
margin-left: 20px;
135-
}
136-
137-
.feat-list {
138-
list-style: none;
139-
display: flex;
140-
margin-top: 60px;
141-
padding: 0;
142-
143-
li {
144-
position: relative;
145-
padding-top: 120px;
146-
flex: 1;
147-
color: @c-basic-light;
148-
word-break: break-all;
149-
150-
&:not(:last-child) {
151-
margin-right: 20px;
152-
}
153-
154-
&::before {
155-
content: '';
156-
position: absolute;
157-
z-index: 1;
158-
top: 0;
159-
left: 0;
160-
width: 100%;
161-
padding-top: 80%;
162-
background: no-repeat center top/90%;
163-
filter: grayscale(50%);
164-
transition: filter 0.3s;
165-
}
166-
167-
&:first-child::before {
168-
background-image: url('./assets/images/icon-box.png');
169-
}
170-
171-
&:nth-child(2)::before {
172-
background-image: url('./assets/images/icon-dir.png');
173-
}
174-
175-
&:last-child::before {
176-
background-image: url('./assets/images/icon-msg.png');
177-
}
178-
179-
&:hover::before {
180-
filter: none;
181-
}
182-
183-
h3 {
184-
margin: 0 0 5px;
185-
color: @c-basic;
186-
}
187-
}
188-
}
189-
}
87+
<style lang="stylus">
88+
@require './styles/button';
89+
@require './styles/config';
90+
91+
.theme-container
92+
.previewer
93+
position absolute
94+
z-index 100
95+
top $s-header-height + 10
96+
right 100% - $s-home-divide-ratio
97+
margin-right $s-home-middle-gap
98+
transition all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1)
99+
100+
#logo
101+
position absolute
102+
z-index 100
103+
top 100px
104+
left $s-home-divide-ratio
105+
display inline-block
106+
margin-left 216px + $s-home-middle-gap
107+
width 200px
108+
height 200px
109+
background url('./assets/images/logo.png') no-repeat center/100%
110+
111+
+ h1
112+
position absolute
113+
z-index 100
114+
top 280px
115+
left $s-home-divide-ratio
116+
margin-left 164px + $s-home-middle-gap
117+
color $c-basic
118+
font-size 32px
119+
120+
&,
121+
+ h1
122+
transition all 0.6s cubic-bezier(0.645, 0.045, 0.355, 1)
123+
124+
.navbar
125+
transition all 0.3s
126+
127+
.home-link
128+
display none
129+
130+
.links
131+
transition all 0.3s
132+
133+
.intro-container
134+
position absolute
135+
z-index 10
136+
top 346px
137+
left $s-home-divide-ratio
138+
margin-left $s-home-middle-gap
139+
transition all 0.3s
140+
transition-delay 0.6s
141+
142+
.footer
143+
margin-top 700px
144+
padding 15px 0
145+
text-align center
146+
background-color #fff
147+
transition all 0.3s
148+
149+
p
150+
margin 0
151+
color lighten($c-basic-light, 15%)
152+
font-size 14px
153+
154+
&:not(.doc-mode)
155+
.navbar
156+
background transparent
157+
158+
.links
159+
opacity 0
160+
visibility hidden
161+
transform translateY(10px)
162+
&.doc-mode
163+
#logo
164+
top 5px
165+
left $s-edge-gap
166+
margin-left 0
167+
width 50px
168+
height 50px
169+
transition-delay 0.3s
170+
171+
+ h1
172+
top 2px
173+
left $s-edge-gap + 60
174+
margin 12px 0 0
175+
font-size 24px
176+
transition-delay 0.3s
177+
178+
.previewer
179+
position fixed
180+
right $s-edge-gap
181+
margin-right 0
182+
transition-delay 0.3s
183+
184+
.intro-container
185+
opacity 0
186+
visibility hidden
187+
transform translateY(30px)
188+
transition-delay 0s
189+
190+
.footer
191+
opacity 0
192+
visibility hidden
190193
</style>

0 commit comments

Comments
 (0)