From ab2b51fb23034bdf4de56f2e087ed7d6aa4fa8e0 Mon Sep 17 00:00:00 2001
From: Benny Guo <bennyxguo6@gmail.com>
Date: Sat, 9 Sep 2023 22:41:34 +0800
Subject: [PATCH] feat: replace prismjs with shiki

---
 _config.yml                            |   7 +
 package.json                           |   2 +-
 src/components/PageContent.vue         |   8 +-
 src/components/ToggleSwitch/Toggle.vue |   4 +-
 src/pages/about.vue                    |   6 +-
 src/pages/index.vue                    |   2 +-
 src/pages/links.vue                    |  27 +-
 src/pages/page/[slug].vue              |   6 +-
 src/pages/post/[slug].vue              |   6 +-
 src/styles/components/article.scss     |  39 ++-
 src/styles/prism-aurora-future.css     | 400 -------------------------
 templates/index.html                   |  32 +-
 vite.config.js                         |   6 +-
 13 files changed, 66 insertions(+), 479 deletions(-)
 delete mode 100644 src/styles/prism-aurora-future.css

diff --git a/_config.yml b/_config.yml
index 3291442d..fac13dab 100644
--- a/_config.yml
+++ b/_config.yml
@@ -211,3 +211,10 @@ footer_links:
       - title: Friends # link of friends mode / 友链模式
         mode: 'links'
 
+#! ---------------------------------------------------------------
+#! Highlighter Shiki
+#! ---------------------------------------------------------------
+shiki:
+  enable: true
+  backgroundColor: "#1a1a1a"
+
diff --git a/package.json b/package.json
index e4100572..d2e41374 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
     "script-ext-html-webpack-plugin": "^2.1.5",
     "semantic-release": "^21.1.1",
     "tailwindcss": "3.3.3",
-    "typescript": "~5.2.2",
+    "typescript": "^5.1.0",
     "vite": "^4.4.9",
     "vite-plugin-html-transformer": "^4.0.0",
     "vite-plugin-pages": "^0.31.0",
diff --git a/src/components/PageContent.vue b/src/components/PageContent.vue
index 55f76268..699c2a19 100644
--- a/src/components/PageContent.vue
+++ b/src/components/PageContent.vue
@@ -73,26 +73,26 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
 import {
-  Ref,
   computed,
   defineComponent,
   nextTick,
   onMounted,
   onUnmounted,
+  Ref,
   ref,
   toRefs,
   watch
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Sidebar, Toc, Profile } from '@/components/Sidebar'
+import { Profile, Sidebar, Toc } from '@/components/Sidebar'
 import { useCommonStore } from '@/stores/common'
 import { useRoute } from 'vue-router'
 import PostStats from './Post/PostStats.vue'
 import { useAppStore } from '@/stores/app'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
 import useLightBox from '@/hooks/useLightBox'
