From b760519ffca950a5f6e83dad90237c04608e98ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=97=E6=A0=87?= Date: Sun, 25 Jun 2023 22:23:04 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix=20-=20"=E5=89=8D=E5=8F=B0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E6=B8=B2=E6=9F=93=E4=B8=8D=E4=BA=86=E5=90=8E=E5=8F=B0?= =?UTF-8?q?markdown=E9=83=A8=E5=88=86=E8=AF=AD=E6=B3=95=E7=9A=84bug?= =?UTF-8?q?=EF=BC=9A=E5=8C=85=E6=8B=AC=E5=B1=85=E4=B8=AD=E3=80=81=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3=E5=AF=B9=E9=BD=90=EF=BC=8C=E4=B8=8A=E4=B8=8B=E8=A7=92?= =?UTF-8?q?=E6=A0=87=EF=BC=8C=E8=84=9A=E6=B3=A8=EF=BC=8C=E7=BC=A9=E5=86=99?= =?UTF-8?q?=EF=BC=8C=E8=A1=A8=E6=83=85=EF=BC=8C=E6=8F=92=E5=85=A5=EF=BC=8C?= =?UTF-8?q?=E6=A0=87=E8=AE=B0=E7=AD=89=E8=AF=AD=E6=B3=95=E7=9A=84=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E3=80=82"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- aurora-vue/aurora-blog/package.json | 8 ++++++++ aurora-vue/aurora-blog/src/main.ts | 1 + aurora-vue/aurora-blog/src/views/Article.vue | 17 ++++++++++++++--- 3 files changed, 23 insertions(+), 3 deletions(-) diff --git a/aurora-vue/aurora-blog/package.json b/aurora-vue/aurora-blog/package.json index 4ff6328..efe17a1 100644 --- a/aurora-vue/aurora-blog/package.json +++ b/aurora-vue/aurora-blog/package.json @@ -13,8 +13,16 @@ "element-plus": "^2.2.9", "js-cookie": "^3.0.1", "markdown-it": "^13.0.1", + "markdown-it-abbr": "^1.0.4", + "markdown-it-container": "^3.0.0", "markdown-it-emoji": "^2.0.2", + "markdown-it-footnote": "^3.0.3", + "markdown-it-ins": "^3.0.1", "markdown-it-katex-external": "^1.0.0", + "markdown-it-mark": "^3.0.1", + "markdown-it-sub": "^1.0.0", + "markdown-it-sup": "^1.0.0", + "mavon-editor": "^3.0.1", "mitt": "^3.0.0", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", diff --git a/aurora-vue/aurora-blog/src/main.ts b/aurora-vue/aurora-blog/src/main.ts index 5e10abd..d32cd9f 100644 --- a/aurora-vue/aurora-blog/src/main.ts +++ b/aurora-vue/aurora-blog/src/main.ts @@ -17,6 +17,7 @@ import { components, plugins } from './plugins/element-plus' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import infiniteScroll from 'vue3-infinite-scroll-better' import v3ImgPreview from 'v3-img-preview' +import 'mavon-editor/dist/css/index.css' import api from './api/api' const pinia = createPinia() diff --git a/aurora-vue/aurora-blog/src/views/Article.vue b/aurora-vue/aurora-blog/src/views/Article.vue index 962ac49..a310500 100644 --- a/aurora-vue/aurora-blog/src/views/Article.vue +++ b/aurora-vue/aurora-blog/src/views/Article.vue @@ -93,7 +93,9 @@
@@ -163,7 +165,6 @@ import tocbot from 'tocbot' import emitter from '@/utils/mitt' import { v3ImgPreviewFn } from 'v3-img-preview' import api from '@/api/api' -import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'Article', @@ -178,6 +179,16 @@ export default defineComponent({ const loading = ref(true) const articleRef = ref() let md = require('markdown-it')() + .use(require('markdown-it-container'), 'hljs-center') // 容器插件 + .use(require('markdown-it-container'), 'hljs-left') + .use(require('markdown-it-container'), 'hljs-right') + .use(require('markdown-it-sup')) // 上角标插件 + .use(require('markdown-it-sub')) // 下角标插件 + .use(require('markdown-it-footnote')) // 脚注插件 + .use(require('markdown-it-abbr')) // 缩写插件 + .use(require('markdown-it-emoji')) // 表情插件 + .use(require('markdown-it-ins')) // 插入插件 + .use(require('markdown-it-mark')) // 标记插件 const reactiveData = reactive({ articleId: '' as any, article: '' as any, @@ -289,7 +300,7 @@ export default defineComponent({ } commonStore.setHeaderImage(data.data.articleCover) new Promise((resolve) => { - data.data.articleContent = markdownToHtml(data.data.articleContent) + data.data.articleContent = md.render(data.data.articleContent) resolve(data.data) }).then((article: any) => { reactiveData.article = article From 61e86b9f0357958830b611a257331a512c83d464 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=97=E6=A0=87?= Date: Sun, 25 Jun 2023 23:18:55 +0800 Subject: [PATCH 2/2] fixes #119 --- aurora-vue/aurora-blog/src/utils/markdown.ts | 9 +++++++++ aurora-vue/aurora-blog/src/views/Archives.vue | 5 ++--- aurora-vue/aurora-blog/src/views/Article.vue | 20 ++++--------------- .../aurora-blog/src/views/ArticleList.vue | 5 ++--- aurora-vue/aurora-blog/src/views/Home.vue | 14 +++++-------- 5 files changed, 22 insertions(+), 31 deletions(-) diff --git a/aurora-vue/aurora-blog/src/utils/markdown.ts b/aurora-vue/aurora-blog/src/utils/markdown.ts index 1648a6a..6f6f193 100644 --- a/aurora-vue/aurora-blog/src/utils/markdown.ts +++ b/aurora-vue/aurora-blog/src/utils/markdown.ts @@ -5,5 +5,14 @@ export default function markdownToHtml(content: any) { }) .use(require('markdown-it-katex-external')) .use(require('markdown-it-emoji')) + .use(require('markdown-it-container'), 'hljs-center') // 容器插件 + .use(require('markdown-it-container'), 'hljs-left') + .use(require('markdown-it-container'), 'hljs-right') + .use(require('markdown-it-sup')) // 上角标插件 + .use(require('markdown-it-sub')) // 下角标插件 + .use(require('markdown-it-footnote')) // 脚注插件 + .use(require('markdown-it-abbr')) // 缩写插件 + .use(require('markdown-it-ins')) // 插入插件 + .use(require('markdown-it-mark')) // 标记插件 return md.render(content) } diff --git a/aurora-vue/aurora-blog/src/views/Archives.vue b/aurora-vue/aurora-blog/src/views/Archives.vue index 7878509..41baad1 100644 --- a/aurora-vue/aurora-blog/src/views/Archives.vue +++ b/aurora-vue/aurora-blog/src/views/Archives.vue @@ -54,6 +54,7 @@ import { useI18n } from 'vue-i18n' import Breadcrumb from '@/components/Breadcrumb.vue' import Paginator from '@/components/Paginator.vue' import api from '@/api/api' +import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'Archives', @@ -62,7 +63,6 @@ export default defineComponent({ const commonStore = useCommonStore() const articleStore = useArticleStore() const { t } = useI18n() - let md = require('markdown-it')() const pagination = reactive({ current: 1, total: 0, @@ -85,8 +85,7 @@ export default defineComponent({ .then(({ data }) => { data.data.records.forEach((item: any) => { item.articles.forEach((article: any) => { - article.articleContent = md - .render(article.articleContent) + article.articleContent = markdownToHtml(article.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') diff --git a/aurora-vue/aurora-blog/src/views/Article.vue b/aurora-vue/aurora-blog/src/views/Article.vue index a310500..936b2ea 100644 --- a/aurora-vue/aurora-blog/src/views/Article.vue +++ b/aurora-vue/aurora-blog/src/views/Article.vue @@ -165,6 +165,7 @@ import tocbot from 'tocbot' import emitter from '@/utils/mitt' import { v3ImgPreviewFn } from 'v3-img-preview' import api from '@/api/api' +import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'Article', @@ -178,17 +179,6 @@ export default defineComponent({ const { t } = useI18n() const loading = ref(true) const articleRef = ref() - let md = require('markdown-it')() - .use(require('markdown-it-container'), 'hljs-center') // 容器插件 - .use(require('markdown-it-container'), 'hljs-left') - .use(require('markdown-it-container'), 'hljs-right') - .use(require('markdown-it-sup')) // 上角标插件 - .use(require('markdown-it-sub')) // 下角标插件 - .use(require('markdown-it-footnote')) // 脚注插件 - .use(require('markdown-it-abbr')) // 缩写插件 - .use(require('markdown-it-emoji')) // 表情插件 - .use(require('markdown-it-ins')) // 插入插件 - .use(require('markdown-it-mark')) // 标记插件 const reactiveData = reactive({ articleId: '' as any, article: '' as any, @@ -300,7 +290,7 @@ export default defineComponent({ } commonStore.setHeaderImage(data.data.articleCover) new Promise((resolve) => { - data.data.articleContent = md.render(data.data.articleContent) + data.data.articleContent = markdownToHtml(data.data.articleContent) resolve(data.data) }).then((article: any) => { reactiveData.article = article @@ -313,8 +303,7 @@ export default defineComponent({ }) }) new Promise((resolve) => { - data.data.preArticleCard.articleContent = md - .render(data.data.preArticleCard.articleContent) + data.data.preArticleCard.articleContent = markdownToHtml(data.data.preArticleCard.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') @@ -323,8 +312,7 @@ export default defineComponent({ reactiveData.preArticleCard = preArticleCard }) new Promise((resolve) => { - data.data.nextArticleCard.articleContent = md - .render(data.data.nextArticleCard.articleContent) + data.data.nextArticleCard.articleContent = markdownToHtml(data.data.nextArticleCard.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') diff --git a/aurora-vue/aurora-blog/src/views/ArticleList.vue b/aurora-vue/aurora-blog/src/views/ArticleList.vue index 3ae41b3..7fe6044 100644 --- a/aurora-vue/aurora-blog/src/views/ArticleList.vue +++ b/aurora-vue/aurora-blog/src/views/ArticleList.vue @@ -31,13 +31,13 @@ import { ArticleCard } from '@/components/ArticleCard' import Paginator from '@/components/Paginator.vue' import { useRoute } from 'vue-router' import api from '@/api/api' +import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'ArticleList', components: { Breadcrumb, ArticleCard, Paginator }, setup() { const route = useRoute() - let md = require('markdown-it')() const pagination = reactive({ size: 12, total: 0, @@ -62,8 +62,7 @@ export default defineComponent({ }) .then(({ data }) => { data.data.records.forEach((item: any) => { - item.articleContent = md - .render(item.articleContent) + item.articleContent = markdownToHtml(item.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') diff --git a/aurora-vue/aurora-blog/src/views/Home.vue b/aurora-vue/aurora-blog/src/views/Home.vue index 14b0911..25195b5 100644 --- a/aurora-vue/aurora-blog/src/views/Home.vue +++ b/aurora-vue/aurora-blog/src/views/Home.vue @@ -81,6 +81,7 @@ import { useCategoryStore } from '@/stores/Category' import { useI18n } from 'vue-i18n' import Paginator from '@/components/Paginator.vue' import api from '@/api/api' +import markdownToHtml from '@/utils/markdown' export default defineComponent({ name: 'Home', @@ -123,7 +124,6 @@ export default defineComponent({ current: 1 }) let nowCategoryId = 0 - let md = require('markdown-it')() onMounted(() => { fetchTopAndFeatured() fetchCategories() @@ -133,14 +133,12 @@ export default defineComponent({ }) const fetchTopAndFeatured = () => { api.getTopAndFeaturedArticles().then(({ data }) => { - data.data.topArticle.articleContent = md - .render(data.data.topArticle.articleContent) + data.data.topArticle.articleContent = markdownToHtml(data.data.topArticle.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') data.data.featuredArticles.forEach((item: any) => { - item.articleContent = md - .render(item.articleContent) + item.articleContent = markdownToHtml(item.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') @@ -163,8 +161,7 @@ export default defineComponent({ .then(({ data }) => { if (data.flag) { data.data.records.forEach((item: any) => { - item.articleContent = md - .render(item.articleContent) + item.articleContent = markdownToHtml(item.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '') @@ -188,8 +185,7 @@ export default defineComponent({ }) .then(({ data }) => { data.data.records.forEach((item: any) => { - item.articleContent = md - .render(item.articleContent) + item.articleContent = markdownToHtml(item.articleContent) .replace(/<\/?[^>]*>/g, '') .replace(/[|]*\n/, '') .replace(/&npsp;/gi, '')