[docs feat]vuepress 主题升级

docs/.vuepress/config.ts

@@ -1,59 +1,30 @@
-const { defineHopeConfig } = require("vuepress-theme-hope");
-import themeConfig from "./themeConfig";
+import { defineUserConfig } from "vuepress";
+import { themeConfig } from "./themeConfig";
+import { searchPlugin } from "@vuepress/plugin-search";
 
-module.exports = defineHopeConfig({
-  port: "8080",
-  title: "JavaGuide",
-  description:
-    "「Java学习指北+Java面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识。准备 Java 面试，复习 Java 知识点，首选 JavaGuide！  ",
-  //指定 vuepress build 的输出目录
+export default defineUserConfig({
   dest: "./dist",
-  head: [
-    // meta
-    ["meta", { name: "robots", content: "all" }],
-    ["meta", { name: "author", content: "Guide" }],
-    [
-      "meta",
-      {
-        "http-equiv": "Cache-Control",
-        content: "no-cache, no-store, must-revalidate",
-      },
-    ],
-    ["meta", { "http-equiv": "Pragma", content: "no-cache" }],
-    ["meta", { "http-equiv": "Expires", content: "0" }],
-    [
-      "meta",
-      {
-        name: "keywords",
-        content:
-          "Java基础, 多线程, JVM, 虚拟机, 数据库, MySQL, Spring, Redis, MyBatis, 系统设计, 分布式, RPC, 高可用, 高并发",
-      },
-    ],
-    ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }],
-    // 添加百度统计
-    [
-      "script",
-      {},
-      `var _hmt = _hmt || [];
-      (function() {
-        var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?5dd2e8c97962d57b7b8fea1737c01743";
-        var s = document.getElementsByTagName("script")[0]; 
-        s.parentNode.insertBefore(hm, s);
-      })();`,
-    ],
-    [
-      "link",
-      {
-        rel: "stylesheet",
-        href: "/iconfont/iconfont.css",
-      },
-    ],
-  ],
+  theme: themeConfig,
+  shouldPrefetch: false,
   locales: {
     "/": {
       lang: "zh-CN",
-    },
+    }
   },
-  themeConfig,
+  plugins: [
+    searchPlugin({
+      // https://v2.vuepress.vuejs.org/zh/reference/plugin/search.html
+      // 排除首页
+      isSearchable: (page) => page.path !== "/",
+      maxSuggestions: 10,
+      hotKeys: ["s", "/"],
+      // 用于在页面的搜索索引中添加额外字段
+      getExtraFields: () => [],
+      locales: {
+        "/": {
+          placeholder: "搜索",
+        },
+      },
+    }),
+  ],
 });

docs/.vuepress/navbar.ts

@@ -1,6 +1,6 @@
-import { defineNavbarConfig } from "vuepress-theme-hope";
+import { navbar } from "vuepress-theme-hope";
 
