Skip to content
This repository was archived by the owner on May 13, 2024. It is now read-only.

Commit a3339f6

Browse files
ulivzulivz
committed
feat: init example
1 parent 288cfb7 commit a3339f6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+2973
-433
lines changed

‎docs/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Blog
2+

‎example/.vuepress/config.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
module.exports = {
2-
title: `VuePress`,
2+
title: `ULIVZ`,
33
themeConfig: {
44
nav: [
55
{
6-
text: 'Home',
6+
text: 'Blog',
77
link: '/',
88
},
99
{
10-
text: 'Tutorials',
11-
link: '/tutorials/',
10+
text: 'Writings',
11+
link: '/writings/',
1212
},
1313
{
14-
text: 'Documentation',
15-
link: 'https://v1.vuepress.vuejs.org',
14+
text: 'Tags',
15+
link: '/tag/',
1616
},
1717
],
1818
footer: {
1919
contact: [
2020
{
2121
type: 'github',
22-
link: '',
22+
link: 'https://github.com/ulivz',
2323
},
2424
{
2525
type: 'twitter',
26-
link: '',
26+
link: 'https://twitter.com/_ulivz',
2727
},
2828
],
2929
copyright: [

‎example/.vuepress/theme/components/Footer.vue‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<div class="footer-left-wrap">
44
<ul class="contact" v-if="contact">
55
<li class="contact-item" v-for="item in contact">
6-
<component :is="item.iconComponent"></component>
7-
<NavLink :link="item.link">{{ item.text }}</NavLink>
6+
<NavLink :link="item.link">
7+
<component :is="item.iconComponent"></component>
8+
{{ item.text }}
9+
</NavLink>
810
</li>
911
</ul>
1012
</div>
@@ -104,13 +106,17 @@
104106
font-size 12px
105107
color rgba(255, 255, 255, 0.45)
106108
text-decoration none
109+
transition color .3s
110+
111+
&:hover
112+
color #FFF
107113
108114
.footer-right-wrap
109115
flex 1
110116
display flex
111117
align-items center
112118
justify-content flex-end
113-
119+
114120
.copyright
115121
display flex
116122
justify-content flex-end
@@ -129,14 +135,16 @@
129135
font-size 12px
130136
color rgba(255, 255, 255, 0.6)
131137
text-decoration none
132-
transition color.3s
138+
transition color .3s
139+
133140
&:hover
134141
color rgba(255, 255, 255, 0.9)
135142
136143
@media (max-width: $MQMobile)
137144
.footer
138145
height 100px
139146
flex-direction column
147+
140148
.footer-left-wrap
141149
align-items center
142150
justify-content center

‎example/.vuepress/theme/components/Header.vue‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
<template>
22
<header id="header">
33
<div class="header-wrapper">
4-
<h1 class="title">{{ $site.title }}</h1>
4+
<h1 class="title">
5+
<router-link
6+
:to="$site.base"
7+
class="home-link"
8+
>{{ $site.title }}</router-link>
9+
</h1>
510
<div class="header-right-wrap">
611
<ul class="nav" v-if="$themeConfig.nav">
712
<li class="nav-item" v-for="item in $themeConfig.nav">
813
<NavLink :link="item.link">{{ item.text }}</NavLink>
914
</li>
1015
</ul>
11-
<SearchBox />
16+
<SearchBox/>
1217
</div>
1318
</div>
1419
</header>
@@ -29,25 +34,31 @@
2934
<style lang="stylus">
3035
@import '~@app/style/config'
3136
32-
ol, ul
33-
list-style none
34-
margin 0
35-
padding 0
36-
3737
#header
3838
z-index 12
3939
position fixed
4040
top 0
4141
width 100vw
4242
box-sizing border-box
4343
// background lighten(#3eaf7c, 90%)
44-
background-color #FdFdFd
44+
background-color #FFF
4545
font-family Abel, sans-serif
4646
padding 20px 32px 20px
4747
margin auto
4848
border-bottom 1px solid rgba(0, 0, 0, 0.15)
49-
// border-bottom 5px solid lighten(#3eaf7c, 50%)
50-
49+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03), 0 6px 6px rgba(0, 0, 0, 0.05)
50+
transition: all 1s cubic-bezier(.25, .8, .25, 1)
51+
52+
ol, ul
53+
list-style none
54+
margin 0
55+
padding 0
56+
57+
&:hover
58+
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08), 0 6px 6px rgba(0, 0, 0, 0.1);
59+
60+
// border-bottom 5px solid lighten(#3eaf7c, 50%)
61+
5162
.header-wrapper
5263
display flex
5364
line-height 40px
@@ -64,7 +75,10 @@
6475
letter-spacing 2px
6576
display block
6677
font-weight 900
67-
78+
a
79+
color #000
80+
text-decoration none
81+
6882
.header-right-wrap
6983
flex 1
7084
display flex
@@ -88,21 +102,33 @@
88102
transition color .3s
89103
90104
&:hover
91-
color lighten(#3eaf7c, 10%)
92-
93-
105+
color $accentColor
106+
94107
.search-box
95108
margin-left 20px
109+
96110
input
97-
border-radius 0
98-
border: 1px solid rgba(0, 0, 0, 0.15)
111+
border-radius 5px
112+
transition all .5s
113+
border: 1px solid #000
114+
&:hover
115+
border: 1px solid $accentColor
116+
box-shadow 0 0 5px $accentColor
117+
99118
.suggestions
119+
border 1px solid #000
100120
top: 40px
101121
right 0
102-
122+
a
123+
color #000
124+
text-decoration none
125+
&.focused
126+
color $accentColor
127+
103128
@media (max-width: $MQMobile)
104129
.header-wrapper
105130
flex-direction column
131+
106132
.header-right-wrap
107133
display none
108134
</style>

‎example/.vuepress/theme/components/LayoutWrapper.vue‎

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

‎example/.vuepress/theme/components/Pagination.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<template>
2+
<div
3+
class="pagination"
4+
v-if="pagination"
5+
>
6+
<router-link
7+
class="prev"
8+
title="上一页"
9+
v-if="pagination.hasPrev"
10+
:to="pagination.prevLink"
11+
>
12+
上一页
13+
</router-link>
14+
<router-link
15+
class="next"
16+
title="下一页"
17+
v-if="pagination.hasNext"
18+
:to="pagination.nextLink"
19+
>
20+
下一页
21+
</router-link>
22+
</div>
23+
</template>
24+
25+
<script>
26+
export default {
27+
props: ['pagination']
28+
}
29+
</script>
30+
31+
<style lang="stylus">
32+
.pagination
33+
a
34+
margin-right: 20px
35+
color: #000
36+
height: 38px
37+
line-height: 38px
38+
transition: all .3s ease
39+
position: relative
40+
overflow: hidden
41+
display: inline-block
42+
background #FFF
43+
padding: 0 15px
44+
text-decoration: none
45+
border 1px solid #000
46+
border-radius 5px
47+
transition all .5s
48+
&:hover
49+
color #FFF
50+
border 1px solid $accentColor
51+
background-color $accentColor
52+
</style>

‎example/.vuepress/theme/components/Toc.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -141,12 +141,13 @@
141141
display: none;
142142
width: $tocWidth;
143143
max-height: 100vh;
144+
max-width 220px
144145
overflow-y: auto;
145146
padding: $sidebarTop + $navbarHeight 0;
146147
top: 0;
147148
right: 10px;
148149
box-sizing: border-box;
149-
background: #fff;
150+
/*background: #fff;*/
150151
z-index: 0;
151152
152153
.vuepress-toc-item
@@ -170,14 +171,14 @@
170171
white-space: nowrap;
171172
172173
&.active
173-
border-left-color: #3eaf7c;
174+
border-left-color: $accentColor;
174175
175176
a
176-
color: #3eaf7c;
177+
color: $accentColor;
177178
178179
&:hover
179180
a
180-
color: #3eaf7c;
181+
color: $accentColor;
181182
182183
for i in range(3, 6)
183184
.vuepress-toc-h{i} a

‎example/.vuepress/theme/global-components/BlogTag.vue‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<router-link class="blog-tag" :to="tag.path">
3+
{{ tag.name }} ({{ tag.posts.length }})
4+
</router-link>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: ['tag'],
10+
}
11+
</script>
12+
13+
<style lang="stylus">
14+
.blog-tag
15+
display inline-block
16+
word-break break-word
17+
font-size 20px
18+
line-height 25px
19+
margin-right 20px
20+
margin-bottom 20px
21+
padding 3px 15px
22+
border-radius 5px
23+
font-weight: 300
24+
text-align left
25+
box-sizing border-box
26+
transition: background-color .3s
27+
color #000
28+
border 1px solid #000
29+
text-decoration none
30+
transition all .5s
31+
32+
&:hover
33+
color: $accentColor !important
34+
border 1px solid $accentColor
35+
box-shadow 0 0 5px $accentColor
36+
37+
@media screen and (max-width: 768px)
38+
.blog-tag
39+
font-size 14px
40+
padding 3px 10px
41+
margin-right 10px
42+
margin-bottom 10px
43+
</style>

‎example/.vuepress/theme/global-components/BlogTags.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div class="blog-tags">
3+
<BlogTag
4+
v-for="tag in tags"
5+
:key="tag.name"
6+
:tag="tag"
7+
/>
8+
</div>
9+
</template>
10+
11+
<script>
12+
export default {
13+
props: ['tags'],
14+
}
15+
</script>
16+
17+
<style lang="stylus">
18+
.blog-tags
19+
width 66%
20+
21+
@media screen and (max-width: 1000px)
22+
.blog-tags
23+
width 90%
24+
</style>

0 commit comments

Comments
 (0)