feat: 重构部分代码，略微完成文章md渲染部分

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "cSpell.words": [
+        "linkify",
+        "Markdownit",
+        "mdit",
         "unplugin"
     ],
     "vue3snippets.enable-compile-vue-file-on-did-save-code": false

hooks/useMarkdownit.ts

@@ -0,0 +1,10 @@
+export default async function useMarkdownit() {
+    const md = await import('markdown-it');
+    const markdownit = md.default;
+    const mdit = markdownit({
+        html: true,
+        linkify: true,
+        typographer: true
+    });
+    return mdit;
+}

nuxt.config.ts

@@ -33,8 +33,12 @@ export default defineNuxtConfig({
 	modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
 	compatibilityDate: "2025-01-12",
 	build: {
-		// 开启打包分析
+		analyze: {
-		analyze: true,
+			filename: "stats.html",
+		},
+	},
+	nitro: {
+	  compressPublicAssets: true,
 	},
 	experimental: { appManifest: false },
 });

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@pinia/nuxt": "^0.9.0",
     "@vicons/ionicons5": "^0.13.0",
+    "markdown-it": "^14.1.0",
     "naive-ui": "^2.41.0",
     "node-fetch": "^3.3.2",
     "nuxt": "^3.10.3",
@@ -23,6 +24,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@types/markdown-it": "^14.1.2",
     "sass": "^1.83.1"
   }
 }

pages/iframe/[url].vue

@@ -1,11 +1,16 @@
 <template>
     <div class="iframe-wrapper">
-        <iframe src="/iframe-source/genshin-gacha/index.html" frameborder="0"></iframe>
+        <iframe :src="decodeURIComponent(route.params.url as string)" frameborder="0"></iframe>
     </div>
 </template>
 
 <script setup lang="ts">
 
+const route = useRoute();
+
+// onMounted(() => {
+//     console.log(route.params.url);
+// })
 </script>
 
 <style scoped>

pages/index.vue