-export const navbarConfig = defineNavbarConfig([
+export const navbarConfig = navbar([
   { text: "面试指南", icon: "java", link: "/home.md" },
   { text: "开源项目", icon: "github", link: "/open-source-project/" },
   { text: "技术书籍", icon: "book", link: "/books/" },

docs/.vuepress/sidebar.ts

@@ -1,10 +1,10 @@
-import { defineSidebarConfig } from "vuepress-theme-hope";
+import { sidebar } from "vuepress-theme-hope";
 import { highQualityTechnicalArticles } from "./sidebar/high-quality-technical-articles";
 import { aboutTheAuthor } from "./sidebar/about-the-author";
 import { books } from "./sidebar/books";
 import { openSourceProject } from "./sidebar/open-source-project";
 
-export const sidebarConfig = defineSidebarConfig({
+export const sidebarConfig = sidebar({
   // 应该把更精确的路径放置在前边
   "/open-source-project/": openSourceProject,
   "/books/": books,
@@ -21,8 +21,8 @@ export const sidebarConfig = defineSidebarConfig({
     {
       text: "面试准备",
       icon: "interview",
+      collapsible: true,
       prefix: "interview-preparation/",
-      collapsable: true,
       children: [
         "teach-you-how-to-prepare-for-the-interview-hand-in-hand",
         "project-experience-guide",
@@ -33,14 +33,13 @@ export const sidebarConfig = defineSidebarConfig({
     {
       text: "Java",
       icon: "java",
+      collapsible: true,
       prefix: "java/",
-      collapsable: true,
       children: [
         {
           text: "基础",
           prefix: "basis/",
           icon: "basic",
-          collapsable: true,
           children: [
             "java-basic-questions-01",
             "java-basic-questions-02",
@@ -48,7 +47,7 @@ export const sidebarConfig = defineSidebarConfig({
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "why-there-only-value-passing-in-java",
                 "serialization",
@@ -67,15 +66,14 @@ export const sidebarConfig = defineSidebarConfig({
           text: "集合",
           prefix: "collection/",
           icon: "container",
-          collapsable: true,
           children: [
             "java-collection-questions-01",
             "java-collection-questions-02",
             "java-collection-precautions-for-use",
             {
               text: "源码分析",
-              collapsable: true,
               icon: "star",
+              collapsible: true,
               children: [
                 "arraylist-source-code",
                 "hashmap-source-code",
@@ -89,14 +87,12 @@ export const sidebarConfig = defineSidebarConfig({
           text: "IO",
           prefix: "io/",
           icon: "code",
-          collapsable: true,
           children: ["io-basis", "io-design-patterns", "io-model"],
         },
         {
           text: "并发编程",
           prefix: "concurrent/",
           icon: "et-performance",
-          collapsable: true,
           children: [
             "java-concurrent-questions-01",
             "java-concurrent-questions-02",
@@ -104,7 +100,7 @@ export const sidebarConfig = defineSidebarConfig({
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "jmm",
                 "java-thread-pool-summary",
@@ -122,7 +118,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "JVM",
           prefix: "jvm/",
           icon: "virtual_machine",
-          collapsable: true,
+          collapsible: true,
           children: [
             "memory-area",
             "jvm-garbage-collection",
@@ -138,7 +134,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "新特性",
           prefix: "new-features/",
           icon: "featured",
-          collapsable: true,
+          collapsible: true,
           children: [
             "java8-common-new-features",
             "java8-tutorial-translate",
@@ -160,20 +156,20 @@ export const sidebarConfig = defineSidebarConfig({
       text: "计算机基础",
       icon: "computer",
       prefix: "cs-basics/",
-      collapsable: true,
+      collapsible: true,
       children: [
         {
           text: "网络",
           prefix: "network/",
           icon: "network",
-          collapsable: true,
+          collapsible: true,
           children: [
             "other-network-questions",
             "computer-network-xiexiren-summary",
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "osi&tcp-ip-model",
                 "application-layer-protocol",
@@ -191,7 +187,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "操作系统",
           prefix: "operating-system/",
           icon: "caozuoxitong",
-          collapsable: true,
+          collapsible: true,
           children: [
             "operating-system-basic-questions-01",
             "linux-intro",
@@ -202,7 +198,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "数据结构",
           prefix: "data-structure/",
           icon: "people-network-full",
-          collapsable: true,
+          collapsible: true,
           children: [
             "linear-data-structure",
             "graph",
@@ -216,7 +212,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "算法",
           prefix: "algorithms/",
           icon: "suanfaku",
-          collapsable: true,
+          collapsible: true,
           children: [
             "string-algorithm-problems",
             "linkedlist-algorithm-problems",
@@ -230,26 +226,26 @@ export const sidebarConfig = defineSidebarConfig({
       text: "数据库",
       icon: "database",
       prefix: "database/",
-      collapsable: true,
+      collapsible: true,
       children: [
         {
           text: "基础",
           icon: "basic",
-          collapsable: true,
+          collapsible: true,
           children: ["basis", "character-set"],
         },
         {
           text: "MySQL",
           prefix: "mysql/",
           icon: "mysql",
-          collapsable: true,
+          collapsible: true,
           children: [
             "mysql-questions-01",
             "mysql-high-performance-optimization-specification-recommendations",
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "mysql-index",
                 "mysql-logs",
@@ -266,7 +262,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "Redis",
           prefix: "redis/",
           icon: "redis",
-          collapsable: true,
+          collapsible: true,
           children: [
             "cache-basics",
             "redis-questions-01",
@@ -274,7 +270,7 @@ export const sidebarConfig = defineSidebarConfig({
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "3-commonly-used-cache-read-and-write-strategies",
                 "redis-data-structures-01",
@@ -291,20 +287,18 @@ export const sidebarConfig = defineSidebarConfig({
       text: "开发工具",
       icon: "tool",
       prefix: "tools/",
-      collapsable: true,
+      collapsible: true,
       children: [
         {
           text: "Git",
           icon: "git",
           prefix: "git/",
-          collapsable: true,
           children: ["git-intro", "github-tips"],
         },
         {
           text: "Docker",
           icon: "docker1",
           prefix: "docker/",
-          collapsable: true,
           children: ["docker-intro", "docker-in-action"],
         },
         {
@@ -318,12 +312,11 @@ export const sidebarConfig = defineSidebarConfig({
       text: "常用框架",
       prefix: "system-design/framework/",
       icon: "framework",
-      collapsable: true,
+      collapsible: true,
       children: [
         {
           text: "Spring&Spring Boot",
           prefix: "spring/",
-          collapsable: true,
           children: [
             "spring-knowledge-and-questions-summary",
             "springboot-knowledge-and-questions-summary",
@@ -331,7 +324,7 @@ export const sidebarConfig = defineSidebarConfig({
             {
               text: "重要知识点",
               icon: "star",
-              collapsable: true,
+              collapsible: true,
               children: [
                 "spring-transaction",
                 "spring-design-patterns-summary",
@@ -348,7 +341,7 @@ export const sidebarConfig = defineSidebarConfig({
       text: "系统设计",
       icon: "xitongsheji",
       prefix: "system-design/",
-      collapsable: true,
+      collapsible: true,
       children: [
         "system-design-questions",
         "design-pattern",
@@ -356,7 +349,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "基础",
           prefix: "basis/",
           icon: "basic",
-          collapsable: true,
+          collapsible: true,
           children: [
             "RESTfulAPI",
             "naming",
@@ -371,7 +364,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "安全",
           prefix: "security/",
           icon: "security-fill",
-          collapsable: true,
+          collapsible: true,
           children: [
             "basis-of-authority-certification",
             "jwt-intro",
@@ -390,12 +383,12 @@ export const sidebarConfig = defineSidebarConfig({
       text: "分布式",
       icon: "distributed-network",
       prefix: "distributed-system/",
-      collapsable: true,
+      collapsible: true,
       children: [
         {
           text: "理论&算法&协议",
           prefix: "theorem&algorithm&protocol/",
-          collapsable: true,
+          collapsible: true,
           children: ["cap&base-theorem", "paxos-algorithm", "raft-algorithm"],
         },
         "api-gateway",
@@ -406,13 +399,13 @@ export const sidebarConfig = defineSidebarConfig({
         {
           text: "RPC（远程调用）详解",
           prefix: "rpc/",
-          collapsable: true,
+          collapsible: true,
           children: ["rpc-intro", "dubbo"],
         },
         {
           text: "ZooKeeper 详解",
           prefix: "distributed-process-coordination/",
-          collapsable: true,
+          collapsible: true,
           children: [
             "zookeeper/zookeeper-intro",
             "zookeeper/zookeeper-plus",
@@ -425,7 +418,7 @@ export const sidebarConfig = defineSidebarConfig({
       text: "高性能",
       icon: "et-performance",
       prefix: "high-performance/",
-      collapsable: true,
+      collapsible: true,
       children: [
         "read-and-write-separation-and-library-subtable",
         "load-balancing",
@@ -435,7 +428,7 @@ export const sidebarConfig = defineSidebarConfig({
           text: "消息队列",
           prefix: "message-queue/",
           icon: "MQ",
-          collapsable: true,
+          collapsible: true,
           children: [
             "message-queue",
             "kafka-questions-01",
@@ -451,7 +444,7 @@ export const sidebarConfig = defineSidebarConfig({
       text: "高可用",
       icon: "highavailable",
       prefix: "high-availability/",
-      collapsable: true,
+      collapsible: true,
       children: [
         "high-availability-system-design",
         "redundancy",

docs/.vuepress/themeConfig.ts

@@ -1,8 +1,10 @@
-import { defineThemeConfig } from "vuepress-theme-hope";
+import { hopeTheme } from "vuepress-theme-hope";
+import { searchPlugin } from "@vuepress/plugin-search";
+
 import { navbarConfig } from "./navbar";
 import { sidebarConfig } from "./sidebar";
 
-export default defineThemeConfig({
+export const themeConfig = hopeTheme({
   logo: "/logo.png",
   hostname: "https://javaguide.cn/",
   author: {
@@ -11,11 +13,19 @@ export default defineThemeConfig({
   },
   repo: "https://github.com/Snailclimb/JavaGuide",
   docsDir: "docs",
-  iconPrefix: "iconfont icon-",
-  pure: true,
+  iconAssets: "//at.alicdn.com/t/c/font_2922463_bcn6tjuoz8b.css",
   navbar: navbarConfig,
   sidebar: sidebarConfig,
-  pageInfo: ["Author", "Category", "Tag", "Date", "Original", "Word"],
+  pageInfo: [
+    "Author",
+    "Category",
+    "Tag",
+    "Date",
+    "Original",
+    "Word",
+    "ReadingTime",
+  ],
+
   blog: {
     intro: "/about-the-author/",
     sidebarDisplay: "mobile",
@@ -29,35 +39,15 @@ export default defineThemeConfig({
     '<a href="https://beian.miit.gov.cn/" target="_blank">鄂ICP备2020015769号-1</a>',
   displayFooter: true,
   plugins: {
-    blog: {
-      autoExcerpt: true,
-    },
+    blog: true,
+    copyright: true,
     mdEnhance: {
+      codetabs: true,
+      container: true,
       tasklist: true,
     },
     feed: {
       json: true,
     },
-    // comment: {
-    //   type: "giscus",
-    //   repo: "Snailclimb/JavaGuide",
-    //   repoId: "MDEwOlJlcG9zaXRvcnkxMzI0NjQzOTU=",
-    //   category: "Announcements",
-    //   categoryId: "DIC_kwDOB-U_C84COYQF",
-    // },
-    search: {
-      // https://v2.vuepress.vuejs.org/zh/reference/plugin/search.html
-      // 排除首页
-      isSearchable: (page) => page.path !== "/",
-      maxSuggestions: 10,
-      hotKeys: ["s", "/"],
-      // 用于在页面的搜索索引中添加额外字段
-      getExtraFields: () => [],
-      locales: {
-        "/": {
-          placeholder: "搜索",
-        },
-      },
-    },
   },
 });

docs/books/distributed-system.md

@@ -60,7 +60,7 @@ icon: "distributed-network"
 
 ![](https://guide-blog-images.oss-cn-shenzhen.aliyuncs.com/github/javaguide/books/f5bec14d3b404ac4b041d723153658b5.png)
 
-**[《凤凰架构》](https://book.douban.com/subject/35492898/)**这本书是周志明老师多年架构和研发经验的总结，内容非常干货，深度与广度并存，理论结合实践！
+**[《凤凰架构》](https://book.douban.com/subject/35492898/)** 这本书是周志明老师多年架构和研发经验的总结，内容非常干货，深度与广度并存，理论结合实践！
 
 正如书名的副标题“构建可靠的大型分布式系统”所说的那样，这本书的主要内容就是讲：“如何构建一套可靠的分布式大型软件系统” ，涵盖了下面这些方面的内容：
 

docs/database/mysql/mysql-questions-01.md

@@ -179,7 +179,7 @@ InnoDB 引擎中，其数据文件本身就是索引文件。相比 MyISAM，索
 
 ## MySQL 索引
 
-MySQL 索引相关的问题比较多，对于面试和工作都比较重要，于是，我单独抽了一篇文章专门来总结 MySQL 索引相关的知识点和问题： [MySQL索引详解](./mysql-index) 。
+MySQL 索引相关的问题比较多，对于面试和工作都比较重要，于是，我单独抽了一篇文章专门来总结 MySQL 索引相关的知识点和问题： [MySQL索引详解](./mysql-index.md) 。
 
 ## MySQL 查询缓存
 

package.json

@@ -13,10 +13,11 @@
     "webpack-clean-serve": "vuepress-webpack dev docs --clean-cache",
     "webpack-serve": "vuepress-webpack dev docs"
   },
-  "devDependencies": {
-    "@vuepress/plugin-search": "^2.0.0-beta.38",
-    "vuepress-theme-hope": "^2.0.0-beta.36",
-    "vuepress-vite": "2.0.0-beta.38",
-    "vuepress-webpack": "2.0.0-beta.38"
+  "dependencies": {
+    "vuepress": "^2.0.0-beta.53",
+    "vuepress-theme-hope": "^2.0.0-beta.122",
+    "vuepress-vite": "2.0.0-beta.53",
+    "vuepress-webpack": "2.0.0-beta.53",
+    "@vuepress/plugin-search": "^2.0.0-beta.53"
   }
 }