lisang
/
vuepress-theme-vdoing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: v1.12.0

This commit is contained in:
xugaoyi 2022-06-01 11:42:01 +08:00
parent 9f5a20eb28
commit b069788b16
19 changed files with 170 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/.vuepress/config.ts
View File

@ -130,12 +130,15 @@ export default defineConfig4CustomTheme<VdoingThemeConfig>({
// archive: false, // 是否打开归档功能，默认true
// categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
// pageStyle: 'line', // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框
// 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秒换一张。
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~ 1.0, 默认0.5
// ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时隔bodyBgImgInterval切换一张。
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~1.0, 默认0.5
// bodyBgImgInterval: 15, // body多张背景图时的切换间隔, 默认15，单位s
// titleBadge: false, // 文章标题前的图标是否显示，默认true
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
// '图标地址1',

2
package.json
View File

@ -24,7 +24,7 @@
"vuepress-plugin-one-click-copy": "^1.0.2",
"vuepress-plugin-thirdparty-search": "^1.0.2",
"vuepress-plugin-zooming": "^1.1.7",
"vuepress-theme-vdoing": "^1.11.3",
"vuepress-theme-vdoing": "^1.12.0",
"yamljs": "^0.3.0"
}
}

5
vdoing/components/ArchivesPage.vue
View File