@@ -105,7 +105,17 @@ const PageContent = reactive<PageContent[]>([
         nuxtLinks: [
           {
             name: 'demo',
-            to: 'tool/genshin-gacha'
+            to: `/iframe/${encodeURIComponent('/iframe-source/genshin-gacha/index.html')}`
+          }
+        ]
+      },
+      {
+        name: 'miaoTracker',
+        description: '仅仅是个接口而已，用来查询开发者的位置记录',
+        nuxtLinks: [
+          {
+            name: 'demo',
+            to: `/iframe/${encodeURIComponent('https://nj.miaospring.top:17582/api/getAllPositions')}`
           }
         ]
       },
@@ -115,12 +125,11 @@ const PageContent = reactive<PageContent[]>([
     show: true,
     content: [
       {
-        name: 'vue3',
+        name: 'VUE',
         description: 'vue3官方文档',
         links: [
           {
             name: 'vue3',
-
             url: 'https://cn.vuejs.org/'
           }
         ]

pages/posts/index.vue

@@ -2,7 +2,7 @@
     <div class="posts-wrapper">
         <article class="posts-item" v-for="post in postsData" :key="post.id">
             <header class="post-title">
-                <a href="">{{ post.title }}</a>
+                <nuxt-link :to="`/posts/post-${post.id}`">{{ post.title }}</nuxt-link>
             </header>
             <p class="post-summary">{{ post.summary }}...</p>
             <footer class="post-footer">
@@ -32,10 +32,10 @@ const postsData = ref<postItem[]>([])
 
 onMounted(async () => {
     // router.push('/posts/temp')
-    await sleep(1000)
+    // await sleep(1000)
-    postsData.value = await $fetch('/api/posts/getPosts')
+    postsData.value = await $fetch('/api/posts/getPostList')
     isInit.value = true
-    console.log(postsData.value)
+    // console.log(postsData.value)
 })
 
 </script>

pages/posts/post-[id].vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="md-render">
+        <div v-if="isInit" v-html="renderedData"></div>
+        <div v-else class="md-skeleton-item">
+            <n-skeleton text style="height: 40px; width: 60%" />
+            <n-skeleton text :repeat="2" />
+            <n-skeleton text style="height: 40px; width: 60%" />
+            <n-skeleton text :repeat="6" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useMarkdownit from '~/hooks/useMarkdownit';
+
+const route = useRoute()
+
+const isInit = ref(false)
+
+const renderedData = ref('')
+
+onMounted(async () => {
+    const id = route.params.id
+
+    const _p = $fetch('/api/posts/getPostContent', {
+        method: 'POST',
+        body: {
+            id
+        }
+    })
+
+    const markdownIt = await useMarkdownit()
+
+    const postsData = await _p
+
+    renderedData.value = markdownIt.render(postsData.data)
+
+    isInit.value = true
+
+})
+
+</script>
+
+<style scoped>
+.md-render {
+    width: 100%;
+    padding: 10px 20px 30px;
+
+    box-sizing: border-box;
+}
+
+.md-skeleton-item {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    padding-top: 30px;
+}
+</style>

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@vicons/ionicons5':
         specifier: ^0.13.0
         version: 0.13.0
+      markdown-it:
+        specifier: ^14.1.0
+        version: 14.1.0
       naive-ui:
         specifier: ^2.41.0
         version: 2.41.0(vue@3.5.13(typescript@5.7.3))
@@ -42,6 +45,9 @@ importers:
         specifier: ^4.3.0
         version: 4.5.0(vue@3.5.13(typescript@5.7.3))
     devDependencies:
+      '@types/markdown-it':
+        specifier: ^14.1.2
+        version: 14.1.2
       sass:
         specifier: ^1.83.1
         version: 1.83.1
@@ -917,12 +923,21 @@ packages:
   '@types/katex@0.16.7':
     resolution: {integrity: sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==}
 
+  '@types/linkify-it@5.0.0':
+    resolution: {integrity: sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
   '@types/lodash@4.17.14':
     resolution: {integrity: sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A==}
 
+  '@types/markdown-it@14.1.2':
+    resolution: {integrity: sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==}
+
+  '@types/mdurl@2.0.0':
+    resolution: {integrity: sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==}
+
   '@types/node@22.10.5':
     resolution: {integrity: sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==}
 
@@ -1966,6 +1981,9 @@ packages:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
 
+  linkify-it@5.0.0:
+    resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
+
   listhen@1.9.0:
     resolution: {integrity: sha512-I8oW2+QL5KJo8zXNWX046M134WchxsXC7SawLPvRQpogCbkyQIaFxPE89A2HiwR7vAK2Dm2ERBAmyjTYGYEpBg==}
     hasBin: true
@@ -2008,12 +2026,19 @@ packages:
   magicast@0.3.5:
     resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
 
+  markdown-it@14.1.0:
+    resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
+    hasBin: true
+
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
   mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
+  mdurl@2.0.0:
+    resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
+
   merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
 
@@ -2531,6 +2556,10 @@ packages:
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
+  punycode.js@2.3.1:
+    resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
+    engines: {node: '>=6'}
+
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -2867,6 +2896,9 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  uc.micro@2.1.0:
+    resolution: {integrity: sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==}
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -4177,12 +4209,21 @@ snapshots:
 
   '@types/katex@0.16.7': {}
 
+  '@types/linkify-it@5.0.0': {}
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.14
 
   '@types/lodash@4.17.14': {}
 
+  '@types/markdown-it@14.1.2':
+    dependencies:
+      '@types/linkify-it': 5.0.0
+      '@types/mdurl': 2.0.0
+
+  '@types/mdurl@2.0.0': {}
+
   '@types/node@22.10.5':
     dependencies:
       undici-types: 6.20.0
@@ -5296,6 +5337,10 @@ snapshots:
 
   lilconfig@3.1.3: {}
 
+  linkify-it@5.0.0:
+    dependencies:
+      uc.micro: 2.1.0
+
   listhen@1.9.0:
     dependencies:
       '@parcel/watcher': 2.5.0
@@ -5354,10 +5399,21 @@ snapshots:
       '@babel/types': 7.26.5
       source-map-js: 1.2.1
 
+  markdown-it@14.1.0:
+    dependencies:
+      argparse: 2.0.1
+      entities: 4.5.0
+      linkify-it: 5.0.0
+      mdurl: 2.0.0
+      punycode.js: 2.3.1
+      uc.micro: 2.1.0
+
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30: {}
 
+  mdurl@2.0.0: {}
+
   merge-stream@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -6041,6 +6097,8 @@ snapshots:
 
   protocols@2.0.1: {}
 
+  punycode.js@2.3.1: {}
+
   queue-microtask@1.2.3: {}
 
   queue-tick@1.0.1: {}
@@ -6398,6 +6456,8 @@ snapshots:
 
   typescript@5.7.3: {}
 
+  uc.micro@2.1.0: {}
+
   ufo@1.5.4: {}
 
   ultrahtml@1.5.3: {}

server/api/posts/getPostContent.ts

@@ -0,0 +1,38 @@
+const testData = `---
+tags:
+  - think
+date: 2020-10-07
+---
+
+# 为何是秦灭六国，统一天下
+
+*刚刚与网友谈到这个话题。  
+史书总是把王朝兴衰全归因于“人”，我更愿意相信其主因是“天”。  
+所以，我更“青睐”把王朝更替与气候变化关联起来的相关学说。*
+
+**以下为爱好者臆测“为何是秦灭六国，一统天下”的原因（由于是爱好者，并不打算详细论证^_^）**
+
+### 天
+春秋战国时期大降温（看图）。  
+![](./chronology.jpeg)    
+[来源链接](http://www.360doc.com/content/15/0616/06/17132703_478419907.shtml)  
+估计北方的诸侯收成都不好吧，没有找到战国时期天灾的相关资料。[期待这本书验证](https://baike.baidu.com/item/%E4%B8%89%E5%8D%83%E5%B9%B4%E5%A4%A9%E7%81%BE/12292062?fr=aladdin)  
+
+### 地
+公元前316年秦灭巴蜀，得成都平原。  
+约公元前256开建都江堰，使成都平原得"天府之国"美称，成为秦国粮仓。纬度偏南，地理优势。
+![](./map.jpeg)    
+那为啥不是楚灭六国呢？  
+猜测原因是：文明主要在北方形成（黄河流域），当时南方绝大部分是蛮荒之地，开发不够。  
+后面两千年，每次大降温（游牧民族必然兴起），导致经济都往南迁移，直到宋朝，南方经济才超过北方，明朝才能成为首个逆袭北方统一中国的王朝。    
+
+### 人
+商鞅变法（公元前475～公元前221年），史料很多不多说了。  
+
+***公元前221年，秦灭六国***`
+
+export default defineEventHandler(async (event) => {
+  const body = await readBody(event)
+  const data = `# ${body.id}\n${testData}`
+  return { data }
+})

tsconfig.json

@@ -8,7 +8,7 @@
     "server/**/*",
     "style/**/*",
     "utils/**/*",
-    ".nuxt/**/*",
+    ".nuxt/*.d.ts",
     "types/**/*"
   ]
 }