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

配置优化和页面自适应

This commit is contained in:
xugaoyi 2020-05-04 16:00:43 +08:00
parent 7c6532abcb
commit 14b09ab5f1
18 changed files with 190 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/.vuepress/config.js
View File

@ -47,11 +47,11 @@ module.exports = {
// '图标链接1',
// '图标链接2'
// ],
// postCategory: '随笔', // 碎片化文章（_posts文件夹内）预设生成的分类，默认'随笔'
// postCategory: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔'
// categoriesPage: false, // 是否自动生成分类页面（生成在@pages文件夹），默认true。
// tagsPage: false, // 是否自动生成标签页面（生成在@pages文件夹），默认true
// archivesPage: false, // 是否自动生成归档页面（生成在@pages文件夹），默认true
// category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
// tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
// archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。
author: { // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, href: String}
name: 'Evan Xu', // 必需
@ -85,7 +85,6 @@ module.exports = {
footer:{ // 页脚信息
createYear: 2019, // 博客创建年份
copyrightInfo: 'Evan Xu | MIT License', // 博客版权信息，支持a标签
// footerBgImg: '/img/footer.png' // 可选的，页脚背景图，只在首页显示
}
},
plugins: [ // 插件

2
theme-vdoing/components/ArticleInfo.vue
View File

@ -22,7 +22,7 @@
<div class="date iconfont icon-riqi" title="创建时间" v-if="articleInfo.date">
<a href="javascript:;" >{{articleInfo.date}}</a>
</div>
<div class="date iconfont icon-wenjian" title="分类" v-if="!(articleInfo.classify1 && articleInfo.classify1 !== '_posts') && articleInfo.categories">
<div class="date iconfont icon-wenjian" title="分类" v-if="$themeConfig.category !== false && !(articleInfo.classify1 && articleInfo.classify1 !== '_posts') && articleInfo.categories">
<a href="javascript:;" v-for="(item, index) in articleInfo.categories" :key="index">
{{item}}
</a>

3
theme-vdoing/components/BloggerBar.vue
View File

@ -46,6 +46,9 @@ export default {
width 235px
height 235px
overflow hidden
@media (max-width 900px)
width 205px
height 205px
img
width 100%
height 100%

7
theme-vdoing/components/CategoriesBar.vue
View File

@ -52,11 +52,8 @@ export default {
<style lang='stylus'>
.categories-wrapper
.title
color var(--textColor)
opacity .8
color $accentColor
font-size 1.2rem
&:hover
color $accentColor
.categories
margin-top .6rem
a
@ -67,6 +64,8 @@ export default {
font-size .95rem
position relative
transition all .3s
@media (max-width: $MQMobile)
font-weight 400
&:hover
color $accentColor
padding-left .4rem

2
theme-vdoing/components/CategoriesPage.vue
View File

@ -82,7 +82,7 @@ export default {
min-height 4.2rem
.categories
padding-right .5rem
max-height calc(100vh - 12rem)
max-height calc(100vh - 14rem)
min-height 2.2rem
overflow-y auto
transition all .2s

5
theme-vdoing/components/Footer.vue
View File

@ -50,8 +50,9 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
box-sizing border-box
font-size .85rem
transition all .2s ease
@media (min-width: $cardLayout)
background var(--pageBg)
background var(--pageBg)
// @media (min-width: $cardLayout)
// background var(--pageBg)
a
color #666

93
theme-vdoing/components/Home.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="i-body" :style="footerBgImg && `background-image: url(${footerBgImg})`">
<div class="i-body">
<!-- banner块 s -->
<div class="banner" :style="homeData.bgImg && `background: url(${$withBase(homeData.bgImg)}) center center / cover no-repeat`">
@ -27,7 +27,7 @@
</div>
<!-- 移动端features块 s -->
<div class="slide-banner" v-if="homeData.features && homeData.features.length" v-show="isMQMobile">
<div class="slide-banner" v-if="homeData.features && homeData.features.length && isMQMobile">
<div class="banner-wrapper">
<div class="slide-banner-scroll" ref="slide">
<div class="slide-banner-wrapper">
@ -72,12 +72,12 @@
<template #mainRight>
<BloggerBar v-if="$themeConfig.blogger" />
<CategoriesBar
v-if="$categoriesAndTags.categories.length"
v-if="$themeConfig.category !== false && $categoriesAndTags.categories.length"
:categoriesData="$categoriesAndTags.categories"
:length="10"
/>
<TagsBar
v-if="$categoriesAndTags.tags.length"
v-if="$themeConfig.tag !== false && $categoriesAndTags.tags.length"
:tagsData="$categoriesAndTags.tags"
:length="30"
/>
@ -186,13 +186,9 @@ export default {
computed: {
homeData() {
return {
...this.$page.frontmatter,
base: this.$site.base
...this.$page.frontmatter
}
},
footerBgImg() {
return this.$themeConfig.footer && this.$themeConfig.footer.footerBgImg
},
actionLink() {
return {
link: this.homeData.actionLink,
@ -333,9 +329,6 @@ export default {
background #2F455A
&.active
background #517EA9
// .main-wrapper
// margin 2rem auto
.footer
background none
@ -347,47 +340,21 @@ export default {
@media (max-width: 1025px)
.i-body
background-color var(--bg)
.banner .banner-conent
.hero
h1
font-size 2.5rem
.description
font-size 1rem
.feature
h2
font-size 1.1rem
.image_title
width 10rem
height 10rem
.home-content
margin 0
border-radius 0
.i-body .banner .banner-conent
.hero
h1
font-size 2.5rem
.description
font-size 1rem
.feature
h2
font-size 1.1rem
.image_title
width 10rem
height 10rem
.main-wrapper >*
box-shadow none
@media (max-width: 765px)
.main-wrapper .blogger-wrapper
width 200px
.avatar
width: 200px
height: 200px
@media (max-width: $MQMobile)
.main-wrapper
margin 0
display block
.blogger-wrapper
display none
.home-content
padding-top 1.5rem
// 719px
// 719px
@media (max-width: $MQMobile)
.banner
.banner-conent
.features
@ -398,8 +365,28 @@ export default {
max-width 100%
padding 0 2.5rem
margin 0 auto
.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)
// 419px
.banner-conent
padding-left 1.5rem
padding-right 1.5rem

8
theme-vdoing/components/MainLayout.vue
View File

@ -13,6 +13,8 @@
.main-wrapper
margin 2rem auto 0 auto
max-width $homePageWidth
padding 0 .9rem
box-sizing border-box
position relative
display flex
.main-left
@ -23,7 +25,11 @@
.home-content
padding 1rem 1.5rem 0
.main-right
width 280px
>*
width 265px
box-sizing border-box
@media (max-width 900px)
width 235px
.card-box
margin 0 0 .9rem .9rem
padding .95rem

11
theme-vdoing/components/PageEdit.vue
View File

@ -5,8 +5,8 @@
<OutboundLink />
</div>
<div class="tags" v-if="tags && tags[0]">
<router-link to="/" v-for="(item, index) in tags" :key="index" title="标签">
<div class="tags" v-if="$themeConfig.tag !== false && tags && tags[0]">
<router-link :to="`/tags/?tag=${encodeUrl(item)}`" v-for="(item, index) in tags" :key="index" title="标签">
#{{item}}
</router-link>
</div>
@ -20,8 +20,10 @@
<script>
import isNil from 'lodash/isNil'
import { endingSlashRE, outboundRE } from '../util'
import encodeMixin from '../mixins/encodeUrl'
export default {
mixins: [encodeMixin],
name: 'PageEdit',
computed: {
tags() {
@ -116,13 +118,14 @@ export default {
.edit-link
display inline-block
float left
margin-right 2rem
margin 0 2rem .5rem 0
a
margin-right 0.25rem
.tags
float left
a
margin-right .8rem
margin 0 .8rem .5rem 0
display inline-block
color var(--textLightenColor)
padding 0.2rem 0.7rem
font-size 0.9em

44
theme-vdoing/components/Pagination.vue
View File

@ -4,7 +4,7 @@
:class="{disabled: currentPage === 1}"
@click="goPrex()"
>
上一页
<p>上一页</p>
</span>
<!-- 分页在5页及以下时 -->
@ -29,7 +29,10 @@
</span>
<!-- 二号位 -->
<span class="disabled" v-if="currentPage > 3">
<span class="disabled"
v-if="currentPage > 3"
@click="goPrex()"
>
...
</span>
<span class="card-box"
@ -51,6 +54,7 @@
<!-- 四号位 -->
<span class="disabled"
v-if="currentPage < (pages - 2)"
@click="goNext()"
>
...
</span>
@ -75,7 +79,7 @@
:class="{disabled: currentPage === pages}"
@click="goNext()"
>
下一页
<p>下一页</p>
</span>
</div>
</template>
@ -169,6 +173,9 @@ export default {
&::before
float right
margin-left .3rem
p
display inline
line-height .95rem
.pagination-list
span
display inline-block
@ -179,4 +186,35 @@ export default {
&.active
background $accentColor
color var(--bg)
@media (max-width: 800px)
.pagination
> span
padding 1rem 1.5rem
p
display none
// 719px
@media (max-width: $MQMobile)
.pagination
> span // 左右按钮
padding .8rem 1.5rem
.pagination-list
span
width 2.3rem
height 2.3rem
line-height 2.3rem
margin .2rem
@media (max-width: 460px)
.pagination
> span // 左右按钮
padding .8rem 1.3rem
.pagination-list
span
width 2rem
height 2rem
line-height 2rem
margin .1rem
margin-top .3rem
</style>

19
theme-vdoing/components/PostList.vue
View File

@ -23,12 +23,12 @@
<span title="创建时间" class="iconfont icon-riqi" v-if="item.frontmatter.date">
{{ item.frontmatter.date.split(' ')[0]}}
</span>
<span title="分类" class="iconfont icon-wenjian" v-if="item.frontmatter.categories">
<span title="分类" class="iconfont icon-wenjian" v-if="$themeConfig.category !== false && item.frontmatter.categories">
<router-link :to="`/categories/?category=${encodeUrl(c)}`" v-for="(c, index) in item.frontmatter.categories" :key="index">
{{c}}
</router-link>
</span>
<span title="标签" class="iconfont icon-biaoqian tags" v-if="item.frontmatter.tags && item.frontmatter.tags[0]">
<span title="标签" class="iconfont icon-biaoqian tags" v-if="$themeConfig.tag !== false && item.frontmatter.tags && item.frontmatter.tags[0]">
<router-link :to="`/tags/?tag=${encodeUrl(t)}`" v-for="(t, index) in item.frontmatter.tags" :key="index">
{{t}}
</router-link>
@ -102,13 +102,9 @@ export default {
let posts = []
if (this.category) {
posts = this.$groupPosts.categories[this.category]
} else {
posts = this.$sortPosts
}
if (this.tag) {
} else if(this.tag){
posts = this.$groupPosts.tags[this.tag]
} else {
}else {
posts = this.$sortPosts
}
@ -136,7 +132,7 @@ export default {
display none
&.post-enter
opacity: 0
transform: translateX(-30px)
transform: translateX(-20px)
&::before
position absolute
top -1px
@ -152,6 +148,9 @@ export default {
h2
margin .5rem 0
border none
a
@media (max-width: $MQMobile)
font-weight 400
.article-info
> a, > span
opacity .7
@ -173,10 +172,12 @@ export default {
margin .5rem 0
overflow hidden
.excerpt
margin-bottom .3rem
h1,h2,h3
display none
img
max-height 280px
max-width 100%!important
margin 0 auto
.readmore
float right

28
theme-vdoing/components/TagsBar.vue
View File

@ -8,7 +8,7 @@
<router-link
:to="`/tags/?tag=${item.key}`"
:key="index"
:style="getTagStyle()"
:style="tagStyleList[index]"
:class="{active: item.key === tag}"
>
{{item.key}}
@ -38,6 +38,16 @@ export default {
default: 'all'
}
},
data() {
return {
tagStyleList: []
}
},
created() {
for (let i = 0, tagH = this.tags.length; i < tagH; i++) {
this.tagStyleList.push(this.getTagStyle())
}
},
computed: {
tags() {
if (this.length === 'all') {
@ -59,21 +69,21 @@ export default {
<style lang='stylus'>
.tags-wrapper
.title
color var(--textColor)
opacity .8
color $accentColor
font-size 1.2rem
&:hover
color $accentColor
.tags
padding-top .6rem
text-align justify
padding .6rem .3rem .3rem .3rem
margin 0 -0.3rem -0.3rem -0.3rem
a
color var(--textColor)
opacity .6
font-size .95rem
display inline-block
padding .2rem .2rem .2rem .1rem
transition all .6s
padding .2rem .4rem
transition all .4s
@media (max-width: $MQMobile)
font-weight 400
&:hover
color $accentColor
opacity 1
@ -81,7 +91,7 @@ export default {
&.active
background $accentColor
color var(--bg)
padding .2rem .5rem
// padding .2rem .5rem
border-radius 3px
opacity 1
&:hover

3
theme-vdoing/components/TagsPage.vue
View File

@ -81,8 +81,9 @@ export default {
max-height calc(100vh - 10rem)
min-height 4.2rem
.tags
max-height calc(100vh - 12rem)
max-height calc(100vh - 14rem)
min-height 2.2rem
overflow-x hidden
overflow-y auto
transition all .2s
&::-webkit-scrollbar-track-piece

20
theme-vdoing/index.js
View File

@ -1,7 +1,7 @@
const path = require('path')
const setFrontmatter = require('./node_utils/setFrontmatter')
const getSidebarData = require('./node_utils/getSidebarData')
const createPage = require('./node_utils/createPage')
const {createPage, deletePage} = require('./node_utils/handlePage')
const chalk = require('chalk') // 命令行打印美化
const log = console.log
@ -28,19 +28,25 @@ module.exports = (options, ctx) => {
}
}
// 生成分类页
if (themeConfig.categoriesPage !== false) {
// 分类页
if (themeConfig.category !== false) {
createPage(sourceDir, 'categoriesPage')
} else {
deletePage(sourceDir, 'categoriesPage')
}
// 生成标签页
if (themeConfig.tagsPage !== false) {
// 标签页
if (themeConfig.tag !== false) {
createPage(sourceDir, 'tagsPage')
} else {
deletePage(sourceDir, 'tagsPage')
}
// 生成归档页
if (themeConfig.archivesPage !== false) {
// 归档页
if (themeConfig.archive !== false) {
createPage(sourceDir, 'archivesPage')
} else {
deletePage(sourceDir, 'archivesPage')
}
// resolve algolia

32
theme-vdoing/node_utils/createPage.js → theme-vdoing/node_utils/handlePage.js
View File

@ -1,8 +1,9 @@
// 生成页面（分类页、标签页、归档页...）
// 生成或删除页面（分类页、标签页、归档页...）
const fs = require('fs'); // 文件模块
const path = require('path'); // 路径模块
const chalk = require('chalk') // 命令行打印美化
const { type } = require('./modules/fn');
const log = console.log
function createPage(sourceDir, page) {
@ -51,4 +52,31 @@ article: false
}
}
module.exports = createPage
// 删除页面文件
function deletePage(sourceDir, page) {
const dirPath = path.join(sourceDir, '@pages') // 文件夹路径
const pagePath = path.join(dirPath, `${page}.md`) // 文件路径
// 文件是否存在
if (fs.existsSync(pagePath)) {
fs.unlinkSync(pagePath)
log(chalk.blue('tip ') + chalk.green(`delete page(删除页面): ${pagePath}`))
}
deleteDir(dirPath)
}
// 删除文件夹
function deleteDir(dirPath) {
if (fs.existsSync(dirPath)) {
const files = fs.readdirSync(dirPath)
if( type(files) === 'array' && files.length === 0) {
fs.rmdirSync(dirPath)
log(chalk.blue('tip ') + chalk.green(`delete dir(删除目录): ${dirPath}`))
}
}
}
module.exports = {
createPage,
deletePage
}

6
theme-vdoing/styles/custom-page.styl
View File

@ -2,11 +2,11 @@
.custom-page
min-height calc(100vh - 3.6rem)
padding-top ($navbarHeight)
padding-top $navbarHeight
padding-bottom .9rem
background var(--pageBg)
@media (min-width $cardLayout)
min-height calc(100vh - 5.6rem)
padding-top $navbarHeight
background var(--pageBg)
>*
// @extend $wrapper
.theme-vdoing-wrapper

3
theme-vdoing/styles/index.styl
View File

@ -45,7 +45,8 @@ a,input,button
.card-box
border-radius 5px
background var(--bg)
box-shadow 0 1px 3px 0 rgba(0,0,30,.1), 1px 2px 4px 0 rgba(0,0,0,.1)
// box-shadow 0 1px 3px 0 rgba(0,0,30,.1), 1px 2px 4px 0 rgba(0,0,0,.1)
box-shadow 0 1px 2px 0 rgba(0,0,0,.1)
.blur
backdrop-filter saturate(200%) blur(20px)

2
theme-vdoing/styles/palette.styl
View File

@ -34,7 +34,7 @@ $badgeErrorColor = #DA5961
$navbarHeight = 3.6rem
$sidebarWidth = 18rem
$contentWidth = 860px
$homePageWidth = 1080px
$homePageWidth = 1100px
$rightMenuWidth = 230px // 右侧菜单
// 代码块