feat: 🚀 新增部分 vp-plus 样式文件，permalink、mdh1 插件发版

Author: Kele-Bingtang

README.md

@@ -22,7 +22,7 @@ pnpm install
 pnpm to:theme stub
 ```
 
-使用文档启动
+使用文档项目启动
 
 ```bash
 pnpm docs:dev
@@ -39,15 +39,21 @@ pnpm demo:locales dev
 pnpm demo:localesRoot dev
 ```
 
+如果启动项目失败，则执行如下命令：
+
+```base
+pnpm plugin:build
+```
+
 ## 配置
 
 主题提供了大量的配置，可以在 `src/config/types.ts` 文件阅读配置项。
 
 ## TODO
 
+- 背景大图逻辑和 Banner 大图逻辑拆开
 - 主题使用文档编写
 - 部署测试、线上效果测试
 - 发布 NPM 库
 - 支持无障碍
 - 归档页添加 commit 图标风格，如：`http://niubin.site/archive.html`
-- mdH1、permalink 插件发布

demo/docs-base/.vitepress/theme/index.ts

@@ -8,7 +8,9 @@ import "vitepress-theme-teeker/vp-plus/sidebar.scss";
 import "vitepress-theme-teeker/vp-plus/nav.scss";
 import "vitepress-theme-teeker/vp-plus/aside.scss";
 import "vitepress-theme-teeker/vp-plus/doc-h1.scss";
-// import "vitepress-theme-teeker/vp-plus/container.scss";
+import "vitepress-theme-teeker/vp-plus/nav-blur.scss";
+import "vitepress-theme-teeker/vp-plus/container.scss";
+// import "vitepress-theme-teeker/vp-plus/container-flow.scss";
 // import "vitepress-theme-teeker/vp-plus/blockquote.scss";
 // import "vitepress-theme-teeker/vp-plus/rainbow.scss";
 

demo/docs-base/02.MD 插件测试.md

@@ -171,3 +171,33 @@ data:
 ```
 
 :::
+
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+> [!IMPORTANT]
+> 对用户达成目标至关重要的信息。
+
+> [!WARNING]
+> 因为可能存在风险，所以需要用户立即关注的关键内容。
+
+> [!CAUTION]
+> 行为可能带来的负面影响。

plugins/vitepress-plugin-md-h1/CHANGELOG.md

@@ -1,5 +1,11 @@
 # vitepress-plugin-md-h1
 
+## 1.0.3
+
+### Patch Changes
+
+- 添加 ignoreList 配置项
+
 ## 1.0.2
 
 ### Patch Changes

plugins/vitepress-plugin-md-h1/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-plugin-md-h1",
   "type": "module",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "添加一级标题到 markdown 文档",
   "author": {
     "name": "teeker",

plugins/vitepress-plugin-permalink/CHANGELOG.md

@@ -1,5 +1,11 @@
 # vitepress-plugin-permalink
 
+## 1.0.6
+
+### Patch Changes
+
+- 删除部分配置项，修复浏览器前进、后退 404 出现
+
 ## 1.0.5
 
 ### Patch Changes

plugins/vitepress-plugin-permalink/README.md

@@ -106,18 +106,21 @@ const myFunction = () => {
 在 `.vitepress/theme/index.ts` 引入 `usePermalink` 函数来初始化 permalinks 功能：
 
 ```typescript
