大量修改，CDN测试

Author: CSBigCaptain

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "html.customData": ["./node_modules/mdui/html-data.zh-cn.json"],
   "css.customData": ["./node_modules/mdui/css-data.zh-cn.json"]
-}
+}

README.md

@@ -1,6 +1,6 @@
 # CSBigCaptain Blog
 
-![GitHub License](https://img.shields.io/github/license/csbigcaptain/csbigcaptain.github.io) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fcsbigcaptain.github.io) ![Node Current](https://img.shields.io/node/v/nuxt3) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/csbigcaptain/csbigcaptain.github.io) 
+![GitHub License](https://img.shields.io/github/license/csbigcaptain/csbigcaptain.github.io) ![Website](https://img.shields.io/website?url=https%3A%2F%2Fcsbigcaptain.github.io) ![Node Current](https://img.shields.io/node/v/nuxt3) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/csbigcaptain/csbigcaptain.github.io)
 
 本项目是 [CSBigCaptain](https://github.com/csbigcaptain) 的个人博客的仓库。使用 Nuxt 3 开发构建，使用 Material Design 设计风格，并使用 [Nuxt Content](https://content.nuxtjs.org/) 来作为本地基于文件的 CMS 系统。
 

app/app.config.ts

@@ -1,10 +1,9 @@
 export default defineAppConfig({
-    title: 'CSBigCaptain Blog',
-    // theme: {
-    //   dark: true,
-    //   colors: {
-    //     primary: '#ff0000'
-    //   }
-    // }
-  })
-  
+  title: 'CSBigCaptain Blog',
+  // theme: {
+  //   dark: true,
+  //   colors: {
+  //     primary: '#ff0000'
+  //   }
+  // }
+})

app/app.vue

@@ -4,8 +4,8 @@
 
 <script setup lang="ts">
 // 注入 Microsoft Clarity 代码
-const config = useRuntimeConfig();
-const analyticsId = config.public.msAnalyticsId;
+const config = useRuntimeConfig()
+const analyticsId = config.public.msAnalyticsId
 
 useHead({
   script: [
@@ -17,10 +17,22 @@ useHead({
         y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
       })(window, document, "clarity", "script", "${analyticsId}");
       `,
-      type: "text/javascript",
+      type: 'text/javascript',
+    },
+    {
+      innerHTML: `
+        (function(d) {
+          var config = {
+            kitId: 'wih3lxc',
+            scriptTimeout: 3000,
+            async: true
+          },
+          h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
+        })(document);`,
+      type: 'text/javascript',
     },
   ],
-});
+})
 
-getPagesTheme();
+getPagesTheme()
 </script>

app/assets/css/global.less

@@ -1,26 +1,42 @@
-// @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
 
 * {
   box-sizing: border-box;
 }
 
-li, li {
+li,
+li {
   list-style: none;
 }
 
 :root {
   --inline-padding: 15px;
+  font-family:
+    source-han-sans-sc-variable,
+    -apple-system,
+    sans-serif;
+  font-variation-settings: 'wght' 480;
+  letter-spacing: 0.015rem;
+  word-spacing: 0.1rem;
 }
 
 body {
   margin: 0;
   padding: 0;
-  font-family: "Inter", -apple-system, sans-serif;
+}
+
+h1, h2 {
+  font-variation-settings: 'wght' 400;
+}
+// 部分 mdui 组件不支持可变粗细字体
+mdui-chip,
+mdui-button {
+  font-family: sans-serif;
 }
 
 code,
 pre {
-  font-family: "Jetbrains Mono", "Roboto Mono", monospace;
+  font-family: 'Jetbrains Mono', 'Roboto Mono', monospace;
 }
 
 .webMain {
@@ -29,15 +45,21 @@ pre {
   --body-primary-color: rgb(var(--mdui-color-primary));
   --body-on-primary-color: rgb(var(--mdui-color-on-primary));
   --body-primary-container-color: rgb(var(--mdui-color-primary-container));
-  --body-on-primary-container-color: rgb(var(--mdui-color-on-primary-container));
+  --body-on-primary-container-color: rgb(
+    var(--mdui-color-on-primary-container)
+  );
   --body-secondary-color: rgb(var(--mdui-color-secondary));
   --body-on-secondary-color: rgb(var(--mdui-color-on-secondary));
   --body-secondary-container-color: rgb(var(--mdui-color-secondary-container));
-  --body-on-secondary-container-color: rgb(var(--mdui-color-on-secondary-container));
+  --body-on-secondary-container-color: rgb(
+    var(--mdui-color-on-secondary-container)
+  );
   --body-tertiary-color: rgb(var(--mdui-color-tertiary));
   --body-on-tertiary-color: rgb(var(--mdui-color-on-tertiary));
   --body-tertiary-container-color: rgb(var(--mdui-color-tertiary-container));
-  --body-on-tertiary-container-color: rgb(var(--mdui-color-on-tertiary-container));
+  --body-on-tertiary-container-color: rgb(
+    var(--mdui-color-on-tertiary-container)
+  );
   --bar-text-color: rgb(var(--mdui-color-on-surface-variant));
   --bar-bg-color: rgb(var(--mdui-color-surface-variant));
 }

app/components/DefaultNav.vue

@@ -21,14 +21,14 @@
 </template>
 
 <script lang="ts" setup>
-import "mdui/components/button-icon.js";
-import "@mdui/icons/search.js";
-import "@mdui/icons/menu.js";
-import "@mdui/icons/more-vert.js";
-import "@mdui/icons/mode-night.js";
-import "@mdui/icons/wb-sunny.js";
-import "@mdui/icons/palette.js";
-import "@mdui/icons/share.js";
+import 'mdui/components/button-icon.js'
+import '@mdui/icons/search.js'
+import '@mdui/icons/menu.js'
+import '@mdui/icons/more-vert.js'
+import '@mdui/icons/mode-night.js'
+import '@mdui/icons/wb-sunny.js'
+import '@mdui/icons/palette.js'
+import '@mdui/icons/share.js'
 </script>
 
 <style scoped>

app/components/app/RandomSentence.vue

@@ -2,26 +2,27 @@
   <div class="OuterMain">
     <div class="inner">
       <div class="sentence" @click="typeText">
-        {{ displayText }}<span class="cursor" v-if="isTyping">|</span>
+        {{ displayText }}
+        <span class="cursor" v-if="isTyping">|</span>
       </div>
       <div class="source">
-        {{ sentence ? sentence.author : "" }}
-        {{ sentence ? `（${sentence.name}）` : "" }}
+        {{ sentence ? sentence.author : '' }}
+        {{ sentence ? `（${sentence.name}）` : '' }}
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
 const sentence = ref()
-const displayText = ref("")
-const fullText = ref("")
+const displayText = ref('')
+const fullText = ref('')
 const isTyping = ref(false)
 
 // 打字效果函数
 const typeText = async () => {
   isTyping.value = true
-  displayText.value = ""
+  displayText.value = ''
 
   for (let i = 0; i < fullText.value.length; i++) {
     if (!isTyping.value) break
@@ -37,27 +38,31 @@ const typeText = async () => {
 const { data } = await useAsyncData(
   `sentence-${Math.floor(Date.now() / 60000)}`,
   async () => {
-    const res = await $fetch("https://open.saintic.com/api/sentence/")
+    const res = await $fetch('https://open.saintic.com/api/sentence/')
     return {
-      sentence: res?.data?.sentence || "",
-      author: res?.data?.author || "",
-      name: res?.data?.name || "",
+      sentence: res?.data?.sentence || '',
+      author: res?.data?.author || '',
+      name: res?.data?.name || '',
     }
   },
   {
     default: () => null,
-    server: false
-  }
+    server: false,
+  },
 )
 
 // 监听数据变化并执行打字效果
-watch(data, async (newData) => {
-  if (newData?.sentence) {
-    sentence.value = newData
-    fullText.value = newData.sentence
-    await typeText()
-  }
-}, { immediate: true })
+watch(
+  data,
+  async (newData) => {
+    if (newData?.sentence) {
+      sentence.value = newData
+      fullText.value = newData.sentence
+      await typeText()
+    }
+  },
+  { immediate: true },
+)
 
 // 组件卸载时停止打字
 onBeforeUnmount(() => {
@@ -74,7 +79,7 @@ onBeforeUnmount(() => {
   height: 45vh;
   background: rgb(var(--mdui-color-surface-container-highest));
   transform: translateY(calc(-1 * var(--inline-padding)));
-  
+
   .inner {
     width: 70%;
     min-width: 370px;
@@ -84,7 +89,7 @@ onBeforeUnmount(() => {
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
-    
+
     .sentence {
       font-size: 1.5rem;
       line-height: 1.6;
@@ -94,13 +99,13 @@ onBeforeUnmount(() => {
       text-align: center;
       font-weight: bold;
     }
-    
+
     .source {
       font-size: 1rem;
       opacity: 0.7;
       text-align: center;
     }
-    
+
     .cursor {
       animation: blink 1s infinite;
       color: var(--mdui-color-primary);
@@ -109,7 +114,13 @@ onBeforeUnmount(() => {
 }
 
 @keyframes blink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0; }
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0;
+  }
 }
 </style>

app/components/app/container.vue

@@ -1,5 +1,4 @@
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 
 <template>
   <div class="outer">

app/components/content/ProseA.vue

@@ -7,7 +7,7 @@
 </template>
 
 <style scoped>
-.main a{
+.main a {
   text-decoration: none;
   box-sizing: content-box;
   padding: 0.1em 0.35em;
@@ -22,25 +22,25 @@
 </style>
 
 <script setup lang="ts">
-import type { PropType } from "vue";
+import type { PropType } from 'vue'
 
 const props = defineProps({
   href: {
     type: String,
-    default: "",
+    default: '',
   },
   target: {
     type: String as PropType<
-      | "_blank"
-      | "_parent"
-      | "_self"
-      | "_top"
+      | '_blank'
+      | '_parent'
+      | '_self'
+      | '_top'
       | (string & object)
       | null
       | undefined
     >,
     default: undefined,
     required: false,
   },
-});
+})
 </script>

app/components/content/ProseBlockquote.vue

@@ -18,5 +18,4 @@
   font-size: 0.9rem; /* 减小字体大小 */
   line-height: 1.4; /* 调整行高 */
 }
-
-</style>
+</style>