Merge pull request #67 from vuepress-reco/feature/reco
style: package the footer component
This commit is contained in:
reco_luan
GitHub
commit
763cdc2249
@ -32,6 +32,7 @@
|
||||
<slot></slot>
|
||||
<Comments :isShowComments="isComment"/>
|
||||
</div>
|
||||
<Footer class="footer" />
|
||||
</div>
|
||||
</transition>
|
||||
<GA></GA>
|
||||
@ -40,13 +41,14 @@
|
||||
|
||||
<script>
|
||||
import Navbar from '@theme/components/Navbar.vue'
|
||||
import Footer from '@theme/components/Footer.vue'
|
||||
import Sidebar from '@theme/components/Sidebar.vue'
|
||||
import { resolveSidebarItems } from '../util'
|
||||
import Password from '@theme/components/Password'
|
||||
import { setTimeout } from 'timers'
|
||||
|
||||
export default {
|
||||
components: { Sidebar, Navbar, Password },
|
||||
components: { Sidebar, Navbar, Password, Footer },
|
||||
|
||||
props: ['sidebar', 'isComment'],
|
||||
|
||||
|
||||
61
components/Footer.vue
Normal file
61
components/Footer.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="footer-wrapper">
|
||||
<span>
|
||||
<i class="iconfont reco-theme"></i>
|
||||
<a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
|
||||
</span>
|
||||
<span v-if="$themeConfig.record">
|
||||
<i class="iconfont reco-beian"></i>
|
||||
<a>{{ $themeConfig.record }}</a>
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont reco-copyright"></i>
|
||||
<a>
|
||||
<span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
|
||||
{{ year }}
|
||||
|
||||
<span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
|
||||
</a>
|
||||
</span>
|
||||
<span v-show="$themeConfig.commentsSolution === 'valine'">
|
||||
<i class="iconfont reco-eye"></i>
|
||||
<AccessNumber idVal="/" />
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
year () {
|
||||
return new Date().getFullYear()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.footer-wrapper {
|
||||
padding: 2.5rem;
|
||||
border-top: 1px solid $borderColor;
|
||||
text-align: center;
|
||||
color: lighten($textColor, 25%);
|
||||
> span {
|
||||
margin-left 1rem
|
||||
> i {
|
||||
margin-right .5rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
.footer {
|
||||
text-align: left!important;
|
||||
> span {
|
||||
display block
|
||||
margin-left 0
|
||||
line-height 2rem
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -28,39 +28,11 @@
|
||||
</div>
|
||||
|
||||
<Content class="home-center" custom/>
|
||||
|
||||
<div class="footer">
|
||||
<span>
|
||||
<i class="iconfont reco-theme"></i>
|
||||
<a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
|
||||
</span>
|
||||
<!-- <span>
|
||||
<i class="iconfont reco-other"></i>
|
||||
<a>{{ $themeConfig.author || $site.title }}</a>
|
||||
</span> -->
|
||||
<span v-if="$themeConfig.record">
|
||||
<i class="iconfont reco-beian"></i>
|
||||
<a>{{ $themeConfig.record }}</a>
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont reco-copyright"></i>
|
||||
<a>
|
||||
<span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
|
||||
{{ year }}
|
||||
|
||||
<span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
|
||||
</a>
|
||||
</span>
|
||||
<span v-show="$themeConfig.commentsSolution === 'valine'">
|
||||
<i class="iconfont reco-eye"></i>
|
||||
<AccessNumber idVal="/" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NavLink from '@theme/components/NavLink/'
|
||||
import NavLink from '@theme/components/NavLink.vue'
|
||||
|
||||
export default {
|
||||
components: { NavLink },
|
||||
@ -70,9 +42,6 @@ export default {
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
year () {
|
||||
return new Date().getFullYear()
|
||||
},
|
||||
data () {
|
||||
return this.$frontmatter
|
||||
},
|
||||
@ -172,20 +141,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2.5rem;
|
||||
border-top: 1px solid $borderColor;
|
||||
text-align: center;
|
||||
color: lighten($textColor, 25%);
|
||||
load-start()
|
||||
> span {
|
||||
margin-left 1rem
|
||||
> i {
|
||||
margin-right .5rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.reco-hide {
|
||||
.hero {
|
||||
img {
|
||||
@ -211,9 +166,6 @@ export default {
|
||||
load-start()
|
||||
padding 0
|
||||
}
|
||||
.footer {
|
||||
load-start()
|
||||
}
|
||||
}
|
||||
|
||||
&.reco-show {
|
||||
@ -240,9 +192,6 @@ export default {
|
||||
.home-center {
|
||||
load-end(0.48s)
|
||||
}
|
||||
.footer {
|
||||
load-end(0.56s)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,14 +206,6 @@ export default {
|
||||
padding: 0 2.5rem;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
text-align: left!important;
|
||||
> span {
|
||||
display block
|
||||
margin-left 0
|
||||
line-height 2rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobileNarrow) {
|
||||
|
||||
@ -51,30 +51,6 @@
|
||||
</div>
|
||||
|
||||
<Content class="home-center" custom/>
|
||||
|
||||
<div class="footer">
|
||||
<span>
|
||||
<i class="iconfont reco-theme"></i>
|
||||
<a target="blank" href="https://vuepress-theme-reco.recoluan.com">VuePress-theme-reco</a>
|
||||
</span>
|
||||
<span v-if="$themeConfig.record">
|
||||
<i class="iconfont reco-beian"></i>
|
||||
<a>{{ $themeConfig.record }}</a>
|
||||
</span>
|
||||
<span>
|
||||
<i class="iconfont reco-copyright"></i>
|
||||
<a>
|
||||
<span v-if="$themeConfig.startYear">{{ $themeConfig.startYear }} - </span>
|
||||
{{ year }}
|
||||
|
||||
<span v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</span>
|
||||
</a>
|
||||
</span>
|
||||
<span v-show="$themeConfig.commentsSolution === 'valine'">
|
||||
<i class="iconfont reco-eye"></i>
|
||||
<AccessNumber idVal="/" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -113,9 +89,6 @@ export default {
|
||||
})
|
||||
return num
|
||||
},
|
||||
year () {
|
||||
return new Date().getFullYear()
|
||||
},
|
||||
data () {
|
||||
return this.$frontmatter
|
||||
},
|
||||
@ -313,19 +286,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2.5rem;
|
||||
border-top: 1px solid $borderColor;
|
||||
text-align: center;
|
||||
color: lighten($textColor, 25%);
|
||||
> span {
|
||||
margin-left 1rem
|
||||
> i {
|
||||
margin-right .5rem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reco-hide {
|
||||
@ -354,9 +314,6 @@ export default {
|
||||
load-start()
|
||||
padding 0
|
||||
}
|
||||
.footer {
|
||||
load-start()
|
||||
}
|
||||
}
|
||||
|
||||
.reco-show {
|
||||
@ -383,9 +340,6 @@ export default {
|
||||
.home-center {
|
||||
load-end(0.56s)
|
||||
}
|
||||
.footer {
|
||||
load-end(0.64s)
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobile) {
|
||||
@ -424,14 +378,6 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
text-align: left!important;
|
||||
> span {
|
||||
display block
|
||||
margin-left 0
|
||||
line-height 2rem
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $MQMobileNarrow) {
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"@vuepress-reco/vuepress-plugin-pagation": "^1.0.3",
|
||||
"@vuepress-reco/vuepress-plugin-screenfull": "^1.0.0",
|
||||
"@vuepress-reco/vuepress-plugin-ga": "^1.0.2",
|
||||
"@vuepress-reco/vuepress-plugin-comments": "^1.0.2",
|
||||
"@vuepress-reco/vuepress-plugin-comments": "^1.0.3",
|
||||
"@vuepress/plugin-medium-zoom": "1.2.0",
|
||||
"@vuepress/plugin-blog": "1.3.0",
|
||||
"leancloud-storage": "3.13.2",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user