feat: 重构部分代码，略微完成文章md渲染部分
This commit is contained in:
539943419 committed
1 parent
6be2c9a0d7
commit
c2be826bc5
12 files changed
+200
-11
No files matched your search
Vendored
+3
@@ -1,5 +1,8 @@
|
||||
{
|
||||
"cSpell.words": [
|
||||
"linkify",
|
||||
"Markdownit",
|
||||
"mdit",
|
||||
"unplugin"
|
||||
],
|
||||
"vue3snippets.enable-compile-vue-file-on-did-save-code": false
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
+6
-2
@@ -33,8 +33,12 @@ export default defineNuxtConfig({
|
||||
modules: ["nuxtjs-naive-ui", "@pinia/nuxt"],
|
||||
compatibilityDate: "2025-01-12",
|
||||
build: {
|
||||
// 开启打包分析
|
||||
analyze: true,
|
||||
analyze: {
|
||||
filename: "stats.html",
|
||||
},
|
||||
},
|
||||
nitro: {
|
||||
compressPublicAssets: true,
|
||||
},
|
||||
experimental: { appManifest: false },
|
||||
});
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
+12
-3
@@ -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/'
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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)
|
||||
postsData.value = await $fetch('/api/posts/getPosts')
|
||||
// await sleep(1000)
|
||||
postsData.value = await $fetch('/api/posts/getPostList')
|
||||
isInit.value = true
|
||||
console.log(postsData.value)
|
||||
// console.log(postsData.value)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
Generated
+60
@@ -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: {}
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
const testData = `---
|
||||
tags:
|
||||
- think
|
||||
date: 2020-10-07
|
||||
---
|
||||
|
||||
# 为何是秦灭六国，统一天下
|
||||
|
||||
*刚刚与网友谈到这个话题。
|
||||
史书总是把王朝兴衰全归因于“人”，我更愿意相信其主因是“天”。
|
||||
所以，我更“青睐”把王朝更替与气候变化关联起来的相关学说。*
|
||||
|
||||
**以下为爱好者臆测“为何是秦灭六国，一统天下”的原因（由于是爱好者，并不打算详细论证^_^）**
|
||||
|
||||
### 天
|
||||
春秋战国时期大降温（看图）。
|
||||
|
||||
[来源链接](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开建都江堰，使成都平原得"天府之国"美称，成为秦国粮仓。纬度偏南，地理优势。
|
||||
|
||||
那为啥不是楚灭六国呢？
|
||||
猜测原因是：文明主要在北方形成（黄河流域），当时南方绝大部分是蛮荒之地，开发不够。
|
||||
后面两千年，每次大降温（游牧民族必然兴起），导致经济都往南迁移，直到宋朝，南方经济才超过北方，明朝才能成为首个逆袭北方统一中国的王朝。
|
||||
|
||||
### 人
|
||||
商鞅变法（公元前475～公元前221年），史料很多不多说了。
|
||||
|
||||
***公元前221年，秦灭六国***`
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event)
|
||||
const data = `# ${body.id}\n${testData}`
|
||||
return { data }
|
||||
})
|
||||
File renamed without changes.
+1
-1
@@ -8,7 +8,7 @@
|
||||
"server/**/*",
|
||||
"style/**/*",
|
||||
"utils/**/*",
|
||||
".nuxt/**/*",
|
||||
".nuxt/*.d.ts",
|
||||
"types/**/*"
|
||||
]
|
||||
}
|
||||
Reference in new issue
Block a user