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 = {
title: "Evan's blog",
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?]
['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: 'baidu-site-verification', content: '7F55weZDDc'}],// 百度统计的站点拥有者验证
['meta', { name: 'theme-color', content: '#11a8cd'}], // 移动浏览器主题颜色
['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: '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'}], // 移动端阻止页面缩放
],
markdown: {
@ -63,12 +63,12 @@ module.exports = {
name: 'xugaoyi', // 必需
link: 'https://github.com/xugaoyi' // 可选的
},
blogger:{ // 博主信息，显示在首页侧边栏
blogger: { // 博主信息，显示在首页侧边栏
avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg',
name: 'Evan Xu',
slogan: '前端界的小学生'
},
social:{ // 社交图标，显示于博主信息栏和页脚栏
social: { // 社交图标，显示于博主信息栏和页脚栏
// iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
icons: [
{
@ -88,7 +88,7 @@ module.exports = {
}
]
},
footer:{ // 页脚信息
footer: { // 页脚信息
createYear: 2019, // 博客创建年份
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', // 放大图片
{
selector:'.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片
options: {
bgColor: 'rgba(0,0,0,0.6)'
},
@ -182,7 +182,7 @@ module.exports = {
id: "<%- (frontmatter.permalink || frontmatter.to.path).slice(-16) %>", // 页面的唯一标识,长度不能超过50
title: "「评论」<%- frontmatter.title %>", // 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-thirdparty-search": "^1.0.2",
"vuepress-plugin-zooming": "^1.1.7",
"vuepress-theme-vdoing": "^1.4.3",
"vuepress-theme-vdoing": "^1.4.4",
"yamljs": "^0.3.0"
},
"dependencies": {

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

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

2
theme-vdoing/package.json
View File

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