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

v1.4.4

This commit is contained in:
xugaoyi 2020-09-02 21:37:10 +08:00
parent 87b3faa080
commit d9db2fab06
4 changed files with 120 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/.vuepress/config.js
View File

@ -3,12 +3,12 @@ const nav = require('./config/nav.js');
module.exports = { module.exports = {
title: "Evan's blog", title: "Evan's blog",
description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中 description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
// base: '/vuepress-theme-vdoing/', // '/<github仓库名>/'， 默认'/' // base: '/', // '/<github仓库名>/'， 默认'/'
head: [ // 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?] head: [ // 注入到页面<head> 中的标签，格式[tagName, { attrName: attrValue }, innerHTML?]
['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹 ['link', { rel: 'icon', href: '/img/favicon.ico' }], //favicons，资源放在public文件夹
['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown'}], ['meta', { name: 'keywords', content: '前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown' }],
['meta', { name: 'baidu-site-verification', content: '7F55weZDDc'}],// 百度统计的站点拥有者验证 ['meta', { name: 'baidu-site-verification', content: '7F55weZDDc' }],// 百度统计的站点拥有者验证
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色 ['meta', { name: 'theme-color', content: '#11a8cd' }], // 移动浏览器主题颜色
// ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放 // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放
], ],
markdown: { markdown: {
@ -63,12 +63,12 @@ module.exports = {
name: 'xugaoyi', // 必需 name: 'xugaoyi', // 必需
link: 'https://github.com/xugaoyi' // 可选的 link: 'https://github.com/xugaoyi' // 可选的
}, },
blogger:{ // 博主信息，显示在首页侧边栏 blogger: { // 博主信息，显示在首页侧边栏
avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg', avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
name: 'Evan Xu', name: 'Evan Xu',
slogan: '前端界的小学生' slogan: '前端界的小学生'
}, },
social:{ // 社交图标，显示于博主信息栏和页脚栏 social: { // 社交图标，显示于博主信息栏和页脚栏
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加 // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
icons: [ icons: [
{ {
@ -88,7 +88,7 @@ module.exports = {
} }
] ]
}, },
footer:{ // 页脚信息 footer: { // 页脚信息
createYear: 2019, // 博客创建年份 createYear: 2019, // 博客创建年份
copyrightInfo: 'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签 copyrightInfo: 'Evan Xu | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签
} }
@ -146,7 +146,7 @@ module.exports = {
[ [
'vuepress-plugin-zooming', // 放大图片 'vuepress-plugin-zooming', // 放大图片
{ {
selector:'.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片 selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: { options: {
bgColor: 'rgba(0,0,0,0.6)' bgColor: 'rgba(0,0,0,0.6)'
}, },
@ -182,7 +182,7 @@ module.exports = {
id: "<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>", // 页面的唯一标识,长度不能超过50 id: "<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>", // 页面的唯一标识,长度不能超过50
title: "「评论」<%- frontmatter.title %>", // GitHub issue 的标题 title: "「评论」<%- frontmatter.title %>", // GitHub issue 的标题
labels: ["Gitalk", "Comment"], // GitHub issue 的标签 labels: ["Gitalk", "Comment"], // GitHub issue 的标签
body:"页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容 body: "页面：<%- window.location.origin + (frontmatter.to.path || window.location.pathname) %>" // GitHub issue 的内容
} }
} }
], ],

2
package.json
View File

