添加目录栏显示隐藏按钮
This commit is contained in:
xugaoyi
parent
646265cd52
commit
2f0e360808
|
|
@ -71,10 +71,10 @@ module.exports = {
|
|||
}
|
||||
},
|
||||
plugins: [ // 插件
|
||||
[require('./plugins/love-me'), { // 鼠标点击爱心特效
|
||||
color: '#11a8cd', // 爱心颜色，默认随机色
|
||||
excludeClassName: 'theme-default-content' // 要排除元素的class, 默认空''
|
||||
}],
|
||||
// [require('./plugins/love-me'), { // 鼠标点击爱心特效
|
||||
// color: '#11a8cd', // 爱心颜色，默认随机色
|
||||
// excludeClassName: 'theme-default-content' // 要排除元素的class, 默认空''
|
||||
// }],
|
||||
[require('./plugins/title-badge'), { // h1标题徽章
|
||||
// badges: [ // 替换默认的徽章图标
|
||||
// 'data:image/png;base64,**',
|
||||
|
|
@ -121,7 +121,7 @@ module.exports = {
|
|||
[
|
||||
'vuepress-plugin-zooming', // 放大图片
|
||||
{
|
||||
selector:'.theme-default-content :not(h1) img',
|
||||
selector:'.theme-default-content img:not(.no-zoom)',
|
||||
options: {
|
||||
bgColor: 'rgba(0,0,0,0.6)'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ module.exports = {
|
|||
|
||||
"/01.前端/": [{"title":"JavaScript文章","collapsable":false,"children":[["25.JavaScript文章/02.new命令原理.md","new命令原理","/pages/8143cc480faf9a11"],["25.JavaScript文章/03.ES5面向对象.md","ES5面向对象","/pages/b1af5cb8996363c5"],["25.JavaScript文章/04.ES6面向对象.md","ES6面向对象","/pages/1f4123be6f45abcd"],["25.JavaScript文章/06.多种数组去重性能对比.md","多种数组去重性能对比","/pages/e808fba1fa8fbab2"],["25.JavaScript文章/50.JS随机打乱数组.md","JS随机打乱数组","/pages/40b4db2d38ba85f2"],["25.JavaScript文章/60.判断是否为移动端浏览器.md","判断是否为移动端浏览器","/pages/40f623be692cf8bc"],["25.JavaScript文章/70.将一维数组按指定长度转为二维数组.md","将一维数组按指定长度转为二维数组","/pages/f1acb712033ac8da"],["25.JavaScript文章/80.防抖与节流函数.md","防抖与节流函数","/pages/0f6a0ac99b62ede5"],["25.JavaScript文章/90.JS获取和修改url参数.md","JS获取和修改url参数","/pages/7a91be2d502346ce"]]},{"title":"Vue文章","collapsable":false,"children":[["30.Vue文章/10.Vue项目开发前的一些准备工作.md","Vue项目开发前的一些准备工作","/pages/802a1ca6f7b71c59"],["30.Vue文章/20.Vue CLi3 修改webpack配置.md","Vue CLi3 修改webpack配置","/pages/5d463fbdb172d43b"],["30.Vue文章/30.Vue中的scoped和scoped穿透.md","Vue中的scoped和scoped穿透","/pages/c80d2751cf1f4268"],["30.Vue文章/40.Vue项目使用mock数据的几种方式.md","Vue项目使用mock数据的几种方式","/pages/bd1af2f75fd361fc"]]},{"title":"学习笔记","collapsable":false,"children":[["40.学习笔记/00.《JavaScript教程》笔记.md","《JavaScript教程》笔记","/note/javascript"],["40.学习笔记/10.《ES6 教程》笔记.md","《ES6 教程》笔记","/note/es6"],["40.学习笔记/20.《Vue》笔记.md","《Vue》笔记","/note/vue"],["40.学习笔记/30.《TypeScript 从零实现 axios》.md","《TypeScript 从零实现 axios》","/note/typescript-axios"],["40.学习笔记/40.小程序笔记.md","小程序笔记","/note/wx-miniprogram"]]}],
|
||||
|
||||
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理","/pages/8309a5b876fc95e3"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法","/pages/0a83b083bdf257cb"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础","/pages/ea6db1530c42ad51"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子","/pages/eff61bc8b4f4695d"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局","/pages/df9e7c7214fa5046"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局","/pages/85b5a3fe218a34b7"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局","/pages/05cc577fb51c7998"],["20.CSS/07.CSS3之transform过渡.md","CSS3之transform过渡","/pages/02d7f59d98d87409"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画","/pages/c2c0432138f6e042"],["20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md","「布局技巧」图片未加载前自动撑开元素高度","/pages/3d52574260725aea"],["20.CSS/30.文字在一行或两行时超出显示省略号.md","文字在一行或两行时超出显示省略号","/pages/42b66999cc27dc25"],["20.CSS/35.从box-sizing属性入手，了解盒子模型.md","从box-sizing属性入手，了解盒子模型","/pages/20a978023139589d"],["20.CSS/40.水平垂直居中的几种方式-案例.md","水平垂直居中的几种方式-案例","/pages/cb7cb251adba4bf7"]]},{"title":"stylus","collapsable":false,"children":[["25.stylus/10.混入(Mixins).md","混入(Mixins)","/pages/9f15c1a281d8bedb"]]}],
|
||||
"/02.页面/": [{"title":"HTML","collapsable":false,"children":[["10.HTML/10.常用meta整理.md","常用meta整理","/pages/8309a5b876fc95e3"]]},{"title":"CSS","collapsable":false,"children":[["20.CSS/01.flex布局语法.md","flex布局语法","/pages/0a83b083bdf257cb"],["20.CSS/02.flex布局案例-基础.md","flex布局案例-基础","/pages/ea6db1530c42ad51"],["20.CSS/03.flex布局案例-骰子.md","flex布局案例-骰子","/pages/eff61bc8b4f4695d"],["20.CSS/04.flex布局案例-圣杯布局.md","flex布局案例-圣杯布局","/pages/df9e7c7214fa5046"],["20.CSS/05.flex布局案例-网格布局.md","flex布局案例-网格布局","/pages/85b5a3fe218a34b7"],["20.CSS/06.flex布局案例-输入框布局.md","flex布局案例-输入框布局","/pages/05cc577fb51c7998"],["20.CSS/07.CSS3之transition过渡.md","CSS3之transition过渡","/pages/02d7f59d98d87409"],["20.CSS/08.CSS3之animation动画.md","CSS3之animation动画","/pages/c2c0432138f6e042"],["20.CSS/20.「布局技巧」图片未加载前自动撑开元素高度.md","「布局技巧」图片未加载前自动撑开元素高度","/pages/3d52574260725aea"],["20.CSS/30.文字在一行或两行时超出显示省略号.md","文字在一行或两行时超出显示省略号","/pages/42b66999cc27dc25"],["20.CSS/35.从box-sizing属性入手，了解盒子模型.md","从box-sizing属性入手，了解盒子模型","/pages/20a978023139589d"],["20.CSS/40.水平垂直居中的几种方式-案例.md","水平垂直居中的几种方式-案例","/pages/cb7cb251adba4bf7"]]},{"title":"stylus","collapsable":false,"children":[["25.stylus/10.混入(Mixins).md","混入(Mixins)","/pages/9f15c1a281d8bedb"]]}],
|
||||
|
||||
"/03.技术/": [{"title":"技术文档","collapsable":false,"children":[["01.技术文档/01.Git使用手册.md","Git使用手册","/pages/9a7ee40fc232253e"],["01.技术文档/02.Markdown使用教程.md","Markdown使用教程","/pages/ad247c4332211551"],["01.技术文档/03.npm常用命令.md","npm常用命令","/pages/61f2f95fd7da14fd"],["01.技术文档/04.yaml语言教程.md","yaml语言教程","/pages/4e8444e2d534d14f"]]},{"title":"GitHub技巧","collapsable":false,"children":[["02.GitHub技巧/01.GitHub高级搜索技巧.md","GitHub高级搜索技巧","/pages/4c778760be26d8b3"],["02.GitHub技巧/02.GitHub Actions 实现自动部署静态博客.md","GitHub Actions 实现自动部署静态博客","/pages/6b9d359ec5aa5019"],["02.GitHub技巧/03.GitHub Actions 定时运行代码：每天定时百度链接推送.md","GitHub Actions 定时运行代码：每天定时百度链接推送","/pages/f44d2f9ad04ab8d3"],["02.GitHub技巧/10.GitHub加速下载项目的方法.md","GitHub加速下载项目的方法","/pages/95331c6a9613faf8"]]},{"title":"Nodejs","collapsable":false,"children":[["03.Nodejs/01.nodejs递归读取所有文件.md","nodejs递归读取所有文件","/pages/117708e0af7f0bd9"]]},{"title":"博客搭建","collapsable":false,"children":[["04.博客搭建/01.解决百度无法收录搭建在GitHub上的个人博客的问题.md","解决百度无法收录搭建在GitHub上的个人博客的问题","/pages/41f87d890d0a02af"],["04.博客搭建/02.使用Gitalk实现静态博客无后台评论系统.md","使用Gitalk实现静态博客无后台评论系统","/pages/1da0bf9a988eafe5"],["04.博客搭建/03.GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床.md","GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床","/pages/a5f73af5185fdf0a"]]}],
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ export default ({ router }) => {
|
|||
function insertBadge(){
|
||||
setTimeout(() =>{
|
||||
const a = document.querySelector(".theme-default-content h1 a");
|
||||
a && a.insertAdjacentHTML('afterend', `<img src="${BADGES[Math.floor(Math.random() * BADGES.length)]}">`);
|
||||
a && a.insertAdjacentHTML('afterend', `<img src="${BADGES[Math.floor(Math.random() * BADGES.length)]}" class="no-zoom">`);
|
||||
},0)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// 引入字体图标
|
||||
@import '//at.alicdn.com/t/font_1678482_m18ipwgi2da.css'
|
||||
@import '//at.alicdn.com/t/font_1678482_tdhmdeztrfo.css'
|
||||
|
||||
// 样式重置
|
||||
body
|
||||
|
|
@ -10,6 +10,9 @@ a,input,button
|
|||
.theme-default-content:not(.custom)
|
||||
word-wrap break-word
|
||||
|
||||
.navbar
|
||||
box-shadow 0 2px 5px rgba(0,0,0,.06)
|
||||
|
||||
// 滚动条样式
|
||||
@media (min-width: $MQMobile)
|
||||
::-webkit-scrollbar
|
||||
|
|
@ -57,6 +60,7 @@ table
|
|||
// 侧边栏高出评论区
|
||||
.sidebar
|
||||
z-index 11
|
||||
background #fbfbfb
|
||||
|
||||
// 评论区颜色重置
|
||||
.gt-container
|
||||
|
|
@ -96,4 +100,52 @@ body .vuepress-plugin-demo-block__wrapper .vuepress-plugin-demo-block__footer:ho
|
|||
|
||||
//iframe
|
||||
iframe
|
||||
margin: 1rem 0
|
||||
margin: 1rem 0
|
||||
|
||||
|
||||
|
||||
// 目录显示隐藏
|
||||
@media (max-width: $MQMobile)
|
||||
.theme-container
|
||||
&.sidebar-open
|
||||
.sidebar-mask // 蒙版在小屏中才能显示
|
||||
display: block
|
||||
|
||||
@media (min-width: ($MQMobile + 1px))
|
||||
.theme-container // 覆盖index.style #179
|
||||
&.sidebar-open
|
||||
.sidebar-mask // 蒙版在大屏中不能显示
|
||||
display: none
|
||||
|
||||
.theme-container.no-sidebar
|
||||
.sidebar-button
|
||||
display none
|
||||
|
||||
|
||||
|
||||
// 大于720px时 切换目录栏的样式
|
||||
.sidebar
|
||||
transform translateX(-100%)
|
||||
transition transform .2s ease
|
||||
.page // 覆盖index.styl #20
|
||||
transition all .2s ease
|
||||
padding-left 0
|
||||
|
||||
@media (min-width: ($MQMobile + 1px))
|
||||
.theme-container
|
||||
&.sidebar-open
|
||||
.sidebar
|
||||
transform translateX(0)
|
||||
.sidebar-button
|
||||
left $sidebarWidth
|
||||
.page
|
||||
padding-left $sidebarWidth
|
||||
&.no-sidebar
|
||||
.page
|
||||
padding-left 0
|
||||
@media (max-width: $MQNarrow)
|
||||
.theme-container
|
||||
&.sidebar-open:not(.on-sidebar)
|
||||
.sidebar-button
|
||||
$mobileSidebarWidth = $sidebarWidth * 0.82
|
||||
left $mobileSidebarWidth
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="articleInfo">
|
||||
<ul class="breadcrumbs">
|
||||
<li>
|
||||
<router-link to="/" class="iconfont icon-ai-home icon-home" title="首页" />
|
||||
<router-link to="/" class="iconfont icon-home" title="首页" />
|
||||
</li>
|
||||
<li v-if="articleInfo.classify1">
|
||||
<router-link v-if="articleInfo.cataloguePermalink" :to="articleInfo.cataloguePermalink" :title="articleInfo.classify1+'-目录页'">{{articleInfo.classify1}}</router-link>
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
<a :href="articleInfo.author.href" v-if="articleInfo.author.href" target="_blank" class="beLink" title="作者">{{articleInfo.author.name}}</a>
|
||||
<a v-else href="javascript:;" title="作者">{{articleInfo.author.name}}</a>
|
||||
</div>
|
||||
<div class="date iconfont icon-ic_calendar" v-if="articleInfo.date">
|
||||
<div class="date iconfont icon-riqi" v-if="articleInfo.date">
|
||||
<a href="javascript:;" title="创建时间">{{articleInfo.date}}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,11 +89,13 @@ function zero(d){
|
|||
color #888
|
||||
.articleInfo
|
||||
overflow hidden
|
||||
font-size .95rem
|
||||
.breadcrumbs
|
||||
margin 0
|
||||
padding 0
|
||||
overflow hidden
|
||||
display inline-block
|
||||
line-height 2rem
|
||||
@media (max-width: 960px)
|
||||
width 100%
|
||||
li
|
||||
|
|
@ -101,7 +103,7 @@ function zero(d){
|
|||
float left
|
||||
padding-right 5px
|
||||
&:after
|
||||
content '→'
|
||||
content '-'
|
||||
margin-left 5px
|
||||
color #999
|
||||
&:last-child
|
||||
|
|
@ -109,6 +111,8 @@ function zero(d){
|
|||
content ''
|
||||
a
|
||||
color #888
|
||||
&:before
|
||||
font-size .95rem
|
||||
&:hover
|
||||
color $accentColor
|
||||
.icon-home
|
||||
|
|
@ -121,7 +125,7 @@ function zero(d){
|
|||
div
|
||||
float left
|
||||
margin-left 20px
|
||||
font-size .9rem
|
||||
font-size .8rem
|
||||
@media (max-width: 960px)
|
||||
margin 0 20px 0 0
|
||||
&:before
|
||||
|
|
|
|||
|
|
@ -44,14 +44,22 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
|
|||
padding 2.5rem
|
||||
text-align center
|
||||
color lighten($textColor, 25%)
|
||||
margin 0 0 2rem $sidebarWidth
|
||||
margin 0 0 2rem 0
|
||||
box-sizing border-box
|
||||
font-size .85rem
|
||||
@media (max-width: $MQNarrow)
|
||||
margin-left $mobileSidebarWidth
|
||||
@media (max-width: $MQMobile)
|
||||
width auto
|
||||
margin-left 0
|
||||
transition all .2s ease
|
||||
// width auto
|
||||
// margin-left 0
|
||||
|
||||
.sidebar-open .footer
|
||||
width auto
|
||||
margin-left $sidebarWidth
|
||||
// @media (max-width: $MQNarrow)
|
||||
// margin-left $mobileSidebarWidth
|
||||
// @media (max-width: $MQMobile)
|
||||
// width auto
|
||||
// margin-left 0
|
||||
|
||||
.no-sidebar .footer
|
||||
width auto
|
||||
margin-left 0
|
||||
|
|
|
|||
|
|
@ -0,0 +1,133 @@
|
|||
<template>
|
||||
<header class="navbar">
|
||||
<SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
|
||||
|
||||
<router-link
|
||||
:to="$localePath"
|
||||
class="home-link"
|
||||
>
|
||||
<img
|
||||
class="logo"
|
||||
v-if="$site.themeConfig.logo"
|
||||
:src="$withBase($site.themeConfig.logo)"
|
||||
:alt="$siteTitle"
|
||||
>
|
||||
<span
|
||||
ref="siteName"
|
||||
class="site-name"
|
||||
v-if="$siteTitle"
|
||||
:class="{ 'can-hide': $site.themeConfig.logo }"
|
||||
>{{ $siteTitle }}</span>
|
||||
</router-link>
|
||||
|
||||
<div
|
||||
class="links"
|
||||
:style="linksWrapMaxWidth ? {
|
||||
'max-width': linksWrapMaxWidth + 'px'
|
||||
} : {}"
|
||||
>
|
||||
<AlgoliaSearchBox
|
||||
v-if="isAlgoliaSearch"
|
||||
:options="algolia"
|
||||
/>
|
||||
<SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
|
||||
<NavLinks class="can-hide"/>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AlgoliaSearchBox from '@AlgoliaSearchBox'
|
||||
import SearchBox from '@SearchBox'
|
||||
import SidebarButton from '@theme/components/SidebarButton.vue'
|
||||
import NavLinks from '@theme/components/NavLinks.vue'
|
||||
|
||||
export default {
|
||||
components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
|
||||
|
||||
data () {
|
||||
return {
|
||||
linksWrapMaxWidth: null
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
|
||||
const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
|
||||
const handleLinksWrapWidth = () => {
|
||||
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
|
||||
this.linksWrapMaxWidth = null
|
||||
} else {
|
||||
this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
|
||||
- (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
|
||||
}
|
||||
}
|
||||
handleLinksWrapWidth()
|
||||
window.addEventListener('resize', handleLinksWrapWidth, false)
|
||||
},
|
||||
|
||||
computed: {
|
||||
algolia () {
|
||||
return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
|
||||
},
|
||||
|
||||
isAlgoliaSearch () {
|
||||
return this.algolia && this.algolia.apiKey && this.algolia.indexName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function css (el, property) {
|
||||
// NOTE: Known bug, will return 'auto' if style value is 'auto'
|
||||
const win = el.ownerDocument.defaultView
|
||||
// null means not to return pseudo styles
|
||||
return win.getComputedStyle(el, null)[property]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
$navbar-vertical-padding = 0.7rem
|
||||
$navbar-horizontal-padding = 1.5rem
|
||||
|
||||
.navbar
|
||||
padding $navbar-vertical-padding $navbar-horizontal-padding
|
||||
line-height $navbarHeight - 1.4rem
|
||||
a, span, img
|
||||
display inline-block
|
||||
.logo
|
||||
height $navbarHeight - 1.4rem
|
||||
min-width $navbarHeight - 1.4rem
|
||||
margin-right 0.8rem
|
||||
vertical-align top
|
||||
.site-name
|
||||
font-size 1.3rem
|
||||
font-weight 600
|
||||
color $textColor
|
||||
position relative
|
||||
.links
|
||||
padding-left 1.5rem
|
||||
box-sizing border-box
|
||||
background-color white
|
||||
white-space nowrap
|
||||
font-size 0.9rem
|
||||
position absolute
|
||||
right $navbar-horizontal-padding
|
||||
top $navbar-vertical-padding
|
||||
display flex
|
||||
.search-box
|
||||
flex: 0 0 auto
|
||||
vertical-align top
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.navbar
|
||||
padding-left 4rem
|
||||
.can-hide
|
||||
display none
|
||||
.links
|
||||
padding-left 1.5rem
|
||||
.site-name
|
||||
width calc(100vw - 9.4rem)
|
||||
overflow hidden
|
||||
white-space nowrap
|
||||
text-overflow ellipsis
|
||||
</style>
|
||||
|
|
@ -215,14 +215,16 @@ function flatten (items, res) {
|
|||
max-width 200px
|
||||
.page-nav-centre-prev
|
||||
left 0
|
||||
-webkit-transform translateX(320px)
|
||||
transform translateX(320px)
|
||||
&:before
|
||||
transform rotate(-135deg)
|
||||
.page-nav-centre-next
|
||||
right: 0
|
||||
&:before
|
||||
transform rotate(45deg)
|
||||
|
||||
.sidebar-open .page-nav-centre-wrap .page-nav-centre-prev
|
||||
-webkit-transform translateX(320px)
|
||||
transform translateX(320px)
|
||||
.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev
|
||||
-webkit-transform translateX(0)
|
||||
transform translateX(0)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div class="sidebar-button" @click="$emit('toggle-sidebar')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
|
||||
<path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="stylus">
|
||||
.sidebar-button
|
||||
cursor pointer
|
||||
display none
|
||||
width 1.25rem
|
||||
height 1.25rem
|
||||
position absolute
|
||||
padding 0.6rem
|
||||
top 0.6rem
|
||||
left 1rem
|
||||
@media (max-width: $MQMobile)
|
||||
display block
|
||||
.icon
|
||||
display block
|
||||
width 1.25rem
|
||||
height 1.25rem
|
||||
|
||||
@media (min-width: ($MQMobile + 1px))
|
||||
$mobileSidebarWidth = $sidebarWidth * 0.82
|
||||
.sidebar-button
|
||||
width 40px
|
||||
height 40px
|
||||
display inline-block
|
||||
position fixed
|
||||
left 0
|
||||
top $navbarHeight
|
||||
text-align center
|
||||
line-height 44px
|
||||
margin 5px 8px
|
||||
color #888
|
||||
border-radius 50%
|
||||
padding 0
|
||||
transition all .2s ease
|
||||
&:hover
|
||||
box-shadow 0 2px 6px rgba(0,0,0,.15)
|
||||
.icon
|
||||
display inline
|
||||
width 1rem
|
||||
height 1rem
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div
|
||||
class="theme-container"
|
||||
:class="pageClasses"
|
||||
@touchstart="onTouchStart"
|
||||
@touchend="onTouchEnd"
|
||||
>
|
||||
<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"
|
||||
#top
|
||||
/>
|
||||
<slot
|
||||
name="sidebar-bottom"
|
||||
#bottom
|
||||
/>
|
||||
</Sidebar>
|
||||
|
||||
<Home v-if="$page.frontmatter.home"/>
|
||||
|
||||
<Page
|
||||
v-else
|
||||
:sidebar-items="sidebarItems"
|
||||
>
|
||||
<slot
|
||||
name="page-top"
|
||||
#top
|
||||
/>
|
||||
<slot
|
||||
name="page-bottom"
|
||||
#bottom
|
||||
/>
|
||||
</Page>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Home from '@theme/components/Home.vue'
|
||||
import Navbar from '@theme/components/Navbar.vue'
|
||||
import Page from '@theme/components/Page.vue'
|
||||
import Sidebar from '@theme/components/Sidebar.vue'
|
||||
import { resolveSidebarItems } from '../util'
|
||||
|
||||
const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
|
||||
|
||||
export default {
|
||||
components: { Home, Page, Sidebar, Navbar },
|
||||
|
||||
data () {
|
||||
return {
|
||||
isSidebarOpen: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
shouldShowNavbar () {
|
||||
const { themeConfig } = this.$site
|
||||
const { frontmatter } = this.$page
|
||||
if (
|
||||
frontmatter.navbar === false
|
||||
|| themeConfig.navbar === false) {
|
||||
return false
|
||||
}
|
||||
return (
|
||||
this.$title
|
||||
|| themeConfig.logo
|
||||
|| themeConfig.repo
|
||||
|| themeConfig.nav
|
||||
|| this.$themeLocaleConfig.nav
|
||||
)
|
||||
},
|
||||
|
||||
shouldShowSidebar () {
|
||||
const { frontmatter } = this.$page
|
||||
return (
|
||||
!frontmatter.home
|
||||
&& frontmatter.sidebar !== false
|
||||
&& this.sidebarItems.length
|
||||
)
|
||||
},
|
||||
|
||||
sidebarItems () {
|
||||
return resolveSidebarItems(
|
||||
this.$page,
|
||||
this.$page.regularPath,
|
||||
this.$site,
|
||||
this.$localePath
|
||||
)
|
||||
},
|
||||
|
||||
pageClasses () {
|
||||
const userPageClass = this.$page.frontmatter.pageClass
|
||||
return [
|
||||
{
|
||||
'no-navbar': !this.shouldShowNavbar,
|
||||
'sidebar-open': this.isSidebarOpen,
|
||||
'no-sidebar': !this.shouldShowSidebar
|
||||
},
|
||||
userPageClass
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.isSidebarOpenOfclientWidth()
|
||||
},
|
||||
mounted () {
|
||||
this.$router.afterEach(() => {
|
||||
this.isSidebarOpenOfclientWidth()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
isSidebarOpenOfclientWidth() {
|
||||
if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
|
||||
this.isSidebarOpen = false
|
||||
}
|
||||
},
|
||||
toggleSidebar (to) {
|
||||
this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
|
||||
console.log(this.isSidebarOpen)
|
||||
this.$emit('toggle-sidebar', this.isSidebarOpen)
|
||||
},
|
||||
|
||||
// side swipe
|
||||
onTouchStart (e) {
|
||||
this.touchStart = {
|
||||
x: e.changedTouches[0].clientX,
|
||||
y: e.changedTouches[0].clientY
|
||||
}
|
||||
},
|
||||
|
||||
onTouchEnd (e) {
|
||||
const dx = e.changedTouches[0].clientX - this.touchStart.x
|
||||
const dy = e.changedTouches[0].clientY - this.touchStart.y
|
||||
if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
|
||||
if (dx > 0 && this.touchStart.x <= 80) {
|
||||
this.toggleSidebar(true)
|
||||
} else {
|
||||
this.toggleSidebar(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -2,6 +2,8 @@
|
|||
title: flex布局语法
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/0a83b083bdf257cb
|
||||
author:
|
||||
name: 阮一峰
|
||||
---
|
||||
# flex布局语法
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
title: CSS3之transform过渡
|
||||
title: CSS3之transition过渡
|
||||
date: 2019-12-25 14:27:01
|
||||
permalink: /pages/02d7f59d98d87409
|
||||
---
|
||||
# CSS3之transform过渡
|
||||
# CSS3之transition过渡
|
||||
|
||||
html结构
|
||||
```html
|
||||
|
|
@ -13,7 +13,7 @@ html结构
|
|||
<div class="div3"></div>
|
||||
</div>
|
||||
```
|
||||
先给元素设置transform过渡，指定样式和时间，这里设置all全部样式都采用0.3s的过渡
|
||||
先给元素设置transition过渡，指定样式和时间，这里设置all全部样式都采用0.3s的过渡
|
||||
```css
|
||||
.box1>div{
|
||||
/* 给元素所有变化都添加过渡动画, 也可以指定唯一的过渡样式属性*/
|
||||
|
|
@ -32,14 +32,12 @@ html结构
|
|||
|
||||
<b>背景色过渡</b>
|
||||
<div class="div2"></div>
|
||||
|
||||
<div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.div2:hover</span><span class="token punctuation">{</span><span class="token property">background</span><span class="token punctuation">:</span> #999<span class="token punctuation">;</span><span class="token punctuation">}</span>
|
||||
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div>
|
||||
|
||||
|
||||
<b>按贝塞尔曲线设置的过渡</b>
|
||||
<div class="div3"></div>
|
||||
|
||||
<div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token comment">/*贝塞尔曲线过渡*/</span>
|
||||
<span class="token selector">.div3</span><span class="token punctuation">{</span><span class="token property">transition-timing-function</span><span class="token punctuation">:</span> <span class="token function">cubic-bezier</span><span class="token punctuation">(</span>.39<span class="token punctuation">,</span>.62<span class="token punctuation">,</span>.74<span class="token punctuation">,</span>1.39<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
<span class="token selector">.div3:hover</span><span class="token punctuation">{</span><span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translate3d</span><span class="token punctuation">(</span>-25px<span class="token punctuation">,</span> -25px<span class="token punctuation">,</span> 0<span class="token punctuation">)</span><span class="token punctuation">}</span>
|
||||
|
|
@ -78,7 +76,7 @@ X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大。
|
|||
通过调整贝塞尔曲线可以设置出多种动画效果，比如反弹效果等
|
||||
X轴的范围是0~1，Y轴的取值没有规定，但是也不宜过大
|
||||
直线：linear，即cubic-bezier(0,0,1,1)
|
||||
|
||||
|
||||
贝塞尔曲线在线工具：https://cubic-bezier.com/#.17,.67,.83,.67
|
||||
*/
|
||||
transition-timing-function: cubic-bezier(0,1.36,.83,1.41)
|
||||
|
|
@ -6,14 +6,15 @@ sidebar: false
|
|||
article: false
|
||||
---
|
||||
|
||||
<!-- # 关于 -->
|
||||
|
||||
### 📚Blog
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
|
||||
这是一个兼具博客文章、知识管理、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
|
||||
|
||||
### 🎨Theme
|
||||
本站主题是根据[VuePress](https://vuepress.vuejs.org/zh/)的默认主题修改而成。取名[Vdoing](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)(维度)，旨在方便你多维度的快速的管理和查找学习笔记以及技术文档。添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等，添加博客所需的评论、时间轴、分类、最近更新等。更多[详情](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)。
|
||||
|
||||
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing-blog" target="_blank"><img src='https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing-blog' alt='GitHub stars' class="no-zoom"></a>
|
||||
|
||||
|
||||
### 🐼Me
|
||||
从事Web前端开发工作，喜欢唱、跳、rap、篮球，写程序。 本人↓↓↓
|
||||
|
||||
|
|
|
|||
|
|
@ -21,13 +21,17 @@ features:
|
|||
## 关于
|
||||
|
||||
### 📚Blog
|
||||
这是一个兼具博客文章、个人技能树、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
|
||||
这是一个兼具博客文章、知识管理、文档查找的个人网站，主要内容是Web前端技术。如果你喜欢这个博客&主题欢迎到[GitHub](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)点个Star、获取源码，或者交换[友链](/pages/844eea1b2387fb96/) ( •̀ ω •́ )✧
|
||||
|
||||
### 🎨Theme
|
||||
本站主题是根据[VuePress](https://vuepress.vuejs.org/zh/)的默认主题修改而成。取名[Vdoing](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)(维度)，含义是方便你多维度的快速的管理和查找学习笔记以及技术文档。添加方便管理笔记文档的目录页、自动生成侧边栏工具、搜索框功能扩展等，添加博客所需的评论、时间轴、分类、最近更新等。更多[详情](https://github.com/xugaoyi/vuepress-theme-vdoing-blog)。
|
||||
|
||||
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing-blog" target="_blank"><img src='https://img.shields.io/github/stars/xugaoyi/vuepress-theme-vdoing-blog' alt='GitHub stars' class="no-zoom"></a>
|
||||
|
||||
</br>
|
||||
|
||||
|
||||
|
||||
## 特色功能
|
||||
博客部分特色功能介绍
|
||||
#### Demo演示模块
|
||||
|
|
|
|||
Loading…
Reference in New Issue