From 34db7db25bc881e28dd0e3eb9ca373cdc8aebaa5 Mon Sep 17 00:00:00 2001 From: xugaoyi <894072666@qq.com> Date: Thu, 17 Dec 2020 17:51:15 +0800 Subject: [PATCH 1/5] v1.7.0 --- README.MD | 5 +- docs/.vuepress/config.js | 259 +----------------- docs/.vuepress/config/head.js | 30 ++ docs/.vuepress/config/plugins.js | 110 ++++++++ docs/.vuepress/config/themeConfig.js | 86 ++++++ .../config/themeConfig/htmlModules.js | 103 +++++++ .../.vuepress/config/{ => themeConfig}/nav.js | 1 + .../config/{ => themeConfig}/sidebar.js | 21 +- docs/05.关于/01.关于.md | 9 - package.json | 4 +- theme-vdoing/components/Home.vue | 92 ++++--- theme-vdoing/components/Page.vue | 28 +- theme-vdoing/components/Sidebar.vue | 11 + theme-vdoing/layouts/Layout.vue | 118 +++++++- theme-vdoing/package.json | 2 +- theme-vdoing/styles/wrapper.styl | 1 - 16 files changed, 551 insertions(+), 329 deletions(-) create mode 100644 docs/.vuepress/config/head.js create mode 100644 docs/.vuepress/config/plugins.js create mode 100644 docs/.vuepress/config/themeConfig.js create mode 100644 docs/.vuepress/config/themeConfig/htmlModules.js rename docs/.vuepress/config/{ => themeConfig}/nav.js (99%) rename docs/.vuepress/config/{ => themeConfig}/sidebar.js (92%) diff --git a/README.MD b/README.MD index 744c12d..5585776 100644 --- a/README.MD +++ b/README.MD @@ -64,7 +64,7 @@ npm run dev # or yarn dev 期待 [VuePress v2.0](https://github.com/vuepress/vuepress-next) 以及 [VitePress](https://github.com/vuejs/vitepress) 的正式发布... -届时，VuePress 1.x 编译慢的缺点将得到极大的改善。我将会视情况把主题升级至 VuePress v2.0 或 VitePress，也可能两个都升级。目前(2020.10.29)来看还需要挺长一段时间才能让大家使用上基于它们的新版本，还希望大家多多 [:sparkling_heart:支持](https://doc.xugaoyi.com/pages/1b12ed/) 哟，持续关注吧~ +届时，VuePress 1.x 编译慢的缺点将得到极大的改善。我将会视情况把主题升级至 VuePress v2.0 或 VitePress，也可能两个都升级。目前(2020.10.29)来看还需要一段时间才能让大家使用上基于它们的新版本，还希望大家多多 [:sparkling_heart:支持](https://doc.xugaoyi.com/pages/1b12ed/) 哟，持续关注吧~ ## :sparkling_heart:支持这个项目 @@ -73,7 +73,8 @@ npm run dev # or yarn dev 1. *Star* 并 分享这个项目 :rocket: 2. 保留主题 footer(页脚) 的主题链接 :D 3. 购买前端学习类 [电子书](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study) Ⓤⓟ 💯 -4. 通过以下二维码 一次性捐款。 我多半会买一杯 ~~咖啡~~ 茶。:tea: +4. 轻轻点击一次页面广告 ✨ +5. 通过以下二维码 一次性捐款。 我多半会买一杯 ~~咖啡~~ 茶。:tea: 谢谢！ :heart: diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 1cb1ac6..ff2704e 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,256 +1,19 @@ -const nav = require('./config/nav.js'); +const head = require('./config/head.js'); +const plugins = require('./config/plugins.js'); +const themeConfig = require('./config/themeConfig.js'); module.exports = { - title: "Evan's blog", - description: - 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', // 描述,以 标签渲染到页面html中 - // 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' }], // 移动浏览器主题颜色 - [ - 'script', - { - 'data-ad-client': 'ca-pub-7828333725993554', - async: 'async', - src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', - }, - ], // 网站关联Google AdSense - // - [ - 'script', - { - 'custom-element': 'amp-ad', - async: 'async', - src: 'https://cdn.ampproject.org/v0/amp-ad-0.1.js', - }, - ], // AMP广告 + theme: 'vdoing', // 使用依赖包主题 + // theme: require.resolve('../../theme-vdoing'), // 使用本地主题 - // ['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'}], // 移动端阻止页面缩放 - ], + title: "Evan's blog", + description: 'web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。', + // base: '/', // 格式：'/<仓库名>/'， 默认'/' markdown: { lineNumbers: true, // 代码行号 }, - theme: 'vdoing', // 使用依赖包主题 - // theme: require.resolve('../../theme-vdoing'), // 使用本地主题 - - themeConfig: { - // 主题配置 - nav, - sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题） - logo: '/img/EB-logo.png', // 导航栏logo - repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接 - searchMaxSuggestions: 10, // 搜索结果显示最大数 - lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间) - docsDir: 'docs', // 编辑的文件夹 - editLinks: true, // 启用编辑 - editLinkText: '编辑', - - //*** 以下配置是Vdoing主题改动和新增的配置 ***// - - // category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。 - // tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。 - // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。 - // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔' - - // 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.0, 默认0.5 - - // titleBadge: false, // 文章标题前的图标是否显示，默认true - // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标 - // '图标地址1', - // '图标地址2' - // ], - // contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状 - - // updateBar: { // 最近更新栏 - // showToArticle: true, // 显示到文章页底部，默认true - // moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives' - // }, - // rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示) - // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true - // pageButton: false, // 是否显示快捷翻页按钮，默认true - - sidebar: 'structuring', // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页 - - author: { - // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String} - name: 'xugaoyi', // 必需 - link: 'https://github.com/xugaoyi', // 可选的 - }, - blogger: { - // 博主信息，显示在首页侧边栏 - avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg', - name: 'Evan Xu', - slogan: '前端界的小学生', - }, - social: { - // 社交图标，显示于博主信息栏和页脚栏 - // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加 - icons: [ - { - iconClass: 'icon-youjian', - title: '发邮件', - link: 'mailto:894072666@qq.com', - }, - { - iconClass: 'icon-github', - title: 'GitHub', - link: 'https://github.com/xugaoyi', - }, - { - iconClass: 'icon-erji', - title: '听音乐', - link: 'https://music.163.com/#/playlist?id=755597173', - }, - ], - }, - footer: { - // 页脚信息 - createYear: 2019, // 博客创建年份 - copyrightInfo: - 'Evan Xu | MIT License', // 博客版权信息，支持a标签 - }, - }, - plugins: [ - // 插件 - // [require('./plugins/love-me'), { // 鼠标点击爱心特效 - // color: '#11a8cd', // 爱心颜色，默认随机色 - // excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空'' - // }], - - [ - 'thirdparty-search', - { - // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用） - thirdparty: [ - // 可选，默认 [] - { - title: '在MDN中搜索', - frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分 - behindUrl: '', // 搜索链接的后面部分，可选，默认 '' - }, - { - title: '在Runoob中搜索', - frontUrl: 'https://www.runoob.com/?s=', - }, - { - title: '在Vue API中搜索', - frontUrl: 'https://cn.vuejs.org/v2/api/#', - }, - { - title: '在Bing中搜索', - frontUrl: 'https://cn.bing.com/search?q=', - }, - { - title: '通过百度搜索本站的', - frontUrl: 'https://www.baidu.com/s?wd=site%3Axugaoyi.com%20', - }, - ], - }, - ], - - 'vuepress-plugin-baidu-autopush', // 百度自动推送 - - [ - 'one-click-copy', - { - // 代码块复制按钮 - copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array - copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.' - duration: 1000, // prompt message display time. - showInMobile: false, // whether to display on the mobile side, default: false. - }, - ], - [ - 'demo-block', - { - // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block - settings: { - // jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖 - // cssLib: ['http://xxx'], // 在线示例中的css依赖 - // vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖 - jsfiddle: false, // 是否显示 jsfiddle 链接 - codepen: true, // 是否显示 codepen 链接 - horizontal: false, // 是否展示为横向样式 - }, - }, - ], - [ - 'vuepress-plugin-zooming', // 放大图片 - { - selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片 - options: { - bgColor: 'rgba(0,0,0,0.6)', - }, - }, - ], - [ - 'vuepress-plugin-baidu-tongji', // 百度统计 - { - hm: '503f098e7e5b3a5b5d8c5fc2938af002', - }, - ], - [ - 'vuepress-plugin-comment', // 评论 - // { - // choosen: 'valine', - // options: { - // el: '#valine-vuepress-comment', - // appId: 'qnS1jobNF7CROIQ0XYWBnVOH-gzGzoHsz', - // appKey: 'LIKa0ePqFMkglQfOkN0JNK6c', - // avatar: 'monsterid' - // } - // }, - { - choosen: 'gitalk', - options: { - clientID: 'a6e1355287947096b88b', - clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71', - repo: 'blog-gitalk-comment', // GitHub 仓库 - owner: 'xugaoyi', // GitHub仓库所有者 - admin: ['xugaoyi'], // 对仓库有写权限的人 - // distractionFreeMode: true, - pagerDirection: 'last', // 'first'正序 | 'last'倒序 - 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 的内容 - }, - }, - ], - [ - '@vuepress/last-updated', // "上次更新"时间格式 - { - transformer: (timestamp, lang) => { - const moment = require('moment') // https://momentjs.com/ - return moment(timestamp).format('YYYY/MM/DD, hh:mm:ss') - }, - }, - ], - ], - // configureWebpack: { - // //webpack别名 如![Image from alias](~@alias/image.png) - // resolve: { - // alias: { - // '@alias': 'path/to/some/dir' - // } - // } - // } + head, + plugins, + themeConfig, } diff --git a/docs/.vuepress/config/head.js b/docs/.vuepress/config/head.js new file mode 100644 index 0000000..edf2c0a --- /dev/null +++ b/docs/.vuepress/config/head.js @@ -0,0 +1,30 @@ +// head +module.exports = [ + // 注入到页面 中的标签，格式[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' }], // 移动浏览器主题颜色 + [ + 'script', + { + 'data-ad-client': 'ca-pub-7828333725993554', + async: 'async', + src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', + }, + ], // 网站关联Google AdSense 与 html格式广告支持 + [ + 'script', + { + 'custom-element': 'amp-ad', + async: 'async', + src: 'https://cdn.ampproject.org/v0/amp-ad-0.1.js', + }, + ], // AMP格式广告支持 +] diff --git a/docs/.vuepress/config/plugins.js b/docs/.vuepress/config/plugins.js new file mode 100644 index 0000000..8258750 --- /dev/null +++ b/docs/.vuepress/config/plugins.js @@ -0,0 +1,110 @@ +// 插件配置 +module.exports = [ + // 本地插件 + // [require('./plugins/love-me'), { // 鼠标点击爱心特效 + // color: '#11a8cd', // 爱心颜色，默认随机色 + // excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空'' + // }], + + 'vuepress-plugin-baidu-autopush', // 百度自动推送 + + // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用） + [ + 'thirdparty-search', + { + thirdparty: [ + // 可选，默认 [] + { + title: '在MDN中搜索', + frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分 + behindUrl: '', // 搜索链接的后面部分，可选，默认 '' + }, + { + title: '在Runoob中搜索', + frontUrl: 'https://www.runoob.com/?s=', + }, + { + title: '在Vue API中搜索', + frontUrl: 'https://cn.vuejs.org/v2/api/#', + }, + { + title: '在Bing中搜索', + frontUrl: 'https://cn.bing.com/search?q=', + }, + { + title: '通过百度搜索本站的', + frontUrl: 'https://www.baidu.com/s?wd=site%3Axugaoyi.com%20', + }, + ], + }, + ], + + [ + 'one-click-copy', + { + // 代码块复制按钮 + copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array + copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.' + duration: 1000, // prompt message display time. + showInMobile: false, // whether to display on the mobile side, default: false. + }, + ], + [ + 'demo-block', + { + // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block + settings: { + // jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖 + // cssLib: ['http://xxx'], // 在线示例中的css依赖 + // vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖 + jsfiddle: false, // 是否显示 jsfiddle 链接 + codepen: true, // 是否显示 codepen 链接 + horizontal: false, // 是否展示为横向样式 + }, + }, + ], + [ + 'vuepress-plugin-zooming', // 放大图片 + { + selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片 + options: { + bgColor: 'rgba(0,0,0,0.6)', + }, + }, + ], + [ + 'vuepress-plugin-baidu-tongji', // 百度统计 + { + hm: '503f098e7e5b3a5b5d8c5fc2938af002', + }, + ], + [ + 'vuepress-plugin-comment', // 评论 + { + choosen: 'gitalk', + options: { + clientID: 'a6e1355287947096b88b', + clientSecret: 'f0e77d070fabfcd5af95bebb82b2d574d7248d71', + repo: 'blog-gitalk-comment', // GitHub 仓库 + owner: 'xugaoyi', // GitHub仓库所有者 + admin: ['xugaoyi'], // 对仓库有写权限的人 + // distractionFreeMode: true, + pagerDirection: 'last', // 'first'正序 | 'last'倒序 + 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 的内容 + }, + }, + ], + [ + '@vuepress/last-updated', // "上次更新"时间格式 + { + transformer: (timestamp, lang) => { + const dayjs = require('dayjs') // https://day.js.org/ + return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss') + }, + }, + ], +] diff --git a/docs/.vuepress/config/themeConfig.js b/docs/.vuepress/config/themeConfig.js new file mode 100644 index 0000000..88c9385 --- /dev/null +++ b/docs/.vuepress/config/themeConfig.js @@ -0,0 +1,86 @@ +const nav = require('./themeConfig/nav.js'); +const htmlModules = require('./themeConfig/htmlModules.js'); + +// 主题配置 +module.exports = { + nav, + sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题） + logo: '/img/EB-logo.png', // 导航栏logo + repo: 'xugaoyi/vuepress-theme-vdoing', // 导航栏右侧生成Github链接 + searchMaxSuggestions: 10, // 搜索结果显示最大数 + lastUpdated: '上次更新', // 开启更新时间，并配置前缀文字 string | boolean (取值为git提交时间) + docsDir: 'docs', // 编辑的文件夹 + editLinks: true, // 启用编辑 + editLinkText: '编辑', + + //*** 以下配置是Vdoing主题改动和新增的配置 ***// + + // category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。 + // tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。 + // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。 + // categoryText: '随笔', // 碎片化文章（_posts文件夹的文章）预设生成的分类值，默认'随笔' + + // 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.0, 默认0.5 + + // titleBadge: false, // 文章标题前的图标是否显示，默认true + // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标 + // '图标地址1', + // '图标地址2' + // ], + // contentBgStyle: 1, // 文章内容块的背景风格，默认无. 1 => 方格 | 2 => 横线 | 3 => 竖线 | 4 => 左斜线 | 5 => 右斜线 | 6 => 点状 + + // updateBar: { // 最近更新栏 + // showToArticle: true, // 显示到文章页底部，默认true + // moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives' + // }, + // rightMenuBar: false, // 是否显示右侧文章大纲栏，默认true (屏宽小于1300px下无论如何都不显示) + // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true + // pageButton: false, // 是否显示快捷翻页按钮，默认true + + sidebar: 'structuring', // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页 + + author: { + // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String} + name: 'xugaoyi', // 必需 + link: 'https://github.com/xugaoyi', // 可选的 + }, + blogger: { + // 博主信息，显示在首页侧边栏 + avatar: 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200103123203.jpg', + name: 'Evan Xu', + slogan: '前端界的小学生', + }, + social: { + // 社交图标，显示于博主信息栏和页脚栏 + // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加 + icons: [ + { + iconClass: 'icon-youjian', + title: '发邮件', + link: 'mailto:894072666@qq.com', + }, + { + iconClass: 'icon-github', + title: 'GitHub', + link: 'https://github.com/xugaoyi', + }, + { + iconClass: 'icon-erji', + title: '听音乐', + link: 'https://music.163.com/#/playlist?id=755597173', + }, + ], + }, + footer: { + // 页脚信息 + createYear: 2019, // 博客创建年份 + copyrightInfo: + 'Evan Xu | MIT License', // 博客版权信息，支持a标签 + }, + htmlModules // 插入hmtl(广告)模块 +} diff --git a/docs/.vuepress/config/themeConfig/htmlModules.js b/docs/.vuepress/config/themeConfig/htmlModules.js new file mode 100644 index 0000000..531dde5 --- /dev/null +++ b/docs/.vuepress/config/themeConfig/htmlModules.js @@ -0,0 +1,103 @@ +/** 插入自定义html模块 (可用于插入广告模块等) + * { + * homeSidebarB: htmlString, 首页侧边栏底部 + * + * sidebarT: htmlString, 全局左侧边栏顶部 + * sidebarB: htmlString, 全局左侧边栏底部 + * + * pageT: htmlString, 全局页面顶部 + * pageB: htmlString, 全局页面底部 + * pageTshowMode: string, 页面顶部-显示方式：未配置默认全局；'article' => 仅文章页①； 'custom' => 仅自定义页① + * pageBshowMode: string, 页面底部-显示方式：未配置默认全局；'article' => 仅文章页①； 'custom' => 仅自定义页① + * + * windowLB: htmlString, 全局左下角② + * windowRB: htmlString, 全局右下角② + * } + * + * ①注：在.md文件front matter配置`article: false`的页面是自定义页，未配置的默认是文章页（首页除外）。 + * ②注：windowLB 和 windowRB：1.展示区块宽高最大是200*200px。2.请给自定义元素定一个不超过200px的固定宽高。3.在屏宽小于960px时无论如何都不会显示。 + */ + +module.exports = { + homeSidebarB: + ` + + `, + // sidebarT: + // ` + // + // `, + sidebarB: + ` + + `, + pageT: // + ` + + `, + // pageTshowMode: 'article', + pageB: + ` + + `, + // pageBshowMode: 'article', + // windowLB: // 遮挡部分侧边栏 + // ` + // + // `, + windowRB: + ` + + + `, +} + + +// module.exports = { +// homeSidebarB: `
自定义模块测试
`, +// sidebarT: `
自定义模块测试
`, +// sidebarB: `
自定义模块测试
`, +// pageT: `
自定义模块测试
`, +// pageB: `
自定义模块测试
`, +// windowLB: `
自定义模块测试
`, +// windowRB: `
自定义模块测试
`, +// } diff --git a/docs/.vuepress/config/nav.js b/docs/.vuepress/config/themeConfig/nav.js similarity index 99% rename from docs/.vuepress/config/nav.js rename to docs/.vuepress/config/themeConfig/nav.js index c1da222..598dbcd 100644 --- a/docs/.vuepress/config/nav.js +++ b/docs/.vuepress/config/themeConfig/nav.js @@ -1,3 +1,4 @@ +// nav module.exports = [ { text: '首页', link: '/' }, { diff --git a/docs/.vuepress/config/sidebar.js b/docs/.vuepress/config/themeConfig/sidebar.js similarity index 92% rename from docs/.vuepress/config/sidebar.js rename to docs/.vuepress/config/themeConfig/sidebar.js index 36bd5de..9c97278 100644 --- a/docs/.vuepress/config/sidebar.js +++ b/docs/.vuepress/config/themeConfig/sidebar.js @@ -1,12 +1,13 @@ -// 此文件没有用到，仅用于测试和侧边栏数据格式的参考。 +// ！！！注：此文件没有使用到，仅用于测试和侧边栏数据格式的参考。 -module.exports = { // 侧边栏 +// 侧边栏 +module.exports = { '/01.前端/': [ { title: 'JavaScript', collapsable: false, //是否可折叠，可选的，默认true children: [ - ['01.JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'], + ['01.JavaScript/01.JavaScript中的名词概念','JavaScript中的名词概念'], ['01.JavaScript/02.数据类型转换','数据类型转换'], ['01.JavaScript/03.ES5面向对象','ES5面向对象'], ['01.JavaScript/04.ES6面向对象','ES6面向对象'], @@ -21,13 +22,13 @@ module.exports = { // 侧边栏 collapsable: false, children: [ ['01.html-css/00.flex布局语法','flex布局语法'], - ['01.html-css/01.flex布局案例-基础','flex布局案例-基础'], + ['01.html-css/01.flex布局案例-基础','flex布局案例-基础'], ['01.html-css/02.flex布局案例-骰子','flex布局案例-骰子'], ['01.html-css/03.flex布局案例-网格布局','flex布局案例-网格布局'], ['01.html-css/04.flex布局案例-圣杯布局','flex布局案例-圣杯布局'], - ['01.html-css/05.flex布局案例-输入框布局','flex布局案例-输入框布局'], - ['01.html-css/06.CSS3之transform过渡','CSS3之transform过渡'], - ['01.html-css/07.CSS3之animation动画','CSS3之animation动画'], + ['01.html-css/05.flex布局案例-输入框布局','flex布局案例-输入框布局'], + ['01.html-css/06.CSS3之transform过渡','CSS3之transform过渡'], + ['01.html-css/07.CSS3之animation动画','CSS3之animation动画'], ] }, ], @@ -50,7 +51,7 @@ module.exports = { // 侧边栏 '/04.其他/': [ { title: '学习', - collapsable: false, + collapsable: false, children: [ ['01.学习/01.学习网站','学习网站'], ['01.学习/02.学习效率低，忘性很大怎么办？','学习效率低，忘性很大怎么办？'], @@ -58,7 +59,7 @@ module.exports = { // 侧边栏 }, { title: '学习笔记', - collapsable: false, + collapsable: false, children: [ ['02.学习笔记/01.小程序笔记','小程序笔记'], ] @@ -101,4 +102,4 @@ module.exports = { // 侧边栏 // // ] // // } // ], -} \ No newline at end of file +} diff --git a/docs/05.关于/01.关于.md b/docs/05.关于/01.关于.md index c125f02..de250c8 100644 --- a/docs/05.关于/01.关于.md +++ b/docs/05.关于/01.关于.md @@ -51,15 +51,6 @@ web前端小学生 🎉🎉✨与我 联系↑ 获取前端 [学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study) - - -
- @@ -474,13 +479,12 @@ export default { &.active opacity 0.5 // 分页不在第一页时，隐藏banner栏 - .main-wrapper - margin-top 2rem .banner.hide-banner display none & + .main-wrapper margin-top ($navbarHeight + 0.9rem) .main-wrapper + margin-top 2rem .main-left .card-box margin-bottom 0.9rem @@ -493,6 +497,10 @@ export default { padding-top 2rem &>:last-child padding-bottom 2rem + .main-right + .custom-html-box + padding-left .95rem + padding-right .95rem @keyframes heart from transform translate(0, 0) diff --git a/theme-vdoing/components/Page.vue b/theme-vdoing/components/Page.vue index c6c4594..88c1f6e 100644 --- a/theme-vdoing/components/Page.vue +++ b/theme-vdoing/components/Page.vue @@ -1,7 +1,6 @@ @@ -82,9 +85,26 @@ export default { }, pageComponent () { return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false + }, + isShowSlotT() { + return this.getShowStatus('pageTshowMode') + }, + isShowSlotB() { + return this.getShowStatus('pageBshowMode') } }, methods: { + getShowStatus(prop) { + const { htmlModules } = this.$themeConfig + if(!htmlModules) return false + if (htmlModules[prop] === 'article') { // 仅文章页显示 + return this.isArticle() + } else if (htmlModules[prop] === 'custom'){ // 仅自定义页显示 + return !(this.isArticle()) + } else { // 全部显示 + return true + } + }, isArticle () { return this.$frontmatter.article !== false } diff --git a/theme-vdoing/components/Sidebar.vue b/theme-vdoing/components/Sidebar.vue index a7c69ff..4071dd2 100644 --- a/theme-vdoing/components/Sidebar.vue +++ b/theme-vdoing/components/Sidebar.vue @@ -24,8 +24,12 @@ {{blogger.slogan}} + + + + - - +
+ + + @@ -47,14 +53,26 @@ v-else :sidebar-items="sidebarItems" > - +
+ + +