diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index e48e7bd..14c58e8 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -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等技术文章。', // 描述,以 标签渲染到页面html中 - // base: '/vuepress-theme-vdoing/', // '//'， 默认'/' + // base: '/', // '//'， 默认'/' 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 | MIT License', // 博客版权信息，支持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 的内容 } } ], diff --git a/package.json b/package.json index 65c0f26..0438036 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/theme-vdoing/components/Home.vue b/theme-vdoing/components/Home.vue index 03d3f5b..fc4cfa1 100644 --- a/theme-vdoing/components/Home.vue +++ b/theme-vdoing/components/Home.vue @@ -1,28 +1,56 @@ @@ -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 diff --git a/theme-vdoing/package.json b/theme-vdoing/package.json index e85f89c..ec06bce 100644 --- a/theme-vdoing/package.json +++ b/theme-vdoing/package.json @@ -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"