@ -123,6 +123,11 @@ export default {
<style lang='stylus'>
@require '../styles/wrapper.styl'
.theme-style-line
.archives-page .theme-vdoing-wrapper
box-shadow 0 0
// border 1px solid var(--borderColor)
// border-radius 5px
.archives-page
.theme-vdoing-wrapper
@extend $vdoing-wrapper

4
vdoing/components/ArticleInfo.vue
View File

@ -140,6 +140,10 @@ export default {
<style lang='stylus' scoped>
@require '../styles/wrapper.styl'
.theme-style-line
.articleInfo-wrap
.articleInfo
padding-top 0.5rem
.articleInfo-wrap
@extend $wrapper
position relative

12
vdoing/components/BodyBgImg.vue
View File

@ -8,14 +8,14 @@
<script>
import { type } from '../util'
export default {
data () {
data() {
return {
bgImg: '',
opacity: 0.5
}
},
mounted () {
let { bodyBgImg, bodyBgImgOpacity,bodyBgImgInterval = 15 } = this.$themeConfig
mounted() {
let { bodyBgImg, bodyBgImgOpacity, bodyBgImgInterval = 15 } = this.$themeConfig
if (type(bodyBgImg) === 'string') {
this.bgImg = bodyBgImg
@ -30,6 +30,12 @@ export default {
count = 0
}
this.bgImg = bodyBgImg[count]
// 预加载下一张图片
if (bodyBgImg[count + 1]) {
const img = new Image()
img.src = bodyBgImg[count + 1]
}
}, bodyBgImgInterval * 1000);
}

17
vdoing/components/CategoriesPage.vue
View File

@ -38,7 +38,7 @@ import Pagination from '@theme/components/Pagination'
import CategoriesBar from '@theme/components/CategoriesBar'
export default {
data () {
data() {
return {
category: '',
total: 0, // 总长
@ -47,7 +47,7 @@ export default {
}
},
components: { MainLayout, PostList, Pagination, CategoriesBar },
mounted () {
mounted() {
const queryCategory = this.$route.query.category
if (queryCategory) {
this.category = queryCategory
@ -70,12 +70,12 @@ export default {
}
},
methods: {
handlePagination (i) { // 分页
handlePagination(i) { // 分页
this.currentPage = i
}
},
watch: {
'$route.query.category' (category) {
'$route.query.category'(category) {
this.category = category ? decodeURIComponent(category) : ''
if (this.category) {
this.total = this.$groupPosts.categories[this.category].length
@ -128,4 +128,13 @@ export default {
display block
.categories
max-height 12.3rem
.theme-style-line
.categories-page
.main-left
.categories-wrapper
@media (max-width $MQMobile)
margin-top -0.91rem
margin-bottom -1px
padding 0.9rem 0.2rem
padding-bottom 0.5rem
</style>

9
vdoing/components/Home.vue
View File

@ -469,12 +469,13 @@ export default {
margin-top 2rem
.main-left
.card-box
margin-bottom 0.9rem
margin-bottom 2rem
.pagination
margin-bottom 4rem
margin-bottom 3rem
.theme-vdoing-content
padding 0 2rem
overflow hidden
border none
&>:first-child
padding-top 2rem
&>:last-child
@ -534,4 +535,8 @@ export default {
.feature
h2
font-size 1.25rem
.theme-style-line
.main-wrapper
@media (max-width 719px)
margin-top -1px
</style>

7
vdoing/components/MainLayout.vue
View File

@ -32,7 +32,7 @@
@media (max-width 900px)
width 235px
.card-box
margin 0 0 0.9rem 0.9rem
margin 0 0 0.8rem 0.8rem
padding-top 0.95rem
padding-bottom 0.95rem
// 719px以下
@ -56,4 +56,9 @@
margin 0 0 0.9rem 0
border-radius 0
width 100%
.theme-style-line
.main-wrapper
.main-right
.card-box
margin -1px 0 0 0
</style>

11
vdoing/components/Page.vue
View File

@ -3,6 +3,7 @@
<main class="page">
<div :class="`theme-vdoing-wrapper ${bgStyle}`">
<ArticleInfo v-if="isArticle()" />
<div v-else class="placeholder" />
<component
class="theme-vdoing-content"
v-if="pageComponent"
@ -124,6 +125,16 @@ export default {
padding-top: ($navbarHeight + 1.5rem)
>*
@extend $vdoing-wrapper
.theme-style-line
.page
@media (min-width $MQMobile)
padding-top $navbarHeight
&>*
&:not(.footer)
box-shadow 0 0
.placeholder
@media (min-width 720px)
height 1.2rem
.theme-vdoing-wrapper
.content-wrapper
position relative

77
vdoing/components/Pagination.vue
View File

@ -2,36 +2,32 @@
<div class="pagination">
<span
class="card-box prev iconfont icon-jiantou-zuo"
:class="{disabled: currentPage === 1}"
:class="{ disabled: currentPage === 1 }"
@click="goPrex()"
>
<p>上一页</p>
</span>
<!-- 分页在5页及以下时 -->
<div
class="pagination-list"
v-if="pages <= 5"
>
<div class="pagination-list" v-if="pages <= 5">
<span
class="card-box"
v-for="item in pages"
:key="item"
:class="{active: currentPage === item}"
:class="{ active: currentPage === item }"
@click="goIndex(item)"
>{{item}}</span>
>{{ item }}</span
>
</div>
<!-- 分页在5页以上 -->
<div
class="pagination-list"
v-else
>
<div class="pagination-list" v-else>
<!-- 一号位 -->
<span
class="card-box"
:class="{active: currentPage === 1}"
:class="{ active: currentPage === 1 }"
@click="goIndex(1)"
>1</span>
>1</span
>
<!-- 二号位 -->
<span
@ -44,42 +40,46 @@
<span
class="card-box"
v-show="currentPage <= 3"
:class="{active: currentPage === 2}"
:class="{ active: currentPage === 2 }"
@click="goIndex(2)"
>2</span>
>2</span
>
<!-- 三号位 -->
<span
class="card-box"
:class="{active: currentPage >= 3 && currentPage <= (pages - 2)}"
:class="{ active: currentPage >= 3 && currentPage <= pages - 2 }"
@click="goIndex(threeNum())"
>{{ threeNum() }}</span>
>{{ threeNum() }}</span
>
<!-- 四号位 -->
<span
class="ellipsis ell-four"
v-show="currentPage < (pages - 2)"
v-show="currentPage < pages - 2"
@click="goIndex(currentPage + 2)"
title="下两页"
/>
<span
class="card-box"
v-show="currentPage >= (pages - 2)"
:class="{active: currentPage === pages-1}"
@click="goIndex(pages-1)"
>{{ pages-1 }}</span>
v-show="currentPage >= pages - 2"
:class="{ active: currentPage === pages - 1 }"
@click="goIndex(pages - 1)"
>{{ pages - 1 }}</span
>
<!-- 五号位 -->
<span
class="card-box"
:class="{active: currentPage === pages}"
:class="{ active: currentPage === pages }"
@click="goIndex(pages)"
>{{pages}}</span>
>{{ pages }}</span
>
</div>
<span
class="card-box next iconfont icon-jiantou-you"
:class="{disabled: currentPage === pages}"
:class="{ disabled: currentPage === pages }"
@click="goNext()"
>
<p>下一页</p>
@ -104,12 +104,12 @@ export default {
}
},
computed: {
pages () { // 总页数
pages() { // 总页数
return Math.ceil(this.total / this.perPage)
}
},
methods: {
threeNum () { // 三号位页码计算
threeNum() { // 三号位页码计算
let num = 3
const currentPage = this.currentPage
const pages = this.pages
@ -122,24 +122,24 @@ export default {
}
return num
},
goPrex () {
goPrex() {
let currentPage = this.currentPage
if (currentPage > 1) {
this.handleEmit(--currentPage)
}
},
goNext () {
goNext() {
let currentPage = this.currentPage
if (currentPage < this.pages) {
this.handleEmit(++currentPage)
}
},
goIndex (i) {
goIndex(i) {
if (i !== this.currentPage) {
this.handleEmit(i)
}
},
handleEmit (i) {
handleEmit(i) {
this.$emit('getCurrentPage', i)
}
}
@ -151,6 +151,9 @@ export default {
position relative
height 60px
text-align center
@media (max-width 720px)
margin-left 1px
margin-right 1px
span
line-height 1rem
opacity 0.9
@ -176,16 +179,20 @@ export default {
top 0
padding 1rem 1.2rem
font-size 0.95rem
&::before
font-size 0.4rem
&.disabled
color rgba(125, 125, 125, 0.5)
&.prev
left 0
border-top-right-radius 32px
border-bottom-right-radius 32px
// border-top-right-radius 32px
// border-bottom-right-radius 32px
&::before
margin-right 0.3rem
&.next
right 0
border-top-left-radius 32px
border-bottom-left-radius 32px
// border-top-left-radius 32px
// border-bottom-left-radius 32px
&::before
float right
margin-left 0.3rem

20
vdoing/components/PostList.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="post-list" ref="postList">
<div class="post-list card-box" ref="postList">
<transition-group tag="div" name="post">
<div
class="post card-box"
class="post"
:class="item.frontmatter.sticky && 'iconfont icon-zhiding'"
v-for="item in sortPosts"
:key="item.key"
@ -169,8 +169,11 @@ export default {
.post
position relative
padding 1rem 1.5rem
margin-bottom 0.9rem
// margin-bottom 0.9rem
transition all 0.3s
border-bottom 1px solid var(--borderColor)
&:last-child
border-bottom none
&.post-leave-active
display none
&.post-enter
@ -243,4 +246,15 @@ export default {
float right
font-size 0.8rem
margin 0.1rem 0 0 0.2rem
.theme-style-line
.post-list
border 1px solid var(--borderColor)
// border-bottom none
border-radius 5px
overflow hidden
.post
// margin-bottom 0
// border none
// border-bottom 1px solid var(--borderColor)
// border-radius 0
</style>

6
vdoing/components/RightMenu.vue
View File

@ -49,6 +49,10 @@ export default {
</script>
<style lang='stylus'>
.theme-style-line
.right-menu-wrapper
.right-menu-margin
border-left 1px solid var(--borderColor)
.right-menu-wrapper
width $rightMenuWidth
float right
@ -56,7 +60,7 @@ export default {
// margin-top -($navbarHeight *2 + 1.5rem)
position sticky
top 0
font-size 0.75rem
font-size 0.8rem
.right-menu-margin
margin-top: ($navbarHeight + 1rem)
border-radius 3px

23
vdoing/components/TagsPage.vue
View File

@ -7,11 +7,7 @@
:tagsData="$categoriesAndTags.tags"
:tag="tag"
/>
<PostList
:currentPage="currentPage"
:perPage="perPage"
:tag="tag"
/>
<PostList :currentPage="currentPage" :perPage="perPage" :tag="tag" />
<Pagination
:total="total"
:perPage="perPage"
@ -38,7 +34,7 @@ import Pagination from '@theme/components/Pagination'
import TagsBar from '@theme/components/TagsBar'
export default {
data () {
data() {
return {
tag: '',
total: 0, // 总长
@ -47,7 +43,7 @@ export default {
}
},
components: { MainLayout, PostList, Pagination, TagsBar },
mounted () {
mounted() {
const queryTag = this.$route.query.tag
if (queryTag) {
@ -61,12 +57,12 @@ export default {
}
},
methods: {
handlePagination (i) { // 分页
handlePagination(i) { // 分页
this.currentPage = i
}
},
watch: {
'$route.query.tag' (tag) {
'$route.query.tag'(tag) {
this.tag = tag ? decodeURIComponent(tag) : ''
if (this.tag) {
@ -85,7 +81,7 @@ export default {
.tags-page
.tags-wrapper
position sticky
top ($navbarHeight + 0.9rem)
top: ($navbarHeight + 0.9rem)
max-height calc(100vh - 10rem)
min-height 4.2rem
@media (max-width $MQMobile)
@ -119,4 +115,11 @@ export default {
display block
.tags
max-height 11.5rem
.theme-style-line
.tags-page
.main-left
.tags-wrapper
@media (max-width $MQMobile)
margin-top -0.91rem
margin-bottom -1px
</style>

5
vdoing/layouts/Layout.vue
View File

@ -262,7 +262,6 @@ export default {
setTimeout(() => { t = p }, 0)
}
}, 300))
},
watch: {
isSidebarOpen() {
@ -280,7 +279,9 @@ export default {
return htmlModules ? htmlModules[module] : ''
},
setBodyClass() {
document.body.className = 'theme-mode-' + this.themeMode
let { pageStyle = 'card', bodyBgImg } = this.$themeConfig
if (pageStyle !== 'card' && pageStyle !== 'line' || bodyBgImg) { pageStyle = 'card' }
document.body.className = `theme-mode-${this.themeMode} theme-style-${pageStyle}`
},
getScrollTop() {
return window.pageYOffset

2
vdoing/package.json
View File

@ -1,6 +1,6 @@
{
"name": "vuepress-theme-vdoing",
"version": "1.11.3",
"version": "1.12.0",
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
"author": {
"name": "gaoyi(Evan) Xu"

12
vdoing/styles/index.styl
View File

@ -47,11 +47,19 @@ a,input,button
.card-box // 卡片
border-radius 5px
background var(--mainBg)
box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
box-shadow 0px 0px 4px 0 rgba(0,0,0,.1)
transition box-shadow .5s
&:hover
box-shadow 0 1px 15px 0 rgba(0,0,0,.1)
.theme-style-line
@media (max-width: 719px)
margin-left: -1px;
margin-right: -1px;
.card-box
box-shadow 0 0
border: 1px solid var(--borderColor)
.blur // 模糊滤镜
backdrop-filter saturate(200%) blur(20px)
@ -210,7 +218,7 @@ p,pre,.custom-block
h1
font-size 1.8rem
font-size 1.9rem
{$contentClass}:not(.custom) > & // 页面内容的首个h1标签隐藏
&:first-child
display none

13
vdoing/styles/palette.styl
View File

@ -53,7 +53,7 @@ $lineNumbersWrapperWidth = 2.5rem
--customBlockBg: #f1f1f1
--textColor: #00323c
--textLightenColor: #0085AD
--borderColor: rgba(0,0,0,.15)
--borderColor: rgba(0,0,0,.12)
--codeBg: #f6f6f6
--codeColor: #525252
codeThemeLight()
@ -67,7 +67,8 @@ $lineNumbersWrapperWidth = 2.5rem
--customBlockBg: rgb(39,39,43)
--textColor: rgb(155,155,170)
--textLightenColor: #0085AD
--borderColor: #2C2C3A
// --borderColor: #2C2C3A
--borderColor: #30363d
--codeBg: #252526
--codeColor: #fff
codeThemeDark()
@ -85,3 +86,11 @@ $lineNumbersWrapperWidth = 2.5rem
--codeBg: #282c34
--codeColor: #fff
codeThemeDark()
// 背景色整体一致
.theme-style-line.theme-mode-light
--bodyBg: rgba(255,255,255,1)
.theme-style-line.theme-mode-dark
--bodyBg: rgba(30,30,34,1)
.theme-style-line.theme-mode-read
--bodyBg: rgba(245,245,213,1)

1
vdoing/styles/wrapper.styl
View File

@ -5,6 +5,7 @@ $vdoing-wrapper
&:not(.footer)
background var(--mainBg)
box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
// box-shadow 0 0 3px 0 rgba(0,0,0,.1)
margin-bottom 1rem
@media (min-width $contentWidth + 80)
border-radius 2px

6
vdoing/types/index.ts
View File

@ -31,6 +31,12 @@ export interface VdoingThemeConfig extends NoSidebar4DefaultThemeConfig {
*/
categoryText?: string;
/**
* 页面风格
* @default 'card'
*/
pageStyle?: 'card' | 'line';
/**
* body背景大图链接。单张图片 string | 多张图片 string[], 多张图片时每隔15秒换一张。
* @default ''