diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.ts
similarity index 66%
rename from docs/.vuepress/config.js
rename to docs/.vuepress/config.ts
index 2faabfa..a88ba6d 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.ts
@@ -1,9 +1,17 @@
-const baiduCode = require('./config/baiduCode.js'); // 百度统计hm码
-const htmlModules = require('./config/htmlModules.js');
+import { resolve } from 'path'
+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",
   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/20200507175846.jpeg'
     // ], // 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
     // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
     //   '图标地址1',
@@ -141,6 +148,7 @@ module.exports = {
     // pageButton: false, // 是否显示快捷翻页按钮，默认true
 
     // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | <自定义>    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页
+    // @ts-ignore
     sidebar: 'structuring',
 
     // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, link: String}
@@ -201,123 +209,111 @@ module.exports = {
     ],
     ['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',
+    //   {
+    //     'data-ad-client': 'ca-pub-7828333725993554',
+    //     async: 'async',
+    //     src: 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',
+    //   },
+    // ], // 网站关联Google AdSense 与 html格式广告支持（你可以去掉）
   ],
 
   // 插件配置
-  plugins: [
-    // 本地插件（供学习）
-    // [require('./plugins/love-me'), { // 鼠标点击爱心特效
+  plugins: {
+    // 导入本地插件（供学习参考）
+    // [resolve(__dirname, './plugins/love-me')]: { // 鼠标点击爱心特效
     //   color: '#11a8cd', // 爱心颜色，默认随机色
     //   excludeClassName: 'theme-vdoing-content' // 要排除元素的class, 默认空''
-    // }],
+    // },
 
-    'vuepress-plugin-baidu-autopush', // 百度自动推送
+    // 百度自动推送
+    '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',
-          },
-        ],
-      },
-    ],
+    // 百度统计
+    'vuepress-plugin-baidu-tongji': {
+      hm: baiduCode,
+    },
 
-    [
-      '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.
-      },
-    ],
+    // 可以添加第三方搜索链接的搜索框（继承原官方搜索框的配置参数）
+    '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',
+        },
+      ],
+    },
 
