添加阅读模式
This commit is contained in:
xugaoyi
parent
ee44f99af3
commit
137f3622cb
|
|
@ -10,13 +10,9 @@
|
|||
|
||||
## Original intention 初衷
|
||||
|
||||
这个主题的初衷是搭建个人的**知识库**，兼具**博客**功能。
|
||||
|
||||
对于程序员来说没有比Mackdown更好的记录工具了，而VuePress正是以Markdown为中心的项目结构，它简洁至上的理念正合我心。原官方主题是专门为写文档而生的，和我心目中的知识库有一些差距，为此我做了一系列的改造，使其拥有更高的**结构化**形态，同时博客功能提供了**碎片化**形态。目前功能已比较完整，但仍在不断的完善当中，如果你有什么建议欢迎提Issues，喜欢这个项目的欢迎点个Star持续关注。
|
||||
|
||||
|
||||
|
||||
这个主题的初衷是打造一个 **结构化** 与 **碎片化** 并存的个人**知识库**。[详情](https://github.com/xugaoyi/vuepress-theme-vdoing-blog/issues/339)
|
||||
|
||||
> 目前功能已比较完整，但仍在不断的完善当中。如果你有什么建议欢迎提**Issues**，喜欢这个项目的欢迎点个**Star**持续关注。
|
||||
|
||||
## Introduce 介绍
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ module.exports = [
|
|||
link: '/technology/',
|
||||
items: [
|
||||
{text: '技术文档', link: '/pages/9a7ee40fc232253e/'},
|
||||
{text: 'GitHub', link: '/pages/4c778760be26d8b3/'},
|
||||
{text: 'GitHub技巧', link: '/pages/4c778760be26d8b3/'},
|
||||
{text: 'Nodejs', link: '/pages/117708e0af7f0bd9/'},
|
||||
{text: '博客搭建', link: '/pages/41f87d890d0a02af/'},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -58,10 +58,14 @@ table
|
|||
.gt-container .gt-comments-null
|
||||
color #999
|
||||
|
||||
// 侧边栏高出评论区
|
||||
// 侧边栏
|
||||
.sidebar
|
||||
z-index 11
|
||||
background #fbfbfb
|
||||
background rgba(220,220,220,.1)
|
||||
@media (max-width: $MQNarrow)
|
||||
background #fbfbfb
|
||||
.sidebar-mask // 侧边栏蒙版
|
||||
background rgba(0,0,0,.2)
|
||||
|
||||
// 评论区颜色重置
|
||||
.gt-container
|
||||
|
|
|
|||
|
|
@ -20,9 +20,14 @@ $badgeErrorColor = #DA5961
|
|||
// 自定义 蓝色主题
|
||||
$accentColor = #11A8CD
|
||||
$textColor = #004050
|
||||
$borderColor = rgba(80,80,80,.1)
|
||||
$badgeTipColor = #11A8CD
|
||||
|
||||
$readModeColor = #f5f5d5
|
||||
|
||||
|
||||
// 布局
|
||||
$sidebarWidth = 18rem
|
||||
$contentWidth = 850px
|
||||
|
||||
$rightMenuWidth = 280px
|
||||
|
|
@ -8,20 +8,17 @@
|
|||
@click="scrollToTop"
|
||||
/>
|
||||
</transition>
|
||||
<!-- <div
|
||||
title="护眼模式"
|
||||
class="button go-to-comment iconfont icon-huyan"
|
||||
/> -->
|
||||
<!-- <div
|
||||
title="阅读模式"
|
||||
class="button go-to-comment iconfont icon-yuedu"
|
||||
/> -->
|
||||
<div
|
||||
title="去评论"
|
||||
class="button go-to-comment iconfont icon-pinglun"
|
||||
v-show="showCommentBut"
|
||||
@click="scrollToComment"
|
||||
/>
|
||||
<div
|
||||
title="阅读模式"
|
||||
class="button read-mode iconfont icon-yuedu"
|
||||
@click="$emit('toggle-read-mode')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -111,7 +108,6 @@ export default {
|
|||
this._textareaEl.classList.remove('yellowBorder')
|
||||
}, 500)
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
|
|
@ -140,6 +136,7 @@ export default {
|
|||
margin-top .9rem
|
||||
text-align center
|
||||
cursor pointer
|
||||
background rgba(255,255,255,0.8)
|
||||
// color #666
|
||||
&:hover
|
||||
color $accentColor
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ export default {
|
|||
background #517EA9
|
||||
|
||||
.i-body{
|
||||
background #f3f7fa bottom no-repeat
|
||||
background #fafafa bottom no-repeat
|
||||
overflow hidden
|
||||
}
|
||||
.banner{
|
||||
|
|
@ -416,29 +416,20 @@ body .main-wrapper{
|
|||
.image_title {
|
||||
width: 11rem;
|
||||
height: 11rem;
|
||||
// transition: all .3s;
|
||||
animation: heart 1.2s ease-in-out 0s infinite alternate;
|
||||
animation-play-state: paused
|
||||
}
|
||||
|
||||
h2 {
|
||||
// font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
// color: lighten($textColor, 10%);
|
||||
transition: all 1.2s;
|
||||
}
|
||||
|
||||
p {
|
||||
// color: lighten($textColor, 25%);
|
||||
transition: all 1.2s;
|
||||
}
|
||||
}
|
||||
|
||||
.feature:hover {
|
||||
.image_title {
|
||||
// transform:scale(1.1,1.1);
|
||||
animation-play-state: running;
|
||||
}
|
||||
h2{
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ export default {
|
|||
margin-left: -2px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: #EAECEF;
|
||||
background: $borderColor;
|
||||
>li
|
||||
transition: all .25s ease-in-out;
|
||||
margin-bottom: 55px;
|
||||
|
|
@ -183,7 +183,7 @@ export default {
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
background: #fff;
|
||||
border: 1px solid #EAECEF;
|
||||
border: 1px solid $borderColor;
|
||||
border-radius: 50%;
|
||||
.year-wrapper
|
||||
padding-left: 0!important;
|
||||
|
|
@ -191,7 +191,7 @@ export default {
|
|||
display: flex;
|
||||
padding: 30px 0 10px;
|
||||
list-style: none;
|
||||
border-bottom: 1px dashed #EAECEF;
|
||||
border-bottom: 1px dashed $borderColor;
|
||||
position: relative;
|
||||
color: #666;
|
||||
transition: all 0.25s ease-in-out;
|
||||
|
|
@ -211,7 +211,7 @@ export default {
|
|||
margin-left: -4px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #EAECEF;
|
||||
border: 1px solid $borderColor;
|
||||
z-index: 2;
|
||||
&:hover
|
||||
text-decoration:none
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ export default {
|
|||
padding 2rem 2.5rem 0 2.5rem
|
||||
&:not(.article-home)
|
||||
margin 2rem auto 0 auto
|
||||
border 8px solid #f5f5f5
|
||||
border 8px solid rgba(160,160,160,.1)
|
||||
box-sizing border-box
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem 2rem 0rem 2rem
|
||||
|
|
|
|||
|
|
@ -46,7 +46,9 @@
|
|||
/>
|
||||
</Page>
|
||||
|
||||
<Buttons />
|
||||
<Buttons
|
||||
@toggle-read-mode="toggleReadMode"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -66,7 +68,8 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
isSidebarOpen: true,
|
||||
showSidebar: false
|
||||
showSidebar: false,
|
||||
readMode: false
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -122,7 +125,8 @@ export default {
|
|||
'no-navbar': !this.shouldShowNavbar,
|
||||
'sidebar-open': this.isSidebarOpen,
|
||||
'no-sidebar': !this.shouldShowSidebar,
|
||||
'have-rightmenu': this.showRightMenu
|
||||
'have-rightmenu': this.showRightMenu,
|
||||
'read-mode': this.readMode
|
||||
},
|
||||
userPageClass
|
||||
]
|
||||
|
|
@ -148,7 +152,12 @@ export default {
|
|||
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
|
||||
this.$emit('toggle-sidebar', this.isSidebarOpen)
|
||||
},
|
||||
|
||||
toggleReadMode (){
|
||||
this.readMode = !this.readMode
|
||||
if (document.documentElement.clientWidth > MOBILE_DESKTOP_BREAKPOINT) {
|
||||
this.isSidebarOpen = !this.readMode
|
||||
}
|
||||
},
|
||||
// side swipe
|
||||
onTouchStart (e) {
|
||||
this.touchStart = {
|
||||
|
|
@ -171,3 +180,24 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.read-mode
|
||||
background $readModeColor
|
||||
.i-body
|
||||
background-color $readModeColor
|
||||
.main-wrapper >*
|
||||
background-color lighten($readModeColor, 50%)!important
|
||||
.navbar
|
||||
background $readModeColor
|
||||
.dropdown-wrapper .nav-dropdown
|
||||
background lighten($readModeColor, 50%)
|
||||
.suggestions
|
||||
background lighten($readModeColor, 50%)
|
||||
.read-mode
|
||||
background lighten($accentColor, 30%)
|
||||
color #fff
|
||||
&:hover
|
||||
color #fff
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue