feat: 更新配置和样式，添加动画效果，优化代码高亮显示

.vitepress/config.ts

@@ -1,19 +1,30 @@
 import { defineConfig } from "vitepress";
-import packageJson from "../package.json";
 import markdownItAnchor from "markdown-it-anchor";
+import packageJson from "../package.json";
 
-// https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "sendevia 的小站",
   titleTemplate: ":title",
-  description: "一个博客",
+  description: "一个随便写写的博客",
   lang: "zh_CN",
   cleanUrls: true,
   markdown: {
+    anchor: {
+      permalink: markdownItAnchor.permalink.linkAfterHeader({
+        style: "visually-hidden",
+        symbol: "link",
+        class: "title-anchor",
+        assistiveText: () => "复制链接",
+        visuallyHiddenClass: "visually-hidden",
+        wrapper: ['<div class="title-with-achor">', "</div>"],
+        placement: "before",
+      }),
+    },
     image: {
       lazyLoading: true,
     },
   },
+
   head: [
     ["link", { rel: "preconnect", href: "https://fonts.googleapis.com" }],
     ["link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" }],

.vitepress/theme/components/Footer.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { ref } from "vue";
+
 import { useGlobalData } from "../composables/useGlobalData";
 const { site, page } = useGlobalData();
 
-import { ref } from "vue";
 // @ts-ignore
 const siteVersion = __SITE_VERSION__;
 

.vitepress/theme/styles/_components/code.scss

@@ -24,10 +24,22 @@ pre.shiki {
 
     background-color: var(--shiki-light-bg);
 
+    span {
+      color: var(--shiki-light);
+
+      background-color: var(--shiki-light-bg);
+    }
+
     @media (prefers-color-scheme: dark) {
       color: var(--shiki-dark);
 
       background-color: var(--shiki-dark-bg);
+
+      span {
+        color: var(--shiki-dark);
+
+        background-color: var(--shiki-dark-bg);
+      }
     }
   }
 }

.vitepress/theme/styles/animation.scss

@@ -40,3 +40,16 @@
     opacity: 1;
   }
 }
+
+.layout-content-enter-active,
+.layout-content-leave-active {
+  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.layout-content-enter-from,
+.layout-content-leave-to {
+  opacity: 0;
+}
+.layout-content-enter-to,
+.layout-content-leave-from {
+  opacity: 1;
+}

.vitepress/theme/styles/main.scss

@@ -13,10 +13,7 @@
 @include meta.load-css("_components/card");
 @include meta.load-css("_components/code");
 @include meta.load-css("_components/dialog");
-@include meta.load-css("_components/header");
-@include meta.load-css("_components/layout");
 @include meta.load-css("_components/loading-splash");
-@include meta.load-css("_components/notfound");
 @include meta.load-css("_components/snackbar");
 @include meta.load-css("_components/table");
 
@@ -135,11 +132,6 @@ abbr {
   cursor: help;
 }
 
-del,
-s {
-  opacity: 0.5;
-}
-
 hr {
   width: 100%;
 
@@ -161,49 +153,3 @@ hr {
     mask: var(--via-svg-wave) repeat;
   }
 }
-
-.task-list {
-  padding-inline-start: 1em;
-
-  list-style-type: none;
-
-  .task-list-item {
-    margin: 5px 0px;
-
-    vertical-align: middle;
-
-    input {
-      line-height: 0px;
-
-      &.task-list-item-checkbox {
-        @include mixin.material-symbols($size: 24);
-
-        display: inline-block;
-
-        margin-inline-end: 2px;
-
-        letter-spacing: 0px;
-        vertical-align: inherit;
-
-        appearance: none;
-
-        &::after {
-          content: "check_box_outline_blank";
-
-          display: inline-block;
-
-          height: 26.4px;
-
-          color: var(--md-sys-color-on-surface-variant);
-        }
-
-        &:checked::after {
-          content: "check_box";
-
-          color: var(--md-sys-color-primary);
-          font-variation-settings: "FILL" 1;
-        }
-      }
-    }
-  }
-}

package.json

@@ -11,5 +11,6 @@
   },
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
+    "markdown-it-anchor": "^9.2.0"
   }
 }