-import { h } from "vue";
+import { h, defineComponent } from "vue";
 import DefaultTheme from "vitepress/theme";
 import usePermalink from "vitepress-plugin-permalink/src/usePermalink";
 
 export default {
   extends: DefaultTheme,
-  Layout() {
-    // 开启监听 permalink
-    usePermalink().startWatch();
-
-    return h(DefaultTheme.Layout, null, {});
-  },
+  Layout: defineComponent({
+    name: "LayoutProvider",
+    setup() {
+      // 开启监听 permalink
+      usePermalink().startWatch();
+
+      return h(DefaultTheme.Layout, null, {});
+    },
+  }),
 };
 ```
 

plugins/vitepress-plugin-permalink/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-plugin-permalink",
   "type": "module",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "扫描 markdown 文档，生成永久链接",
   "author": {
     "name": "teeker",

plugins/vitepress-plugin-permalink/src/index.ts

@@ -108,17 +108,30 @@ const getLocalePermalink = (localesKeys: string[] = [], path = "", permalink = "
 };
 
 interface SetActiveMatchWhenUsePermalinkOption {
-  nav: (DefaultTheme.NavItemWithLink & { items: any })[]; // 导航栏
-  permalinkToPath: Record<string, string>; // permalink 和文件路径的映射关系
-  rewrites?: Record<string, any>; // 如果设置了 rewrites，则取 rewrites 后的文件路径
-  cleanUrls?: boolean; // vitepress 配置项，true 关闭 .html 后缀，false 开启 .html 后缀
+  /**
+   * 导航栏
+   */
+  nav: (DefaultTheme.NavItemWithLink & { items: any })[];
+  /**
+   * permalink 和文件路径的映射关系
+   */
+  permalinkToPath: Record<string, string>;
+  /**
+   * 如果设置了 rewrites，则取 rewrites 后的文件路径
+   */
+  rewrites?: Record<string, any>;
+  /**
+   * vitepress 配置项，true 关闭 .html 后缀，false 开启 .html 后缀
+   */
+  cleanUrls?: boolean;
 }
 
 /**
- * 如果 nav 有 link 且 link 为 permalink，则添加 activeMatch 为 permalink 对应的文件路径
+ * 如果 nav 有 link 且 link 为 permalink，则添加 activeMatch 为 permalink 对应的文件路径，如果没有 link，则代表是下拉组，activeMatch 为子级的上一层目录
  * 这里的处理是导航栏兼容 permalink 的高亮功能，默认访问 permalink 后，导航栏不会高亮，因为导航栏是根据实际的文件路径进行匹配
  *
  * @param option 配置项
+ * @param parentNav 父级导航
  */
 const setActiveMatchWhenUsePermalink = (
   option: SetActiveMatchWhenUsePermalinkOption,
@@ -182,9 +195,7 @@ export function VitePluginVitePressNotFoundDelayLoad(option: NotFoundOption = {}
       };
     },
     resolveId(id: string) {
-      if (id === virtualModuleId) {
-        return resolvedVirtualModuleId;
-      }
+      if (id === virtualModuleId) return resolvedVirtualModuleId;
     },
     load(id: string) {
       // 使用虚拟模块将 option 传入组件里

pnpm-lock.yaml

@@ -1,5 +1,14 @@
 # vitepress-theme-teeker
 
+## 1.0.5
+
+### Patch Changes
+
+- Updated dependencies
+- Updated dependencies
+  - [email protected]
+  - [email protected]
+
 ## 1.0.4
 
 ### Patch Changes

vitepress-theme-teeker/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "vitepress-theme-teeker",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "vitepress-theme-teeker",
   "type": "module",
   "author": {
@@ -50,8 +50,8 @@
     "vitepress-plugin-catalogue": "latest",
     "vitepress-plugin-doc-analysis": "latest",
     "vitepress-plugin-file-content-loader": "latest",
-    "vitepress-plugin-md-h1": "workspace:*",
-    "vitepress-plugin-permalink": "workspace:*",
+    "vitepress-plugin-md-h1": "latest",
+    "vitepress-plugin-permalink": "latest",
     "vitepress-plugin-sidebar-resolve": "latest"
   },
   "devDependencies": {

vitepress-theme-teeker/package.json

@@ -180,7 +180,10 @@ onUnmounted(() => {
       </p>
     </div>
 
-    <div v-if="features.length && !isBigImgBgStyle" :class="`${ns.e('feature')} flx-wrap-between`">
+    <div
+      v-if="features.length && !isBigImgBgStyle"
+      :class="[ns.e('feature'), 'flx-wrap-between', ns.joinNamespace('wallpaper-outside')]"
+    >
       <div :class="ns.e('feature__item')" v-for="(feature, index) in features" :key="index">
         <a v-if="feature.link" :href="withBase(feature.link)" class="flx-column-center">
           <img v-if="feature.imgUrl" class="feature-img" :src="withBase(feature.imgUrl)" :alt="feature.title" />

vitepress-theme-teeker/src/components/HomeBanner/src/index.vue

@@ -1,9 +1,9 @@
 import { computed, defineComponent, h, InjectionKey, provide, Ref, unref, type Component } from "vue";
-import { useAnchorScroll, useViewTransition } from "./hooks";
-import type { Post } from "./post/types";
 import { useData } from "vitepress";
 import usePermalink from "vitepress-plugin-permalink/usePermalink";
+import { useAnchorScroll, useViewTransition } from "./hooks";
 import { emptyPost } from "./post/helper";
+import type { Post } from "./post/types";
 
 export const postsSymbol: InjectionKey<Post> = Symbol("posts");
 

vitepress-theme-teeker/src/configProvider.ts

@@ -1,5 +1,5 @@
 /**
- * From vitepress
+ * From Vitepress。Markdown 插件需要用到，因为 Vitepress 的 withBase 方法无法在 Markdown 插件使用
  */
 export const withBase = (base: string, path?: string) => {
   if (!path) return;

vitepress-theme-teeker/src/helper/util.ts

@@ -15,6 +15,13 @@ export type { TkContentData, Post, GroupCardItem, FrontMatter } from "./post/typ
 
 export type DefaultThemeType = typeof DefaultTheme;
 
+export {
+  createContainerThenUse,
+  createContainerThenGet,
+  createContainersThenUse,
+  createContainersThenGet,
+} from "./markdown/plugins/container";
+
 export default {
   extends: DefaultTheme,
   Layout: configProvider(Layout),

vitepress-theme-teeker/src/index.ts

@@ -31,14 +31,9 @@
 
       @media (min-width: 1280px) {
         /* 导航栏 */
-        .VPNav {
-          /* 如果导航栏要透明效果，打开 background-color，如果导航栏要透明磨砂效果，打开这两个样式 */
-          .VPNavBar:not(.home) {
-            background-color: getCssVar("bg-color-2") !important;
-            backdrop-filter: saturate(200%) blur(20px);
-            .content-body {
-              background-color: transparent;
-            }
+        .VPNav .VPNavBar:not(.home) {
+          .content-body {
+            background-color: transparent;
           }
         }
         .VPSidebar {
@@ -49,5 +44,9 @@
         }
       }
     }
+
+    .VPNavBar.home .divider {
+      display: none;
+    }
   }
 }