@ -21,7 +21,7 @@
"vuepress-plugin-one-click-copy": "^1.0.2", "vuepress-plugin-one-click-copy": "^1.0.2",
"vuepress-plugin-thirdparty-search": "^1.0.2", "vuepress-plugin-thirdparty-search": "^1.0.2",
"vuepress-plugin-zooming": "^1.1.7", "vuepress-plugin-zooming": "^1.1.7",
"vuepress-theme-vdoing": "^1.4.3", "vuepress-theme-vdoing": "^1.4.4",
"yamljs": "^0.3.0" "yamljs": "^0.3.0"
}, },
"dependencies": { "dependencies": {

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

@ -1,28 +1,56 @@
<template> <template>
<div class="home-wrapper"> <div class="home-wrapper">
<!-- banner块 s --> <!-- banner块 s -->
<div class="banner" :class="{'hide-banner': !showBanner}" :style="bannerBgStyle"> <div
<div class="banner-conent" :style="!homeData.features && !homeData.heroImage && `padding-top: 7rem`"> class="banner"
:class="{'hide-banner': !showBanner}"
:style="bannerBgStyle"
>
<div
class="banner-conent"
:style="!homeData.features && !homeData.heroImage && `padding-top: 7rem`"
>
<header class="hero"> <header class="hero">
<img v-if="homeData.heroImage" :src="$withBase(homeData.heroImage)" :alt="homeData.heroAlt || 'hero'" /> <img
<h1 v-if="homeData.heroText !== null" id="main-title">{{ homeData.heroText || $title || 'Hello' }}</h1> v-if="homeData.heroImage"
<p class="description">{{ homeData.tagline || $description || 'Welcome to your VuePress site' }}</p> :src="$withBase(homeData.heroImage)"
<p class="action" v-if="homeData.actionText && homeData.actionLink"> :alt="homeData.heroAlt"
<NavLink class="action-button" :item="actionLink" /> />
<h1
v-if="homeData.heroText"
id="main-title"
>{{ homeData.heroText }}</h1>
<p
v-if="homeData.tagline"
class="description"
>{{ homeData.tagline }}</p>
<p
class="action"
v-if="homeData.actionText && homeData.actionLink"
>
<NavLink
class="action-button"
:item="actionLink"
/>
</p> </p>
</header> </header>
<!-- PC端features块 s --> <!-- PC端features块 s -->
<div class="features" <div
v-if="homeData.features && homeData.features.length && !isMQMobile" class="features"
v-if="homeData.features && homeData.features.length && !isMQMobile"
> >
<div class="feature" v-for="(feature, index) in homeData.features" :key="index"> <div
class="feature"
v-for="(feature, index) in homeData.features"
:key="index"
>
<router-link <router-link
v-if="feature.link" v-if="feature.link"
:to="feature.link" :to="feature.link"
> >
<img class="feature-img" <img
class="feature-img"
v-if="feature.imgUrl" v-if="feature.imgUrl"
:src="$withBase(feature.imgUrl)" :src="$withBase(feature.imgUrl)"
:alt="feature.title" :alt="feature.title"
@ -34,7 +62,8 @@
v-else v-else
href="javascript:;" href="javascript:;"
> >
<img class="feature-img" <img
class="feature-img"
v-if="feature.imgUrl" v-if="feature.imgUrl"
:src="$withBase(feature.imgUrl)" :src="$withBase(feature.imgUrl)"
:alt="feature.title" :alt="feature.title"
@ -47,21 +76,30 @@
<!-- PC端features块 e --> <!-- PC端features块 e -->
</div> </div>
<!-- 移动端features块 s --> <!-- isMQMobile放到v-if上线后会报错 --> <!-- 移动端features块 s -->
<!-- isMQMobile放到v-if上线后会报错 -->
<div <div
class="slide-banner" class="slide-banner"
v-if="homeData.features && homeData.features.length" v-if="homeData.features && homeData.features.length"
v-show="isMQMobile" v-show="isMQMobile"
> >
<div class="banner-wrapper"> <div class="banner-wrapper">
<div class="slide-banner-scroll" ref="slide"> <div
class="slide-banner-scroll"
ref="slide"
>
<div class="slide-banner-wrapper"> <div class="slide-banner-wrapper">
<div class="slide-item" v-for="(feature, index) in homeData.features" :key="index"> <div
class="slide-item"
v-for="(feature, index) in homeData.features"
:key="index"
>
<router-link <router-link
v-if="feature.link" v-if="feature.link"
:to="feature.link" :to="feature.link"
> >
<img class="feature-img" <img
class="feature-img"
v-if="feature.imgUrl" v-if="feature.imgUrl"
:src="$withBase(feature.imgUrl)" :src="$withBase(feature.imgUrl)"
:alt="feature.title" :alt="feature.title"
@ -73,7 +111,8 @@
v-else v-else
href="javascript:;" href="javascript:;"
> >
<img class="feature-img" <img
class="feature-img"
v-if="feature.imgUrl" v-if="feature.imgUrl"
:src="$withBase(feature.imgUrl)" :src="$withBase(feature.imgUrl)"
:alt="feature.title" :alt="feature.title"
@ -89,7 +128,8 @@
class="doc" class="doc"
v-for="(item, index) in homeData.features.length" v-for="(item, index) in homeData.features.length"
:key="index" :key="index"
:class="{'active': currentPageIndex === index}"></span> :class="{'active': currentPageIndex === index}"
></span>
</div> </div>
</div> </div>
</div> </div>
@ -97,22 +137,20 @@
</div> </div>
<!-- banner块 e --> <!-- banner块 e -->
<MainLayout> <MainLayout>
<template #mainLeft> <template #mainLeft>
<!-- 简约版文章列表 --> <!-- 简约版文章列表 -->
<UpdateArticle <UpdateArticle
class="card-box" class="card-box"
v-if="homeData.postList === 'simple'" v-if="homeData.postList === 'simple'"
:length="5" :length="5"
/> />
<!-- 详情版文章列表 --> <!-- 详情版文章列表 -->
<template v-else-if="!homeData.postList || homeData.postList === 'detailed'"> <template v-else-if="!homeData.postList || homeData.postList === 'detailed'">
<PostList <PostList
:currentPage="currentPage" :currentPage="currentPage"
:perPage="perPage" :perPage="perPage"
/> />
<Pagination <Pagination
:total="total" :total="total"
@ -123,24 +161,23 @@
/> />
</template> </template>
<Content class="theme-vdoing-content custom card-box"/> <Content class="theme-vdoing-content custom card-box" />
</template> </template>
<template #mainRight> <template #mainRight>
<BloggerBar v-if="$themeConfig.blogger" /> <BloggerBar v-if="$themeConfig.blogger" />
<CategoriesBar <CategoriesBar
v-if="$themeConfig.category !== false && $categoriesAndTags.categories.length" v-if="$themeConfig.category !== false && $categoriesAndTags.categories.length"
:categoriesData="$categoriesAndTags.categories" :categoriesData="$categoriesAndTags.categories"
:length="10" :length="10"
/> />
<TagsBar <TagsBar
v-if="$themeConfig.tag !== false && $categoriesAndTags.tags.length" v-if="$themeConfig.tag !== false && $categoriesAndTags.tags.length"
:tagsData="$categoriesAndTags.tags" :tagsData="$categoriesAndTags.tags"
:length="30" :length="30"
/> />
</template> </template>
</MainLayout> </MainLayout>
</div> </div>
</template> </template>
@ -161,7 +198,7 @@ const MOBILE_DESKTOP_BREAKPOINT = 720 // refer to config.styl
BScroll.use(Slide) BScroll.use(Slide)
export default { export default {
data(){ data () {
return { return {
isMQMobile: false, isMQMobile: false,
@ -176,13 +213,13 @@ export default {
} }
}, },
components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination }, components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination },
created() { created () {
this.total = this.$sortPosts.length this.total = this.$sortPosts.length
}, },
beforeMount(){ beforeMount () {
this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window） this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; // vupress在打包时不能在beforeCreate(),created()访问浏览器api（如window）
}, },
mounted() { mounted () {
if (this.$route.query.p) { if (this.$route.query.p) {
this.currentPage = Number(this.$route.query.p) this.currentPage = Number(this.$route.query.p)
} }
@ -193,22 +230,22 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false; this.isMQMobile = window.innerWidth < MOBILE_DESKTOP_BREAKPOINT ? true : false;
if(this.isMQMobile && !this.slide && !this.mark){ if (this.isMQMobile && !this.slide && !this.mark) {
this.mark++ this.mark++
setTimeout(() => { setTimeout(() => {
this.init() this.init()
},60) }, 60)
} }
}) })
}, },
beforeDestroy() { beforeDestroy () {
clearTimeout(this.playTimer) clearTimeout(this.playTimer)
this.slide && this.slide.destroy() this.slide && this.slide.destroy()
}, },
watch: { watch: {
'$route.query.p'() { '$route.query.p' () {
if(!this.$route.query.p){ if (!this.$route.query.p) {
this.currentPage = 1 this.currentPage = 1
} else { } else {
this.currentPage = Number(this.$route.query.p) this.currentPage = Number(this.$route.query.p)
@ -223,7 +260,7 @@ export default {
} }
}, },
methods: { methods: {
init() { init () {
clearTimeout(this.playTimer) clearTimeout(this.playTimer)
this.slide = new BScroll(this.$refs.slide, { this.slide = new BScroll(this.$refs.slide, {
scrollX: true, // x轴滚动 scrollX: true, // x轴滚动
@ -253,13 +290,13 @@ export default {
}) })
this.autoGoNext() this.autoGoNext()
}, },
autoGoNext() { autoGoNext () {
clearTimeout(this.playTimer) clearTimeout(this.playTimer)
this.playTimer = setTimeout(() => { this.playTimer = setTimeout(() => {
this.slide.next() this.slide.next()
}, 4000) }, 4000)
}, },
handlePagination(i) { // 分页 handlePagination (i) { // 分页
this.currentPage = i this.currentPage = i
}, },
getScrollTop () { getScrollTop () {
@ -270,15 +307,15 @@ export default {
}, },
computed: { computed: {
showBanner() { // 当分页不在第一页时隐藏banner栏 showBanner () { // 当分页不在第一页时隐藏banner栏
return this.$route.query.p return this.$route.query.p
&& this.$route.query.p != 1 && this.$route.query.p != 1
&& (!this.homeData.postList || this.homeData.postList === 'detailed') && (!this.homeData.postList || this.homeData.postList === 'detailed')
? false : true ? false : true
}, },
bannerBgStyle() { bannerBgStyle () {
let bannerBg = this.homeData.bannerBg let bannerBg = this.homeData.bannerBg
if(!bannerBg || bannerBg === 'auto') { // 默认 if (!bannerBg || bannerBg === 'auto') { // 默认
if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景 if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景
return '' return ''
} else { // 网格纹背景 } else { // 网格纹背景
@ -297,12 +334,12 @@ export default {
} }
}, },
homeData() { homeData () {
return { return {
...this.$page.frontmatter ...this.$page.frontmatter
} }
}, },
actionLink() { actionLink () {
return { return {
link: this.homeData.actionLink, link: this.homeData.actionLink,
text: this.homeData.actionText text: this.homeData.actionText
@ -327,7 +364,7 @@ export default {
position relative position relative
z-index 1 z-index 1
overflow hidden overflow hidden
.hero .hero
text-align center text-align center
margin-top 3rem margin-top 3rem
img img
@ -335,18 +372,18 @@ export default {
max-height 240px max-height 240px
display block display block
margin 2rem auto 1.5rem margin 2rem auto 1.5rem
h1 h1
margin 0 margin 0
font-size 3.2rem font-size 3.2rem
.description, .action .description, .action
margin 1.5rem auto margin 1.5rem auto
.description .description
max-width 40rem max-width 40rem
font-size 1.1rem font-size 1.1rem
line-height 1.3 line-height 1.3
opacity .9 opacity .9
.action-button .action-button
display inline-block display inline-block
font-size 1.2rem font-size 1.2rem
background-color $accentColor background-color $accentColor
@ -356,10 +393,10 @@ export default {
box-sizing border-box box-sizing border-box
border-bottom 1px solid darken($accentColor, 10%) border-bottom 1px solid darken($accentColor, 10%)
color #fff color #fff
&:hover &:hover
background-color lighten($accentColor, 10%) background-color lighten($accentColor, 10%)
// pc端features // pc端features
.features .features
padding 2rem 0 padding 2rem 0
margin-top 2.5rem margin-top 2.5rem
display flex display flex
@ -380,7 +417,7 @@ export default {
height 10rem height 10rem
animation heart 1.2s ease-in-out 0s infinite alternate animation heart 1.2s ease-in-out 0s infinite alternate
animation-play-state paused animation-play-state paused
h2 h2
font-weight 500 font-weight 500
font-size 1.3rem font-size 1.3rem
border-bottom none border-bottom none
@ -388,12 +425,12 @@ export default {
p p
opacity 0.8 opacity 0.8
padding 0 .8rem padding 0 .8rem
.feature:hover .feature:hover
.feature-img .feature-img
animation-play-state: running animation-play-state: running
h2,p h2,p
color $accentColor color $accentColor
// 移动端滑动图标 // 移动端滑动图标
.slide-banner .slide-banner
@ -410,7 +447,7 @@ export default {
height 300px height 300px
width 100% width 100%
text-align center text-align center
a a
// color lighten($bannerTextColor,10%) // color lighten($bannerTextColor,10%)
color inherit color inherit
.feature-img .feature-img
@ -439,7 +476,7 @@ export default {
opacity .9 opacity .9
&.active &.active
opacity .5 opacity .5
// 分页不在第一页时，隐藏banner栏 // 分页不在第一页时，隐藏banner栏
.main-wrapper .main-wrapper
margin-top 2rem margin-top 2rem
@ -448,8 +485,8 @@ export default {
& + .main-wrapper & + .main-wrapper
margin-top ($navbarHeight + .9rem) margin-top ($navbarHeight + .9rem)
.main-wrapper .main-wrapper
.main-left .main-left
.card-box .card-box
margin-bottom .9rem margin-bottom .9rem
.pagination .pagination
@ -483,9 +520,9 @@ export default {
.feature-img .feature-img
width 9rem width 9rem
height 9rem height 9rem
// 719px以下 // 719px以下
@media (max-width: $MQMobile) @media (max-width: $MQMobile)
.home-wrapper .home-wrapper
.banner .banner
.banner-conent .banner-conent
@ -493,22 +530,22 @@ export default {
display none!important display none!important
// 419px以下 // 419px以下
@media (max-width: $MQMobileNarrow) @media (max-width: $MQMobileNarrow)
.home-wrapper .home-wrapper
.banner-conent .banner-conent
padding-left 1.5rem padding-left 1.5rem
padding-right 1.5rem padding-right 1.5rem
.hero .hero
img img
max-height 210px max-height 210px
margin 2rem auto 1.2rem margin 2rem auto 1.2rem
h1 h1
font-size: 2rem font-size: 2rem
h1, .description, .action h1, .description, .action
margin: 1.2rem auto margin: 1.2rem auto
.description .description
font-size: 1.2rem font-size: 1.2rem
.action-button .action-button

2
theme-vdoing/package.json
View File

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