Northword
GitHub
commit
6c5a3ad82b
|
|
@ -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:
|
||||
|
||||
|
|
|
|||
|
|
@ -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等技术文章。', // 描述,以 <meta> 标签渲染到页面html中
|
||||
// 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' }], // 移动浏览器主题颜色
|
||||
[
|
||||
'script',
|
||||
{
|
||||
'data-ad-client': 'ca-pub-7828333725993554',
|
||||
async: 'async',
|
||||
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
|
||||
},
|
||||
], // 网站关联Google AdSense
|
||||
// <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
|
||||
[
|
||||
'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 | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持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别名 如
|
||||
// resolve: {
|
||||
// alias: {
|
||||
// '@alias': 'path/to/some/dir'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
head,
|
||||
plugins,
|
||||
themeConfig,
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
// head
|
||||
module.exports = [
|
||||
// 注入到页面<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 与 html格式广告支持
|
||||
]
|
||||
|
|
@ -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')
|
||||
},
|
||||
},
|
||||
],
|
||||
]
|
||||
|
|
@ -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 | <a href="https://github.com/xugaoyi/vuepress-theme-vdoing/blob/master/LICENSE" target="_blank">MIT License</a>', // 博客版权信息，支持a标签
|
||||
},
|
||||
htmlModules // 插入hmtl(广告)模块
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
/** 插入自定义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:
|
||||
`<!-- 纵向自适应 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="7802654582"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// sidebarT:
|
||||
// `<!-- 固定100% * 150px可显示，max-height:150px 未见显示-->
|
||||
// <ins class="adsbygoogle"
|
||||
// style="display:inline-block;width:100%;max-height:150px"
|
||||
// data-ad-client="ca-pub-7828333725993554"
|
||||
// data-ad-slot="6625304284"></ins>
|
||||
// <script>
|
||||
// (adsbygoogle = window.adsbygoogle || []).push({});
|
||||
// </script>`,
|
||||
sidebarB:
|
||||
`<!-- 正方形 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="3508773082"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
pageT:
|
||||
`<!-- 固定100% * 90px可显示，max-height:90px未见显示-->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;width:100%;max-height:90px"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="6625304284"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// pageTshowMode: 'article',
|
||||
pageB:
|
||||
`<!-- 横向自适应 -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:block"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="6620245489"
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>`,
|
||||
// pageBshowMode: 'article',
|
||||
// windowLB: // 会遮挡部分侧边栏
|
||||
// `<!-- 固定200*200px -->
|
||||
// <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
|
||||
// <ins class="adsbygoogle"
|
||||
// style="display:inline-block;width:200px;height:200px"
|
||||
// data-ad-client="ca-pub-7828333725993554"
|
||||
// data-ad-slot="6625304284"></ins>
|
||||
// <script>
|
||||
// (adsbygoogle = window.adsbygoogle || []).push({});
|
||||
// </script>`,
|
||||
windowRB:
|
||||
`<!-- 固定160*160px -->
|
||||
<ins class="adsbygoogle"
|
||||
style="display:inline-block;max-width:160px;max-height:160px"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="8377369658"></ins>
|
||||
<script>
|
||||
(adsbygoogle = window.adsbygoogle || []).push({});
|
||||
</script>
|
||||
`,
|
||||
}
|
||||
|
||||
|
||||
// module.exports = {
|
||||
// homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// sidebarT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// sidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// pageT: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// pageB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// windowLB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
|
||||
// }
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
// nav
|
||||
module.exports = [
|
||||
{ text: '首页', link: '/' },
|
||||
{
|
||||
|
|
@ -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 = { // 侧边栏
|
|||
// // ]
|
||||
// // }
|
||||
// ],
|
||||
}
|
||||
}
|
||||
|
|
@ -51,15 +51,6 @@ web前端小学生
|
|||
🎉🎉✨与我 <a :href="qqUrl">联系↑</a> 获取前端 [学习资源](https://github.com/xugaoyi/blog-gitalk-comment/wiki/Front-end-Study)
|
||||
|
||||
|
||||
<!-- 广告 -->
|
||||
<amp-ad width="100vw" height="320"
|
||||
type="adsense"
|
||||
data-ad-client="ca-pub-7828333725993554"
|
||||
data-ad-slot="7774950020"
|
||||
data-auto-format="rspv"
|
||||
data-full-width="">
|
||||
<div overflow=""></div>
|
||||
</amp-ad>
|
||||
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@
|
|||
},
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"dayjs": "^1.9.7",
|
||||
"inquirer": "^7.1.0",
|
||||
"json2yaml": "^1.1.0",
|
||||
"moment": "^2.25.3",
|
||||
"vuepress": "1.5.2",
|
||||
"vuepress-plugin-baidu-autopush": "^1.0.1",
|
||||
"vuepress-plugin-baidu-tongji": "^1.0.1",
|
||||
|
|
@ -22,7 +22,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.6.4",
|
||||
"vuepress-theme-vdoing": "^1.7.0",
|
||||
"yamljs": "^0.3.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@
|
|||
:tagsData="$categoriesAndTags.tags"
|
||||
:length="30"
|
||||
/>
|
||||
<div class="custom-html-box card-box" v-if="homeSidebarB" v-html="homeSidebarB"></div>
|
||||
</template>
|
||||
</MainLayout>
|
||||
</div>
|
||||
|
|
@ -212,6 +213,50 @@ export default {
|
|||
currentPage: 1// 当前页
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
homeSidebarB() {
|
||||
const { htmlModules } = this.$themeConfig
|
||||
return htmlModules ? htmlModules.homeSidebarB : ''
|
||||
},
|
||||
showBanner () { // 当分页不在第一页时隐藏banner栏
|
||||
return this.$route.query.p
|
||||
&& this.$route.query.p != 1
|
||||
&& (!this.homeData.postList || this.homeData.postList === 'detailed')
|
||||
? false : true
|
||||
},
|
||||
bannerBgStyle () {
|
||||
let bannerBg = this.homeData.bannerBg
|
||||
if (!bannerBg || bannerBg === 'auto') { // 默认
|
||||
if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景
|
||||
return ''
|
||||
} else { // 网格纹背景
|
||||
return 'background: rgb(40,40,45) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABOSURBVFhH7c6xCQAgDAVRR9A6E4hLu4uLiWJ7tSnuQcIvr2TRYsw3/zOGGEOMIcYQY4gxxBhiDDGGGEOMIcYQY4gxxBhiDLkx52W4Gn1tuslCtHJvL54AAAAASUVORK5CYII=)'
|
||||
}
|
||||
} else if (bannerBg === 'none') { // 无背景
|
||||
if (this.$themeConfig.bodyBgImg) {
|
||||
return ''
|
||||
} else {
|
||||
return 'background: var(--mainBg);color: var(--textColor)'
|
||||
}
|
||||
} else if (bannerBg.indexOf('background') > -1) { // 自定义背景样式
|
||||
return bannerBg
|
||||
} else if (bannerBg.indexOf('.') > -1) { // 大图
|
||||
return `background: url(${this.$withBase(bannerBg)}) center center / cover no-repeat`
|
||||
}
|
||||
|
||||
},
|
||||
homeData () {
|
||||
return {
|
||||
...this.$page.frontmatter
|
||||
}
|
||||
},
|
||||
actionLink () {
|
||||
return {
|
||||
link: this.homeData.actionLink,
|
||||
text: this.homeData.actionText
|
||||
};
|
||||
}
|
||||
},
|
||||
components: { NavLink, MainLayout, PostList, UpdateArticle, BloggerBar, CategoriesBar, TagsBar, Pagination },
|
||||
created () {
|
||||
this.total = this.$sortPosts.length
|
||||
|
|
@ -306,46 +351,6 @@ export default {
|
|||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
showBanner () { // 当分页不在第一页时隐藏banner栏
|
||||
return this.$route.query.p
|
||||
&& this.$route.query.p != 1
|
||||
&& (!this.homeData.postList || this.homeData.postList === 'detailed')
|
||||
? false : true
|
||||
},
|
||||
bannerBgStyle () {
|
||||
let bannerBg = this.homeData.bannerBg
|
||||
if (!bannerBg || bannerBg === 'auto') { // 默认
|
||||
if (this.$themeConfig.bodyBgImg) { // 当有bodyBgImg时，不显示背景
|
||||
return ''
|
||||
} else { // 网格纹背景
|
||||
return 'background: rgb(40,40,45) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABOSURBVFhH7c6xCQAgDAVRR9A6E4hLu4uLiWJ7tSnuQcIvr2TRYsw3/zOGGEOMIcYQY4gxxBhiDDGGGEOMIcYQY4gxxBhiDLkx52W4Gn1tuslCtHJvL54AAAAASUVORK5CYII=)'
|
||||
}
|
||||
} else if (bannerBg === 'none') { // 无背景
|
||||
if (this.$themeConfig.bodyBgImg) {
|
||||
return ''
|
||||
} else {
|
||||
return 'background: var(--mainBg);color: var(--textColor)'
|
||||
}
|
||||
} else if (bannerBg.indexOf('background') > -1) { // 自定义背景样式
|
||||
return bannerBg
|
||||
} else if (bannerBg.indexOf('.') > -1) { // 大图
|
||||
return `background: url(${this.$withBase(bannerBg)}) center center / cover no-repeat`
|
||||
}
|
||||
|
||||
},
|
||||
homeData () {
|
||||
return {
|
||||
...this.$page.frontmatter
|
||||
}
|
||||
},
|
||||
actionLink () {
|
||||
return {
|
||||
link: this.homeData.actionLink,
|
||||
text: this.homeData.actionText
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<main class="page">
|
||||
<slot name="top" />
|
||||
|
||||
<div :class="`theme-vdoing-wrapper ${bgStyle}`">
|
||||
<ArticleInfo v-if="isArticle()" />
|
||||
|
|
@ -20,20 +19,24 @@
|
|||
/>
|
||||
{{this.$page.title}}
|
||||
</h1>
|
||||
<slot name="top" v-if="isShowSlotT" />
|
||||
|
||||
<Content class="theme-vdoing-content" />
|
||||
</div>
|
||||
|
||||
<slot name="bottom" v-if="isShowSlotB" />
|
||||
<PageEdit />
|
||||
|
||||
|
||||
<PageNav v-bind="{ sidebarItems }" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<UpdateArticle
|
||||
:length="3"
|
||||
:moreArticle="updateBarConfig && updateBarConfig.moreArticle"
|
||||
v-if="isShowUpdateBar"
|
||||
/>
|
||||
|
||||
<slot name="bottom" />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,8 +24,12 @@
|
|||
<span v-else>{{blogger.slogan}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 移动端Nav -->
|
||||
<NavLinks />
|
||||
|
||||
<slot name="top" />
|
||||
|
||||
<SidebarLinks
|
||||
:depth="0"
|
||||
:items="items"
|
||||
|
|
@ -97,6 +101,13 @@ export default {
|
|||
font-size 1.2rem
|
||||
padding-right 0.6rem
|
||||
color #777
|
||||
.sidebar-slot
|
||||
margin-bottom: -.5rem;
|
||||
font-size: .85rem;
|
||||
&.sidebar-slot-top
|
||||
padding: 1.5rem 1.5rem 0;
|
||||
&.sidebar-slot-bottom
|
||||
padding: 0 1.5rem 1.5rem;
|
||||
@media (max-width $MQMobile)
|
||||
.sidebar
|
||||
.blogger
|
||||
|
|
|
|||
|
|
@ -20,14 +20,20 @@
|
|||
@toggle-sidebar="toggleSidebar"
|
||||
v-show="showSidebar"
|
||||
>
|
||||
<slot
|
||||
name="sidebar-top"
|
||||
<template
|
||||
#top
|
||||
/>
|
||||
<slot
|
||||
name="sidebar-bottom"
|
||||
v-if="sidebarSlotTop"
|
||||
>
|
||||
<div class="sidebar-slot sidebar-slot-top" v-html="sidebarSlotTop"></div>
|
||||
</template>
|
||||
<template
|
||||
#bottom
|
||||
/>
|
||||
v-if="sidebarSlotBottom"
|
||||
>
|
||||
<div class="sidebar-slot sidebar-slot-bottom" v-html="sidebarSlotBottom"></div>
|
||||
</template>
|
||||
<!-- <slot name="sidebar-top" #top />
|
||||
<slot name="sidebar-bottom" #bottom /> -->
|
||||
</Sidebar>
|
||||
|
||||
<!-- 首页 -->
|
||||
|
|
@ -47,14 +53,26 @@
|
|||
v-else
|
||||
:sidebar-items="sidebarItems"
|
||||
>
|
||||
<slot
|
||||
<template
|
||||
#top
|
||||
v-if="pageSlotTop"
|
||||
>
|
||||
<div class="page-slot page-slot-top" v-html="pageSlotTop"></div>
|
||||
</template>
|
||||
<template
|
||||
#bottom
|
||||
v-if="pageSlotBottom"
|
||||
>
|
||||
<div class="page-slot page-slot-bottom" v-html="pageSlotBottom"></div>
|
||||
</template>
|
||||
<!-- <slot
|
||||
name="page-top"
|
||||
#top
|
||||
/>
|
||||
<slot
|
||||
name="page-bottom"
|
||||
#bottom
|
||||
/>
|
||||
/> -->
|
||||
</Page>
|
||||
|
||||
<Footer />
|
||||
|
|
@ -65,6 +83,21 @@
|
|||
/>
|
||||
|
||||
<BodyBgImg v-if="$themeConfig.bodyBgImg" />
|
||||
|
||||
<!-- 自定义html插入左右下角的小窗口 -->
|
||||
<div class="custom-html-window custom-html-window-lb" v-if="windowLB" v-show="showWindowLB">
|
||||
<div class="custom-wrapper">
|
||||
<i class="close-but" @click="showWindowLB = false">×</i>
|
||||
<div v-html="windowLB"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="custom-html-window custom-html-window-rb" v-if="windowRB" v-show="showWindowRB">
|
||||
<div class="custom-wrapper">
|
||||
<i class="close-but" @click="showWindowRB = false">×</i>
|
||||
<div v-html="windowRB"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -94,10 +127,30 @@ export default {
|
|||
hideNavbar: false,
|
||||
isSidebarOpen: true,
|
||||
showSidebar: false,
|
||||
themeMode: 'light'
|
||||
themeMode: 'light',
|
||||
showWindowLB: true,
|
||||
showWindowRB: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sidebarSlotTop() {
|
||||
return this.getHtmlStr('sidebarT')
|
||||
},
|
||||
sidebarSlotBottom() {
|
||||
return this.getHtmlStr('sidebarB')
|
||||
},
|
||||
pageSlotTop() {
|
||||
return this.getHtmlStr('pageT')
|
||||
},
|
||||
pageSlotBottom() {
|
||||
return this.getHtmlStr('pageB')
|
||||
},
|
||||
windowLB() {
|
||||
return this.getHtmlStr('windowLB')
|
||||
},
|
||||
windowRB() {
|
||||
return this.getHtmlStr('windowRB')
|
||||
},
|
||||
showRightMenu () {
|
||||
const { headers } = this.$page
|
||||
return (
|
||||
|
|
@ -186,7 +239,6 @@ export default {
|
|||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
// 初始化页面时链接锚点无法跳转到指定id的解决方案
|
||||
const hash = document.location.hash;
|
||||
if (hash.length > 1) {
|
||||
|
|
@ -227,6 +279,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getHtmlStr(module) {
|
||||
const { htmlModules } = this.$themeConfig
|
||||
return htmlModules ? htmlModules[module] : ''
|
||||
},
|
||||
setBodyClass () {
|
||||
document.body.className = 'theme-mode-' + this.themeMode
|
||||
},
|
||||
|
|
@ -282,3 +338,45 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus">
|
||||
.custom-html-window
|
||||
position fixed
|
||||
bottom 0
|
||||
display flex
|
||||
overflow hidden
|
||||
font-weight 350
|
||||
@media (max-width 960px)
|
||||
display none
|
||||
.custom-wrapper
|
||||
position relative
|
||||
max-width 200px
|
||||
max-height 200px
|
||||
.close-but
|
||||
cursor pointer
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
font-size 2rem
|
||||
line-height 1.5rem
|
||||
width 1.5rem
|
||||
height 1.5rem
|
||||
opacity 0
|
||||
transition all .2s
|
||||
&:hover
|
||||
opacity .9
|
||||
&:hover
|
||||
.close-but
|
||||
opacity .7
|
||||
&.custom-html-window-lb
|
||||
left 0
|
||||
z-index 99
|
||||
&>*
|
||||
align-self: flex-end;
|
||||
&.custom-html-window-rb
|
||||
right 80px
|
||||
z-index 10
|
||||
justify-content: flex-end
|
||||
&>*
|
||||
align-self: flex-end;
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vuepress-theme-vdoing",
|
||||
"version": "1.6.4",
|
||||
"version": "1.7.0",
|
||||
"description": "Vdoing theme for VuePress. 一个基于VuePress的知识管理兼博客主题。",
|
||||
"author": {
|
||||
"name": "gaoyi(Evan) Xu"
|
||||
|
|
|
|||
|
|
@ -14,4 +14,3 @@ $vdoing-wrapper
|
|||
padding 1rem 1.5rem
|
||||
$wrapper
|
||||
max-width $contentWidth
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue