分页功能优化、bug修复等
This commit is contained in:
xugaoyi
parent
8e33c60b98
commit
19890227bf
|
|
@ -36,6 +36,5 @@ git push -f $githubUrl master:gh-pages # 推送到github
|
|||
# git commit -m "${msg}"
|
||||
# git push -f $codingUrl master # 推送到coding
|
||||
|
||||
|
||||
cd - # 退回开始所在目录
|
||||
rm -rf docs/.vuepress/dist
|
||||
|
|
@ -21,7 +21,7 @@ module.exports = {
|
|||
markdown: {
|
||||
lineNumbers: true // 代码行号
|
||||
},
|
||||
theme: require.resolve('../../theme-vdoing'), // 使用的主题
|
||||
theme: require.resolve('../../vuepress-theme-vdoing'), // 使用的主题
|
||||
themeConfig: { // 主题配置
|
||||
nav,
|
||||
sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
|
||||
|
|
@ -47,11 +47,11 @@ module.exports = {
|
|||
// '图标地址1',
|
||||
// '图标地址2'
|
||||
// ],
|
||||
bodyBgImg: [
|
||||
'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
|
||||
'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
|
||||
'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
|
||||
], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
|
||||
// bodyBgImg: [
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175828.jpeg',
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
|
||||
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
|
||||
// ], // body背景大图，默认无。 单张图片 String || 多张图片 Array, 多张图片时每隔15秒换一张。
|
||||
|
||||
|
||||
// categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
|
||||
|
|
|
|||
|
|
@ -137,11 +137,7 @@ module.exports = {
|
|||
|
||||
> 访问变量时，如 `$frontmatter` 或 `window`等，请使用 **EJS** 语法。因为在配置中不能使用回调函数，会被vuepress过滤，因此使用 **EJS** 语法。 ——插件作者文档说明
|
||||
>
|
||||
> **安装EJS**
|
||||
>
|
||||
> ```sh
|
||||
> npm i ejs
|
||||
> ```
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
15
package.json
15
package.json
|
|
@ -11,23 +11,22 @@
|
|||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"chalk": "^4.0.0",
|
||||
"ejs": "^3.0.1",
|
||||
"inquirer": "^7.1.0",
|
||||
"json2yaml": "^1.1.0",
|
||||
"moment": "^2.24.0",
|
||||
"vuepress": "^1.1.0",
|
||||
"moment": "^2.25.3",
|
||||
"vuepress": "^1.4.1",
|
||||
"vuepress-plugin-baidu-autopush": "^1.0.1",
|
||||
"vuepress-plugin-baidu-tongji": "^1.0.1",
|
||||
"vuepress-plugin-demo-block": "^0.7.2",
|
||||
"vuepress-plugin-one-click-copy": "^1.0.1",
|
||||
"vuepress-plugin-thirdparty-search": "^1.0.0",
|
||||
"vuepress-plugin-one-click-copy": "^1.0.2",
|
||||
"vuepress-plugin-thirdparty-search": "^1.0.2",
|
||||
"vuepress-plugin-zooming": "^1.1.7",
|
||||
"yamljs": "^0.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@better-scroll/core": "^2.0.0-beta.4",
|
||||
"@better-scroll/slide": "^2.0.0-beta.4",
|
||||
"@better-scroll/core": "^2.0.0-beta.6",
|
||||
"@better-scroll/slide": "^2.0.0-beta.6",
|
||||
"good-storage": "^1.1.1",
|
||||
"vuepress-plugin-comment": "^0.7.2"
|
||||
"vuepress-plugin-comment": "^0.7.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="body-bg" :style="`background-image: url(${bgImg})`"></div>
|
||||
<div class="body-bg" :style="`background: url(${bgImg}) center center / cover no-repeat`"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -40,6 +40,5 @@ export default {
|
|||
z-index -999999
|
||||
height 100vh
|
||||
width 100vw
|
||||
background-size 100% auto
|
||||
transition background .5s
|
||||
</style>
|
||||
|
|
@ -55,6 +55,9 @@ export default {
|
|||
} else {
|
||||
this.total = this.$sortPosts.length
|
||||
}
|
||||
if (this.$route.query.p) {
|
||||
this.currentPage = Number(this.$route.query.p)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 增强用户体验
|
||||
|
|
@ -73,7 +76,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
'$route.query.category'() {
|
||||
this.category = this.$route.query.category
|
||||
if (this.category) {
|
||||
this.total = this.$groupPosts.categories[this.category].length
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="home-wrapper">
|
||||
|
||||
<!-- banner块 s -->
|
||||
<div class="banner" :style="bannerBg">
|
||||
<div class="banner" :style="bannerBg" v-if="showBanner">
|
||||
<div class="banner-conent" :style="!homeData.features && `padding-top: 7rem`">
|
||||
<header class="hero">
|
||||
<img v-if="homeData.heroImage" :src="$withBase(homeData.heroImage)" :alt="homeData.heroAlt || 'hero'" />
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
>
|
||||
<div class="feature" v-for="(feature, index) in homeData.features" :key="index">
|
||||
<router-link :to="feature.link">
|
||||
<img class="image_title" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
|
||||
<img class="feature-img" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</router-link>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
<div class="slide-banner-wrapper">
|
||||
<div class="slide-item" v-for="(feature, index) in homeData.features" :key="index">
|
||||
<router-link :to="feature.link">
|
||||
<img class="image_title" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
|
||||
<img class="feature-img" :src="$withBase(feature.imgUrl)" :alt="feature.title" />
|
||||
<h2>{{ feature.title }}</h2>
|
||||
<p>{{ feature.details }}</p>
|
||||
</router-link>
|
||||
|
|
@ -112,6 +112,7 @@ export default {
|
|||
data(){
|
||||
return {
|
||||
isMQMobile: false,
|
||||
|
||||
slide: null,
|
||||
currentPageIndex: 0,
|
||||
playTimer: 0,
|
||||
|
|
@ -128,6 +129,11 @@ export default {
|
|||
},
|
||||
beforeMount(){
|
||||
this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
|
||||
|
||||
if (this.$route.query.p) {
|
||||
this.currentPage = Number(this.$route.query.p)
|
||||
}
|
||||
|
||||
},
|
||||
mounted() {
|
||||
if (this.isMQMobile) {
|
||||
|
|
@ -149,6 +155,13 @@ export default {
|
|||
clearTimeout(this.playTimer)
|
||||
this.slide && this.slide.destroy()
|
||||
},
|
||||
watch: {
|
||||
'$route.query.p'() {
|
||||
if(!this.$route.query.p){
|
||||
this.currentPage = 1
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
clearTimeout(this.playTimer)
|
||||
|
|
@ -188,10 +201,18 @@ export default {
|
|||
},
|
||||
handlePagination(i) { // 分页
|
||||
this.currentPage = i
|
||||
}
|
||||
},
|
||||
getScrollTop () {
|
||||
return window.pageYOffset
|
||||
|| document.documentElement.scrollTop
|
||||
|| document.body.scrollTop
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
showBanner() { // 当分页不在第一页时隐藏banner栏
|
||||
return this.$route.query.p && this.$route.query.p != 1 ? false : true
|
||||
},
|
||||
bannerBg() {
|
||||
if (this.homeData.bannerBgImg) {
|
||||
return `background: url(${this.$withBase(this.homeData.bannerBgImg)}) center center / cover no-repeat`
|
||||
|
|
@ -275,7 +296,7 @@ export default {
|
|||
text-align center
|
||||
a
|
||||
color lighten($bannerTextColor,10%)
|
||||
.image_title
|
||||
.feature-img
|
||||
width 11rem
|
||||
height 11rem
|
||||
animation heart 1.2s ease-in-out 0s infinite alternate
|
||||
|
|
@ -288,7 +309,7 @@ export default {
|
|||
p
|
||||
opacity 0.8
|
||||
.feature:hover
|
||||
.image_title
|
||||
.feature-img
|
||||
animation-play-state: running
|
||||
h2,p
|
||||
opacity .7
|
||||
|
|
@ -309,17 +330,16 @@ export default {
|
|||
height 300px
|
||||
width 100%
|
||||
text-align center
|
||||
.image_title
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
h2
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
p
|
||||
color: #b0b6be;
|
||||
a
|
||||
color lighten($bannerTextColor,10%)
|
||||
.feature-img
|
||||
width 10rem
|
||||
height 10rem
|
||||
h2
|
||||
font-size 1.1rem
|
||||
font-weight 500
|
||||
border-bottom none
|
||||
padding-bottom 0
|
||||
.docs-wrapper
|
||||
position absolute
|
||||
bottom 25px
|
||||
|
|
@ -331,10 +351,16 @@ export default {
|
|||
width 8px
|
||||
height 8px
|
||||
border-radius 50%
|
||||
background #2F455A
|
||||
background var(--textColor)
|
||||
opacity .9
|
||||
&.active
|
||||
background #517EA9
|
||||
|
||||
opacity .5
|
||||
|
||||
// 分页不在第一页时，隐藏banner栏
|
||||
.main-wrapper
|
||||
margin-top ($navbarHeight + .9rem)
|
||||
.banner + *
|
||||
margin-top 2rem
|
||||
|
||||
@keyframes heart
|
||||
from{transform:translate(0,0)}
|
||||
|
|
@ -351,11 +377,12 @@ export default {
|
|||
.description
|
||||
font-size 1rem
|
||||
.feature
|
||||
h2
|
||||
font-size 1.1rem
|
||||
.image_title
|
||||
width 10rem
|
||||
height 10rem
|
||||
a
|
||||
h2
|
||||
font-size 1.1rem
|
||||
.feature-img
|
||||
width 9rem
|
||||
height 9rem
|
||||
|
||||
// 719px以下
|
||||
@media (max-width: $MQMobile)
|
||||
|
|
@ -365,26 +392,6 @@ export default {
|
|||
.features
|
||||
display none!important
|
||||
|
||||
.main-wrapper
|
||||
margin .9rem 0
|
||||
padding 0
|
||||
display block
|
||||
.main-left
|
||||
.post-list
|
||||
margin-bottom 3rem
|
||||
.post
|
||||
border-radius 0
|
||||
.pagination
|
||||
margin-bottom 3rem
|
||||
.main-right
|
||||
.blogger-wrapper
|
||||
display none
|
||||
.card-box
|
||||
margin 0 0 .9rem 0
|
||||
border-radius 0
|
||||
width 100%
|
||||
|
||||
|
||||
// 419px以下
|
||||
@media (max-width: $MQMobileNarrow)
|
||||
.home-wrapper
|
||||
|
|
@ -19,6 +19,7 @@
|
|||
display flex
|
||||
.main-left
|
||||
flex 1
|
||||
width 100%
|
||||
.theme-vdoing-content.card-box
|
||||
padding 1rem 1.5rem
|
||||
margin-bottom .9rem
|
||||
|
|
@ -33,4 +34,25 @@
|
|||
.card-box
|
||||
margin 0 0 .9rem .9rem
|
||||
padding .95rem
|
||||
|
||||
// 719px以下
|
||||
@media (max-width: $MQMobile)
|
||||
.main-wrapper
|
||||
margin .9rem 0
|
||||
padding 0
|
||||
display block
|
||||
.main-left
|
||||
.post-list
|
||||
margin-bottom 3rem
|
||||
.post
|
||||
border-radius 0
|
||||
.pagination
|
||||
margin-bottom 3rem
|
||||
.main-right
|
||||
.blogger-wrapper
|
||||
display none
|
||||
.card-box
|
||||
margin 0 0 .9rem 0
|
||||
border-radius 0
|
||||
width 100%
|
||||
</style>
|
||||
|
|
@ -135,6 +135,12 @@ export default {
|
|||
.repo-link
|
||||
margin-left 1.5rem
|
||||
|
||||
// 959
|
||||
@media (max-width: $MQNarrow)
|
||||
.nav-links
|
||||
.nav-item
|
||||
margin-left 1.2rem
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.nav-links
|
||||
.nav-item, .repo-link
|
||||
|
|
@ -108,7 +108,6 @@ $navbar-horizontal-padding = 1.5rem
|
|||
.links
|
||||
padding-left 1.5rem
|
||||
box-sizing border-box
|
||||
// background-color white
|
||||
white-space nowrap
|
||||
font-size 0.9rem
|
||||
position absolute
|
||||
|
|
@ -123,6 +122,12 @@ $navbar-horizontal-padding = 1.5rem
|
|||
.navbar
|
||||
transform translateY(-100%)
|
||||
|
||||
// 959
|
||||
@media (max-width: $MQNarrow)
|
||||
.navbar
|
||||
.site-name
|
||||
display none
|
||||
|
||||
@media (max-width: $MQMobile)
|
||||
.navbar
|
||||
padding-left 4rem
|
||||
|
|
@ -198,15 +198,15 @@ export default {
|
|||
@media (max-width: $MQMobile)
|
||||
.pagination
|
||||
> span // 左右按钮
|
||||
padding .8rem 1.5rem
|
||||
padding .9rem 1.5rem
|
||||
.pagination-list
|
||||
span
|
||||
width 2.3rem
|
||||
height 2.3rem
|
||||
line-height 2.3rem
|
||||
margin .2rem
|
||||
margin .25rem
|
||||
|
||||
@media (max-width: 460px)
|
||||
@media (max-width: 390px)
|
||||
.pagination
|
||||
> span // 左右按钮
|
||||
padding .8rem 1.3rem
|
||||
|
|
@ -80,11 +80,19 @@ export default {
|
|||
this.setPosts()
|
||||
},
|
||||
mounted() {
|
||||
this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 90
|
||||
// this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240
|
||||
},
|
||||
watch: {
|
||||
currentPage() {
|
||||
window.scrollTo({ top: this.postListOffsetTop }) // behavior: 'smooth'
|
||||
this.$router.push({
|
||||
query: {
|
||||
...this.$route.query,
|
||||
p: this.currentPage
|
||||
}
|
||||
})
|
||||
// setTimeout(() => {
|
||||
// window.scrollTo({ top: this.postListOffsetTop }) // behavior: 'smooth'
|
||||
// },0)
|
||||
this.setPosts()
|
||||
},
|
||||
category() {
|
||||
|
|
@ -110,12 +118,12 @@ export default {
|
|||
|
||||
this.sortPosts = posts.slice((currentPage-1)*perPage, currentPage*perPage)
|
||||
},
|
||||
getElementToPageTop(el) {
|
||||
if(el && el.parentElement) {
|
||||
return this.getElementToPageTop(el.parentElement) + el.offsetTop
|
||||
}
|
||||
return el.offsetTop
|
||||
}
|
||||
// getElementToPageTop(el) {
|
||||
// if(el && el.parentElement) {
|
||||
// return this.getElementToPageTop(el.parentElement) + el.offsetTop
|
||||
// }
|
||||
// return el.offsetTop
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -55,6 +55,9 @@ export default {
|
|||
} else {
|
||||
this.total = this.$sortPosts.length
|
||||
}
|
||||
if (this.$route.query.p) {
|
||||
this.currentPage = Number(this.$route.query.p)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handlePagination(i) { // 分页
|
||||
|
|
@ -62,7 +65,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
'$route.query.tag'() {
|
||||
this.tag = this.$route.query.tag
|
||||
if (this.tag) {
|
||||
this.total = this.$groupPosts.tags[this.tag].length
|
||||
|
|
@ -85,8 +85,7 @@ export default {
|
|||
.article-title
|
||||
border-bottom 1px solid var(--borderColor)
|
||||
font-size 1.3rem
|
||||
// font-weight bold
|
||||
padding 1rem 0 .5rem 1rem
|
||||
padding 1rem
|
||||
a
|
||||
font-size 1.2rem
|
||||
color $accentColor
|
||||
|
|
@ -1,8 +1,11 @@
|
|||
{
|
||||
"name": "vuepress-theme-vdoing",
|
||||
"version": "1.0.0-beta.1",
|
||||
"author": {
|
||||
"name": "Evan Xu"
|
||||
"name": "gaoyi(Evan) Xu"
|
||||
},
|
||||
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
|
||||
"homepage": "https://github.com/xugaoyi/vuepress-theme-vdoing#readme",
|
||||
"bugs": {
|
||||
"url": "https://github.com/xugaoyi/vuepress-theme-vdoing/issues"
|
||||
},
|
||||
|
|
@ -17,8 +20,6 @@
|
|||
"vuepress-plugin-container": "^2.0.2",
|
||||
"vuepress-plugin-smooth-scroll": "^0.0.3"
|
||||
},
|
||||
"description": "Vdoing theme for VuePress",
|
||||
"homepage": "https://github.com/xugaoyi/vuepress-theme-vdoing#readme",
|
||||
"keywords": [
|
||||
"documentation",
|
||||
"vue",
|
||||
|
|
@ -35,12 +36,8 @@
|
|||
"email": "894072666@qq.com"
|
||||
}
|
||||
],
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/xugaoyi/vuepress-theme-vdoing.git"
|
||||
},
|
||||
"version": "1.0.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@
|
|||
//***vdoing主题-变量***//
|
||||
|
||||
// 颜色
|
||||
|
||||
$bannerTextColor = #fff // 首页banner区(博客标题)文本颜色
|
||||
$accentColor = #11A8CD
|
||||
$arrowBgColor = #ccc
|
||||
|
|
@ -67,8 +68,6 @@ $lineNumbersWrapperWidth = 2.5rem
|
|||
--codeColor: #fff
|
||||
codeThemeDark()
|
||||
|
||||
//https://cdn.jsdelivr.net/gh/xaoxuu/cdn-wallpaper/abstract/B18FCBB3-67FD-48CC-B4F3-457BA145F17A.jpeg
|
||||
|
||||
// 阅读模式
|
||||
.theme-mode-read
|
||||
--badyBg: rgb(240,240,208)
|
||||
Loading…
Reference in New Issue