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

Commit f103ce9

Browse files
ulivzulivz
committed
feat: init
0 parents  commit f103ce9

39 files changed

+1692
-0
lines changed

‎.editorconfig‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
charset = utf-8
8+
trim_trailing_whitespace = true
9+
insert_final_newline = true
10+
11+
[*.md]
12+
trim_trailing_whitespace = false

‎.gitattributes‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* text=auto

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) ULIVZ <chl814@foxmail.com> (https://github.com/ulivz)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# vuepress-theme-blogging
2+
3+
[![NPM version](https://badgen.net/npm/v/vuepress-theme-blogging)](https://npmjs.com/package/vuepress-theme-blogging) [![NPM downloads](https://badgen.net/npm/dm/vuepress-theme-blogging)](https://npmjs.com/package/vuepress-theme-blogging) [![CircleCI](https://badgen.net/circleci/github/ulivz/vuepress-theme-blogging/master)](https://circleci.com/gh/ulivz/vuepress-theme-blogging/tree/master)
4+
5+
## Install
6+
7+
```bash
8+
npm i vuepress-theme-blogging
9+
```
10+
11+
## Usage
12+
13+
```js
14+
const vuepressThemeBlogging = require('vuepress-theme-blogging')
15+
16+
vuepressThemeBlogging()
17+
//=> foo
18+
```
19+
20+
## Contributing
21+
22+
1. Fork it!
23+
2. Create your feature branch: `git checkout -b my-new-feature`
24+
3. Commit your changes: `git commit -am 'Add some feature'`
25+
4. Push to the branch: `git push origin my-new-feature`
26+
5. Submit a pull request :D
27+
28+
29+
## Author
30+
31+
**vuepress-theme-blogging** © [ULIVZ](https://github.com/ulivz), Released under the [MIT](./LICENSE) License.<br>
32+
33+
34+
> [github.com/ulivz](https://github.com/ulivz) · GitHub [@ULIVZ](https://github.com/ulivz) · Twitter [@_ulivz](https://twitter.com/_ulivz)
35+
36+

‎components/Footer.vue‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
<template>
2+
<footer class="footer">
3+
<div class="footer-left-wrap">
4+
<ul class="contact" v-if="contact">
5+
<li class="contact-item" v-for="item in contact">
6+
<NavLink :link="item.link">
7+
<component :is="item.iconComponent"></component>
8+
{{ item.text }}
9+
</NavLink>
10+
</li>
11+
</ul>
12+
</div>
13+
14+
<div class="footer-right-wrap">
15+
<ul class="copyright" v-if="copyright">
16+
<li class="copyright-item" v-for="item in copyright">
17+
<NavLink :link="item.link">{{ item.text }}</NavLink>
18+
</li>
19+
</ul>
20+
</div>
21+
</footer>
22+
</template>
23+
24+
<script>
25+
import NavLink from './NavLink'
26+
import {
27+
GithubIcon,
28+
FacebookIcon,
29+
TwitterIcon,
30+
} from 'vue-feather-icons'
31+
32+
export default {
33+
components: {
34+
NavLink,
35+
GithubIcon,
36+
FacebookIcon,
37+
TwitterIcon,
38+
},
39+
40+
methods: {
41+
getIconComponentName(contactType) {
42+
switch (contactType) {
43+
case 'github':
44+
return 'GithubIcon'
45+
case 'facebook':
46+
return 'FacebookIcon'
47+
case 'twitter':
48+
return 'TwitterIcon'
49+
default:
50+
return ''
51+
}
52+
},
53+
},
54+
55+
computed: {
56+
contact() {
57+
return (
58+
this.$themeConfig.footer && this.$themeConfig.footer.contact || []
59+
)
60+
.map(({ type, link }) => {
61+
return {
62+
iconComponent: this.getIconComponentName(type),
63+
link,
64+
}
65+
})
66+
.filter(({ iconComponent }) => iconComponent)
67+
},
68+
69+
copyright() {
70+
return (
71+
this.$themeConfig.footer && this.$themeConfig.footer.copyright || []
72+
)
73+
},
74+
},
75+
}
76+
</script>
77+
78+
<style lang="stylus" scoped>
79+
ol, ul
80+
list-style none
81+
margin 0
82+
padding 0
83+
84+
.footer
85+
height 60px
86+
box-sizing border-box
87+
// background-color darken(#3eaf7c, 70%)
88+
background-color #000
89+
color #FFF
90+
display flex
91+
padding 15px 32px
92+
93+
.footer-left-wrap
94+
line-height 30px
95+
flex 1
96+
display flex
97+
98+
.contact
99+
display flex
100+
101+
.contact-item
102+
flex 1
103+
margin-right 10px
104+
105+
a
106+
font-size 12px
107+
color rgba(255, 255, 255, 0.45)
108+
text-decoration none
109+
transition color .3s
110+
111+
&:hover
112+
color #FFF
113+
114+
.footer-right-wrap
115+
flex 1
116+
display flex
117+
align-items center
118+
justify-content flex-end
119+
120+
.copyright
121+
display flex
122+
justify-content flex-end
123+
124+
.copyright-item
125+
flex 0 0 auto
126+
padding 0 10px
127+
position relative
128+
line-height 12px
129+
border-right 1px solid rgba(255, 255, 255, 0.6)
130+
131+
&:last-child
132+
border-right none
133+
134+
a
135+
font-size 12px
136+
color rgba(255, 255, 255, 0.6)
137+
text-decoration none
138+
transition color .3s
139+
140+
&:hover
141+
color rgba(255, 255, 255, 0.9)
142+
143+
@media (max-width: $MQMobile)
144+
.footer
145+
height 100px
146+
flex-direction column
147+
148+
.footer-left-wrap
149+
align-items center
150+
justify-content center
151+
</style>

‎components/Header.vue‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<template>
2+
<header id="header">
3+
<div class="header-wrapper">
4+
<h1 class="title">
5+
<router-link
6+
:to="$site.base"
7+
class="home-link"
8+
>{{ $site.title }}</router-link>
9+
</h1>
10+
<div class="header-right-wrap">
11+
<ul class="nav" v-if="$themeConfig.nav">
12+
<li class="nav-item" v-for="item in $themeConfig.nav">
13+
<NavLink :link="item.link">{{ item.text }}</NavLink>
14+
</li>
15+
</ul>
16+
<SearchBox/>
17+
</div>
18+
</div>
19+
</header>
20+
</template>
21+
22+
<script>
23+
import SearchBox from '@SearchBox'
24+
import NavLink from './NavLink'
25+
26+
export default {
27+
components: {
28+
SearchBox,
29+
NavLink,
30+
},
31+
}
32+
</script>
33+
34+
<style lang="stylus">
35+
@import '~@app/style/config'
36+
37+
#header
38+
z-index 12
39+
position fixed
40+
top 0
41+
width 100vw
42+
box-sizing border-box
43+
// background lighten(#3eaf7c, 90%)
44+
background-color #FFF
45+
font-family Abel, sans-serif
46+
padding 20px 32px 20px
47+
margin auto
48+
border-bottom 1px solid rgba(0, 0, 0, 0.15)
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+
62+
.header-wrapper
63+
display flex
64+
line-height 40px
65+
height 40px
66+
67+
.title
68+
flex 0 0 200px
69+
// color #3eaf7c
70+
// color lighten(#3eaf7c, 10%)
71+
color #000
72+
font-size 30px
73+
font-weight bold
74+
margin 0
75+
letter-spacing 2px
76+
display block
77+
font-weight 900
78+
a
79+
color #000
80+
text-decoration none
81+
82+
.header-right-wrap
83+
flex 1
84+
display flex
85+
justify-content flex-end
86+
87+
.nav
88+
flex 0 0 auto
89+
display flex
90+
margin 0
91+
align-items end
92+
93+
.nav-item
94+
flex 1
95+
margin-left 20px
96+
97+
a
98+
font-size 20px
99+
color #000
100+
// color lighten(#3eaf7c, 30%)
101+
text-decoration none
102+
transition color .3s
103+
104+
&:hover
105+
color $accentColor
106+
107+
.search-box
108+
margin-left 20px
109+
110+
input
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+
118+
.suggestions
119+
border 1px solid #000
120+
top: 40px
121+
right 0
122+
a
123+
color #000
124+
text-decoration none
125+
&.focused
126+
color $accentColor
127+
128+
@media (max-width: $MQMobile)
129+
.header-wrapper
130+
flex-direction column
131+
132+
.header-right-wrap
133+
display none
134+
</style>

0 commit comments

Comments
 (0)