Merge branch 'develop' into develop
This commit is contained in:
reco_luan
GitHub
commit
954acbdb27
@ -4,39 +4,7 @@
|
||||
:class="pageClasses"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd">
|
||||
<div v-if="absoluteEncryption">
|
||||
<transition name="fade">
|
||||
<LoadingPage v-if="firstLoad" />
|
||||
<Password v-else-if="!isHasKey" />
|
||||
<div v-else>
|
||||
<Navbar
|
||||
v-if="shouldShowNavbar"
|
||||
@toggle-sidebar="toggleSidebar"/>
|
||||
|
||||
<div
|
||||
class="sidebar-mask"
|
||||
@click="toggleSidebar(false)"></div>
|
||||
|
||||
<Sidebar
|
||||
:items="sidebarItems"
|
||||
@toggle-sidebar="toggleSidebar">
|
||||
<slot
|
||||
name="sidebar-top"
|
||||
slot="top"/>
|
||||
<slot
|
||||
name="sidebar-bottom"
|
||||
slot="bottom"/>
|
||||
</Sidebar>
|
||||
|
||||
<Password v-if="!isHasPageKey" :isPage="true"></Password>
|
||||
<div v-else>
|
||||
<slot></slot>
|
||||
<Comments :isShowComments="shouldShowComments"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!absoluteEncryption">
|
||||
<transition name="fade">
|
||||
<LoadingPage v-show="firstLoad" class="loading-wrapper" />
|
||||
</transition>
|
||||
@ -70,6 +38,38 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<transition name="fade">
|
||||
<LoadingPage v-if="firstLoad" />
|
||||
<Password v-else-if="!isHasKey" />
|
||||
<div v-else>
|
||||
<Navbar
|
||||
v-if="shouldShowNavbar"
|
||||
@toggle-sidebar="toggleSidebar"/>
|
||||
|
||||
<div
|
||||
class="sidebar-mask"
|
||||
@click="toggleSidebar(false)"></div>
|
||||
|
||||
<Sidebar
|
||||
:items="sidebarItems"
|
||||
@toggle-sidebar="toggleSidebar">
|
||||
<slot
|
||||
name="sidebar-top"
|
||||
slot="top"/>
|
||||
<slot
|
||||
name="sidebar-bottom"
|
||||
slot="bottom"/>
|
||||
</Sidebar>
|
||||
|
||||
<Password v-if="!isHasPageKey" :isPage="true"></Password>
|
||||
<div v-else>
|
||||
<slot></slot>
|
||||
<Comments :isShowComments="shouldShowComments"/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -3,40 +3,40 @@
|
||||
<div class="hero">
|
||||
<ModuleTransition>
|
||||
<img
|
||||
v-if="data.isShowHeroImage !== false && recoShowModule"
|
||||
:style="heroImageStyle"
|
||||
:src="data.heroImage ? $withBase(data.heroImage) : require('../images/icon_vuepress_reco.png')"
|
||||
v-if="recoShowModule && $frontmatter.heroImage"
|
||||
:style="heroImageStyle || {}"
|
||||
:src="$withBase($frontmatter.heroImage)"
|
||||
alt="hero">
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.04">
|
||||
<h1 v-if="recoShowModule && $frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.08">
|
||||
<h1 v-if="data.isShowTitleInHome !== false && recoShowModule">{{ data.heroText || $title || '午后南杂' }}</h1>
|
||||
<p v-show="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.16">
|
||||
<p v-if="recoShowModule" class="description">{{ $description || 'Welcome to your vuePress-theme-reco site' }}</p>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.24">
|
||||
<p class="huawei" v-if="$themeConfig.huawei === true && recoShowModule">
|
||||
<p class="huawei" v-if="recoShowModule && $themeConfig.huawei === true">
|
||||
<i class="iconfont reco-huawei" style="color: #fc2d38"></i>
|
||||
华为，为中华而为之！
|
||||
</p>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.32">
|
||||
<p class="action" v-if="data.actionText && data.actionLink && recoShowModule">
|
||||
<ModuleTransition delay="0.24">
|
||||
<p class="action" v-if="recoShowModule && $frontmatter.actionText && $frontmatter.actionLink">
|
||||
<NavLink class="action-button" :item="actionLink"/>
|
||||
</p>
|
||||
</ModuleTransition>
|
||||
</div>
|
||||
|
||||
<ModuleTransition delay="0.4">
|
||||
<div class="features" v-if="data.features && data.features.length && recoShowModule">
|
||||
<div v-for="(feature, index) in data.features" :key="index" class="feature">
|
||||
<ModuleTransition delay="0.32">
|
||||
<div class="features" v-if="recoShowModule && $frontmatter.features && $frontmatter.features.length">
|
||||
<div v-for="(feature, index) in $frontmatter.features" :key="index" class="feature">
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.48">
|
||||
<Content class="home-center" v-if="recoShowModule" custom/>
|
||||
<ModuleTransition delay="0.4">
|
||||
<Content class="home-center" v-show="recoShowModule" custom/>
|
||||
</ModuleTransition>
|
||||
</div>
|
||||
</template>
|
||||
@ -44,23 +44,22 @@
|
||||
<script>
|
||||
import NavLink from '@theme/components/NavLink'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [moduleTransitonMixin],
|
||||
components: { NavLink, ModuleTransition },
|
||||
computed: {
|
||||
data () {
|
||||
return this.$frontmatter
|
||||
},
|
||||
|
||||
actionLink () {
|
||||
return {
|
||||
link: this.data.actionLink,
|
||||
text: this.data.actionText
|
||||
link: this.$frontmatter.actionLink,
|
||||
text: this.$frontmatter.actionText
|
||||
}
|
||||
},
|
||||
|
||||
heroImageStyle () {
|
||||
return this.data.heroImageStyle || {
|
||||
return this.$frontmatter.heroImageStyle || {
|
||||
maxHeight: '200px',
|
||||
margin: '6rem auto 1.5rem'
|
||||
}
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
<template>
|
||||
<div class="home-blog">
|
||||
<div
|
||||
class="hero"
|
||||
:style="{
|
||||
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`, ...bgImageStyle}">
|
||||
<div class="hero" :style="{ ...bgImageStyle }">
|
||||
<div
|
||||
class="mask"
|
||||
:style="{
|
||||
background: `url(${$frontmatter.bgImage ? $withBase($frontmatter.bgImage) : require('../images/home-bg.jpg')}) center/cover no-repeat`}"></div>
|
||||
<ModuleTransition>
|
||||
<h1 v-if="recoShowModule">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
|
||||
<img
|
||||
v-if="recoShowModule && $frontmatter.heroImage"
|
||||
:style="heroImageStyle || {}"
|
||||
:src="$withBase($frontmatter.heroImage)"
|
||||
alt="hero">
|
||||
</ModuleTransition>
|
||||
<ModuleTransition delay="0.04">
|
||||
<h1 v-if="$frontmatter.isShowTitleInHome !== false">{{ $frontmatter.heroText || $title || '午后南杂' }}</h1>
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.08">
|
||||
<p v-if="recoShowModule" class="description">
|
||||
<p v-show="recoShowModule" class="description">
|
||||
{{ $description || 'Welcome to your vuePress-theme-reco site' }}
|
||||
</p>
|
||||
</ModuleTransition>
|
||||
@ -24,7 +32,7 @@
|
||||
</div>
|
||||
|
||||
<ModuleTransition delay="0.24">
|
||||
<div v-if="recoShowModule" class="home-blog-wrapper">
|
||||
<div v-show="recoShowModule" class="home-blog-wrapper">
|
||||
<div class="blog-list">
|
||||
<!-- 博客列表 -->
|
||||
<note-abstract
|
||||
@ -39,19 +47,7 @@
|
||||
@getCurrentPage="getCurrentPage" />
|
||||
</div>
|
||||
<div class="info-wrapper">
|
||||
<img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
|
||||
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
|
||||
<div class="num">
|
||||
<div>
|
||||
<h3>{{$recoPosts.length}}</h3>
|
||||
<h6>文章</h6>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{$tags.list.length}}</h3>
|
||||
<h6>标签</h6>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<PersonalInfo/>
|
||||
<h4><i class="iconfont reco-category"></i> 分类</h4>
|
||||
<ul class="category-wrapper">
|
||||
<li class="category-item" v-for="(item, index) in this.$categories.list" :key="index">
|
||||
@ -71,7 +67,7 @@
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.36">
|
||||
<Content v-if="recoShowModule" class="home-center" custom/>
|
||||
<Content v-show="recoShowModule" class="home-center" custom/>
|
||||
</ModuleTransition>
|
||||
</div>
|
||||
</template>
|
||||
@ -82,11 +78,13 @@ import FriendLink from '@theme/components/FriendLink'
|
||||
import NoteAbstract from '@theme/components/NoteAbstract'
|
||||
import pagination from '@theme/mixins/pagination'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import PersonalInfo from '@theme/components/PersonalInfo'
|
||||
import { getOneColor } from '@theme/helpers/other'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [pagination],
|
||||
components: { NoteAbstract, TagList, FriendLink, ModuleTransition },
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
components: { NoteAbstract, TagList, FriendLink, ModuleTransition, PersonalInfo },
|
||||
data () {
|
||||
return {
|
||||
recoShow: false,
|
||||
@ -169,6 +167,27 @@ export default {
|
||||
margin: 0px auto;
|
||||
|
||||
.hero {
|
||||
position relative
|
||||
.mask {
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
z-index -1
|
||||
&:after {
|
||||
display block
|
||||
content ' '
|
||||
background var(--mask-color)
|
||||
position absolute
|
||||
top 0
|
||||
bottom 0
|
||||
left 0
|
||||
right 0
|
||||
z-index 0
|
||||
opacity .2
|
||||
}
|
||||
}
|
||||
figure {
|
||||
position absolute
|
||||
background yellow
|
||||
@ -215,41 +234,10 @@ export default {
|
||||
border-radius $borderRadius
|
||||
box-sizing border-box
|
||||
padding 0 15px
|
||||
background var(--background-color)
|
||||
&:hover {
|
||||
box-shadow: var(--box-shadow-hover);
|
||||
}
|
||||
.personal-img {
|
||||
display block
|
||||
margin 2rem auto
|
||||
width 8rem
|
||||
height 8rem
|
||||
}
|
||||
.name {
|
||||
text-align center
|
||||
color var(--text-color)
|
||||
}
|
||||
.num {
|
||||
display flex
|
||||
margin 0 auto 1rem
|
||||
width 80%
|
||||
> div {
|
||||
text-align center
|
||||
flex auto
|
||||
&:first-child {
|
||||
border-right 1px solid #333
|
||||
}
|
||||
h3 {
|
||||
line-height auto
|
||||
margin 0 0 .6rem
|
||||
color var(--text-color)
|
||||
}
|
||||
h6 {
|
||||
line-height auto
|
||||
color var(--text-color)
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
color var(--text-color)
|
||||
}
|
||||
@ -262,6 +250,7 @@ export default {
|
||||
transition: all .5s
|
||||
border-radius $borderRadius
|
||||
box-shadow var(--box-shadow)
|
||||
background-color var(--background-color)
|
||||
&:hover {
|
||||
transform scale(1.04)
|
||||
}
|
||||
|
||||
@ -6,7 +6,8 @@ const modeOptions = {
|
||||
'--text-color': '#2c3e50',
|
||||
'--border-color': '#eaecef',
|
||||
'--bgm-bg-color': 'rgba(255, 255, 255, .7)',
|
||||
'--code-color': 'rgba(27, 31, 35, 0.05)'
|
||||
'--code-color': 'rgba(27, 31, 35, 0.05)',
|
||||
'--mask-color': '#888'
|
||||
},
|
||||
dark: {
|
||||
'--background-color': '#25272a',
|
||||
@ -15,7 +16,8 @@ const modeOptions = {
|
||||
'--text-color': '#aaa',
|
||||
'--border-color': 'rgba(0, 0, 0, .3)',
|
||||
'--bgm-bg-color': 'rgba(0, 0, 0, .7)',
|
||||
'--code-color': 'rgba(0, 0, 0, .3)'
|
||||
'--code-color': 'rgba(0, 0, 0, .3)',
|
||||
'--mask-color': '#000'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -92,6 +92,7 @@ $navbar-horizontal-padding = 1.5rem
|
||||
padding $navbar-vertical-padding $navbar-horizontal-padding
|
||||
line-height $navbarHeight - 1.4rem
|
||||
box-shadow var(--box-shadow)
|
||||
background var(--background-color)
|
||||
a, span, img
|
||||
display inline-block
|
||||
.logo
|
||||
@ -104,6 +105,7 @@ $navbar-horizontal-padding = 1.5rem
|
||||
font-weight 600
|
||||
color var(--text-color)
|
||||
position relative
|
||||
background var(--background-color)
|
||||
.links
|
||||
padding-left 1.5rem
|
||||
box-sizing border-box
|
||||
@ -113,10 +115,10 @@ $navbar-horizontal-padding = 1.5rem
|
||||
right $navbar-horizontal-padding
|
||||
top $navbar-vertical-padding
|
||||
display flex
|
||||
background-color var(--background-color)
|
||||
.search-box
|
||||
flex: 0 0 auto
|
||||
vertical-align top
|
||||
margin-right 1rem
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.navbar
|
||||
|
||||
@ -1,23 +1,12 @@
|
||||
<template>
|
||||
<div class="abstract-wrapper">
|
||||
<div v-if="listLoadType === 'sync'" key="sync">
|
||||
<NoteAbstractItem
|
||||
v-for="(item, index) in data"
|
||||
:key="item.path"
|
||||
:item="item"
|
||||
:currentPage="currentPage"
|
||||
:currentTag="currentTag"
|
||||
v-show="index >= (currentPage * 10 - 10) && index < currentPage * 10"/>
|
||||
</div>
|
||||
<div v-else-if="listLoadType === 'async'" key="async">
|
||||
<NoteAbstractItem
|
||||
<NoteAbstractItem
|
||||
v-for="(item) in currentPageData"
|
||||
:key="item.path"
|
||||
:item="item"
|
||||
:currentPage="currentPage"
|
||||
:currentTag="currentTag"
|
||||
:hideAccessNumber="true" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -28,15 +17,6 @@ export default {
|
||||
components: { NoteAbstractItem },
|
||||
props: ['data', 'currentPage', 'currentTag', 'hideAccessNumber'],
|
||||
computed: {
|
||||
listLoadType () {
|
||||
const valineConfig = this.$themeConfig.valineConfig
|
||||
if (this.$frontmatter.home) return 'async'
|
||||
if (valineConfig && !valineConfig.hideListAccessNumber) {
|
||||
return 'sync'
|
||||
} else {
|
||||
return 'async'
|
||||
}
|
||||
},
|
||||
currentPageData () {
|
||||
const start = this.currentPage * 10 - 10
|
||||
const end = this.currentPage * 10
|
||||
|
||||
@ -51,8 +51,6 @@ export default {
|
||||
font-size: 1.28rem;
|
||||
line-height: 36px;
|
||||
display: inline-block;
|
||||
a
|
||||
color var(--text-color)
|
||||
.reco-lock
|
||||
font-size 1.28rem
|
||||
color $accentColor
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<main class="page">
|
||||
<ModuleTransition>
|
||||
<slot v-if="recoShowModule" name="top"/>
|
||||
<slot v-show="recoShowModule" name="top"/>
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.08">
|
||||
<div v-if="recoShowModule" class="page-title">
|
||||
<div v-show="recoShowModule" class="page-title">
|
||||
<h1>{{$page.title}}</h1>
|
||||
<hr>
|
||||
<PageInfo :pageInfo="$page" :hideAccessNumber="hideAccessNumber"></PageInfo>
|
||||
@ -13,11 +13,11 @@
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.16">
|
||||
<Content v-if="recoShowModule" class="theme-reco-content" />
|
||||
<Content v-show="recoShowModule" class="theme-reco-content" />
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.24">
|
||||
<footer v-if="recoShowModule" class="page-edit">
|
||||
<footer v-show="recoShowModule" class="page-edit">
|
||||
<div
|
||||
class="edit-link"
|
||||
v-if="editLink"
|
||||
@ -74,7 +74,7 @@
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.40">
|
||||
<slot v-if="recoShowModule" name="bottom"/>
|
||||
<slot v-show="recoShowModule" name="bottom"/>
|
||||
</ModuleTransition>
|
||||
</main>
|
||||
</template>
|
||||
@ -83,8 +83,10 @@
|
||||
import PageInfo from '@theme/components/PageInfo'
|
||||
import { resolvePage, outboundRE, endingSlashRE } from '@theme/helpers/utils'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [moduleTransitonMixin],
|
||||
components: { PageInfo, ModuleTransition },
|
||||
|
||||
props: ['sidebarItems'],
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="password-shadow">
|
||||
<ModuleTransition>
|
||||
<h3 v-if="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
|
||||
<h3 v-show="recoShowModule" class="title">{{isPage ? $frontmatter.title : $site.title || $localeConfig.title}}</h3>
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.08">
|
||||
@ -9,7 +9,7 @@
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.16">
|
||||
<label v-if="recoShowModule" class="inputBox" id="box">
|
||||
<label v-show="recoShowModule" class="inputBox" id="box">
|
||||
<input
|
||||
v-model="key"
|
||||
type="password"
|
||||
@ -22,7 +22,7 @@
|
||||
</ModuleTransition>
|
||||
|
||||
<ModuleTransition delay="0.24">
|
||||
<div v-if="recoShowModule" class="footer">
|
||||
<div v-show="recoShowModule" class="footer">
|
||||
<span>
|
||||
<i class="iconfont reco-theme"></i>
|
||||
<a target="blank" href="https://vuepress-theme-reco.recoluan.com">vuePress-theme-reco</a>
|
||||
@ -42,7 +42,10 @@
|
||||
|
||||
<script>
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [moduleTransitonMixin],
|
||||
components: { ModuleTransition },
|
||||
props: {
|
||||
isPage: {
|
||||
|
||||
55
components/PersonalInfo.vue
Normal file
55
components/PersonalInfo.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="personal-info-wrapper">
|
||||
<img class="personal-img" :src="$frontmatter.faceImage ? $withBase($frontmatter.faceImage) : require('../images/home-head.png')" alt="hero">
|
||||
<h3 class="name" v-if="$themeConfig.author || $site.title">{{ $themeConfig.author || $site.title }}</h3>
|
||||
<div class="num">
|
||||
<div>
|
||||
<h3>{{$recoPosts.length}}</h3>
|
||||
<h6>文章</h6>
|
||||
</div>
|
||||
<div>
|
||||
<h3>{{$tags.list.length}}</h3>
|
||||
<h6>标签</h6>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.personal-info-wrapper {
|
||||
.personal-img {
|
||||
display block
|
||||
margin 2rem auto
|
||||
width 8rem
|
||||
height 8rem
|
||||
border-radius 50%
|
||||
}
|
||||
.name {
|
||||
text-align center
|
||||
color var(--text-color)
|
||||
}
|
||||
.num {
|
||||
display flex
|
||||
margin 0 auto 1rem
|
||||
width 80%
|
||||
> div {
|
||||
text-align center
|
||||
flex auto
|
||||
&:first-child {
|
||||
border-right 1px solid #333
|
||||
}
|
||||
h3 {
|
||||
line-height auto
|
||||
margin 0 0 .6rem
|
||||
color var(--text-color)
|
||||
}
|
||||
h6 {
|
||||
line-height auto
|
||||
color var(--text-color)
|
||||
margin 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -51,10 +51,6 @@ export default {
|
||||
},
|
||||
mounted () {
|
||||
this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
|
||||
document.addEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.onHotkey)
|
||||
},
|
||||
computed: {
|
||||
showSuggestions () {
|
||||
@ -114,12 +110,6 @@ export default {
|
||||
}
|
||||
return '/'
|
||||
},
|
||||
onHotkey (event) {
|
||||
if (event.srcElement === document.body) {
|
||||
this.$refs.input.focus()
|
||||
event.preventDefault()
|
||||
}
|
||||
},
|
||||
onUp () {
|
||||
if (this.showSuggestions) {
|
||||
if (this.focusIndex > 0) {
|
||||
@ -231,6 +221,7 @@ export default {
|
||||
height 2rem
|
||||
@media (max-width: $MQNarrow) and (min-width: $MQMobile)
|
||||
.search-box
|
||||
margin-right 0
|
||||
.suggestions
|
||||
left 0
|
||||
@media (max-width: $MQMobile)
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<PersonalInfo/>
|
||||
<NavLinks/>
|
||||
<slot name="top"/>
|
||||
<SidebarLinks :depth="0" :items="items"/>
|
||||
@ -9,12 +10,13 @@
|
||||
|
||||
<script>
|
||||
import SidebarLinks from '@theme/components/SidebarLinks'
|
||||
import PersonalInfo from '@theme/components/PersonalInfo'
|
||||
import NavLinks from '@theme/components/NavLinks'
|
||||
|
||||
export default {
|
||||
name: 'Sidebar',
|
||||
|
||||
components: { SidebarLinks, NavLinks },
|
||||
components: { SidebarLinks, NavLinks, PersonalInfo },
|
||||
|
||||
props: ['items']
|
||||
}
|
||||
@ -22,6 +24,8 @@ export default {
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar
|
||||
.personal-info-wrapper
|
||||
display none
|
||||
ul
|
||||
padding 0
|
||||
margin 0
|
||||
@ -50,6 +54,8 @@ export default {
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.sidebar
|
||||
.personal-info-wrapper
|
||||
display block
|
||||
.nav-links
|
||||
display block
|
||||
.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import postMixin from '@theme/mixins/posts'
|
||||
import appMixin from '@theme/mixins/app'
|
||||
|
||||
export default ({
|
||||
Vue
|
||||
}) => {
|
||||
Vue.mixin(postMixin)
|
||||
Vue.mixin(appMixin)
|
||||
}
|
||||
|
||||
@ -68,6 +68,14 @@ module.exports = {
|
||||
// appId: '...',// your appId
|
||||
// appKey: '...', // your appKey
|
||||
// }
|
||||
vssueConfig: {
|
||||
admins: ['recoluan'],
|
||||
platform: 'github',
|
||||
owner: 'vuepress-reco',
|
||||
repo: 'vuepress-reco.github.io',
|
||||
clientId: '4d81cea3b3d8aac8e88e',
|
||||
clientSecret: 'd23e8556b6d3c85abffbf4b8d853afb2ea08875a',
|
||||
},
|
||||
keyPage: {
|
||||
keys: ['123456']
|
||||
},
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
---
|
||||
home: true
|
||||
heroImage: /hero.png
|
||||
heroImageStyle: {
|
||||
maxWidth: '600px',
|
||||
width: '100%',
|
||||
display: block,
|
||||
margin: '9rem auto 2rem',
|
||||
background: '#fff',
|
||||
borderRadius: '1rem',
|
||||
}
|
||||
isShowTitleInHome: false
|
||||
# heroImage: /hero.png
|
||||
# heroImageStyle: {
|
||||
# maxWidth: '600px',
|
||||
# width: '100%',
|
||||
# display: block,
|
||||
# margin: '9rem auto 2rem',
|
||||
# background: '#fff',
|
||||
# borderRadius: '1rem',
|
||||
# }
|
||||
# isShowTitleInHome: false
|
||||
actionText: Guide
|
||||
actionLink: /views/other/guide
|
||||
features:
|
||||
|
||||
@ -211,7 +211,7 @@ export function formatDate (time, fmt = 'yyyy-MM-dd hh:mm:ss') {
|
||||
|
||||
const o = {
|
||||
'M+': date.getMonth() + 1,
|
||||
'd+': date.getDay(),
|
||||
'd+': date.getDate(),
|
||||
'h+': date.getHours(),
|
||||
'm+': date.getMinutes(),
|
||||
's+': date.getSeconds()
|
||||
|
||||
@ -42,11 +42,28 @@ export default {
|
||||
|
||||
<style src="../styles/theme.styl" lang="stylus"></style>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.content {
|
||||
<style lang="stylus">
|
||||
.content
|
||||
margin 4rem auto 0
|
||||
max-width 800px
|
||||
padding 0 2rem
|
||||
}
|
||||
.mod_404
|
||||
.desc
|
||||
.desc_link
|
||||
display: inline-block
|
||||
// margin: 20px 0
|
||||
background: #424242!important
|
||||
color: #ffffff
|
||||
padding: 6px 20px!important
|
||||
text-decoration: none!important
|
||||
border-radius: 4px
|
||||
|
||||
@media screen and (max-width: 720px)
|
||||
.mod_404
|
||||
.desc
|
||||
margin: 50px 0
|
||||
.wrapper
|
||||
margin 0!important
|
||||
padding-top 20px
|
||||
</style>
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<Common :sidebar="false" :isComment="false">
|
||||
<!-- 分类集合 -->
|
||||
<ModuleTransition>
|
||||
<ul v-if="recoShowModule" class="category-wrapper">
|
||||
<ul v-show="recoShowModule" class="category-wrapper">
|
||||
<li
|
||||
class="category-item"
|
||||
:class="title == item.name ? 'active': ''"
|
||||
@ -21,7 +21,7 @@
|
||||
<!-- 博客列表 -->
|
||||
<ModuleTransition delay="0.08">
|
||||
<note-abstract
|
||||
v-if="recoShowModule"
|
||||
v-show="recoShowModule"
|
||||
class="list"
|
||||
:data="posts"
|
||||
:currentPage="currentPage"
|
||||
@ -31,12 +31,11 @@
|
||||
<!-- 分页 -->
|
||||
<ModuleTransition delay="0.16">
|
||||
<pagation
|
||||
v-if="recoShowModule"
|
||||
class="pagation"
|
||||
:total="posts.length"
|
||||
:currentPage="currentPage"
|
||||
@getCurrentPage="getCurrentPage"></pagation>
|
||||
</ModuleTransition>
|
||||
</ModuleTransition>
|
||||
</Common>
|
||||
</div>
|
||||
</template>
|
||||
@ -48,9 +47,10 @@ import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import pagination from '@theme/mixins/pagination'
|
||||
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
|
||||
import { getOneColor } from '@theme/helpers/other'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [pagination],
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
components: { Common, NoteAbstract, ModuleTransition },
|
||||
|
||||
data () {
|
||||
@ -125,6 +125,7 @@ export default {
|
||||
font-size: 13px;
|
||||
box-shadow var(--box-shadow)
|
||||
transition: all .5s
|
||||
background-color var(--background-color)
|
||||
&:hover, &.active {
|
||||
background $accentColor
|
||||
a span.category-name {
|
||||
|
||||
@ -5,15 +5,16 @@
|
||||
<!-- 标签集合 -->
|
||||
<ModuleTransition>
|
||||
<TagList
|
||||
v-if="recoShowModule"
|
||||
class="tags"
|
||||
:currentTag="$currentTags.key" @getCurrentTag="tagClick"></TagList>
|
||||
v-show="recoShowModule"
|
||||
class="tags"
|
||||
:currentTag="$currentTags.key"
|
||||
@getCurrentTag="tagClick"></TagList>
|
||||
</ModuleTransition>
|
||||
|
||||
<!-- 博客列表 -->
|
||||
<ModuleTransition delay="0.08">
|
||||
<note-abstract
|
||||
v-if="recoShowModule"
|
||||
v-show="recoShowModule"
|
||||
class="list"
|
||||
:data="posts"
|
||||
:currentPage="currentPage"
|
||||
@ -23,7 +24,6 @@
|
||||
<!-- 分页 -->
|
||||
<ModuleTransition delay="0.16">
|
||||
<pagation
|
||||
v-if="recoShowModule"
|
||||
class="pagation"
|
||||
:total="posts.length"
|
||||
:currentPage="currentPage"
|
||||
@ -40,9 +40,10 @@ import TagList from '@theme/components/TagList'
|
||||
import pagination from '@theme/mixins/pagination'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import { sortPostsByStickyAndDate, filterPosts } from '@theme/helpers/postData'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [pagination],
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
components: { Common, NoteAbstract, TagList, ModuleTransition },
|
||||
|
||||
data () {
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
<!-- 标签集合 -->
|
||||
<ModuleTransition>
|
||||
<TagList
|
||||
v-if="recoShowModule"
|
||||
:currentTag="currentTag"
|
||||
v-show="recoShowModule"
|
||||
:currentTag="currentTag"
|
||||
@getCurrentTag="tagClick"></TagList>
|
||||
</ModuleTransition>
|
||||
|
||||
<!-- 博客列表 -->
|
||||
<ModuleTransition delay="0.08">
|
||||
<ModuleTransition delay="0.08">
|
||||
<note-abstract
|
||||
v-if="recoShowModule"
|
||||
v-show="recoShowModule"
|
||||
class="list"
|
||||
:data="$recoPosts"
|
||||
:currentPage="currentPage"
|
||||
@ -23,7 +23,6 @@
|
||||
<!-- 分页 -->
|
||||
<ModuleTransition delay="0.16">
|
||||
<pagation
|
||||
v-if="recoShowModule"
|
||||
class="pagation"
|
||||
:total="$recoPosts.length"
|
||||
:currentPage="currentPage"
|
||||
@ -39,9 +38,10 @@ import TagList from '@theme/components/TagList'
|
||||
import NoteAbstract from '@theme/components/NoteAbstract'
|
||||
import pagination from '@theme/mixins/pagination'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [pagination],
|
||||
mixins: [pagination, moduleTransitonMixin],
|
||||
components: { Common, NoteAbstract, TagList, ModuleTransition },
|
||||
data () {
|
||||
return {
|
||||
|
||||
@ -3,12 +3,13 @@
|
||||
<Common :sidebar="false" :isComment="false">
|
||||
<ul class="timeline-wrapper">
|
||||
<ModuleTransition >
|
||||
<li v-if="recoShowModule" class="desc">Yesterday Once More!</li>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition
|
||||
<li v-show="recoShowModule" class="desc">Yesterday Once More!</li>
|
||||
</ModuleTransition>
|
||||
<ModuleTransition
|
||||
:delay="String(0.08 * (index + 1))"
|
||||
v-for="(item, index) in $recoPostsForTimeline" :key="index">
|
||||
<li v-if="recoShowModule">
|
||||
v-for="(item, index) in $recoPostsForTimeline"
|
||||
:key="index">
|
||||
<li v-show="recoShowModule">
|
||||
<h3 class="year">{{item.year}}</h3>
|
||||
<ul class="year-wrapper">
|
||||
<li v-for="(subItem, subIndex) in item.data" :key="subIndex">
|
||||
@ -17,7 +18,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ModuleTransition>
|
||||
</ModuleTransition>
|
||||
</ul>
|
||||
</Common>
|
||||
</div>
|
||||
@ -27,8 +28,10 @@
|
||||
<script>
|
||||
import Common from '@theme/components/Common'
|
||||
import ModuleTransition from '@theme/components/ModuleTransition'
|
||||
import moduleTransitonMixin from '@theme/mixins/moduleTransiton'
|
||||
|
||||
export default {
|
||||
mixins: [moduleTransitonMixin],
|
||||
name: 'TimeLine',
|
||||
components: { Common, ModuleTransition },
|
||||
filters: {
|
||||
@ -68,6 +71,7 @@ export default {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
margin-left: -2px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
@ -81,7 +85,7 @@ export default {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index 2;
|
||||
left: -19px;
|
||||
left: -20px;
|
||||
top: 50%;
|
||||
margin-left: -4px;
|
||||
margin-top: -4px;
|
||||
|
||||
21
package.json
21
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vuepress-theme-reco",
|
||||
"version": "1.2.0-alpha.5",
|
||||
"version": "1.2.0-alpha.11",
|
||||
"description": "A simple and beautiful vuepress Blog & Doc theme.",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
@ -27,24 +27,23 @@
|
||||
"_from": "vuepress-theme-reco@0.2.1",
|
||||
"_resolved": "http://registry.npm.taobao.org/vuepress-theme-reco/download/vuepress-theme-reco-0.2.1.tgz",
|
||||
"dependencies": {
|
||||
"@vuepress-reco/vuepress-plugin-back-to-top": "^1.0.5",
|
||||
"@vuepress-reco/vuepress-plugin-extract-code": "^1.0.3",
|
||||
"@vuepress-reco/vuepress-plugin-loading-page": "^1.0.4",
|
||||
"@vuepress-reco/vuepress-plugin-pagation": "^1.0.4",
|
||||
"@vuepress-reco/vuepress-plugin-screenfull": "^1.0.1",
|
||||
"@vuepress-reco/vuepress-plugin-comments": "^1.0.8",
|
||||
"@vuepress-reco/vuepress-plugin-back-to-top": "1.0.8",
|
||||
"@vuepress-reco/vuepress-plugin-extract-code": "1.0.3",
|
||||
"@vuepress-reco/vuepress-plugin-loading-page": "1.0.5",
|
||||
"@vuepress-reco/vuepress-plugin-pagation": "1.0.6",
|
||||
"@vuepress-reco/vuepress-plugin-comments": "1.0.11",
|
||||
"@vuepress/plugin-medium-zoom": "1.2.0",
|
||||
"@vuepress/plugin-blog": "1.3.0",
|
||||
"docsearch.js": "^2.5.2",
|
||||
"docsearch.js": "2.5.2",
|
||||
"leancloud-storage": "3.13.2",
|
||||
"valine": "1.3.6",
|
||||
"vue-click-outside": "1.0.7",
|
||||
"md5": "2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^6.4.0",
|
||||
"eslint-plugin-vue": "^5.2.3",
|
||||
"babel-eslint": "10.0.3",
|
||||
"eslint": "6.4.0",
|
||||
"eslint-plugin-vue": "5.2.3",
|
||||
"vuepress": "1.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
load-start(){
|
||||
transform:translateY(-20px);
|
||||
opacity 0
|
||||
}
|
||||
|
||||
load-end($delayTime){
|
||||
transition:all .25s;
|
||||
transform:translateY(0);
|
||||
transition-delay: $delayTime
|
||||
opacity 1
|
||||
}
|
||||
@ -6,6 +6,7 @@
|
||||
--border-color $borderColor
|
||||
--bgm-bg-color $bgmBgColor
|
||||
--code-color $codeColor
|
||||
--mask-color $maskColor
|
||||
@media (prefers-color-scheme: dark)
|
||||
--background-color $backgroundColorDark
|
||||
--box-shadow $boxShadowDark
|
||||
@ -14,3 +15,4 @@
|
||||
--border-color $borderColorDark
|
||||
--bgm-bg-color $bgmBgColorDark
|
||||
--code-color $codeColorDark
|
||||
--mask-color $maskColorDark
|
||||
|
||||
@ -21,3 +21,6 @@ $codeColorDark ?= rgba(0, 0, 0, .3)
|
||||
|
||||
$bgmBgColor ?= rgba(255, 255, 255, .7)
|
||||
$bgmBgColorDark ?= rgba(0, 0, 0, .7)
|
||||
|
||||
$maskColor ?= #888
|
||||
$maskColorDark ?= #000
|
||||
|
||||
@ -212,119 +212,3 @@ th, td
|
||||
/************** 流程图的滚动条 **************/
|
||||
.vuepress-flowchart
|
||||
overflow: auto
|
||||
|
||||
/************** 腾讯 404 公益 **************/
|
||||
|
||||
.mod_404 .desc {
|
||||
.desc_link {
|
||||
display: inline-block
|
||||
// margin: 20px 0
|
||||
background: #424242!important
|
||||
color: #ffffff
|
||||
padding: 6px 20px!important
|
||||
text-decoration: none!important
|
||||
border-radius: 4px
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
.mod_404 .desc {
|
||||
margin: 50px 0
|
||||
}
|
||||
}
|
||||
|
||||
/************** 评论功能 **************/
|
||||
|
||||
.comments-wrapper
|
||||
.valine-wrapper
|
||||
#valine.v
|
||||
.vwrap
|
||||
background: var(--code-color)
|
||||
// box-shadow: var(--box-shadow)
|
||||
.vcontrol
|
||||
.vsubmit
|
||||
background: var(--code-color)
|
||||
.vinfo
|
||||
padding-left: .6rem
|
||||
.vlist
|
||||
padding: 0 .6rem
|
||||
border-radius: $borderRadius
|
||||
.vcard
|
||||
.vquote
|
||||
margin-left: 0
|
||||
border-left: 1px dashed var(--border-color)
|
||||
.vimg
|
||||
border-radius: $borderRadius
|
||||
box-shadow: var(--box-shadow)
|
||||
border: none
|
||||
.vh
|
||||
border-bottom: 1px dashed var(--border-color)
|
||||
.vhead
|
||||
.vsys
|
||||
box-shadow: var(--box-shadow)
|
||||
background: var(--code-color)
|
||||
color: var(--text-color)
|
||||
.vmeta
|
||||
margin-bottom: 1rem
|
||||
.vat
|
||||
margin-right: .3rem
|
||||
background: var(--code-color)
|
||||
box-shadow: var(--box-shadow)
|
||||
border-radius: $borderRadius
|
||||
padding: 0 .4rem
|
||||
color: var(--text-color)
|
||||
border: 1px solid var(--border-color)
|
||||
.vcontent
|
||||
background: var(--code-color)
|
||||
box-shadow: var(--box-shadow)
|
||||
border-radius: $borderRadius
|
||||
margin: 0 .3rem
|
||||
padding: .1rem .6rem .05rem .6rem
|
||||
p .at
|
||||
color: #1abc9c
|
||||
&.expand:before
|
||||
z-index 1
|
||||
background: linear-gradient(180deg, rgba(255,255,255,0), var(--background-color))
|
||||
&.expand:after
|
||||
background: var(--background-color)
|
||||
color: var(--color-color)
|
||||
.info
|
||||
padding-right: .6rem
|
||||
|
||||
/************** 分页 **************/
|
||||
.pagation
|
||||
.pagation-list
|
||||
background: var(--background-color)!important
|
||||
.jump, .jumpinp input
|
||||
background-color: var(--background-color)
|
||||
color: var(--text-color)
|
||||
box-shadow: var(--box-shadow)
|
||||
border 1px solid var(--border-color)!important
|
||||
|
||||
/************** 回到顶部 **************/
|
||||
.back-to-ceiling
|
||||
background-color: var(--background-color)!important
|
||||
box-shadow: var(--box-shadow)!important
|
||||
|
||||
/********* 悬浮卡片背景颜色 **********/
|
||||
|
||||
.navbar
|
||||
background var(--background-color)
|
||||
.links
|
||||
background var(--background-color)
|
||||
|
||||
.home-blog
|
||||
.home-blog-wrapper
|
||||
.info-wrapper
|
||||
background var(--background-color)
|
||||
|
||||
.abstract-item
|
||||
background var(--background-color)
|
||||
|
||||
.category-wrapper
|
||||
.category-item
|
||||
background var(--background-color)
|
||||
|
||||
.pagation
|
||||
.jump
|
||||
background var(--background-color)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user