+import ObSkeleton from '@/components/LoadingSkeleton/Skeleton.vue'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
@@ -101,7 +101,7 @@ interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
 
 export default defineComponent({
   name: 'ObPageContent',
-  components: { Sidebar, Toc, Profile, PostStats },
+  components: { ObSkeleton, Sidebar, Toc, Profile, PostStats },
   props: {
     post: {
       type: Object,
diff --git a/src/components/ToggleSwitch/Toggle.vue b/src/components/ToggleSwitch/Toggle.vue
index 99478f5a..5e674ea8 100644
--- a/src/components/ToggleSwitch/Toggle.vue
+++ b/src/components/ToggleSwitch/Toggle.vue
@@ -23,13 +23,13 @@ export default defineComponent({
   },
   emits: ['changeStatus'],
   setup(props, { emit }) {
-    let { status } = toRefs(props)
+    const { status } = toRefs(props)
 
     onMounted(() => {
       changeTransform()
     })
 
-    let toggleStyle = reactive({
+    const toggleStyle = reactive({
       transform: '',
       background: '#6e40c9'
     })
diff --git a/src/pages/about.vue b/src/pages/about.vue
index e76bf1b3..b03cbedf 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -14,10 +14,8 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import { useI18n } from 'vue-i18n'
 import usePageTitle from '@/hooks/usePageTitle'
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'About',
+  name: 'ARAbout',
   components: { PageContent, Breadcrumbs },
   setup() {
     const articleStore = useArticleStore()
@@ -29,8 +27,6 @@ export default defineComponent({
       pageData.value = await articleStore.fetchArticle('about')
 
       updateTitle()
-      await nextTick()
-      Prism.highlightAll()
     }
 
     onMounted(fetchArticle)
diff --git a/src/pages/index.vue b/src/pages/index.vue
index b06c7c30..f95d5dd6 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -116,7 +116,7 @@ import usePageTitle from '@/hooks/usePageTitle'
 import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
-  name: 'Home',
+  name: 'ARHome',
   components: {
     Feature,
     FeatureList,
diff --git a/src/pages/links.vue b/src/pages/links.vue
index 4501bce7..8fb14f7a 100644
--- a/src/pages/links.vue
+++ b/src/pages/links.vue
@@ -32,12 +32,12 @@
         @on-apply-clicked="jumpToContent()"
       />
 
-      <template v-if="pageData.categoryMode === true">
-        <LinkCategoryList :links="(pageData.data as Record<string, Link[]>)" />
+      <template v-if="pageData.categoryMode">
+        <LinkCategoryList :links="pageData.data as Record<string, Link[]>" />
       </template>
 
       <template v-else>
-        <LinkList :links="(pageData.data as Link[])" />
+        <LinkList :links="pageData.data as Link[]" />
       </template>
 
       <div class="mt-8" id="content">
@@ -94,22 +94,12 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
-import {
-  Ref,
-  computed,
-  defineComponent,
-  nextTick,
-  onMounted,
-  ref,
-  watch
-} from 'vue'
+import { computed, defineComponent, nextTick, onMounted, Ref, ref } from 'vue'
 import PostStats from '@/components/Post/PostStats.vue'
 import LinkBox from '@/components/Link/LinkBox.vue'
 import LinkCard from '@/components/Link/LinkCard.vue'
-import { Page } from '@/models/Article.class'
+import { Link, Page } from '@/models/Article.class'
 import { Title } from '@/components/Title'
-import { Link } from '@/models/Article.class'
 import { useAppStore } from '@/stores/app'
 import { useArticleStore } from '@/stores/article'
 import { useI18n } from 'vue-i18n'
@@ -121,17 +111,17 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import usePageTitle from '@/hooks/usePageTitle'
 import useJumpToEle from '@/hooks/useJumpToEle'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
+import ObSkeleton from '@/components/LoadingSkeleton/Skeleton.vue'
 
 interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getCommentCount(): void
   getPostView(): void
 }
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'Links',
+  name: 'ARLinks',
   components: {
+    ObSkeleton,
     PostStats,
     LinkBox,
     LinkCard,
@@ -158,7 +148,6 @@ export default defineComponent({
       await nextTick()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
-      Prism.highlightAll()
     }
 
     const jumpToContent = () => {
diff --git a/src/pages/page/[slug].vue b/src/pages/page/[slug].vue
index 64c69683..5bd7811c 100644
--- a/src/pages/page/[slug].vue
+++ b/src/pages/page/[slug].vue
@@ -36,10 +36,8 @@ import Comment from '@/components/Comment.vue'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
 import { Locales } from '@/models/ThemeConfig.class'
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'Page',
+  name: 'ARPage',
   components: { PageContent, Breadcrumbs, Comment },
   setup() {
     const articleStore = useArticleStore()
@@ -59,8 +57,6 @@ export default defineComponent({
       pageData.value = response
       pageTitle.value = response.title
       updateTitle(appStore.locale)
-      await nextTick()
-      Prism.highlightAll()
     }
 
     const updateTitle = (locale?: Locales) => {
diff --git a/src/pages/post/[slug].vue b/src/pages/post/[slug].vue
index 667a65cc..46b5d6f0 100644
--- a/src/pages/post/[slug].vue
+++ b/src/pages/post/[slug].vue
@@ -177,7 +177,6 @@
 </template>
 
 <script lang="ts">
-import '@/styles/prism-aurora-future.css'
 import { Sidebar, Toc, Profile } from '@/components/Sidebar'
 import { Post } from '@/models/Post.class'
 import { usePostStore } from '@/stores/post'
@@ -200,10 +199,8 @@ interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getPostView(): void
 }
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'ObPost',
+  name: 'ARPost',
   components: {
     Sidebar,
     Toc,
@@ -256,7 +253,6 @@ export default defineComponent({
       initializeLightBox()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
-      Prism.highlightAll()
     }
 
     watch(
diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
index cd2467ce..31e8945d 100644
--- a/src/styles/components/article.scss
+++ b/src/styles/components/article.scss
@@ -634,15 +634,30 @@
     overflow-wrap: normal !important;
   }
 
+  pre::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+  }
+
+  pre::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 0;
+  }
+
+  pre::-webkit-scrollbar-thumb {
+    background-color: var(--background-secondary);
+    border-radius: 0.5em;
+    box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%), inset -2px -2px 2px rgb(0 0 0 / 25%);
+  }
+
   pre code {
+    @apply inline-block;
     padding: 0;
   }
 
-  code:not([class^="language-"]) {
-    color: var(--text-normal);
+  p code {
     margin: 0;
     font-size: 0.85em;
-    border-radius: 3px;
     overflow-wrap: break-word;
     background-color: var(--bg-accent-05);
     word-wrap: break-word;
@@ -652,6 +667,24 @@
   }
 }
 
+div[class^="language-"] {
+  @apply relative rounded-2xl overflow-hidden shadow my-6;
+}
+
+div[class^="language-"] .lang,
+div[class^="language-"] button,
+{
+  @apply absolute top-4 right-5 z-50 opacity-40 capitalize;
+}
+
+div[class^="language-"] pre {
+  @apply py-4 relative;
+}
+
+div[class^="language-"] pre code {
+  @apply px-4 relative block;
+}
+
 .post-header {
   @apply mb-4 px-4;
   .post-labels {
diff --git a/src/styles/prism-aurora-future.css b/src/styles/prism-aurora-future.css
deleted file mode 100644
index 79fdd88a..00000000
--- a/src/styles/prism-aurora-future.css
+++ /dev/null
@@ -1,400 +0,0 @@
-:root {
-  --background: #1a1a1a;
-  --comment: #6c6d72;
-  --foreground: #cccccc;
-  --selection: #44475a;
-  --cyan: #4ac7fd;
-  --green: #61ffb0;
-  --orange: #ffb86c;
-  --pink: #da67da;
-  --purple: #893cf5;
-  --red: #ff5882;
-  --yellow: #f1e75d;
-  --subs: #3f4144;
-  --background-30: #282a3633;
-  --comment-30: #6272a433;
-  --foreground-30: #f8f8f233;
-  --selection-30: #44475a33;
-  --cyan-30: #8be9fd33;
-  --green-30: #50fa7b33;
-  --orange-30: #ffb86c33;
-  --pink-30: #ff79c633;
-  --purple-30: #bd93f933;
-  --red-30: #ff555533;
-  --yellow-30: #f1fa8c33;
-  --background-40: #282a3666;
-  --comment-40: #6272a466;
-  --foreground-40: #f8f8f266;
-  --selection-40: #44475a66;
-  --cyan-40: #8be9fd66;
-  --green-40: #50fa7b66;
-  --orange-40: #ffb86c66;
-  --pink-40: #ff79c666;
-  --purple-40: #bd93f966;
-  --red-40: #ff555566;
-  --yellow-40: #f1fa8c66;
-}
-pre::-webkit-scrollbar {
-  width: 0.5em;
-  height: 0.5em;
-}
-pre::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-radius: 0;
-}
-pre::-webkit-scrollbar-thumb {
-  background-color: var(--selection);
-  border-radius: 0.5em;
-  box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%),
-    inset -2px -2px 2px rgb(0 0 0 / 25%);
-}
-code[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-pre[class*='language-']::-moz-selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-code[class*='language-'] ::selection,
-code[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-pre[class*='language-']::selection {
-  text-shadow: none;
-  background-color: var(--selection);
-}
-pre.line-numbers {
-  position: relative;
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-}
-pre.line-numbers > code {
-  position: relative;
-  white-space: inherit;
-}
-.line-numbers .line-numbers-rows {
-  display: none;
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  font-size: 100%;
-  left: -3.8em;
-  width: 3em;
-  letter-spacing: -1px;
-  border-right: 1px solid #999;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.line-numbers-rows > span {
-  pointer-events: none;
-  display: block;
-  counter-increment: linenumber;
-}
-.line-numbers-rows > span:before {
-  content: counter(linenumber);
-  color: #999;
-  display: block;
-  padding-right: 0.8em;
-  text-align: right;
-}
-div.code-toolbar {
-  position: relative;
-}
-div.code-toolbar > .toolbar {
-  position: absolute;
-  top: 0.3em;
-  right: 0.2em;
-  transition: opacity 0.3s ease-in-out;
-  opacity: 0;
-}
-div.code-toolbar:hover > .toolbar {
-  opacity: 1;
-}
-div.code-toolbar > .toolbar .toolbar-item {
-  display: inline-block;
-  padding-top: 10px;
-  padding-right: 20px;
-}
-div.code-toolbar > .toolbar a {
-  cursor: pointer;
-}
-div.code-toolbar > .toolbar button {
-  background: 0 0;
-  border: 0;
-  color: inherit;
-  font: inherit;
-  line-height: normal;
-  overflow: visible;
-  padding: 0;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-div.code-toolbar > .toolbar a,
-div.code-toolbar > .toolbar button.copy-to-clipboard-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  color: var(--text-normal);
-  font-size: 0.75rem;
-  height: 2rem;
-  width: 4rem;
-  background: var(--background-secondary);
-  border-radius: 0.5em;
-  transition: 0.2s transform linear;
-}
-div.code-toolbar > .toolbar a:focus,
-div.code-toolbar > .toolbar a:hover,
-div.code-toolbar > .toolbar button:focus,
-div.code-toolbar > .toolbar button:hover,
-div.code-toolbar > .toolbar span:focus,
-div.code-toolbar > .toolbar span:hover {
-  text-decoration: none;
-  color: var(--text-bright);
-  transform: scale(1.1);
-}
-@media print {
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: none;
-  }
-}
-code[class*='language-'],
-pre[class*='language-'] {
-  color: var(--foreground) !important;
-  background: var(--background);
-  text-shadow: none;
-  font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
-    monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-pre[class*='language-'] {
-  background: var(--background);
-  border-radius: 0.5em;
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-  height: auto;
-}
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: var(--background);
-}
-:not(pre) > code[class*='language-'] {
-  padding: 4px 7px;
-  border-radius: 0.3em;
-  white-space: normal;
-}
-.limit-300 {
-  height: 300px !important;
-}
-.limit-300 {
-  height: 400px !important;
-}
-.limit-500 {
-  height: 500px !important;
-}
-.limit-600 {
-  height: 600px !important;
-}
-.limit-700 {
-  height: 700px !important;
-}
-.limit-800 {
-  height: 800px !important;
-}
-.language-css {
-  color: var(--purple);
-}
-.token {
-  color: var(--pink);
-}
-.language-css .token {
-  color: var(--pink);
-}
-.token.script {
-  color: var(--foreground);
-}
-.token.bold {
-  font-weight: 700;
-}
-.token.italic {
-  font-style: italic;
-}
-.token.atrule,
-.token.attr-name,
-.token.attr-value {
-  color: var(--cyan);
-}
-.token.attr-value .token.punctuation.attr-equals,
-.token.attr-value .token.punctuation {
-  color: var(--subs) !important;
-}
-.language-css .token.atrule {
-  color: var(--cyan);
-}
-.language-html .token.attr-value,
-.language-markup .token.attr-value {
-  color: var(--foreground);
-}
-.token.boolean {
-  color: var(--purple);
-}
-.token.builtin,
-.token.class-name {
-  color: var(--cyan);
-}
-.token.comment {
-  color: var(--comment);
-}
-.token.constant {
-  color: var(--purple);
-}
-.language-javascript .token.constant {
-  color: var(--foreground);
-  font-style: italic;
-}
-.token.entity {
-  color: var(--pink);
-}
-.language-css .token.entity {
-  color: var(--pink);
-}
-.language-html .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-html .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.language-markup .token.entity.named-entity {
-  color: var(--purple);
-}
-.language-markup .token.entity:not(.named-entity) {
-  color: var(--pink);
-}
-.token.function {
-  color: var(--purple);
-}
-.language-css .token.function {
-  color: var(--pink);
-}
-.token.important,
-.token.keyword {
-  color: var(--pink);
-}
-.token.prolog {
-  color: var(--foreground);
-}
-.token.property {
-  color: var(--cyan);
-}
-.language-css .token.property {
-  color: var(--cyan);
-}
-.token.punctuation {
-  color: var(--subs);
-}
-.language-css .token.punctuation {
-  color: var(--subs);
-}
-.language-html .token.punctuation,
-.language-markup .token.punctuation {
-  color: var(--subs);
-}
-.token.selector {
-  color: var(--pink);
-}
-.language-css .token.selector {
-  color: var(--purple);
-}
-.token.regex {
-  color: var(--pink);
-}
-.language-css .token.rule:not(.atrule) {
-  color: var(--foreground);
-}
-.token.string {
-  color: var(--foreground) !important;
-  background: none !important;
-}
-.token.tag {
-  color: var(--purple);
-}
-.token.tag .token.punctuation {
-  color: var(--pink);
-}
-.token.url {
-  color: var(--cyan);
-}
-.language-css .token.url {
-  color: var(--foreground);
-  background: none !important;
-}
-.token.variable {
-  color: var(--comment);
-}
-.token.number {
-  color: var(--cyan);
-}
-.token.operator {
-  color: var(--pink);
-  background: transparent;
-}
-.token.char {
-  color: var(--foreground);
-}
-.token.symbol {
-  color: var(--pink);
-}
-.token.deleted {
-  color: var(--red);
-}
-.token.namespace {
-  color: var(--cyan);
-}
-.token.parameter {
-  color: var(--cyan);
-}
-.highlight-line {
-  color: inherit;
-  display: inline-block;
-  text-decoration: none;
-  border-radius: 4px;
-  padding: 2px 10px;
-}
-.highlight-line:empty:before {
-  content: ' ';
-}
-.highlight-line:not(:last-child) {
-  min-width: 100%;
-}
-.highlight-line .highlight-line:not(:last-child) {
-  min-width: 0;
-}
-.highlight-line-isdir {
-  color: var(--foreground);
-  background-color: var(--selection-30);
-}
-.highlight-line-active {
-  background-color: var(--comment-30);
-}
-.highlight-line-add {
-  background-color: var(--green-30);
-}
-.highlight-line-remove {
-  background-color: var(--red-30);
-}
diff --git a/templates/index.html b/templates/index.html
index b3a0d6c4..79e7f482 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,28 +6,6 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="/favicon.ico" />
-    <script
-      rel="prefetch"
-      async
-      src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"
-    ></script>
-    <script
-      rel="preload"
-      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.js"
-      data-manual
-    ></script>
-    <script
-      rel="preload"
-      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.js"
-    ></script>
-    <script
-      rel="preload"
-      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"
-    ></script>
-    <script
-      rel="preload"
-      src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"
-    ></script>
     <script
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.19.0/js/md5.min.js"
@@ -36,15 +14,6 @@
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
     ></script>
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css"
-    />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.css"
-    />
-    <link rel="stylesheet" href="https://fonts.loli.net/css?family=Rubik" />
     <script
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/gitalk@1.8.0/dist/gitalk.min.js"
@@ -65,6 +34,7 @@
       rel="preload"
       src="https://cdn.jsdelivr.net/npm/twikoo@1.6.17/dist/twikoo.all.min.js"
     ></script>
+    <link rel="stylesheet" href="https://fonts.loli.net/css?family=Rubik" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@waline/client@2.15.5/dist/waline.min.css"
diff --git a/vite.config.js b/vite.config.js
index 3b94f4b3..33637fcb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -28,10 +28,10 @@ export default ({ mode }) => {
             if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
               extType = 'img'
             }
-            return `static/${extType}/[hash][extname]`
+            return `static/${extType}/[name]-[hash][extname]`
           },
-          chunkFileNames: 'static/js/[hash].js',
-          entryFileNames: 'static/js/[hash].js'
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js'
         },
         plugins: []
       }