-    [
-      '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, // 是否展示为横向样式
-        },
+    // 代码块复制按钮
+    '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演示模块, API: https://github.com/xiguaxigua/vuepress-plugin-demo-block
+    '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-zooming': {
+      selector: '.theme-vdoing-content img:not(.no-zoom)', // not排除class是no-zoom的图片
+      options: {
+        bgColor: 'rgba(0,0,0,0.6)',
       },
-    ],
-    [
-      'vuepress-plugin-baidu-tongji', // 百度统计 （你可以去掉）
-      {
-        hm: baiduCode || '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-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) => {
+        return dayjs(timestamp).format('YYYY/MM/DD, HH:mm:ss')
       },
-    ],
-    [
-      '@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/baiduCode.js b/docs/.vuepress/config/baiduCode.js
index 9dc5fc1..8765ff6 100644
--- a/docs/.vuepress/config/baiduCode.js
+++ b/docs/.vuepress/config/baiduCode.js
@@ -1 +1 @@
-module.exports = '';
+export default '503f098e7e5b3a5b5d8c5fc2938af002'
diff --git a/docs/.vuepress/config/htmlModules.js b/docs/.vuepress/config/htmlModules.js
index 450d4e2..324fd67 100644
--- a/docs/.vuepress/config/htmlModules.js
+++ b/docs/.vuepress/config/htmlModules.js
@@ -18,7 +18,7 @@
  * ②注：windowLB 和 windowRB：1.展示区块最大宽高200px*400px。2.请给自定义元素定一个不超过200px*400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。
  */
 
-module.exports = {
+const htmlModule = {
   homeSidebarB:
     `<div style="padding: 0.95rem">
     <p style="
@@ -110,7 +110,7 @@ module.exports = {
 }
 
 
-// module.exports = {
+// const htmlModule = {
 //   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>`,
@@ -119,3 +119,6 @@ module.exports = {
 //   windowLB: `<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
diff --git a/docs/03.技术/01.技术文档/02.Markdown使用教程.md b/docs/03.技术/01.技术文档/02.Markdown使用教程.md
index 07d2245..049977d 100644
--- a/docs/03.技术/01.技术文档/02.Markdown使用教程.md
+++ b/docs/03.技术/01.技术文档/02.Markdown使用教程.md
@@ -2,12 +2,12 @@
 title: Markdown使用教程
 date: 2019-12-25 14:27:01
 permalink: /pages/ad247c4332211551
-categories: 
+categories:
   - 技术
   - 技术文档
-tags: 
+tags:
   - null
-author: 
+author:
   name: xugaoyi
   link: https://github.com/xugaoyi
 ---
@@ -192,7 +192,7 @@ Markdown 段落没有特殊的格式，直接编写文字，**需要段落缩进
 ### 字体
 
 ```markdown
-*斜体文本* 
+*斜体文本*
 或 _斜体文本_
 **粗体文本**
 或  __粗体文本__
@@ -245,10 +245,10 @@ ___粗斜体文本___
 文字高亮能使行内部分文字高亮，使用一对反引号。
 
 ```markdown
-`html` `css` `javascript` 
+`html` `css` `javascript`
 ```
 
-`html` `css` `javascript` 
+`html` `css` `javascript`
 
 
 
@@ -435,7 +435,7 @@ ___粗斜体文本___
 
 - [ ] 第三项
 
-  
+
 
 ### 列表嵌套
 
@@ -537,7 +537,7 @@ ___粗斜体文本___
 如果是段落上的一个代码片段可以用反引号把它包起来（**`**），示例：
 
 ```markdown
-`alert()` 
+`alert()`
 ```
 
 `alert()`
@@ -648,7 +648,7 @@ function test() {
 
 [Markdown](#一Markdown)
 
-[链接](#九链接)     
+[链接](#九链接)
 
 [流程图](#流程图)
 
@@ -665,7 +665,7 @@ function test() {
 当然，你也可以像链接那样对图片地址使用变量:
 
 ```markdown
-这里链接用 img 作为图片地址变量 
+这里链接用 img 作为图片地址变量
 然后在文档的结尾或其他位置给变量赋值（图片地址）
 ![RUNOOB][img]
 [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
-**未转义星号显示加粗** 
+**未转义星号显示加粗**
 \*\* 转义显示星号 \*\*
 ```
 
-**未转义星号显示加粗** 
+**未转义星号显示加粗**
 \*\* 转义显示星号 \*\*
 
 
@@ -840,7 +840,7 @@ _   下划线
 
 ```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} \\
 \frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 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} \\
 \frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
 \frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
@@ -860,7 +860,7 @@ $$
 
 ### 图表
 
-```markdown
+````markdown
 ​```chart
 ,Budget,Income,Expenses,Debt
 June,5000,8000,4000,6000
@@ -881,31 +881,14 @@ sequenceDiagram
 A->>B: 是否已收到消息？
 B-->>A: 已收到消息
 ​```
-```
+````
 
 > 注：在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
 graph TD
@@ -915,7 +898,7 @@ C -->|条件C1| D[模块D]
 C -->|条件C2| E[模块E]
 C -->|条件C3| F[模块F]
 ​```
-```
+````
 
 流程图相关文章：
 
@@ -923,40 +906,26 @@ C -->|条件C3| F[模块F]
 
 <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
 sequenceDiagram
 A->>B: 是否已收到消息？
 B-->>A: 已收到消息
 ​```
-```
+````
 
 
 
-```mermaid
-sequenceDiagram
-A->>B: 是否已收到消息？
-B-->>A: 已收到消息
-```
 
+ ### 甘特图
 
-
-### 甘特图
-
-``` markdown
+```` markdown
 ​```mermaid
 gantt
 title 甘特图
@@ -968,18 +937,6 @@ section 项目B
 任务3      :2018-06-12  , 12d
 任务4      : 24d
 ​```
-```
+````
 
-```mermaid
-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使用教程)
\ No newline at end of file
+​																														     									[回到顶部](#markdown使用教程)
diff --git a/docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md b/docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md
index 4064940..baefe45 100644
--- a/docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md
+++ b/docs/04.更多/10.实用技巧/10.一行代码“黑”掉任意网站.md
@@ -2,6 +2,7 @@
 title: 一行代码“黑”掉任意网站
 date: 2021-11-25 14:33:51
 permalink: /pages/dcebaf/
+titleTag: 原创
 sticky: 1
 categories:
   - 更多
diff --git a/docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md b/docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md
index dd10735..17d7a47 100644
--- a/docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md
+++ b/docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md
@@ -15,7 +15,7 @@ author:
 
 ### 加载渲染过程
 
-```repl
+```text
 父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
 ```
 
@@ -23,18 +23,18 @@ author:
 
 ### 子组件更新过程
 
-```repl
+```text
 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated
 ```
 
 ### 父组件更新过程
 
-```repl
+```text
 父beforeUpdate -> 父updated
 ```
 
 ### 销毁过程
 
-```repl
+```text
 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed
 ```
diff --git a/package.json b/package.json
index 871aa70..21c0d6e 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "dayjs": "^1.9.7",
     "inquirer": "^7.1.0",
     "json2yaml": "^1.1.0",
-    "vuepress": "1.8.0",
+    "vuepress": "1.9.2",
     "vuepress-plugin-baidu-autopush": "^1.0.1",
     "vuepress-plugin-baidu-tongji": "^1.0.1",
     "vuepress-plugin-demo-block": "^0.7.2",
diff --git a/theme-vdoing/components/ArchivesPage.vue b/theme-vdoing/components/ArchivesPage.vue
index e464758..4dbd565 100644
--- a/theme-vdoing/components/ArchivesPage.vue
+++ b/theme-vdoing/components/ArchivesPage.vue
@@ -6,8 +6,11 @@
           :src="currentBadge"
           v-if="$themeConfig.titleBadge === false ? false : true"
         />
-        {{ this.$page.title }}
+        {{ $page.title }}
       </h1>
+      <div class="count">
+        总共 <i>{{ $sortPostsByDate.length }}</i> 篇文章
+      </div>
       <ul>
         <template v-for="(item, index) in postsList">
           <li
@@ -15,12 +18,20 @@
             v-if="(year = getYear(index)) !== getYear(index - 1)"
             :key="index + $sortPostsByDate.length"
           >
-            <h2>{{ year }}</h2>
+            <h2>
+              {{ year }}
+              <span>
+                <i>{{ countByYear[year] }}</i> 篇
+              </span>
+            </h2>
           </li>
           <li :key="index">
             <router-link :to="item.path">
-              <span>{{ getDate(item) }}</span>
+              <span class="date">{{ getDate(item) }}</span>
               {{ item.title }}
+              <span class="title-tag" v-if="item.frontmatter.titleTag">
+                {{ item.frontmatter.titleTag }}
+              </span>
             </router-link>
           </li>
         </template>
@@ -36,19 +47,34 @@ import TitleBadgeMixin from '../mixins/titleBadge'
 
 export default {
   mixins: [TitleBadgeMixin],
-  data () {
+  data() {
     return {
       postsList: [],
+      countByYear: {}, // 根据年份统计的文章数
 
       perPage: 80, // 每页长
       currentPage: 1// 当前页
+
     }
   },
-  created () {
+  created() {
     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(() => {
       if (this.postsList.length < this.$sortPostsByDate.length) {
         const docEl = document.documentElement
@@ -65,29 +91,29 @@ export default {
     }, 200))
   },
   methods: {
-    getPageData () {
+    getPageData() {
       const currentPage = this.currentPage
       const perPage = this.perPage
       this.postsList = this.postsList.concat(this.$sortPostsByDate.slice((currentPage - 1) * perPage, currentPage * perPage))
     },
-    loadmore () {
+    loadmore() {
       this.currentPage = this.currentPage + 1
       this.getPageData()
     },
-    getYear (index) {
+    getYear(index) {
       const item = this.postsList[index]
       if (!item) {
         return
       }
       const { frontmatter: { date } } = item
       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
       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
     @media (min-width $contentWidth + 80)
       margin-top 1.5rem !important
+    .count
+      text-align right
+      margin-top -2.5rem
+      font-size 0.85rem
+      opacity 0.8
     ul, li
       margin 0
       padding 0
+    ul
+      margin-top 2rem
     li
       list-style none
       &.year
@@ -119,6 +152,11 @@ export default {
         margin-bottom 0.8rem
         font-weight 400
         padding 0.5rem 0
+        span
+          font-size 0.85rem
+          font-weight 300
+          float right
+          margin-top 1rem
       a
         display block
         color var(--textColor)
@@ -134,11 +172,22 @@ export default {
           font-weight normal
           &:hover
             padding-left 1.5rem
-        span
+        span.date
           opacity 0.6
           font-size 0.85rem
           font-weight 400
           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
       text-align center
       margin-top 1rem
diff --git a/theme-vdoing/components/Page.vue b/theme-vdoing/components/Page.vue
index 88c1f6e..83ddfde 100644
--- a/theme-vdoing/components/Page.vue
+++ b/theme-vdoing/components/Page.vue
@@ -1,7 +1,6 @@
 <template>
   <div>
     <main class="page">
-
       <div :class="`theme-vdoing-wrapper ${bgStyle}`">
         <ArticleInfo v-if="isArticle()" />
         <component
@@ -12,26 +11,27 @@
 
         <div class="content-wrapper">
           <RightMenu v-if="showRightMenu" />
+
           <h1 v-if="showTitle">
             <img
               :src="currentBadge"
               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>
+
           <slot name="top" v-if="isShowSlotT" />
 
           <Content class="theme-vdoing-content" />
         </div>
-  <slot name="bottom"  v-if="isShowSlotB" />
+        <slot name="bottom" v-if="isShowSlotB" />
         <PageEdit />
 
-
         <PageNav v-bind="{ sidebarItems }" />
       </div>
 
-
-
       <UpdateArticle
         :length="3"
         :moreArticle="updateBarConfig && updateBarConfig.moreArticle"
@@ -53,28 +53,28 @@ import TitleBadgeMixin from '../mixins/titleBadge'
 
 export default {
   mixins: [TitleBadgeMixin],
-  data () {
+  data() {
     return {
       updateBarConfig: null
     }
   },
   props: ['sidebarItems'],
   components: { PageEdit, PageNav, ArticleInfo, Catalogue, UpdateArticle, RightMenu },
-  created () {
+  created() {
     this.updateBarConfig = this.$themeConfig.updateBar
   },
   computed: {
-    bgStyle () {
+    bgStyle() {
       const { contentBgStyle } = this.$themeConfig
       return contentBgStyle ? 'bg-style-' + contentBgStyle : ''
     },
-    isShowUpdateBar () {
+    isShowUpdateBar() {
       return this.updateBarConfig && this.updateBarConfig.showToArticle === false ? false : true
     },
-    showTitle () {
+    showTitle() {
       return !this.$frontmatter.pageComponent
     },
-    showRightMenu () {
+    showRightMenu() {
       const { $frontmatter, $themeConfig, $page } = this
       const { sidebar } = $frontmatter
       return (
@@ -83,7 +83,7 @@ export default {
         ($frontmatter && sidebar && sidebar !== false) !== false
       )
     },
-    pageComponent () {
+    pageComponent() {
       return this.$frontmatter.pageComponent ? this.$frontmatter.pageComponent.name : false
     },
     isShowSlotT() {
@@ -96,16 +96,16 @@ export default {
   methods: {
     getShowStatus(prop) {
       const { htmlModules } = this.$themeConfig
-      if(!htmlModules) return false
+      if (!htmlModules) return false
       if (htmlModules[prop] === 'article') { // 仅文章页显示
         return this.isArticle()
-      } else if (htmlModules[prop] === 'custom'){ // 仅自定义页显示
+      } else if (htmlModules[prop] === 'custom') { // 仅自定义页显示
         return !(this.isArticle())
       } else { // 全部显示
         return true
       }
     },
-    isArticle () {
+    isArticle() {
       return this.$frontmatter.article !== false
     }
   }
@@ -121,16 +121,29 @@ export default {
   @media (max-width $MQMobile)
     padding-top $navbarHeight
   @media (min-width $MQMobile)
-    padding-top ($navbarHeight + 1.5rem)
+    padding-top: ($navbarHeight + 1.5rem)
   >*
     @extend $vdoing-wrapper
 .theme-vdoing-wrapper
   .content-wrapper
     position relative
-  h1 img
-    margin-bottom -0.2rem
-    max-width 2.2rem
-    max-height 2.2rem
+  h1
+    .title-tag
+      height 1.5rem
+      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
   --linesColor rgba(50, 0, 0, 0.05)
   &.bg-style-1 // 方格
diff --git a/theme-vdoing/components/PostList.vue b/theme-vdoing/components/PostList.vue
index f4e128e..d35564f 100644
--- a/theme-vdoing/components/PostList.vue
+++ b/theme-vdoing/components/PostList.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    class="post-list"
-    ref="postList"
-  >
-    <transition-group
-      tag="div"
-      name="post"
-    >
+  <div class="post-list" ref="postList">
+    <transition-group tag="div" name="post">
       <div
         class="post card-box"
         :class="item.frontmatter.sticky && 'iconfont icon-zhiding'"
@@ -15,7 +9,12 @@
       >
         <div class="title-wrapper">
           <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>
           <div class="article-info">
             <a
@@ -24,54 +23,60 @@
               target="_blank"
               v-if="item.author && 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
               title="作者"
               class="iconfont icon-touxiang"
               v-else-if="item.author"
-            >{{ item.author.name ? item.author.name : item.author }}</span>
+              >{{ item.author.name ? item.author.name : item.author }}</span
+            >
 
             <span
               title="创建时间"
               class="iconfont icon-riqi"
               v-if="item.frontmatter.date"
-            >{{ item.frontmatter.date.split(' ')[0]}}</span>
+              >{{ item.frontmatter.date.split(' ')[0] }}</span
+            >
             <span
               title="分类"
               class="iconfont icon-wenjian"
-              v-if="$themeConfig.category !== false && item.frontmatter.categories"
+              v-if="
+                $themeConfig.category !== false && item.frontmatter.categories
+              "
             >
               <router-link
                 :to="`/categories/?category=${encodeURIComponent(c)}`"
                 v-for="(c, index) in item.frontmatter.categories"
                 :key="index"
-              >{{c}}</router-link>
+                >{{ c }}</router-link
+              >
             </span>
             <span
               title="标签"
               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
                 :to="`/tags/?tag=${encodeURIComponent(t)}`"
                 v-for="(t, index) in item.frontmatter.tags"
                 :key="index"
-              >{{t}}</router-link>
+                >{{ t }}</router-link
+              >
             </span>
           </div>
         </div>
-        <div
-          class="excerpt-wrapper"
-          v-if="item.excerpt"
-        >
-          <div
-            class="excerpt"
-            v-html="item.excerpt"
-          ></div>
+        <div class="excerpt-wrapper" v-if="item.excerpt">
+          <div class="excerpt" v-html="item.excerpt"></div>
           <router-link
             :to="item.path"
             class="readmore iconfont icon-jiantou-you"
-          >阅读全文</router-link>
+            >阅读全文</router-link
+          >
         </div>
       </div>
     </transition-group>
@@ -98,20 +103,20 @@ export default {
       default: 10
     }
   },
-  data () {
+  data() {
     return {
       sortPosts: [],
       postListOffsetTop: 0
     }
   },
-  created () {
+  created() {
     this.setPosts()
   },
-  mounted () {
+  mounted() {
     // this.postListOffsetTop = this.getElementToPageTop(this.$refs.postList) - 240
   },
   watch: {
-    currentPage () {
+    currentPage() {
       if (this.$route.query.p != this.currentPage) { // 此判断防止添加相同的路由信息（如浏览器回退时触发的）
         this.$router.push({
           query: {
@@ -125,15 +130,15 @@ export default {
       // },0)
       this.setPosts()
     },
-    category () {
+    category() {
       this.setPosts()
     },
-    tag () {
+    tag() {
       this.setPosts()
     }
   },
   methods: {
-    setPosts () {
+    setPosts() {
       const currentPage = this.currentPage
       const perPage = this.perPage
 
@@ -187,7 +192,19 @@ export default {
         margin 0.5rem 0
         font-size 1.4rem
         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
+          display block
           @media (max-width $MQMobile)
             font-weight 400
       .article-info
diff --git a/theme-vdoing/components/UpdateArticle.vue b/theme-vdoing/components/UpdateArticle.vue
index e02780d..ae0270f 100644
--- a/theme-vdoing/components/UpdateArticle.vue
+++ b/theme-vdoing/components/UpdateArticle.vue
@@ -1,32 +1,32 @@
 <template>
-  <div :class="['article-list',{'no-article-list': isShowArticle}]">
+  <div :class="['article-list', { 'no-article-list': isShowArticle }]">
     <div class="article-title">
-      <router-link
-        :to="moreArticle || '/archives/'"
-        class="iconfont icon-bi"
-      >最近更新</router-link>
+      <router-link :to="moreArticle || '/archives/'" class="iconfont icon-bi"
+        >最近更新</router-link
+      >
     </div>
     <div class="article-wrapper">
-      <dl
-        v-for="(item, index) in topPublishPosts"
-        :key="index"
-      >
-        <dd>{{getNum(index)}}</dd>
+      <dl v-for="(item, index) in topPublishPosts" :key="index">
+        <dd>{{ getNum(index) }}</dd>
         <dt>
           <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>
-          <span>{{getDate(item)}}</span>
+          <span class="date">{{ getDate(item) }}</span>
         </dt>
       </dl>
 
       <dl>
         <dd></dd>
         <dt>
-          <router-link
-            :to="moreArticle || '/archives/'"
-            class="more"
-          >更多文章></router-link>
+          <router-link :to="moreArticle || '/archives/'" class="more"
+            >更多文章></router-link
+          >
         </dt>
       </dl>
     </div>
@@ -44,39 +44,39 @@ export default {
     },
     moreArticle: String
   },
-  data () {
+  data() {
     return {
       posts: [],
       currentPath: ''
     }
   },
-  created () {
+  created() {
     this.posts = this.$site.pages
     this.currentPath = this.$page.path
   },
   computed: {
-    topPublishPosts () {
+    topPublishPosts() {
       return this.$sortPostsByDate ? this.$sortPostsByDate.filter(post => {
         const { path } = post
         return path !== this.currentPath
       }).slice(0, this.length) : []
 
     },
-    isShowArticle () {
+    isShowArticle() {
       const { frontmatter } = this.$page
       return !(frontmatter.article !== false)
     }
   },
   methods: {
-    getNum (index) {
+    getNum(index) {
       return index < 9 ? '0' + (index + 1) : index + 1
     },
-    getDate (item) {
+    getDate(item) {
       return item.frontmatter.date ? item.frontmatter.date.split(" ")[0].slice(5, 10) : ''
     }
   },
   watch: {
-    $route () {
+    $route() {
       this.currentPath = this.$page.path
     }
   }
@@ -137,11 +137,22 @@ export default {
             display -webkit-box
             -webkit-line-clamp 2
             -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
             text-decoration underline
           &.more
             color $accentColor
-        span
+        .date
           width 50px
           margin-right 15px
           color #999
diff --git a/theme-vdoing/enhanceApp.js b/theme-vdoing/enhanceApp.js
index 6c4d11c..d0166a0 100644
--- a/theme-vdoing/enhanceApp.js
+++ b/theme-vdoing/enhanceApp.js
@@ -35,13 +35,13 @@ export default ({
 
 
 // 修复ISO8601时间格式为普通时间格式
-function repairUTCDate (date) {
+function repairUTCDate(date) {
   if (!(date instanceof Date)) {
     date = new Date(date)
   }
   return `${date.getUTCFullYear()}-${zero(date.getUTCMonth() + 1)}-${zero(date.getUTCDate())} ${zero(date.getUTCHours())}:${zero(date.getUTCMinutes())}:${zero(date.getUTCSeconds())}`;
 }
 // 小于10补0
-function zero (d) {
+function zero(d) {
   return d.toString().padStart(2, '0')
 }
diff --git a/theme-vdoing/index.js b/theme-vdoing/index.js
index 1a051b6..8dfc68a 100644
--- a/theme-vdoing/index.js
+++ b/theme-vdoing/index.js
@@ -31,7 +31,7 @@ module.exports = (options, ctx) => {
     const sidebarData = getSidebarData(sourceDir, collapsable)
     if (sidebarData) {
       themeConfig.sidebar = sidebarData
-      log(chalk.blue('tip ') + chalk.green('add sidebar data. 侧边栏数据成功生成。'))
+      log(chalk.blue('tip ') + chalk.green('add sidebar data. 成功生成侧边栏数据。'))
     } else {
       themeConfig.sidebar = '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
 
   return {
-    alias () {
+    alias() {
       return {
         '@AlgoliaSearchBox': isAlgoliaSearch
           ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
@@ -173,7 +173,7 @@ module.exports = (options, ctx) => {
 
 
 // 渲染md容器的卡片列表
-function renderCardList (tokens, idx, type) {
+function renderCardList(tokens, idx, type) {
   const END_TYPE = `container_${type}_close`,
     _tokens$idx = tokens[idx],
     nesting = _tokens$idx.nesting,
@@ -197,9 +197,15 @@ function renderCardList (tokens, idx, type) {
     if (yamlStr) { // 正确解析出yaml字符串后
       const dataObj = yaml.safeLoad(yamlStr) // 将yaml字符串解析成js对象
       let dataList = []
+      let config = {}
 
       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) { // 有列表数据
@@ -212,9 +218,9 @@ function renderCardList (tokens, idx, type) {
 
         let listDOM = ''
         if (type === CARD_LIST) { // 普通卡片列表
-          listDOM = getCardListDOM(dataList, row)
+          listDOM = getCardListDOM(dataList, row, config)
         } 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>`
@@ -227,11 +233,12 @@ function renderCardList (tokens, idx, type) {
 
 
 // 将数据解析成DOM结构 - 普通卡片列表
-function getCardListDOM (dataList, row) {
+function getCardListDOM(dataList, row, config) {
+  const { target = '_blank' } = config
   let listDOM = ''
   dataList.forEach(item => {
     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 + ';' : ''}"
       >
         ${item.avatar ? '<img src="' + withBase(item.avatar) + '" class="no-zoom">' : ''}
@@ -247,18 +254,20 @@ function getCardListDOM (dataList, row) {
 
 
 // 将数据解析成DOM结构 - 图文卡片列表
-function getCardImgListDOM (dataList, row) {
+function getCardImgListDOM(dataList, row, config) {
+  const { imgHeight = 'auto', objectFit = 'cover', lineClamp = 1, target = '_blank' } = config
+
   let listDOM = ''
   dataList.forEach(item => {
     listDOM += `
       <div class="card-item ${row ? 'row-' + row : ''}" >
-        <a href="${item.link}" target="_blank">
-          <div class="box-img">
-              <img src="${withBase(item.img)}" class="no-zoom">
+        <a href="${item.link}" target="${target}">
+          <div class="box-img" style="height: ${imgHeight}">
+              <img src="${withBase(item.img)}" class="no-zoom" style="object-fit: ${objectFit}">
           </div>
           <div class="box-info">
               <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>
 
           ${item.avatar || item.author ? `<div class="box-footer">
@@ -273,7 +282,7 @@ function getCardImgListDOM (dataList, row) {
 }
 
 // 添加base路径
-function withBase (path) {
+function withBase(path) {
   if (base && path.charAt(0) === '/') {
     return base + path.slice(1);
   } else {
diff --git a/theme-vdoing/package.json b/theme-vdoing/package.json
index 139cd24..210d05c 100644
--- a/theme-vdoing/package.json
+++ b/theme-vdoing/package.json
@@ -13,23 +13,6 @@
     "type": "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": [
     "documentation",
     "vue",
@@ -40,8 +23,30 @@
   ],
   "license": "MIT",
   "main": "index.js",
-  "maintainers": [{
-    "name": "Evan xu",
-    "email": "894072666@qq.com"
-  }]
+  "maintainers": [
+    {
+      "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"
+  }
 }
diff --git a/theme-vdoing/styles/markdown-container.styl b/theme-vdoing/styles/markdown-container.styl
index 7255c97..9f9e0bc 100644
--- a/theme-vdoing/styles/markdown-container.styl
+++ b/theme-vdoing/styles/markdown-container.styl
@@ -114,11 +114,11 @@ h1, h2, h3, h4, h5, h6
       .box-img
         overflow hidden
         position relative
-        background #000
+        background #eee
         img
           display block
           width 100%
-          height auto
+          height 100%
           transition: all .3s
         // &:hover
         //   img
@@ -139,6 +139,11 @@ h1, h2, h3, h4, h5, h6
           opacity .8
           font-size: .9rem
           line-height: 1.1rem
+          overflow: hidden;
+          white-space: normal;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
       .box-footer
         overflow hidden
         padding: .8rem 1rem
diff --git a/theme-vdoing/types/index.ts b/theme-vdoing/types/index.ts
new file mode 100644
index 0000000..96388a0
--- /dev/null
+++ b/theme-vdoing/types/index.ts
@@ -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;
+
+
+}