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

feat: 添加一些小功能&使config支持ts(未完成)

This commit is contained in:
xugaoyi 2022-01-01 23:49:51 +08:00
parent 41e7fac18b
commit fc34b35537
16 changed files with 430 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
docs/.vuepress/config.js → docs/.vuepress/config.ts
View File

@ -1,9 +1,17 @@
const baiduCode = require('./config/baiduCode.js'); // 百度统计hm码 import { resolve } from 'path'
const htmlModules = require('./config/htmlModules.js'); import { defineConfig4CustomTheme } from 'vuepress/config'
import { VdoingThemeConfig } from '../../theme-vdoing/types'
// import { VdoingThemeConfig } from 'vuepress-theme-vdoing/types'
import dayjs from 'dayjs'
import baiduCode from './config/baiduCode' // 百度统计hm码
import htmlModules from './config/htmlModules' // 自定义插入的html块
module.exports = {
theme: 'vdoing', // 使用npm包主题
// theme: require.resolve('../../theme-vdoing'), // 使用本地主题
export default defineConfig4CustomTheme<VdoingThemeConfig>({
// theme: 'vdoing', // 使用npm包主题
theme: resolve(__dirname, '../../theme-vdoing'), // 使用本地主题
title: "Evan's blog", title: "Evan's blog",
description: 'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。', description: 'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。',
@ -123,8 +131,7 @@ module.exports = {
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg', // 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175845.jpeg',
// 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg' // 'https://cdn.jsdelivr.net/gh/xugaoyi/image_store/blog/20200507175846.jpeg'
// ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时每隔15秒换一张。 // ], // body背景大图，默认无。 单张图片 String | 多张图片 Array, 多张图片时每隔15秒换一张。
// bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0 ~ 1.0, 默认0.5 // bodyBgImgOpacity: 0.5, // body背景图透明度，选值 0.1~ 1.0, 默认0.5
// titleBadge: false, // 文章标题前的图标是否显示，默认true // titleBadge: false, // 文章标题前的图标是否显示，默认true
// titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标 // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
// '图标地址1', // '图标地址1',
@ -141,6 +148,7 @@ module.exports = {
// pageButton: false, // 是否显示快捷翻页按钮，默认true // pageButton: false, // 是否显示快捷翻页按钮，默认true
// 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义> 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页 // 侧边栏 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义> 温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
// @ts-ignore
sidebar: 'structuring', sidebar: 'structuring',
// 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String} // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
@ -201,123 +209,111 @@ module.exports = {
], ],
['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' }], // 移动浏览器主题颜色
[ // [
'script', // 'script',
{ // {
'data-ad-client': 'ca-pub-7828333725993554', // 'data-ad-client': 'ca-pub-7828333725993554',
async: 'async', // async: 'async',
src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', // src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
}, // },
], // 网站关联Google AdSense 与 html格式广告支持（你可以去掉） // ], // 网站关联Google AdSense 与 html格式广告支持（你可以去掉）
], ],
// 插件配置 // 插件配置
plugins: [ plugins: {
// 本地插件（供学习） // 导入本地插件（供学习参考）
// [require('./plugins/love-me'), { // 鼠标点击爱心特效 // [resolve(__dirname, './plugins/love-me')]: { // 鼠标点击爱心特效
// color: '#11a8cd', // 爱心颜色，默认随机色 // color: '#11a8cd', // 爱心颜色，默认随机色
// excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空'' // excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空''
// }], // },
'vuepress-plugin-baidu-autopush', // 百度自动推送 // 百度自动推送
'vuepress-plugin-baidu-autopush': {},
// 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用） // 百度统计
[ 'vuepress-plugin-baidu-tongji': {
'thirdparty-search', hm: baiduCode,
{ },
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', // 代码块复制按钮 'thirdparty-search': {
{ thirdparty: [
copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array {
copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.' title: '在MDN中搜索',
duration: 1000, // prompt message display time. frontUrl: 'https://developer.mozilla.org/zh-CN/search?q=', // 搜索链接的前面部分
showInMobile: false, // whether to display on the mobile side, default: false. 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',
},
],
},
[ // 代码块复制按钮
'demo-block', // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block 'one-click-copy': {
{ copySelector: ['div[class*="language-"] pre', 'div[class*="aside-code"] aside'], // String or Array
settings: { copyMessage: '复制成功', // default is 'Copy successfully and then paste it for use.'
// jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖 duration: 1000, // prompt message display time.
// cssLib: ['http://xxx'], // 在线示例中的css依赖 showInMobile: false, // whether to display on the mobile side, default: false.
// vue: 'https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖 },
jsfiddle: false, // 是否显示 jsfiddle 链接
codepen: true, // 是否显示 codepen 链接 // DEMO演示模块, API: https://github.com/xiguaxigua/vuepress-plugin-demo-block
horizontal: false, // 是否展示为横向样式 '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', // 放大图片 // 放大图片
{ 'vuepress-plugin-zooming': {
selector: '.theme-vdoing-content img:not(.no-zoom)', // 排除class是no-zoom的图片 selector: '.theme-vdoing-content img:not(.no-zoom)', // not排除class是no-zoom的图片
options: { options: {
bgColor: 'rgba(0,0,0,0.6)', bgColor: 'rgba(0,0,0,0.6)',
},
}, },
], },
[
'vuepress-plugin-baidu-tongji', // 百度统计 （你可以去掉） // 评论区
{ 'vuepress-plugin-comment': {
hm: baiduCode || '503f098e7e5b3a5b5d8c5fc2938af002', 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-plugin-comment', // 评论 // "上次更新"的时间格式
{ '@vuepress/last-updated': {
choosen: 'gitalk', transformer: (timestamp, lang) => {
options: { return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
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')
},
},
],
],
}

2
docs/.vuepress/config/baiduCode.js
View File

@ -1 +1 @@
module.exports = ''; export default '503f098e7e5b3a5b5d8c5fc2938af002'

7
docs/.vuepress/config/htmlModules.js
View File

@ -18,7 +18,7 @@
* ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。 * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
*/ */
module.exports = { const htmlModule = {
homeSidebarB: homeSidebarB:
`<div style="padding: 0.95rem"> `<div style="padding: 0.95rem">
<p style=" <p style="
@ -110,7 +110,7 @@ module.exports = {
} }
// module.exports = { // const htmlModule = {
// homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`, // homeSidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// sidebarT: `<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>`, // sidebarB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
@ -119,3 +119,6 @@ module.exports = {
// windowLB: `<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>`, // windowRB: `<div style="width:100%;height:100px;color:#fff;background: #eee;">自定义模块测试</div>`,
// } // }
export default htmlModule

95
docs/03.技术/01.技术文档/02.Markdown使用教程.md
View File

@ -2,12 +2,12 @@
title: Markdown使用教程 title: Markdown使用教程
date: 2019-12-25 14:27:01 date: 2019-12-25 14:27:01
permalink: /pages/ad247c4332211551 permalink: /pages/ad247c4332211551
categories: categories:
- 技术 - 技术
- 技术文档 - 技术文档
tags: tags:
- null - null
author: author:
name: xugaoyi name: xugaoyi
link: https://github.com/xugaoyi link: https://github.com/xugaoyi
--- ---
@ -192,7 +192,7 @@ Markdown 段落没有特殊的格式，直接编写文字，**需要段落缩进
### 字体 ### 字体
```markdown ```markdown
*斜体文本* *斜体文本*
或 _斜体文本_ 或 _斜体文本_
**粗体文本** **粗体文本**
或 __粗体文本__ 或 __粗体文本__
@ -245,10 +245,10 @@ ___粗斜体文本___
文字高亮能使行内部分文字高亮，使用一对反引号。 文字高亮能使行内部分文字高亮，使用一对反引号。
```markdown ```markdown
`html` `css` `javascript` `html` `css` `javascript`
``` ```
`html` `css` `javascript` `html` `css` `javascript`
@ -435,7 +435,7 @@ ___粗斜体文本___
- [ ] 第三项 - [ ] 第三项
### 列表嵌套 ### 列表嵌套
@ -537,7 +537,7 @@ ___粗斜体文本___
如果是段落上的一个代码片段可以用反引号把它包起来（**`**），示例： 如果是段落上的一个代码片段可以用反引号把它包起来（**`**），示例：
```markdown ```markdown
`alert()` `alert()`
``` ```
`alert()` `alert()`
@ -648,7 +648,7 @@ function test() {
[Markdown](#一Markdown) [Markdown](#一Markdown)
[链接](#九链接) [链接](#九链接)
[流程图](#流程图) [流程图](#流程图)
@ -665,7 +665,7 @@ function test() {
当然，你也可以像链接那样对图片地址使用变量: 当然，你也可以像链接那样对图片地址使用变量:
```markdown ```markdown
这里链接用 img 作为图片地址变量 这里链接用 img 作为图片地址变量
然后在文档的结尾或其他位置给变量赋值（图片地址） 然后在文档的结尾或其他位置给变量赋值（图片地址）
![RUNOOB][img] ![RUNOOB][img]
[img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png [img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png
@ -740,7 +740,7 @@ github上如果引用其他github仓库中的图片则要注意地址格式：`
**对齐方式** **对齐方式**
- **-:** 设置内容和标题栏居右对齐 - **-:** 设置内容和标题栏居右对齐
- **:-** 设置内容和标题栏居左对齐 - **:-** 设置内容和标题栏居左对齐
- **:-:** 设置内容和标题栏居中对齐 - **:-:** 设置内容和标题栏居中对齐
@ -798,11 +798,11 @@ Emoji表情英文名的前后加冒号，Typore上先输入冒号再输入首字
Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用反斜杠转义字符： Markdown 使用了很多特殊符号来表示特定的意义，如果需要显示特定的符号则需要使用反斜杠转义字符：
```markdown ```markdown
**未转义星号显示加粗** **未转义星号显示加粗**
\*\* 转义显示星号 \*\* \*\* 转义显示星号 \*\*
``` ```
**未转义星号显示加粗** **未转义星号显示加粗**
\*\* 转义显示星号 \*\* \*\* 转义显示星号 \*\*
@ -840,7 +840,7 @@ _ 下划线
```markdown ```markdown
$$ $$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\ \mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
@ -851,7 +851,7 @@ $$
$$ $$
\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\ \mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
@ -860,7 +860,7 @@ $$
### 图表 ### 图表
```markdown ````markdown
​```chart ​```chart
,Budget,Income,Expenses,Debt ,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000 June,5000,8000,4000,6000
@ -881,31 +881,14 @@ sequenceDiagram
A->>B: 是否已收到消息？ A->>B: 是否已收到消息？
B-->>A: 已收到消息 B-->>A: 已收到消息
​``` ​```
``` ````
> 注：在Typora中未支持 > 注：在Typora中未支持
```chart
,Budget,Income,Expenses,Debt
June,5000,8000,4000,6000
July,3000,1000,4000,3000
Aug,5000,7000,6000,3000
Sep,7000,2000,3000,1000
Oct,6000,5000,4000,2000
Nov,4000,3000,5000,
type: pie
title: Monthly Revenue
x.title: Amount
y.title: Month
y.suffix: $
```
### 流程图 ### 流程图
```markdown ````markdown
语法： 语法：
​```mermaid ​```mermaid
graph TD graph TD
@ -915,7 +898,7 @@ C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E] C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F] C -->|条件C3| F[模块F]
​``` ​```
``` ````
流程图相关文章： 流程图相关文章：
@ -923,40 +906,26 @@ C -->|条件C3| F[模块F]
<http://www.imooc.com/article/292708> <http://www.imooc.com/article/292708>
```mermaid
graph TD
A[模块A] -->|A1| B(模块B)
B --> C{判断条件C}
C -->|条件C1| D[模块D]
C -->|条件C2| E[模块E]
C -->|条件C3| F[模块F]
```
### 时序图 ### 时序图
```markdown ````markdown
​```mermaid ​```mermaid
sequenceDiagram sequenceDiagram
A->>B: 是否已收到消息？ A->>B: 是否已收到消息？
B-->>A: 已收到消息 B-->>A: 已收到消息
​``` ​```
``` ````
```mermaid
sequenceDiagram
A->>B: 是否已收到消息？
B-->>A: 已收到消息
```
### 甘特图
```` markdown
### 甘特图
``` markdown
​```mermaid ​```mermaid
gantt gantt
title 甘特图 title 甘特图
@ -968,18 +937,6 @@ section 项目B
任务3 :2018-06-12 , 12d 任务3 :2018-06-12 , 12d
任务4 : 24d 任务4 : 24d
​``` ​```
``` ````
```mermaid ​ [回到顶部](#markdown使用教程)
gantt
title 甘特图
dateFormat YYYY-MM-DD
section 项目A
任务1 :a1, 2018-06-06, 30d
任务2 :after a1 , 20d
section 项目B
任务3 :2018-06-12 , 12d
任务4 : 24d
```
​ [回到顶部](#markdown使用教程)

1
docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md
View File

@ -2,6 +2,7 @@
title: 一行代码“黑”掉任意网站 title: 一行代码“黑”掉任意网站
date: 2021-11-25 14:33:51 date: 2021-11-25 14:33:51
permalink: /pages/dcebaf/ permalink: /pages/dcebaf/
titleTag: 原创
sticky: 1 sticky: 1
categories: categories:
- 更多 - 更多

8
docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md
View File

@ -15,7 +15,7 @@ author:
### 加载渲染过程 ### 加载渲染过程
```repl ```text
父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted 父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
``` ```
@ -23,18 +23,18 @@ author:
### 子组件更新过程 ### 子组件更新过程
```repl ```text
父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
``` ```
### 父组件更新过程 ### 父组件更新过程
```repl ```text
父beforeUpdate -> 父updated 父beforeUpdate -> 父updated
``` ```
### 销毁过程 ### 销毁过程
```repl ```text
父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
``` ```

2
package.json
View File

@ -15,7 +15,7 @@
"dayjs": "^1.9.7", "dayjs": "^1.9.7",
"inquirer": "^7.1.0", "inquirer": "^7.1.0",
"json2yaml": "^1.1.0", "json2yaml": "^1.1.0",
"vuepress": "1.8.0", "vuepress": "1.9.2",
"vuepress-plugin-baidu-autopush": "^1.0.1", "vuepress-plugin-baidu-autopush": "^1.0.1",
"vuepress-plugin-baidu-tongji": "^1.0.1", "vuepress-plugin-baidu-tongji": "^1.0.1",
"vuepress-plugin-demo-block": "^0.7.2", "vuepress-plugin-demo-block": "^0.7.2",

77
theme-vdoing/components/ArchivesPage.vue
View File

@ -6,8 +6,11 @@
:src="currentBadge" :src="currentBadge"
v-if="$themeConfig.titleBadge === false ? false : true" v-if="$themeConfig.titleBadge === false ? false : true"
/> />
{{ this.$page.title }} {{ $page.title }}
</h1> </h1>
<div class="count">
总共 <i>{{ $sortPostsByDate.length }}</i> 篇文章
</div>
<ul> <ul>
<template v-for="(item, index) in postsList"> <template v-for="(item, index) in postsList">
<li <li
@ -15,12 +18,20 @@
v-if="(year = getYear(index)) !== getYear(index - 1)" v-if="(year = getYear(index)) !== getYear(index - 1)"
:key="index + $sortPostsByDate.length" :key="index + $sortPostsByDate.length"
> >
<h2>{{ year }}</h2> <h2>
{{ year }}
<span>
<i>{{ countByYear[year] }}</i> 篇
</span>
</h2>
</li> </li>
<li :key="index"> <li :key="index">
<router-link :to="item.path"> <router-link :to="item.path">
<span>{{ getDate(item) }}</span> <span class="date">{{ getDate(item) }}</span>
{{ item.title }} {{ item.title }}
<span class="title-tag" v-if="item.frontmatter.titleTag">
{{ item.frontmatter.titleTag }}
</span>
</router-link> </router-link>
</li> </li>
</template> </template>
@ -36,19 +47,34 @@ import TitleBadgeMixin from '../mixins/titleBadge'
export default { export default {
mixins: [TitleBadgeMixin], mixins: [TitleBadgeMixin],
data () { data() {
return { return {
postsList: [], postsList: [],
countByYear: {}, // 根据年份统计的文章数
perPage: 80, // 每页长 perPage: 80, // 每页长
currentPage: 1// 当前页 currentPage: 1// 当前页
} }
}, },
created () { created() {
this.getPageData() this.getPageData()
},
mounted () {
// 根据年份计算出文章数
const { $sortPostsByDate, countByYear } = this
for (let i = 0; i < $sortPostsByDate.length; i++) {
const { frontmatter: { date } } = $sortPostsByDate[i];
if (date && type(date) === 'string') {
const year = date.slice(0, 4)
if (!countByYear[year]) {
countByYear[year] = 0
}
countByYear[year] = countByYear[year] + 1
}
}
this.countByYear = countByYear
},
mounted() {
window.addEventListener('scroll', debounce(() => { window.addEventListener('scroll', debounce(() => {
if (this.postsList.length < this.$sortPostsByDate.length) { if (this.postsList.length < this.$sortPostsByDate.length) {
const docEl = document.documentElement const docEl = document.documentElement
@ -65,29 +91,29 @@ export default {
}, 200)) }, 200))
}, },
methods: { methods: {
getPageData () { getPageData() {
const currentPage = this.currentPage const currentPage = this.currentPage
const perPage = this.perPage const perPage = this.perPage
this.postsList = this.postsList.concat(this.$sortPostsByDate.slice((currentPage - 1) * perPage, currentPage * perPage)) this.postsList = this.postsList.concat(this.$sortPostsByDate.slice((currentPage - 1) * perPage, currentPage * perPage))
}, },
loadmore () { loadmore() {
this.currentPage = this.currentPage + 1 this.currentPage = this.currentPage + 1
this.getPageData() this.getPageData()
}, },
getYear (index) { getYear(index) {
const item = this.postsList[index] const item = this.postsList[index]
if (!item) { if (!item) {
return return
} }
const { frontmatter: { date } } = item const { frontmatter: { date } } = item
if (date && type(date) === 'string') { if (date && type(date) === 'string') {
return date.split(" ")[0].slice(0, 4) return date.slice(0, 4)
} }
}, },
getDate (item) { getDate(item) {
const { frontmatter: { date } } = item const { frontmatter: { date } } = item
if (date && type(date) === 'string') { if (date && type(date) === 'string') {
return date.split(" ")[0].slice(5, 10) return date.slice(5, 10)
} }
} }
} }
@ -103,9 +129,16 @@ export default {
position relative position relative
@media (min-width $contentWidth + 80) @media (min-width $contentWidth + 80)
margin-top 1.5rem !important margin-top 1.5rem !important
.count
text-align right
margin-top -2.5rem
font-size 0.85rem
opacity 0.8
ul, li ul, li
margin 0 margin 0
padding 0 padding 0
ul
margin-top 2rem
li li
list-style none list-style none
&.year &.year
@ -119,6 +152,11 @@ export default {
margin-bottom 0.8rem margin-bottom 0.8rem
font-weight 400 font-weight 400
padding 0.5rem 0 padding 0.5rem 0
span
font-size 0.85rem
font-weight 300
float right
margin-top 1rem
a a
display block display block
color var(--textColor) color var(--textColor)
@ -134,11 +172,22 @@ export default {
font-weight normal font-weight normal
&:hover &:hover
padding-left 1.5rem padding-left 1.5rem
span span.date
opacity 0.6 opacity 0.6
font-size 0.85rem font-size 0.85rem
font-weight 400 font-weight 400
margin-right 0.3rem margin-right 0.3rem
.title-tag
// height 1.1rem
// line-height 1.1rem
border 1px solid $activeColor
color $activeColor
font-size 0.8rem
padding 0 0.35rem
border-radius 0.2rem
margin-left 0rem
transform translate(0, -0.05rem)
display inline-block
.loadmore .loadmore
text-align center text-align center
margin-top 1rem margin-top 1rem

57
theme-vdoing/components/Page.vue
View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<main class="page"> <main class="page">
<div :class="`theme-vdoing-wrapper ${bgStyle}`"> <div :class="`theme-vdoing-wrapper ${bgStyle}`">
<ArticleInfo v-if="isArticle()" /> <ArticleInfo v-if="isArticle()" />
<component <component
@ -12,26 +11,27 @@
<div class="content-wrapper"> <div class="content-wrapper">
<RightMenu v-if="showRightMenu" /> <RightMenu v-if="showRightMenu" />
<h1 v-if="showTitle"> <h1 v-if="showTitle">
<img <img
:src="currentBadge" :src="currentBadge"
v-if="$themeConfig.titleBadge === false ? false : true" v-if="$themeConfig.titleBadge === false ? false : true"
/> />{{ this.$page.title
{{this.$page.title}} }}<span class="title-tag" v-if="$frontmatter.titleTag">{{
$frontmatter.titleTag
}}</span>
</h1> </h1>
<slot name="top" v-if="isShowSlotT" /> <slot name="top" v-if="isShowSlotT" />
<Content class="theme-vdoing-content" /> <Content class="theme-vdoing-content" />
</div> </div>
<slot name="bottom" v-if="isShowSlotB" /> <slot name="bottom" v-if="isShowSlotB" />
<PageEdit /> <PageEdit />
<PageNav v-bind="{ sidebarItems }" /> <PageNav v-bind="{ sidebarItems }" />
</div> </div>
<UpdateArticle <UpdateArticle
:length="3" :length="3"
:moreArticle="updateBarConfig && updateBarConfig.moreArticle" :moreArticle="updateBarConfig && updateBarConfig.moreArticle"
@ -53,28 +53,28 @@ import TitleBadgeMixin from '../mixins/titleBadge'
export default { export default {
mixins: [TitleBadgeMixin], mixins: [TitleBadgeMixin],
data () { data() {
return { return {
updateBarConfig: null updateBarConfig: null
} }
}, },
props: ['sidebarItems'], props: ['sidebarItems'],
components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, RightMenu }, components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, RightMenu },
created () { created() {
this.updateBarConfig = this.$themeConfig.updateBar this.updateBarConfig = this.$themeConfig.updateBar
}, },
computed: { computed: {
bgStyle () { bgStyle() {
const { contentBgStyle } = this.$themeConfig const { contentBgStyle } = this.$themeConfig
return contentBgStyle ? 'bg-style-' + contentBgStyle : '' return contentBgStyle ? 'bg-style-' + contentBgStyle : ''
}, },
isShowUpdateBar () { isShowUpdateBar() {
return this.updateBarConfig && this.updateBarConfig.showToArticle === false ? false : true return this.updateBarConfig && this.updateBarConfig.showToArticle === false ? false : true
}, },
showTitle () { showTitle() {
return !this.$frontmatter.pageComponent return !this.$frontmatter.pageComponent
}, },
showRightMenu () { showRightMenu() {
const { $frontmatter, $themeConfig, $page } = this const { $frontmatter, $themeConfig, $page } = this
const { sidebar } = $frontmatter const { sidebar } = $frontmatter
return ( return (
@ -83,7 +83,7 @@ export default {
($frontmatter && sidebar && sidebar !== false) !== false ($frontmatter && sidebar && sidebar !== false) !== false
) )
}, },
pageComponent () { pageComponent() {
return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false
}, },
isShowSlotT() { isShowSlotT() {
@ -96,16 +96,16 @@ export default {
methods: { methods: {
getShowStatus(prop) { getShowStatus(prop) {
const { htmlModules } = this.$themeConfig const { htmlModules } = this.$themeConfig
if(!htmlModules) return false if (!htmlModules) return false
if (htmlModules[prop] === 'article') { // 仅文章页显示 if (htmlModules[prop] === 'article') { // 仅文章页显示
return this.isArticle() return this.isArticle()
} else if (htmlModules[prop] === 'custom'){ // 仅自定义页显示 } else if (htmlModules[prop] === 'custom') { // 仅自定义页显示
return !(this.isArticle()) return !(this.isArticle())
} else { // 全部显示 } else { // 全部显示
return true return true
} }
}, },
isArticle () { isArticle() {
return this.$frontmatter.article !== false return this.$frontmatter.article !== false
} }
} }
@ -121,16 +121,29 @@ export default {
@media (max-width $MQMobile) @media (max-width $MQMobile)
padding-top $navbarHeight padding-top $navbarHeight
@media (min-width $MQMobile) @media (min-width $MQMobile)
padding-top ($navbarHeight + 1.5rem) padding-top: ($navbarHeight + 1.5rem)
>* >*
@extend $vdoing-wrapper @extend $vdoing-wrapper
.theme-vdoing-wrapper .theme-vdoing-wrapper
.content-wrapper .content-wrapper
position relative position relative
h1 img h1
margin-bottom -0.2rem .title-tag
max-width 2.2rem height 1.5rem
max-height 2.2rem line-height 1.5rem
border 1px solid $activeColor
color $activeColor
font-size 1rem
padding 0 0.4rem
border-radius 0.2rem
margin-left 0.5rem
transform translate(0, -0.25rem)
display inline-block
img
margin-bottom -0.2rem
margin-right 0.2rem
max-width 2.2rem
max-height 2.2rem
.theme-vdoing-wrapper .theme-vdoing-wrapper
--linesColor rgba(50, 0, 0, 0.05) --linesColor rgba(50, 0, 0, 0.05)
&.bg-style-1 // 方格 &.bg-style-1 // 方格

81
theme-vdoing/components/PostList.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<div <div class="post-list" ref="postList">
class="post-list" <transition-group tag="div" name="post">
ref="postList"
>
<transition-group
tag="div"
name="post"
>
<div <div
class="post card-box" class="post card-box"
:class="item.frontmatter.sticky && 'iconfont icon-zhiding'" :class="item.frontmatter.sticky && 'iconfont icon-zhiding'"
@ -15,7 +9,12 @@
> >
<div class="title-wrapper"> <div class="title-wrapper">
<h2> <h2>
<router-link :to="item.path">{{item.title}}</router-link> <router-link :to="item.path">
{{ item.title }}
<span class="title-tag" v-if="item.frontmatter.titleTag">{{
item.frontmatter.titleTag
}}</span>
</router-link>
</h2> </h2>
<div class="article-info"> <div class="article-info">
<a <a
@ -24,54 +23,60 @@
target="_blank" target="_blank"
v-if="item.author && item.author.href" v-if="item.author && item.author.href"
:href="item.author.href" :href="item.author.href"
>{{ item.author.name ? item.author.name : item.author }}</a> >{{ item.author.name ? item.author.name : item.author }}</a
>
<span <span
title="作者" title="作者"
class="iconfont icon-touxiang" class="iconfont icon-touxiang"
v-else-if="item.author" v-else-if="item.author"
>{{ item.author.name ? item.author.name : item.author }}</span> >{{ item.author.name ? item.author.name : item.author }}</span
>
<span <span
title="创建时间" title="创建时间"
class="iconfont icon-riqi" class="iconfont icon-riqi"
v-if="item.frontmatter.date" v-if="item.frontmatter.date"
>{{ item.frontmatter.date.split(' ')[0]}}</span> >{{ item.frontmatter.date.split(' ')[0] }}</span
>
<span <span
title="分类" title="分类"
class="iconfont icon-wenjian" class="iconfont icon-wenjian"
v-if="$themeConfig.category !== false && item.frontmatter.categories" v-if="
$themeConfig.category !== false && item.frontmatter.categories
"
> >
<router-link <router-link
:to="`/categories/?category=${encodeURIComponent(c)}`" :to="`/categories/?category=${encodeURIComponent(c)}`"
v-for="(c, index) in item.frontmatter.categories" v-for="(c, index) in item.frontmatter.categories"
:key="index" :key="index"
>{{c}}</router-link> >{{ c }}</router-link
>
</span> </span>
<span <span
title="标签" title="标签"
class="iconfont icon-biaoqian tags" class="iconfont icon-biaoqian tags"
v-if="$themeConfig.tag !== false && item.frontmatter.tags && item.frontmatter.tags[0]" v-if="
$themeConfig.tag !== false &&
item.frontmatter.tags &&
item.frontmatter.tags[0]
"
> >
<router-link <router-link
:to="`/tags/?tag=${encodeURIComponent(t)}`" :to="`/tags/?tag=${encodeURIComponent(t)}`"
v-for="(t, index) in item.frontmatter.tags" v-for="(t, index) in item.frontmatter.tags"
:key="index" :key="index"
>{{t}}</router-link> >{{ t }}</router-link
>
</span> </span>
</div> </div>
</div> </div>
<div <div class="excerpt-wrapper" v-if="item.excerpt">
class="excerpt-wrapper" <div class="excerpt" v-html="item.excerpt"></div>
v-if="item.excerpt"
>
<div
class="excerpt"
v-html="item.excerpt"
></div>
<router-link <router-link
:to="item.path" :to="item.path"
class="readmore iconfont icon-jiantou-you" class="readmore iconfont icon-jiantou-you"
>阅读全文</router-link> >阅读全文</router-link
>
</div> </div>
</div> </div>
</transition-group> </transition-group>
@ -98,20 +103,20 @@ export default {
default: 10 default: 10
} }
}, },
data () { data() {
return { return {
sortPosts: [], sortPosts: [],
postListOffsetTop: 0 postListOffsetTop: 0
} }
}, },
created () { created() {
this.setPosts() this.setPosts()
}, },
mounted () { mounted() {
// this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240 // this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240
}, },
watch: { watch: {
currentPage () { currentPage() {
if (this.$route.query.p != this.currentPage) { // 此判断防止添加相同的路由信息（如浏览器回退时触发的） if (this.$route.query.p != this.currentPage) { // 此判断防止添加相同的路由信息（如浏览器回退时触发的）
this.$router.push({ this.$router.push({
query: { query: {
@ -125,15 +130,15 @@ export default {
// },0) // },0)
this.setPosts() this.setPosts()
}, },
category () { category() {
this.setPosts() this.setPosts()
}, },
tag () { tag() {
this.setPosts() this.setPosts()
} }
}, },
methods: { methods: {
setPosts () { setPosts() {
const currentPage = this.currentPage const currentPage = this.currentPage
const perPage = this.perPage const perPage = this.perPage
@ -187,7 +192,19 @@ export default {
margin 0.5rem 0 margin 0.5rem 0
font-size 1.4rem font-size 1.4rem
border none border none
.title-tag
height 1.2rem
line-height 1.2rem
border 1px solid $activeColor
color $activeColor
font-size 0.8rem
padding 0 0.35rem
border-radius 0.2rem
margin-left 0rem
transform translate(0, -0.15rem)
display inline-block
a a
display block
@media (max-width $MQMobile) @media (max-width $MQMobile)
font-weight 400 font-weight 400
.article-info .article-info

59
theme-vdoing/components/UpdateArticle.vue
View File

@ -1,32 +1,32 @@
<template> <template>
<div :class="['article-list',{'no-article-list': isShowArticle}]"> <div :class="['article-list', { 'no-article-list': isShowArticle }]">
<div class="article-title"> <div class="article-title">
<router-link <router-link :to="moreArticle || '/archives/'" class="iconfont icon-bi"
:to="moreArticle || '/archives/'" >最近更新</router-link
class="iconfont icon-bi" >
>最近更新</router-link>
</div> </div>
<div class="article-wrapper"> <div class="article-wrapper">
<dl <dl v-for="(item, index) in topPublishPosts" :key="index">
v-for="(item, index) in topPublishPosts" <dd>{{ getNum(index) }}</dd>
:key="index"
>
<dd>{{getNum(index)}}</dd>
<dt> <dt>
<router-link :to="item.path"> <router-link :to="item.path">
<div>{{item.title}}</div> <div>
{{ item.title }}
<span class="title-tag" v-if="item.frontmatter.titleTag">
{{ item.frontmatter.titleTag }}
</span>
</div>
</router-link> </router-link>
<span>{{getDate(item)}}</span> <span class="date">{{ getDate(item) }}</span>
</dt> </dt>
</dl> </dl>
<dl> <dl>
<dd></dd> <dd></dd>
<dt> <dt>
<router-link <router-link :to="moreArticle || '/archives/'" class="more"
:to="moreArticle || '/archives/'" >更多文章></router-link
class="more" >
>更多文章></router-link>
</dt> </dt>
</dl> </dl>
</div> </div>
@ -44,39 +44,39 @@ export default {
}, },
moreArticle: String moreArticle: String
}, },
data () { data() {
return { return {
posts: [], posts: [],
currentPath: '' currentPath: ''
} }
}, },
created () { created() {
this.posts = this.$site.pages this.posts = this.$site.pages
this.currentPath = this.$page.path this.currentPath = this.$page.path
}, },
computed: { computed: {
topPublishPosts () { topPublishPosts() {
return this.$sortPostsByDate ? this.$sortPostsByDate.filter(post => { return this.$sortPostsByDate ? this.$sortPostsByDate.filter(post => {
const { path } = post const { path } = post
return path !== this.currentPath return path !== this.currentPath
}).slice(0, this.length) : [] }).slice(0, this.length) : []
}, },
isShowArticle () { isShowArticle() {
const { frontmatter } = this.$page const { frontmatter } = this.$page
return !(frontmatter.article !== false) return !(frontmatter.article !== false)
} }
}, },
methods: { methods: {
getNum (index) { getNum(index) {
return index < 9 ? '0' + (index + 1) : index + 1 return index < 9 ? '0' + (index + 1) : index + 1
}, },
getDate (item) { getDate(item) {
return item.frontmatter.date ? item.frontmatter.date.split(" ")[0].slice(5, 10) : '' return item.frontmatter.date ? item.frontmatter.date.split(" ")[0].slice(5, 10) : ''
} }
}, },
watch: { watch: {
$route () { $route() {
this.currentPath = this.$page.path this.currentPath = this.$page.path
} }
} }
@ -137,11 +137,22 @@ export default {
display -webkit-box display -webkit-box
-webkit-line-clamp 2 -webkit-line-clamp 2
-webkit-box-orient vertical -webkit-box-orient vertical
.title-tag
// height 1.1rem
// line-height 1.1rem
border 1px solid $activeColor
color $activeColor
font-size 0.8rem
padding 0 0.35rem
border-radius 0.2rem
margin-left 0rem
transform translate(0, -0.05rem)
display inline-block
&:hover &:hover
text-decoration underline text-decoration underline
&.more &.more
color $accentColor color $accentColor
span .date
width 50px width 50px
margin-right 15px margin-right 15px
color #999 color #999

4
theme-vdoing/enhanceApp.js
View File

@ -35,13 +35,13 @@ export default ({
// 修复ISO8601时间格式为普通时间格式 // 修复ISO8601时间格式为普通时间格式
function repairUTCDate (date) { function repairUTCDate(date) {
if (!(date instanceof Date)) { if (!(date instanceof Date)) {
date = new Date(date) date = new Date(date)
} }
return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`; return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
} }
// 小于10补0 // 小于10补0
function zero (d) { function zero(d) {
return d.toString().padStart(2, '0') return d.toString().padStart(2, '0')
} }

37
theme-vdoing/index.js
View File

@ -31,7 +31,7 @@ module.exports = (options, ctx) => {
const sidebarData = getSidebarData(sourceDir, collapsable) const sidebarData = getSidebarData(sourceDir, collapsable)
if (sidebarData) { if (sidebarData) {
themeConfig.sidebar = sidebarData themeConfig.sidebar = sidebarData
log(chalk.blue('tip ') + chalk.green('add sidebar data. 侧边栏数据成功生成。')) log(chalk.blue('tip ') + chalk.green('add sidebar data. 成功生成侧边栏数据。'))
} else { } else {
themeConfig.sidebar = 'auto' themeConfig.sidebar = 'auto'
log(chalk.yellow('warning: fail to add sidebar data, switch to "auto". 未能添加侧边栏数据，将切换为“auto”。')) log(chalk.yellow('warning: fail to add sidebar data, switch to "auto". 未能添加侧边栏数据，将切换为“auto”。'))
@ -70,7 +70,7 @@ module.exports = (options, ctx) => {
const enableSmoothScroll = themeConfig.smoothScroll === true const enableSmoothScroll = themeConfig.smoothScroll === true
return { return {
alias () { alias() {
return { return {
'@AlgoliaSearchBox': isAlgoliaSearch '@AlgoliaSearchBox': isAlgoliaSearch
? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue') ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
@ -173,7 +173,7 @@ module.exports = (options, ctx) => {
// 渲染md容器的卡片列表 // 渲染md容器的卡片列表
function renderCardList (tokens, idx, type) { function renderCardList(tokens, idx, type) {
const END_TYPE = `container_${type}_close`, const END_TYPE = `container_${type}_close`,
_tokens$idx = tokens[idx], _tokens$idx = tokens[idx],
nesting = _tokens$idx.nesting, nesting = _tokens$idx.nesting,
@ -197,9 +197,15 @@ function renderCardList (tokens, idx, type) {
if (yamlStr) { // 正确解析出yaml字符串后 if (yamlStr) { // 正确解析出yaml字符串后
const dataObj = yaml.safeLoad(yamlStr) // 将yaml字符串解析成js对象 const dataObj = yaml.safeLoad(yamlStr) // 将yaml字符串解析成js对象
let dataList = [] let dataList = []
let config = {}
if (dataObj) { // 正确解析出数据对象 if (dataObj) { // 正确解析出数据对象
dataList = Array.isArray(dataObj) ? dataObj : dataObj.list if (Array.isArray(dataObj)) {
dataList = dataObj
} else {
config = dataObj.config
dataList = dataObj.data
}
} }
if (dataList && dataList.length) { // 有列表数据 if (dataList && dataList.length) { // 有列表数据
@ -212,9 +218,9 @@ function renderCardList (tokens, idx, type) {
let listDOM = '' let listDOM = ''
if (type === CARD_LIST) { // 普通卡片列表 if (type === CARD_LIST) { // 普通卡片列表
listDOM = getCardListDOM(dataList, row) listDOM = getCardListDOM(dataList, row, config)
} else if (type === CARD_IMG_LIST) { // 卡片图片列表 } else if (type === CARD_IMG_LIST) { // 卡片图片列表
listDOM = getCardImgListDOM(dataList, row) listDOM = getCardImgListDOM(dataList, row, config)
} }
return `<div class="${type}Container"><div class="card-list">${listDOM}</div>` return `<div class="${type}Container"><div class="card-list">${listDOM}</div>`
@ -227,11 +233,12 @@ function renderCardList (tokens, idx, type) {
// 将数据解析成DOM结构 - 普通卡片列表 // 将数据解析成DOM结构 - 普通卡片列表
function getCardListDOM (dataList, row) { function getCardListDOM(dataList, row, config) {
const { target = '_blank' } = config
let listDOM = '' let listDOM = ''
dataList.forEach(item => { dataList.forEach(item => {
listDOM += ` listDOM += `
<${item.link ? 'a href="' + item.link + '" target="_blank"' : 'span'} class="card-item ${row ? 'row-' + row : ''}" <${item.link ? 'a href="' + item.link + '" target="' + target + '"' : 'span'} class="card-item ${row ? 'row-' + row : ''}"
style="${item.bgColor ? 'background-color:' + item.bgColor + ';--randomColor:' + item.bgColor + ';' : '--randomColor: var(--bodyBg);'}${item.textColor ? 'color:' + item.textColor + ';' : ''}" style="${item.bgColor ? 'background-color:' + item.bgColor + ';--randomColor:' + item.bgColor + ';' : '--randomColor: var(--bodyBg);'}${item.textColor ? 'color:' + item.textColor + ';' : ''}"
> >
${item.avatar ? '<img src="' + withBase(item.avatar) + '" class="no-zoom">' : ''} ${item.avatar ? '<img src="' + withBase(item.avatar) + '" class="no-zoom">' : ''}
@ -247,18 +254,20 @@ function getCardListDOM (dataList, row) {
// 将数据解析成DOM结构 - 图文卡片列表 // 将数据解析成DOM结构 - 图文卡片列表
function getCardImgListDOM (dataList, row) { function getCardImgListDOM(dataList, row, config) {
const { imgHeight = 'auto', objectFit = 'cover', lineClamp = 1, target = '_blank' } = config
let listDOM = '' let listDOM = ''
dataList.forEach(item => { dataList.forEach(item => {
listDOM += ` listDOM += `
<div class="card-item ${row ? 'row-' + row : ''}" > <div class="card-item ${row ? 'row-' + row : ''}" >
<a href="${item.link}" target="_blank"> <a href="${item.link}" target="${target}">
<div class="box-img"> <div class="box-img" style="height: ${imgHeight}">
<img src="${withBase(item.img)}" class="no-zoom"> <img src="${withBase(item.img)}" class="no-zoom" style="object-fit: ${objectFit}">
</div> </div>
<div class="box-info"> <div class="box-info">
<p class="name">${item.name}</p> <p class="name">${item.name}</p>
${item.desc ? `<p class="desc">${item.desc}</p>` : ''} ${item.desc ? `<p class="desc" style="line-clamp: ${lineClamp}">${item.desc}</p>` : ''}
</div> </div>
${item.avatar || item.author ? `<div class="box-footer"> ${item.avatar || item.author ? `<div class="box-footer">
@ -273,7 +282,7 @@ function getCardImgListDOM (dataList, row) {
} }
// 添加base路径 // 添加base路径
function withBase (path) { function withBase(path) {
if (base && path.charAt(0) === '/') { if (base && path.charAt(0) === '/') {
return base + path.slice(1); return base + path.slice(1);
} else { } else {

47
theme-vdoing/package.json
View File

@ -13,23 +13,6 @@
"type": "git", "type": "git",
"url": "git+https://github.com/xugaoyi/vuepress-theme-vdoing.git" "url": "git+https://github.com/xugaoyi/vuepress-theme-vdoing.git"
}, },
"dependencies": {
"@better-scroll/core": "^2.0.0-beta.6",
"@better-scroll/slide": "^2.0.0-beta.6",
"@vuepress/plugin-active-header-links": "^1.2.0",
"@vuepress/plugin-nprogress": "^1.2.0",
"@vuepress/plugin-search": "^1.2.0",
"chalk": "^4.0.0",
"json2yaml": "^1.1.0",
"js-yaml": "^3.13.1",
"docsearch.js": "^2.5.2",
"good-storage": "^1.1.1",
"lodash": "^4.17.15",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vuepress-plugin-container": "^2.0.2",
"vuepress-plugin-smooth-scroll": "^0.0.3"
},
"keywords": [ "keywords": [
"documentation", "documentation",
"vue", "vue",
@ -40,8 +23,30 @@
], ],
"license": "MIT", "license": "MIT",
"main": "index.js", "main": "index.js",
"maintainers": [{ "maintainers": [
"name": "Evan xu", {
"email": "894072666@qq.com" "name": "Evan xu",
}] "email": "894072666@qq.com"
}
],
"dependencies": {
"@better-scroll/core": "^2.0.0-beta.6",
"@better-scroll/slide": "^2.0.0-beta.6",
"@vuepress/plugin-active-header-links": "^1.2.0",
"@vuepress/plugin-nprogress": "^1.2.0",
"@vuepress/plugin-search": "^1.2.0",
"chalk": "^4.0.0",
"docsearch.js": "^2.5.2",
"good-storage": "^1.1.1",
"js-yaml": "^3.13.1",
"json2yaml": "^1.1.0",
"lodash": "^4.17.15",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vuepress-plugin-container": "^2.0.2",
"vuepress-plugin-smooth-scroll": "^0.0.3"
},
"devDependencies": {
"@vuepress/types": "^1.9.5"
}
} }

9
theme-vdoing/styles/markdown-container.styl
View File

@ -114,11 +114,11 @@ h1, h2, h3, h4, h5, h6
.box-img .box-img
overflow hidden overflow hidden
position relative position relative
background #000 background #eee
img img
display block display block
width 100% width 100%
height auto height 100%
transition: all .3s transition: all .3s
// &:hover // &:hover
// img // img
@ -139,6 +139,11 @@ h1, h2, h3, h4, h5, h6
opacity .8 opacity .8
font-size: .9rem font-size: .9rem
line-height: 1.1rem line-height: 1.1rem
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
.box-footer .box-footer
overflow hidden overflow hidden
padding: .8rem 1rem padding: .8rem 1rem

42
theme-vdoing/types/index.ts Normal file
View File

@ -0,0 +1,42 @@
import { DefaultThemeConfig } from '@vuepress/types'
// vdoing主题配置类型
export interface VdoingThemeConfig extends DefaultThemeConfig {
/**
* 是否打开分类功能. Enable classification
* @default true
*/
category?: boolean;
/**
* 是否打开标签功能. Enable tag
* @default true
*/
tag?: boolean;
/**
* 是否打开归档功能. Enable archive
* @default true
*/
archive?: boolean;
/**
* 碎片化文章（_posts文件夹的文章）预设生成的分类值
* @default '随笔'
*/
categoryText?: string;
/**
* body背景大图链接。单张图片 string | 多张图片 string[], 多张图片时每隔15秒换一张。
* @default ''
*/
bodyBgImg?: string | string[];
/**
* body背景图透明度，选值 0.1 ~ 1.0
* @default 0.5
*/
bodyBgImgOpacity?: 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
}