修改翻页按钮
This commit is contained in:
xugaoyi
parent
e76df575d4
commit
fedc4d27a7
|
|
@ -27,11 +27,9 @@
|
|||
<li>简单的目录页配置，参照 <a href="https://github.com/xugaoyi/blog/issues/330">目录页配置</a></li>
|
||||
<li>自动生成侧边栏工具（请看第6条）</li>
|
||||
<li><a href="https://github.com/xugaoyi/blog/blob/master/docs/.vuepress/plugins/enhanced-search/README.md">扩展的搜索框插件</a></li>
|
||||
<li>左右翻页按钮插件（待开发）</li>
|
||||
<li>返回顶部和底部插件（待开发）</li>
|
||||
</ul>
|
||||
</details>
|
||||
|
||||
|
||||
5. 添加博客所需的**评论**、**时间轴+分类**、**最近更新** 等。
|
||||
<details>
|
||||
<summary>查看文档</summary>
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
|
||||
8. VuePress 的页面链接对于博客来说是一个阴暗面，官方对于 [永久链接](https://vuepress.vuejs.org/zh/guide/permalinks.html) 的处理我个人不是特别喜欢，因此就有了**自动生成永久链接**，你不需要给每个页面定义一个[Front Matter](https://vuepress.vuejs.org/zh/guide/frontmatter.html)指定永久链接，我们会通过文件名来生成一个永久链接码到你的页面Front Matter。但这并不妨碍你在特定页面手动指定自己喜欢的永久链接。
|
||||
|
||||
[自动生成的Front Matter](https://github.com/xugaoyi/blog/issues/324)
|
||||
[自动生成Front Matter工具](https://github.com/xugaoyi/blog/issues/324)
|
||||
|
||||
9. **自动部署**，内置 `deploy.sh` 和 [GitHub Actions](https://github.com/features/actions) 两种自动部署脚本，一键发布到 GitHub Pages 或 国内访问速度更快的Coding Pages。
|
||||
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@ module.exports = {
|
|||
}],
|
||||
[require('./plugins/title-badge'), { // h1标题徽章
|
||||
// badges: [ // 替换默认的徽章图标
|
||||
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABGpJREFUSA3tVVtoXFUU3fvOI53UlmCaKIFmwEhsE7QK0ipFEdHEKpXaZGrp15SINsXUWvBDpBgQRKi0+KKoFeJHfZA+ED9KKoIU2gYD9UejTW4rVIzm0VSTziPzuNu1z507dibTTjL4U/DAzLn3nL3X2o91ziX6f9wMFdh6Jvbm9nNSV0msViVO6tN1Rm7NMu2OpeJ9lWBUTDxrJbYTS0hInuwciu9eLHlFxCLCZEk3MegsJmZ5K/JD6t7FkFdEvGUo1g7qJoG3MHImqRIn8/nzY1K9UPKKiJmtnUqHVE3Gbuay6vJE/N2FEmuxFjW2nUuE0yQXRRxLiTUAzs36zhZvOXJPdX850EVnnLZkB8prodQoM5JGj7Xk2mvC7JB8tG04Ef5PiXtG0UtxupRQSfTnBoCy554x18yJHI6I+G5Eru4LHmPJZEQsrvPUbMiA8G/WgMK7w7I+ez7++o2ANfbrjvaOl1tFMs+htG3IrZH9/hDX1Pr8Tc0UvH8tcX29KzAgIGcEkINyW5BF9x891hw6VYqgJHEk0huccS7vh3C6gTiODL+26huuBtbct8eZnqLML8PkxGYpuPZBqtqwkSjgc4mB5gbgig5i+y0UDK35LMxXisn9xQtK+nd26gTIHsHe/oblK/b29fUmN/8Y+9jAQrnBp56m1LcDlDp9irKTExSKduXJVWSqdBMA08pEJnEIOB3FPPMybu/oeV8zFeYN3xx576Q6RH+VmplE4ncQV5v+5rzSoyOU7PuEAg8g803PwBJ0CExno/jcMbN8tONYeOmHiuUNryvm3fRUy4tMPVLdAGkUhNWuggGrJcXPv+ouCjz0MKUHz1J2/E8IC9nqTabcxgaBYM0hPhD5Y65FsbxRQKxCQrDjDctW7PUM3HuZunFyifSAqEfuzCp48Il24luWUWZoyJCaPR82jE0+kFA643wRFVni4RYSq3ohJO2pZ7B5dO4xkDWbEpossJPLSrPjYID8rS2UHTlvyNxqIGsg674XJJ7vnh5L7PNwC4hh2sjCI96mzszOTpxLF0T7l88Yz7lAuK6OnL8gXLOnTvpzSb22YG8W7us3jSebFHeeqnXRG1vt+MoUM84LQIBmMsCTAcOauTh0T0l0neQK7m2bLMt2mGxU3HYssS0J2cdv5wljlPsrIuZLAG/2DOZIXgCYT8uMGZN+e2kSirfxZOPCsC0f24nTZzspnVn9VePS1Z5vubmAGGXG8ZFno9Hel0yfA5ZPhF7Dh972BQJ2qCpgH67lmWtBYbvk6sz02wjky2vXyz0XErP/kFB619js1BtwfOV4OPRqOQBjy3Qbk18vigUPPSD5ceHnwck7W9bhAqZdd7SuG7w4/P2F/GaJh8c7e9qgow+Q7cGBo+98WsLkuktFqiZabtXuQTu/Y5ETbR0v7tNSFnvrmu6pjdoan2KjMu8q/Hmj1EfCO2ZGfEIbIXKUlw8qaX9/b2oeSJmFksSeT/Fn0V3nSypChh4Gjh74ybO9aeZ/AN2dwciu2/MhAAAAAElFTkSuQmCC',
|
||||
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAABH1JREFUSA3tVl1oHFUUPmdmd2ltklqbpJDiNnXFmgbFktho7YMPNiJSSZM0+CAYSkUELVhM6YuwIPpgoOKDqOBDC0XE2CQoNtQXBUFTTcCi+Wlh1V2TQExsUzcltd3M9Tt3ZjZzZ2fT+OJTL8yeM+eee757fmeJbq//KQL8X3DUSFOcfr7cRsRtxNQMWueeVzOkaITIGqQHNg5y8+jNW9ldM7A6nTpAjuolUikAwq7CE3WcM2RRDz+XGVgN3FptU/aUSlvq9Pa3iZ1+sgAqJyyAFqkipd9dqiwHF3P65YycLWc/6sqGrvoEoIp6DOFaX5h6+dnfjkWprwqsPk0dUGq5vySwDImC10KxFHgGL1SWoc92O3eVht09qdXNH11I2SsTsJYqMWzihqGMi+A+Garf3BAuuLI5oGlULyNfyB/HYNujwktOfRrMr5t77NmevqaUopx0grnKAyvVpmwUDB4x6FPXuGvYLTDwWsejwgtgkYKPqRJg8SV6xaiZ3ZTppGneS4yfH5/66fZSDHv+QZci/+h5c5UHtpy67JUqGppM0sh0Nc1dW6/N1W5Yoqat8/TU/VnadmdeW2PLLSyh0cvxBs3KbqTmwYPpxN4do/mzE8nEpvX/UMu2Wbp74zUAK5q6WkHns7V0eWkdPbPzd3rxkTGybadYySumVzhcaJFbs5UrEkQ/+CK8gF5dnh/6ciIZ73gwQ927L1IitoxKLXYP3SjYdOrHHfTZhRRlFyrorafPk20B3HPD1y2G3qKZME5Jcf3t/HUC13/8tSd++vqFveMUTwAUxSUFI1QekR1+bIze3D9MF2aq6cPvG72CgnldWCFqyRw3lwH8ZMerjTD9ElRO7Gv44wNpC90aASqGfVlz/Rx17srQ57/UU26hkhQqUB7dBR71WmzQhHUnblGmVOEw0jhbV1n9OlXUDCIRGaNV5Jp43N516fN7JmnTHdfp7Hgy0luO4aMhtkLL8Bi3bUWYvzh5Mn1dTxrL6QmGuRhGL/TiTTxRoEdTszSaq9GR0NGA3KdkOz3hqSV3MIDhQ5IVX/Ivx3umBti2es2h4eZby7x8br1rkf7Mo90AqC8aQ3sJeNzqFRu+vSANAQe3PL7l0HGOAdwDCeZYvNKeoZp1Qfs6Aipndh86HmFRi0LAnEO47wsqM6cdfjh3jBPUzhZy7nvlUfFsamED1VQt6aISHVymXZ/B2aCtIG8AI8xfobj2d3en1wWVhOeHELKmLQ1s211s88comkv4UCwWyF787mJdYXtNfhKAXVqnKTq8QZvGAGGOfaTo5pGZ/PwbUCr5+DPr/1J92JNHr9aOl/F3iI5+O1nfybsGxoimvZ3ViWSluDITw3P37mypheDIPY0tw7+O/5ApbkYw+zpfaUVu32Pi98+defdUhEpZkRFq0aqyNh9FuL9hpYbEm6iwi0z2REd09ZmyENEbuhjDWzKvZXTqKYaBIr3tt5kuPtQBZFvEUwHt60vfCNu41XsksH9Ij1BMMz1Y0OOunHNShFIP5868g5zeXmuLwL9T4b6Q2+KejgAAAABJRU5ErkJggg==',
|
||||
// 'data:image/png;base64,**',
|
||||
// 'data:image/png;base64,***',
|
||||
// ]
|
||||
}],
|
||||
[require('./plugins/enhanced-search'), { // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
|
||||
|
|
@ -60,6 +60,7 @@ module.exports = {
|
|||
}
|
||||
]
|
||||
}],
|
||||
require('./plugins/page-nav'), // 页面左右的翻页按钮
|
||||
|
||||
'vuepress-plugin-baidu-autopush', // 百度自动推送
|
||||
'@vuepress/back-to-top', // 返回顶部
|
||||
|
|
|
|||
|
|
@ -6,7 +6,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"]]},{"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之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"]]}],
|
||||
|
||||
"/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"]]}],
|
||||
|
||||
|
|
|
|||
|
|
@ -36,6 +36,10 @@
|
|||
|
||||
<a href="javascript:;" @click.prevent v-else> <!-- 第三方搜索 -->
|
||||
<span class="page-title">{{ s.title }}</span>
|
||||
<svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15">
|
||||
<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
|
||||
<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="i-body" :style="'background-image: url('+ data.footer.bgImg +')'">
|
||||
<div class="i-body" :style="'background-image: url('+ data.footer.bgImg || '' +')'">
|
||||
|
||||
|
||||
<div class="banner">
|
||||
|
|
|
|||
|
|
@ -34,16 +34,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
// @require '../styles/wrapper.styl'
|
||||
|
||||
$wrapper
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
@require '../styles/wrapper.styl'
|
||||
|
||||
.page
|
||||
padding-bottom 2rem
|
||||
|
|
|
|||
|
|
@ -0,0 +1,226 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- 页面中间左右翻页 -->
|
||||
<div class="page-nav-centre-wrap" v-if="prev || next">
|
||||
<router-link
|
||||
class="page-nav-centre page-nav-centre-prev"
|
||||
v-if="prev"
|
||||
:to="prev.path"
|
||||
@mouseenter.native="showTooltip($event)"
|
||||
@mousemove.native="showTooltip($event)"
|
||||
@mouseleave.native="hideTooltip()"
|
||||
@click.native="hideTooltip()"
|
||||
:data-tooltip="prev.title || prev.path"
|
||||
/>
|
||||
|
||||
<router-link
|
||||
class="page-nav-centre page-nav-centre-next"
|
||||
v-if="next"
|
||||
:to="next.path"
|
||||
@mouseenter.native="showTooltip($event)"
|
||||
@mousemove.native="showTooltip($event)"
|
||||
@mouseleave.native="hideTooltip()"
|
||||
@click.native="hideTooltip()"
|
||||
:data-tooltip="next.title || next.path"
|
||||
/>
|
||||
<div class="tooltip" ref="tooltip" v-show="isShowTooltip">提高学习效率的策略</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部翻页按钮 -->
|
||||
<div class="page-nav" v-if="prev || next">
|
||||
<p class="inner">
|
||||
<span v-if="prev" class="prev">
|
||||
←
|
||||
<router-link v-if="prev" class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
|
||||
</span>
|
||||
|
||||
<span v-if="next" class="next">
|
||||
<router-link v-if="next" :to="next.path">{{ next.title || next.path }}</router-link>
|
||||
→
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { resolvePage } from '../util'
|
||||
import isString from 'lodash/isString'
|
||||
import isNil from 'lodash/isNil'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowTooltip: false
|
||||
}
|
||||
},
|
||||
name: 'PageNav',
|
||||
props: ['sidebarItems'],
|
||||
computed: {
|
||||
prev () {
|
||||
return resolvePageLink(LINK_TYPES.PREV, this)
|
||||
},
|
||||
|
||||
next () {
|
||||
return resolvePageLink(LINK_TYPES.NEXT, this)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showTooltip(e) {
|
||||
this.isShowTooltip = true
|
||||
const tooltipEle = this.$refs.tooltip
|
||||
|
||||
tooltipEle.textContent = e.target.dataset.tooltip
|
||||
const clientW = document.body.clientWidth
|
||||
const X = e.clientX
|
||||
const tooltipEleStyle = tooltipEle.style
|
||||
|
||||
if (X < clientW/2) {
|
||||
tooltipEleStyle.right = null
|
||||
tooltipEleStyle.left = X + 10 + 'px'
|
||||
} else {
|
||||
tooltipEleStyle.left = null
|
||||
tooltipEleStyle.right = clientW - X + 10 + 'px'
|
||||
}
|
||||
tooltipEleStyle.top = e.clientY + 10 + 'px'
|
||||
},
|
||||
|
||||
hideTooltip() {
|
||||
this.isShowTooltip = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function resolvePrev (page, items) {
|
||||
return find(page, items, -1)
|
||||
}
|
||||
|
||||
function resolveNext (page, items) {
|
||||
return find(page, items, 1)
|
||||
}
|
||||
|
||||
const LINK_TYPES = {
|
||||
NEXT: {
|
||||
resolveLink: resolveNext,
|
||||
getThemeLinkConfig: ({ nextLinks }) => nextLinks,
|
||||
getPageLinkConfig: ({ frontmatter }) => frontmatter.next
|
||||
},
|
||||
PREV: {
|
||||
resolveLink: resolvePrev,
|
||||
getThemeLinkConfig: ({ prevLinks }) => prevLinks,
|
||||
getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
|
||||
}
|
||||
}
|
||||
|
||||
function resolvePageLink (
|
||||
linkType,
|
||||
{ $themeConfig, $page, $route, $site, sidebarItems }
|
||||
) {
|
||||
const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
|
||||
|
||||
// Get link config from theme
|
||||
const themeLinkConfig = getThemeLinkConfig($themeConfig)
|
||||
|
||||
// Get link config from current page
|
||||
const pageLinkConfig = getPageLinkConfig($page)
|
||||
|
||||
// Page link config will overwrite global theme link config if defined
|
||||
const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
|
||||
|
||||
if (link === false) {
|
||||
return
|
||||
} else if (isString(link)) {
|
||||
return resolvePage($site.pages, link, $route.path)
|
||||
} else {
|
||||
return resolveLink($page, sidebarItems)
|
||||
}
|
||||
}
|
||||
|
||||
function find (page, items, offset) {
|
||||
const res = []
|
||||
flatten(items, res)
|
||||
for (let i = 0; i < res.length; i++) {
|
||||
const cur = res[i]
|
||||
if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
|
||||
return res[i + offset]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function flatten (items, res) {
|
||||
for (let i = 0, l = items.length; i < l; i++) {
|
||||
if (items[i].type === 'group') {
|
||||
flatten(items[i].children || [], res)
|
||||
} else {
|
||||
res.push(items[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="stylus">
|
||||
@require '../styles/wrapper.styl'
|
||||
|
||||
.page-nav
|
||||
@extend $wrapper
|
||||
padding-top 1rem
|
||||
padding-bottom 0
|
||||
.inner
|
||||
min-height 2rem
|
||||
margin-top 0
|
||||
border-top 1px solid $borderColor
|
||||
padding-top 1rem
|
||||
overflow auto // clear float
|
||||
.next
|
||||
float right
|
||||
|
||||
|
||||
.page-nav-centre-wrap
|
||||
.page-nav-centre
|
||||
position fixed
|
||||
top 50%
|
||||
width 80px
|
||||
height 70px
|
||||
margin-top -35px
|
||||
outline 0
|
||||
transition all .2s
|
||||
@media (max-width: 1340px)
|
||||
width 50px
|
||||
@media (max-width: 960px)
|
||||
display none
|
||||
&:hover
|
||||
background rgba(153, 153, 153, .15)
|
||||
&:before
|
||||
content: ""
|
||||
display block
|
||||
width 12px
|
||||
height 12px
|
||||
border-top 2px solid #999
|
||||
border-right 2px solid #999
|
||||
position absolute
|
||||
top 0
|
||||
right 0
|
||||
bottom 0
|
||||
left 0
|
||||
margin auto
|
||||
.tooltip
|
||||
background rgba(0, 0, 0, .5)
|
||||
color #fff
|
||||
padding 4px 8px
|
||||
font-size 13px
|
||||
border-radius 3px
|
||||
position fixed
|
||||
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)
|
||||
.no-sidebar .page-nav-centre-wrap .page-nav-centre-prev
|
||||
-webkit-transform translateX(0)
|
||||
transform translateX(0)
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
$wrapper
|
||||
max-width $contentWidth
|
||||
margin 0 auto
|
||||
padding 2rem 2.5rem
|
||||
@media (max-width: $MQNarrow)
|
||||
padding 2rem
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
padding 1.5rem
|
||||
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
export const hashRE = /#.*$/
|
||||
export const extRE = /\.(md|html)$/
|
||||
export const endingSlashRE = /\/$/
|
||||
export const outboundRE = /^[a-z]+:/i
|
||||
|
||||
export function normalize (path) {
|
||||
return decodeURI(path)
|
||||
.replace(hashRE, '')
|
||||
.replace(extRE, '')
|
||||
}
|
||||
|
||||
export function getHash (path) {
|
||||
const match = path.match(hashRE)
|
||||
if (match) {
|
||||
return match[0]
|
||||
}
|
||||
}
|
||||
|
||||
export function isExternal (path) {
|
||||
return outboundRE.test(path)
|
||||
}
|
||||
|
||||
export function isMailto (path) {
|
||||
return /^mailto:/.test(path)
|
||||
}
|
||||
|
||||
export function isTel (path) {
|
||||
return /^tel:/.test(path)
|
||||
}
|
||||
|
||||
export function ensureExt (path) {
|
||||
if (isExternal(path)) {
|
||||
return path
|
||||
}
|
||||
const hashMatch = path.match(hashRE)
|
||||
const hash = hashMatch ? hashMatch[0] : ''
|
||||
const normalized = normalize(path)
|
||||
|
||||
if (endingSlashRE.test(normalized)) {
|
||||
return path
|
||||
}
|
||||
return normalized + '.html' + hash
|
||||
}
|
||||
|
||||
export function isActive (route, path) {
|
||||
const routeHash = route.hash
|
||||
const linkHash = getHash(path)
|
||||
if (linkHash && routeHash !== linkHash) {
|
||||
return false
|
||||
}
|
||||
const routePath = normalize(route.path)
|
||||
const pagePath = normalize(path)
|
||||
return routePath === pagePath
|
||||
}
|
||||
|
||||
export function resolvePage (pages, rawPath, base) {
|
||||
if (isExternal(rawPath)) {
|
||||
return {
|
||||
type: 'external',
|
||||
path: rawPath
|
||||
}
|
||||
}
|
||||
if (base) {
|
||||
rawPath = resolvePath(rawPath, base)
|
||||
}
|
||||
const path = normalize(rawPath)
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
if (normalize(pages[i].regularPath) === path) {
|
||||
return Object.assign({}, pages[i], {
|
||||
type: 'page',
|
||||
path: ensureExt(pages[i].path)
|
||||
})
|
||||
}
|
||||
}
|
||||
console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
|
||||
return {}
|
||||
}
|
||||
|
||||
function resolvePath (relative, base, append) {
|
||||
const firstChar = relative.charAt(0)
|
||||
if (firstChar === '/') {
|
||||
return relative
|
||||
}
|
||||
|
||||
if (firstChar === '?' || firstChar === '#') {
|
||||
return base + relative
|
||||
}
|
||||
|
||||
const stack = base.split('/')
|
||||
|
||||
// remove trailing segment if:
|
||||
// - not appending
|
||||
// - appending to trailing slash (last segment is empty)
|
||||
if (!append || !stack[stack.length - 1]) {
|
||||
stack.pop()
|
||||
}
|
||||
|
||||
// resolve relative path
|
||||
const segments = relative.replace(/^\//, '').split('/')
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
const segment = segments[i]
|
||||
if (segment === '..') {
|
||||
stack.pop()
|
||||
} else if (segment !== '.') {
|
||||
stack.push(segment)
|
||||
}
|
||||
}
|
||||
|
||||
// ensure leading slash
|
||||
if (stack[0] !== '') {
|
||||
stack.unshift('')
|
||||
}
|
||||
|
||||
return stack.join('/')
|
||||
}
|
||||
|
||||
/**
|
||||
* @param { Page } page
|
||||
* @param { string } regularPath
|
||||
* @param { SiteData } site
|
||||
* @param { string } localePath
|
||||
* @returns { SidebarGroup }
|
||||
*/
|
||||
export function resolveSidebarItems (page, regularPath, site, localePath) {
|
||||
const { pages, themeConfig } = site
|
||||
|
||||
const localeConfig = localePath && themeConfig.locales
|
||||
? themeConfig.locales[localePath] || themeConfig
|
||||
: themeConfig
|
||||
|
||||
const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
|
||||
if (pageSidebarConfig === 'auto') {
|
||||
return resolveHeaders(page)
|
||||
}
|
||||
|
||||
const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
|
||||
if (!sidebarConfig) {
|
||||
return []
|
||||
} else {
|
||||
const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
|
||||
return config
|
||||
? config.map(item => resolveItem(item, pages, base))
|
||||
: []
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param { Page } page
|
||||
* @returns { SidebarGroup }
|
||||
*/
|
||||
function resolveHeaders (page) {
|
||||
const headers = groupHeaders(page.headers || [])
|
||||
return [{
|
||||
type: 'group',
|
||||
collapsable: false,
|
||||
title: page.title,
|
||||
path: null,
|
||||
children: headers.map(h => ({
|
||||
type: 'auto',
|
||||
title: h.title,
|
||||
basePath: page.path,
|
||||
path: page.path + '#' + h.slug,
|
||||
children: h.children || []
|
||||
}))
|
||||
}]
|
||||
}
|
||||
|
||||
export function groupHeaders (headers) {
|
||||
// group h3s under h2
|
||||
headers = headers.map(h => Object.assign({}, h))
|
||||
let lastH2
|
||||
headers.forEach(h => {
|
||||
if (h.level === 2) {
|
||||
lastH2 = h
|
||||
} else if (lastH2) {
|
||||
(lastH2.children || (lastH2.children = [])).push(h)
|
||||
}
|
||||
})
|
||||
return headers.filter(h => h.level === 2)
|
||||
}
|
||||
|
||||
export function resolveNavLinkItem (linkItem) {
|
||||
return Object.assign(linkItem, {
|
||||
type: linkItem.items && linkItem.items.length ? 'links' : 'link'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param { Route } route
|
||||
* @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
|
||||
* @returns { base: string, config: SidebarConfig }
|
||||
*/
|
||||
export function resolveMatchingConfig (regularPath, config) {
|
||||
if (Array.isArray(config)) {
|
||||
return {
|
||||
base: '/',
|
||||
config: config
|
||||
}
|
||||
}
|
||||
for (const base in config) {
|
||||
if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
|
||||
return {
|
||||
base,
|
||||
config: config[base]
|
||||
}
|
||||
}
|
||||
}
|
||||
return {}
|
||||
}
|
||||
|
||||
function ensureEndingSlash (path) {
|
||||
return /(\.html|\/)$/.test(path)
|
||||
? path
|
||||
: path + '/'
|
||||
}
|
||||
|
||||
function resolveItem (item, pages, base, groupDepth = 1) {
|
||||
if (typeof item === 'string') {
|
||||
return resolvePage(pages, item, base)
|
||||
} else if (Array.isArray(item)) {
|
||||
return Object.assign(resolvePage(pages, item[0], base), {
|
||||
title: item[1]
|
||||
})
|
||||
} else {
|
||||
if (groupDepth > 3) {
|
||||
console.error(
|
||||
'[vuepress] detected a too deep nested sidebar group.'
|
||||
)
|
||||
}
|
||||
const children = item.children || []
|
||||
if (children.length === 0 && item.path) {
|
||||
return Object.assign(resolvePage(pages, item.path, base), {
|
||||
title: item.title
|
||||
})
|
||||
}
|
||||
return {
|
||||
type: 'group',
|
||||
path: item.path,
|
||||
title: item.title,
|
||||
sidebarDepth: item.sidebarDepth,
|
||||
children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
|
||||
collapsable: item.collapsable !== false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: 水平垂直居中的几种方式
|
||||
date: 2020-03-13 16:13:43
|
||||
permalink: /pages/cb7cb251adba4bf7
|
||||
---
|
||||
# 水平垂直居中的几种方式
|
||||
|
||||
<iframe height="880" style="width: 100%;" scrolling="no" title="水平垂直居中的几种方式" src="https://codepen.io/xugaoyi/embed/poJLeYv?height=880&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/xugaoyi/pen/poJLeYv'>水平垂直居中的几种方式</a> by xugaoyi
|
||||
(<a href='https://codepen.io/xugaoyi'>@xugaoyi</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
title: 水平垂直居中的几种方式-案例
|
||||
date: 2020-03-13 16:13:43
|
||||
permalink: /pages/cb7cb251adba4bf7
|
||||
---
|
||||
# 水平垂直居中的几种方式-案例
|
||||
|
||||
<iframe height="880" style="width: 100%;" scrolling="no" title="水平垂直居中的几种方式" src="https://codepen.io/xugaoyi/embed/poJLeYv?height=880&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
|
||||
See the Pen <a href='https://codepen.io/xugaoyi/pen/poJLeYv'>水平垂直居中的几种方式</a> by xugaoyi
|
||||
(<a href='https://codepen.io/xugaoyi'>@xugaoyi</a>) on <a href='https://codepen.io'>CodePen</a>.
|
||||
</iframe>
|
||||
|
||||
|
|
@ -33,11 +33,11 @@ aside:
|
|||
title: 听音乐
|
||||
link: https://music.163.com/#/playlist?id=755597173
|
||||
blogger:
|
||||
name: Evan
|
||||
name: Evan Xu
|
||||
slogan: 前端界的小学生
|
||||
footer:
|
||||
year: 2019
|
||||
content: xugaoyi
|
||||
content: Evan Xu
|
||||
bgImg: /img/footer.png
|
||||
---
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue