diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 6f25bf9e..af15eeba 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -48,5 +48,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: ESLint check
+        run: pnpm lint
+
       - name: Build
         run: pnpm build
+
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 6f158090..37d59e00 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -50,16 +50,20 @@ jobs:
       - name: Build
         run: pnpm build
 
-      # - name: Obtain a GitHub App Installation Access Token
-      #   id: githubAppAuth
-      #   run: |
-      #     echo "GITHUB_APP_TOKEN=$(npx obtain-github-app-installation-access-token ci ${{ secrets.GH_APP_CREDENTIALS_TOKEN }})" >> $GITHUB_OUTPUT
+      - name: Generate a token
+        id: generate_token
+        uses: tibdex/github-app-token@b62528385c34dbc9f38e5f4225ac829252d1ea92
+        with:
+          app_id: ${{ secrets.APP_ID }}
+          private_key: ${{ secrets.APP_PRIVATE_KEY }}
 
       - name: Release
         env:
           # GITHUB_TOKEN: ${{ steps.githubAppAuth.outputs.GITHUB_APP_TOKEN }}
-          GH_TOKEN: ${{ secrets.CI_GITHUB_TOKEN }}
-          GITHUB_TOKEN: ${{ secrets.NPM_TOKEN }}
+#          GH_TOKEN: ${{ secrets.CI_GITHUB_TOKEN }}
+#          GITHUB_TOKEN: ${{ secrets.NPM_TOKEN }}
+          GH_TOKEN: ${{ steps.generate_token.outputs.token }}
+          GITHUB_TOKEN: ${{ steps.generate_token.outputs.token }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GIT_CREDENTIALS: ${{ secrets.GIT_CREDENTIALS }}
           GIT_AUTHOR_NAME: ${{ secrets. GIT_AUTHOR_NAME }}
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/pnpm-lock.yaml b/pnpm-lock.yaml
index fe2222f0..1031fe7e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -116,7 +116,7 @@ devDependencies:
     specifier: 3.3.3
     version: 3.3.3(ts-node@10.9.1)
   typescript:
-    specifier: ~5.2.2
+    specifier: ^5.1.0
     version: 5.2.2
   vite:
     specifier: ^4.4.9
diff --git a/src/App.vue b/src/App.vue
index e588fc4e..29243f81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -182,7 +182,7 @@ export default defineComponent({
     onMounted(() => {
       let wrapperHeight = screen.height
       const footerEl = document.getElementById('footer')
-      const footerHeight = footerEl?.getBoundingClientRect().height
+      const footerHeight = footerEl?.getBoundingClientRect().height ?? 0
       wrapperHeight = wrapperHeight - footerHeight * 2
       wrapperStyle.value = {
         'min-height': wrapperHeight + 'px'
diff --git a/src/components/ArticleCard/index.ts b/src/components/ArticleCard/index.ts
index bee8510f..57040f23 100644
--- a/src/components/ArticleCard/index.ts
+++ b/src/components/ArticleCard/index.ts
@@ -1,2 +1,2 @@
 export { default as HorizontalArticle } from './src/HorizontalArticle.vue'
-export { default as Article } from './src/Article.vue'
+export { default as ArticleCard } from './src/ArticleCard.vue'
diff --git a/src/components/ArticleCard/src/Article.vue b/src/components/ArticleCard/src/ArticleCard.vue
similarity index 99%
rename from src/components/ArticleCard/src/Article.vue
rename to src/components/ArticleCard/src/ArticleCard.vue
index 8f5a2476..9423cb81 100644
--- a/src/components/ArticleCard/src/Article.vue
+++ b/src/components/ArticleCard/src/ArticleCard.vue
@@ -128,7 +128,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import { useRouter } from 'vue-router'
 
 export default defineComponent({
-  name: 'ObFeatureList',
+  name: 'ARArticleCard',
   components: { SvgIcon },
   props: {
     data: {
diff --git a/src/components/ArticleCard/src/HorizontalArticle.vue b/src/components/ArticleCard/src/HorizontalArticle.vue
index 7da39e91..c690ee0f 100644
--- a/src/components/ArticleCard/src/HorizontalArticle.vue
+++ b/src/components/ArticleCard/src/HorizontalArticle.vue
@@ -141,7 +141,7 @@ export default defineComponent({
   props: {
     data: {
       type: Object,
-      default: {}
+      default: () => ({})
     }
   },
   setup(props) {
diff --git a/src/components/Breadcrumbs.vue b/src/components/Breadcrumbs.vue
index 8905052b..cb5726a8 100644
--- a/src/components/Breadcrumbs.vue
+++ b/src/components/Breadcrumbs.vue
@@ -12,7 +12,7 @@ import { defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
-  name: 'Breadcrumb',
+  name: 'ArBreadcrumbBar',
   props: {
     current: String
   },
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 75406a47..8749422f 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapperClasses">
-    <Title
+    <MainTitle
       :title="'titles.comment'"
       icon="quote"
       paddings="pb-2 pt-0"
@@ -16,7 +16,7 @@
 <script lang="ts">
 import { useAppStore } from '@/stores/app'
 import { computed, defineComponent, onMounted, toRefs, watch } from 'vue'
-import { Title } from '@/components/Title'
+import { MainTitle } from '@/components/Title'
 import { usePostStore } from '@/stores/post'
 import { twikooInit } from '@/utils/comments/twikoo-api'
 import { githubInit } from '@/utils/comments/github-api'
@@ -42,7 +42,7 @@ export default defineComponent({
       default: ''
     }
   },
-  components: { Title },
+  components: { MainTitle },
   setup(props) {
     const postTitle = toRefs(props).title
     const postBody = toRefs(props).body
diff --git a/src/components/Dia.vue b/src/components/Dia.vue
index 09d05bd6..b11edc32 100644
--- a/src/components/Dia.vue
+++ b/src/components/Dia.vue
@@ -88,23 +88,21 @@ export default defineComponent({
   flex-direction: column;
   width: 100%;
   height: 100%;
-  --auora-dia--width: 65px; /* 110px */
-  --auora-dia--height: 50px; /* 95px */
-  --auora-dia--hover-height: 60px; /* 105px */
-  --auora-dia--jump-1: 55px; /* 95px */
-  --auora-dia--jump-2: 60px; /* 100px */
-  --auora-dia--jump-3: 45px; /* 85px */
-  --auora-dia--eye-top: 10px; /* 25px */
-  --auora-dia--eye-height: 15px; /* 25px */
-  --auora-dia--eye-width: 8px; /* 15px */
-  --auora-dia--eye-top: 10px; /* 20px */
-  --auora-dia--platform-size: var(--auora-dia--jump-2); /* 100px */
-  --auora-dia--platform-size-shake-1: 75px; /* 115px */
-  --auora-dia--platform-size-shake-2: 45px; /* 115px */
-  --auora-dia--platform-top: -15px; /* 0 */
-  --aurora-dia--linear-gradient: var(
-    --main-gradient
-  ); /* linear-gradient(to bottom, #5fc, #1a8) */
+  --auora-dia--width: 65px;
+  --auora-dia--height: 50px;
+  --auora-dia--hover-height: 60px;
+  --auora-dia--jump-1: 55px;
+  --auora-dia--jump-2: 60px;
+  --auora-dia--jump-3: 45px;
+  --auora-dia--eye-top: 10px;
+  --auora-dia--eye-height: 15px;
+  --auora-dia--eye-width: 8px;
+  --auora-dia--eye-top: 10px;
+  --auora-dia--platform-size: var(--auora-dia--jump-2);
+  --auora-dia--platform-size-shake-1: 75px;
+  --auora-dia--platform-size-shake-2: 45px;
+  --auora-dia--platform-top: -15px;
+  --aurora-dia--linear-gradient: var(--main-gradient);
   --aurora-dia--linear-gradient-hover: linear-gradient(
     to bottom,
     #25b0cc,
@@ -139,7 +137,9 @@ export default defineComponent({
   transition: 0.3s linear all;
 }
 .Aurora-Dia.active {
-  animation: deactivate 0.75s linear, bounce-then-breathe 5s linear infinite;
+  animation:
+    deactivate 0.75s linear,
+    bounce-then-breathe 5s linear infinite;
 }
 
 .Aurora-Dia--eyes > .Aurora-Dia--eye {
@@ -168,8 +168,8 @@ export default defineComponent({
   transform: rotateX(70deg);
   width: var(--auora-dia--platform-size);
   height: var(--auora-dia--platform-size);
-  box-shadow: 0 0 var(--auora-dia--platform-size)
-      var(--aurora-dia--platform-light),
+  box-shadow:
+    0 0 var(--auora-dia--platform-size) var(--aurora-dia--platform-light),
     0 0 15px var(--aurora-dia--platform-light) inset;
   animation: jump-pulse 3s linear infinite;
 }
@@ -193,7 +193,8 @@ export default defineComponent({
   box-shadow: 0 0 5px var(--text-accent);
 }
 .Aurora-Dia:hover + .Aurora-Dia--platform {
-  box-shadow: 0 0 var(--auora-dia--platform-size) var(--text-accent),
+  box-shadow:
+    0 0 var(--auora-dia--platform-size) var(--text-accent),
     0 0 15px var(--text-accent) inset;
   animation: shake-pulse 0.5s linear;
 }
@@ -331,18 +332,21 @@ export default defineComponent({
   40%,
   80%,
   100% {
-    box-shadow: 0 0 30px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 30px var(--aurora-dia--platform-light),
       0 0 45px var(--aurora-dia--platform-light) inset;
   }
   20%,
   60%,
   70%,
   90% {
-    box-shadow: 0 0 70px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 70px var(--aurora-dia--platform-light),
       0 0 25px var(--aurora-dia--platform-light) inset;
   }
   85% {
-    box-shadow: 0 0 100px var(--aurora-dia--platform-light),
+    box-shadow:
+      0 0 100px var(--aurora-dia--platform-light),
       0 0 15px var(--aurora-dia--platform-light) inset;
   }
 }
@@ -379,7 +383,8 @@ export default defineComponent({
   60%,
   80%,
   100% {
-    box-shadow: 0 0 var(--auora-dia--platform-size) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size) #2cdcff,
       0 0 15px #2cdcff inset;
   }
   10%,
@@ -387,7 +392,8 @@ export default defineComponent({
   35%,
   50%,
   65% {
-    box-shadow: 0 0 var(--auora-dia--platform-size-shake-1) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size-shake-1) #2cdcff,
       0 0 15px #2cdcff inset;
   }
   15%,
@@ -395,7 +401,8 @@ export default defineComponent({
   45%,
   55%,
   70% {
-    box-shadow: 0 0 var(--auora-dia--platform-size-shake-2) #2cdcff,
+    box-shadow:
+      0 0 var(--auora-dia--platform-size-shake-2) #2cdcff,
       0 0 15px #2cdcff inset;
   }
 }
diff --git a/src/components/Dropdown/src/Dropdown.vue b/src/components/Dropdown/src/Dropdown.vue
index c5f609e3..ec0dd954 100644
--- a/src/components/Dropdown/src/Dropdown.vue
+++ b/src/components/Dropdown/src/Dropdown.vue
@@ -40,7 +40,7 @@ export default defineComponent({
       }
     )
 
-    let sharedState: { active: boolean } = reactive({
+    const sharedState: { active: boolean } = reactive({
       active: false
     })
 
diff --git a/src/components/Dropdown/src/DropdownItem.vue b/src/components/Dropdown/src/DropdownItem.vue
index d4198c81..a2e92f88 100644
--- a/src/components/Dropdown/src/DropdownItem.vue
+++ b/src/components/Dropdown/src/DropdownItem.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue'
+import { computed, defineComponent } from 'vue'
 import { useDropdownStore } from '@/stores/dropdown'
 
 export default defineComponent({
diff --git a/src/components/Feature/src/Feature.vue b/src/components/Feature/src/Feature.vue
index 76dbbe37..d543545a 100644
--- a/src/components/Feature/src/Feature.vue
+++ b/src/components/Feature/src/Feature.vue
@@ -11,13 +11,13 @@ import { defineComponent, toRefs } from 'vue'
 import HorizontalArticle from '@/components/ArticleCard/src/HorizontalArticle.vue'
 
 export default defineComponent({
-  name: 'Feature',
+  name: 'ArFeature',
   props: {
     data: Object
   },
   components: { HorizontalArticle },
   setup(props) {
-    let featurePost = toRefs(props).data
+    const featurePost = toRefs(props).data
 
     return {
       featurePost
diff --git a/src/components/Feature/src/FeatureList.vue b/src/components/Feature/src/FeatureList.vue
index b0ed7b56..0f0369a9 100644
--- a/src/components/Feature/src/FeatureList.vue
+++ b/src/components/Feature/src/FeatureList.vue
@@ -23,12 +23,12 @@
     <ul class="grid lg:grid-cols-2 gap-7">
       <template v-if="featurePosts.length > 0">
         <li v-for="post in featurePosts" :key="post.slug">
-          <Article :data="post" />
+          <ArticleCard :data="post" />
         </li>
       </template>
       <template v-else>
         <li v-for="n in 2" :key="n">
-          <Article :data="{}" />
+          <ArticleCard :data="{}" />
         </li>
       </template>
     </ul>
@@ -39,14 +39,14 @@
 import { useAppStore } from '@/stores/app'
 import { useI18n } from 'vue-i18n'
 import { PropType, StyleValue, computed, defineComponent, toRefs } from 'vue'
-import { Article } from '@/components/ArticleCard'
+import { ArticleCard } from '@/components/ArticleCard'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { Post } from '@/models/Post.class'
 
 export default defineComponent({
   name: 'ObFeatureList',
   components: {
-    Article,
+    ArticleCard,
     SvgIcon
   },
   props: {
diff --git a/src/components/Footer/FooterLink.vue b/src/components/Footer/FooterLink.vue
index 81d13d18..4b5dcced 100644
--- a/src/components/Footer/FooterLink.vue
+++ b/src/components/Footer/FooterLink.vue
@@ -14,8 +14,9 @@
       class="flex flex-row flex-wrap justify-center bg-ob-deep-900 rounded-lg max-w-10/12 lg:max-w-screen-2xl text-normal text-ob-normal w-full py-6 px-6 items-start gap-8 md:gap-10 xl:gap-16"
     >
       <div
-        v-for="link of links"
+        v-for="[i, link] of links.entries()"
         class="flex flex-col items-center md:items-start"
+        :key="i"
       >
         <div class="flex mb-4 items-center">
           <h3 class="text-ob-dim font-bold mr-2">{{ link.title }}</h3>
@@ -30,12 +31,20 @@
           v-if="!link.mode"
           class="flex flex-col gap-1 items-center md:items-start"
         >
-          <li v-for="sub of link.links" class="cursor-pointer">
+          <li
+            v-for="[i, sub] of link.links.entries()"
+            class="cursor-pointer"
+            :key="i"
+          >
             <a :href="sub.url" target="_blank">{{ sub.title }}</a>
           </li>
         </ul>
         <ul v-if="link.mode === 'links' && linksData" class="flex flex-col">
-          <li v-for="avatar of linksData" class="cursor-pointer">
+          <li
+            v-for="[i, avatar] of linksData.entries()"
+            class="cursor-pointer"
+            :key="i"
+          >
             <a :href="avatar.link" target="_blank">{{ avatar.nick }}</a>
           </li>
         </ul>
@@ -43,7 +52,7 @@
           v-if="link.mode === 'links' && loadingLinks"
           class="flex flex-col items-center md:items-start"
         >
-          <li v-for="i in 5" class="cursor-pointer">
+          <li v-for="i in 5" class="cursor-pointer" :key="i">
             <ob-skeleton :count="1" height="22px" width="7.5rem" />
           </li>
         </ul>
diff --git a/src/components/Header/src/Controls.vue b/src/components/Header/src/Controls.vue
index 74dd6f0d..a62af0df 100644
--- a/src/components/Header/src/Controls.vue
+++ b/src/components/Header/src/Controls.vue
@@ -105,7 +105,7 @@ import { useNavigatorStore } from '@/stores/navigator'
 import { Locales } from '@/models/ThemeConfig.class'
 
 export default defineComponent({
-  name: 'Controls',
+  name: 'ArControls',
   components: {
     Dropdown,
     DropdownMenu,
diff --git a/src/components/Header/src/Header.vue b/src/components/Header/src/Header.vue
index c574afb5..33c8a514 100644
--- a/src/components/Header/src/Header.vue
+++ b/src/components/Header/src/Header.vue
@@ -17,20 +17,13 @@
 </template>
 
 <script lang="ts">
-/**
- * Lodash package is imported through CDN.
- *
- * For version 4.17.21
- */
-declare const _: any
-
 import { computed, defineComponent, ref } from 'vue'
 import { Logo, Navigation, Controls, Notification } from '../index'
 import Sticky from '@/components/Sticky.vue'
 import { useNavigatorStore } from '@/stores/navigator'
 
 export default defineComponent({
-  name: 'Header',
+  name: 'ArHeader',
   components: {
     Logo,
     Navigation,
diff --git a/src/components/Header/src/Logo.vue b/src/components/Header/src/Logo.vue
index 9f55210c..944cfe64 100644
--- a/src/components/Header/src/Logo.vue
+++ b/src/components/Header/src/Logo.vue
@@ -41,7 +41,7 @@ import { computed, defineComponent } from 'vue'
 import { useRouter } from 'vue-router'
 
 export default defineComponent({
-  name: 'Logo',
+  name: 'ArLogo',
   setup() {
     const appStore = useAppStore()
     const router = useRouter()
diff --git a/src/components/Header/src/Navigation.vue b/src/components/Header/src/Navigation.vue
index 6c0f7e4c..408cc98b 100644
--- a/src/components/Header/src/Navigation.vue
+++ b/src/components/Header/src/Navigation.vue
@@ -54,7 +54,7 @@ import { Dropdown, DropdownMenu, DropdownItem } from '@/components/Dropdown'
 import { isExternal } from '@/utils/validate'
 
 export default defineComponent({
-  name: 'Navigation',
+  name: 'ArNavigation',
   components: { Dropdown, DropdownMenu, DropdownItem },
   setup() {
     const { t, te } = useI18n()
diff --git a/src/components/Link/LinkBox.vue b/src/components/Link/LinkBox.vue
index dc2a804c..760707d2 100644
--- a/src/components/Link/LinkBox.vue
+++ b/src/components/Link/LinkBox.vue
@@ -11,7 +11,7 @@
           <div class="hidden md:flex text-ob-dim text-sm">
             {{ t('settings.links') }}
           </div>
-          <Title
+          <MainTitle
             title="settings.links-slogan"
             icon="friends"
             text-size="text-3xl"
@@ -35,6 +35,7 @@
             <div
               v-for="index of 48"
               class="links-group-avatar-pair ml-4 pb-7 pt-4 select-none"
+              :key="index"
             >
               <LinkAvatar />
               <LinkAvatar />
@@ -43,8 +44,9 @@
 
           <template v-else>
             <div
-              v-for="links of data"
+              v-for="[i, links] of data.entries()"
               class="links-group-avatar-pair ml-4 pb-7 pt-4 select-none"
+              :key="i"
             >
               <LinkAvatar
                 :title="links[0].nick"
@@ -67,7 +69,7 @@
 <script lang="ts">
 import { PropType, defineComponent } from 'vue'
 import LinkAvatar from '@/components/Link/LinkAvatar.vue'
-import { Title } from '@/components/Title'
+import { MainTitle } from '@/components/Title'
 import { useI18n } from 'vue-i18n'
 import PrimaryButton from '@/components/Button/PrimaryButton.vue'
 import SecondaryButton from '@/components/Button/SecondaryButton.vue'
@@ -76,17 +78,17 @@ import { useCommonStore } from '@/stores/common'
 
 export default defineComponent({
   name: 'ARLinkBox',
-  components: { LinkAvatar, Title, PrimaryButton, SecondaryButton },
+  components: { LinkAvatar, MainTitle, PrimaryButton, SecondaryButton },
   emits: ['onApplyClicked'],
   props: {
     gradientBackground: {
       type: Object,
-      default: '',
+      default: () => ({}),
       required: true
     },
     data: {
-      type: Object as PropType<Array<Link[]>>,
-      default: [],
+      type: Array as PropType<Array<Link[]>>,
+      default: () => [],
       required: true
     }
   },
diff --git a/src/components/Link/LinkCategoryList.vue b/src/components/Link/LinkCategoryList.vue
index b805d00c..ea419766 100644
--- a/src/components/Link/LinkCategoryList.vue
+++ b/src/components/Link/LinkCategoryList.vue
@@ -1,7 +1,7 @@
 <template>
   <template v-if="links">
-    <template v-for="category in Object.keys(links)">
-      <Title
+    <template v-for="category in Object.keys(links)" :key="category">
+      <MainTitle
         :title="convertToLocale(category)"
         :count="links[category].length"
         margins="mb-2"
@@ -13,7 +13,7 @@
       <ul
         class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-8"
       >
-        <template v-for="link of links[category]">
+        <template v-for="[i, link] of links[category].entries()" :key="i">
           <LinkCard
             :nick="link.nick"
             :link="link.link"
@@ -33,17 +33,17 @@
 import { Link } from '@/models/Article.class'
 import { PropType, defineComponent } from 'vue'
 import LinkCard from './LinkCard.vue'
-import { Title } from '../Title'
+import { MainTitle } from '../Title'
 import { convertToLocale } from '@/utils'
 import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   name: 'ARLinkCategory',
-  components: { LinkCard, Title },
+  components: { LinkCard, MainTitle },
   props: {
     links: {
       type: Object as PropType<Record<string, Link[]>>,
-      default: {}
+      default: () => ({})
     }
   },
   setup() {
diff --git a/src/components/Link/LinkList.vue b/src/components/Link/LinkList.vue
index d1cd703d..8ee0842c 100644
--- a/src/components/Link/LinkList.vue
+++ b/src/components/Link/LinkList.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <Title
+    <SubTitle
       title="settings.links"
       icon="friends"
       :count="links.length"
       :uppercase="false"
     />
     <ul class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-6 gap-8">
-      <template v-for="link of links">
+      <template v-for="[i, link] of links.entries()" :key="i">
         <LinkCard
           :nick="link.nick"
           :link="link.link"
@@ -25,7 +25,7 @@
 import { Link } from '@/models/Article.class'
 import { PropType, defineComponent } from 'vue'
 import { convertToLocale } from '@/utils'
-import SubTitle from '../Title/src/SubTitle.vue'
+import { SubTitle } from '../Title'
 
 export default defineComponent({
   name: 'ARLinkList',
@@ -33,7 +33,7 @@ export default defineComponent({
   props: {
     links: {
       type: Array as PropType<Link[]>,
-      default: [],
+      default: () => [],
       required: true
     }
   },
diff --git a/src/components/LoadingSkeleton/Skeleton.vue b/src/components/LoadingSkeleton/Skeleton.vue
index 629f19df..a2e92036 100644
--- a/src/components/LoadingSkeleton/Skeleton.vue
+++ b/src/components/LoadingSkeleton/Skeleton.vue
@@ -41,7 +41,7 @@ export default defineComponent({
   setup(props, { slots }) {
     const themeStyle = inject('_themeStyle', SkeletonStyle)
     const theme = inject('_skeletonTheme', { loading: false })
-    let isLoading = toRefs(props).loading
+    const isLoading = toRefs(props).loading
 
     return {
       themeStyle,
diff --git a/src/components/Navigator.vue b/src/components/Navigator.vue
index 874aefeb..defde0f6 100644
--- a/src/components/Navigator.vue
+++ b/src/components/Navigator.vue
@@ -124,10 +124,10 @@ export default defineComponent({
     const progress = ref(0)
     const scrolling = ref(false)
 
-    let time = ref(0)
+    const time = ref(0)
     let scrollingHandler = 0
     let menuReopenHandler = 0
-    let needReopen = ref(false)
+    const needReopen = ref(false)
 
     const scrollHandler = _.throttle(
       () => {
@@ -289,7 +289,9 @@ export default defineComponent({
   }
   .Ob-Navigator-ball {
     @apply relative flex justify-center items-center bg-ob-deep-800 w-full h-full p-0.5 rounded-full;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.2);
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.1),
+      0 12px 28px rgba(0, 0, 0, 0.2);
     z-index: 200;
     div {
       @apply flex justify-center items-center w-full h-full rounded-full;
@@ -297,7 +299,9 @@ export default defineComponent({
   }
   .Ob-Navigator-btt {
     @apply absolute flex justify-center items-center bg-ob-deep-800 w-full h-full p-0.5 rounded-full;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.2);
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.1),
+      0 12px 28px rgba(0, 0, 0, 0.2);
     top: calc(3rem * -1.1);
     left: 0;
     div {
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/Sidebar/src/Navigator.vue b/src/components/Sidebar/src/Navigator.vue
index 361bf1c7..8cd0fb34 100644
--- a/src/components/Sidebar/src/Navigator.vue
+++ b/src/components/Sidebar/src/Navigator.vue
@@ -48,7 +48,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import useJumpToEle from '@/hooks/useJumpToEle'
 
 export default defineComponent({
-  name: 'Navigator',
+  name: 'ArNavigator',
   components: { SvgIcon },
   props: {
     comments: Boolean
diff --git a/src/components/Sidebar/src/RecentComment.vue b/src/components/Sidebar/src/RecentComment.vue
index b3039db6..a90bf2c8 100644
--- a/src/components/Sidebar/src/RecentComment.vue
+++ b/src/components/Sidebar/src/RecentComment.vue
@@ -3,46 +3,47 @@
     <SubTitle :title="'titles.recent_comment'" icon="quote" />
     <ul>
       <template v-if="isLoading === false">
-        <li
-          class="bg-ob-deep-900 px-2 py-2 mb-1.5 rounded-lg shadow-sm transition-all duration-300 ease-in-out hover:scale-105"
-          v-if="comments.length > 0"
-          v-for="comment in comments"
-          :key="comment.id"
-        >
-          <a
-            :href="`${comment.html_url}#${comment.id}`"
-            class="flex flex-row justify-items-center items-stretch cursor-pointer hover:opacity-100"
+        <template v-if="comments.length > 0">
+          <li
+            class="bg-ob-deep-900 px-2 py-2 mb-1.5 rounded-lg shadow-sm transition-all duration-300 ease-in-out hover:scale-105"
+            v-for="comment in comments"
+            :key="comment.id"
           >
-            <div class="flex justify-start items-start">
-              <img
-                :class="avatarClass"
-                :src="comment.user.avatar_url"
-                alt="comment-avatar"
-              />
-            </div>
-            <div class="flex-1 text-xs">
-              <div class="text-xs mb-2 pt-1">
-                <span class="text-ob-secondary pr-2">
-                  <a class="font-bold" :href="comment.user.html_url">{{
-                    comment.user.login
-                  }}</a>
-                  <b
-                    class="ml-2 text-ob bg-ob-deep-800 py-0.5 px-1.5 rounded-md"
-                    v-if="comment.is_admin"
-                  >
-                    {{ t('settings.admin-user') }}
-                  </b>
-                </span>
-                <span class="text-ob-dim text-[0.65rem]">{{
-                  comment.created_at
-                }}</span>
+            <a
+              :href="`${comment.html_url}#${comment.id}`"
+              class="flex flex-row justify-items-center items-stretch cursor-pointer hover:opacity-100"
+            >
+              <div class="flex justify-start items-start">
+                <img
+                  :class="avatarClass"
+                  :src="comment.user.avatar_url"
+                  alt="comment-avatar"
+                />
               </div>
-              <div class="text-xs pb-1">
-                {{ comment.body }}
+              <div class="flex-1 text-xs">
+                <div class="text-xs mb-2 pt-1">
+                  <span class="text-ob-secondary pr-2">
+                    <a class="font-bold" :href="comment.user.html_url">{{
+                      comment.user.login
+                    }}</a>
+                    <b
+                      class="ml-2 text-ob bg-ob-deep-800 py-0.5 px-1.5 rounded-md"
+                      v-if="comment.is_admin"
+                    >
+                      {{ t('settings.admin-user') }}
+                    </b>
+                  </span>
+                  <span class="text-ob-dim text-[0.65rem]">{{
+                    comment.created_at
+                  }}</span>
+                </div>
+                <div class="text-xs pb-1">
+                  {{ comment.body }}
+                </div>
               </div>
-            </div>
-          </a>
-        </li>
+            </a>
+          </li>
+        </template>
 
         <div
           v-else
@@ -110,7 +111,7 @@ import { SvgTypes } from '@/components/SvgIcon/index.vue'
 import useCommentPlugin from '@/hooks/useCommentPlugin'
 
 export default defineComponent({
-  name: 'ObRecentComment',
+  name: 'ArRecentComment',
   components: { SubTitle, SvgIcon },
   setup() {
     const appStore = useAppStore()
diff --git a/src/components/Sidebar/src/Toc.vue b/src/components/Sidebar/src/Toc.vue
index 88c79a49..a813b846 100644
--- a/src/components/Sidebar/src/Toc.vue
+++ b/src/components/Sidebar/src/Toc.vue
@@ -12,7 +12,7 @@
             v-html="tocData"
             v-scroll-spy-active="{ selector: '.toc-item' }"
             v-scroll-spy-link
-            :style="(sideBoxStyle as StyleValue | undefined)"
+            :style="sideBoxStyle"
           />
         </div>
       </transition>
@@ -47,7 +47,7 @@ export default defineComponent({
           maxHeight: `${window.innerHeight - 64 - 64 - 52 - 74}px`,
           overflowY: 'scroll',
           overflowX: 'hidden'
-        }
+        } as StyleValue | undefined
       })
     }
   }
diff --git a/src/components/Social.vue b/src/components/Social.vue
index 1f59f418..e1f6e163 100644
--- a/src/components/Social.vue
+++ b/src/components/Social.vue
@@ -1,15 +1,6 @@
 <template>
   <ul
-    class="
-      flex flex-row
-      justify-evenly
-      flex-wrap
-      w-full
-      py-4
-      px-2
-      text-center
-      items-center
-    "
+    class="flex flex-row justify-evenly flex-wrap w-full py-4 px-2 text-center items-center"
   >
     <a
       :href="socials.github"
diff --git a/src/components/Sticky.vue b/src/components/Sticky.vue
index 08c5e8c3..36622f34 100644
--- a/src/components/Sticky.vue
+++ b/src/components/Sticky.vue
@@ -17,7 +17,7 @@
 declare const _: any
 
 import { useNavigatorStore } from '@/stores/navigator'
-import { StyleValue, computed, defineComponent, ref, watch } from 'vue'
+import { StyleValue, computed, defineComponent, ref } from 'vue'
 
 export default defineComponent({
   name: 'ObSticky',
@@ -52,8 +52,8 @@ export default defineComponent({
       default: 0
     }
   },
-  setup(props, { emit }) {
-    let active = ref(false),
+  setup(props) {
+    const active = ref(false),
       position = ref(''),
       width = ref(),
       height = ref(),
@@ -76,7 +76,7 @@ export default defineComponent({
           position: position.value,
           width: width.value,
           height: height.value + 'px'
-        } as StyleValue)
+        }) as StyleValue
     )
 
     return {
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 360791fd..769ccf4c 100644
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed, PropType, h, ref, onMounted } from 'vue'
+import { defineComponent, computed, PropType, ref, onMounted } from 'vue'
 import { isExternalIcon } from '@/utils/validate'
 import { useAppStore } from '@/stores/app'
 
diff --git a/src/components/Title/index.ts b/src/components/Title/index.ts
index fa8c341f..815e99a4 100644
--- a/src/components/Title/index.ts
+++ b/src/components/Title/index.ts
@@ -1,2 +1,2 @@
-export { default as Title } from './src/Title.vue'
+export { default as MainTitle } from './src/MainTitle.vue'
 export { default as SubTitle } from './src/SubTitle.vue'
diff --git a/src/components/Title/src/Title.vue b/src/components/Title/src/MainTitle.vue
similarity index 98%
rename from src/components/Title/src/Title.vue
rename to src/components/Title/src/MainTitle.vue
index 329263d7..7704a4dd 100644
--- a/src/components/Title/src/Title.vue
+++ b/src/components/Title/src/MainTitle.vue
@@ -22,7 +22,7 @@ import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 
 export default defineComponent({
-  name: 'ObTitle',
+  name: 'ARTitle',
   components: { SvgIcon },
   props: {
     title: {
diff --git a/src/components/ToggleSwitch/ThemeToggle.vue b/src/components/ToggleSwitch/ThemeToggle.vue
index 404e1eb0..5d5b7ed8 100644
--- a/src/components/ToggleSwitch/ThemeToggle.vue
+++ b/src/components/ToggleSwitch/ThemeToggle.vue
@@ -29,7 +29,7 @@ export default defineComponent({
   },
   setup() {
     const appStore = useAppStore()
-    let defaultStatus = appStore.theme === 'theme-dark' ? true : false
+    const defaultStatus = appStore.theme === 'theme-dark' ? true : false
 
     const svgStyle = reactive({
       fill: 'yellow',
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/[...all].vue b/src/pages/[...all].vue
index 67b90f4c..823aca6f 100644
--- a/src/pages/[...all].vue
+++ b/src/pages/[...all].vue
@@ -101,6 +101,14 @@
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'App'
+})
+</script>
+
 <style lang="css" scoped>
 @import url('https://fonts.googleapis.com/css?family=Fira+Sans');
 /*Variables*/
@@ -113,7 +121,7 @@
 #not-found-page {
   margin: 0;
   padding: 0;
-  color: var(--text-noraml);
+  color: var(--text-normal);
 }
 
 .background {
diff --git a/src/pages/about.vue b/src/pages/about.vue
index e76bf1b3..a5cedfcf 100644
--- a/src/pages/about.vue
+++ b/src/pages/about.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick, onMounted, ref } from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import { useArticleStore } from '@/stores/article'
 import { Page } from '@/models/Article.class'
 import PageContent from '@/components/PageContent.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/archives.vue b/src/pages/archives.vue
index 74b7ddb1..8626c172 100644
--- a/src/pages/archives.vue
+++ b/src/pages/archives.vue
@@ -68,7 +68,7 @@ import defaultCover from '@/assets/default-cover.jpg'
 import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
-  name: 'Archives',
+  name: 'ArArchives',
   components: { Breadcrumbs, Paginator },
   setup() {
     const commonStore = useCommonStore()
@@ -175,7 +175,9 @@ export default defineComponent({
     top: 4px;
     left: 0;
     width: 15px;
-    transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
+    transition:
+      background 0.3s ease-in-out,
+      border 0.3s ease-in-out;
   }
   &:after {
     content: '';
diff --git a/src/pages/category.vue b/src/pages/category.vue
index a6c013a2..0bcdf454 100644
--- a/src/pages/category.vue
+++ b/src/pages/category.vue
@@ -26,10 +26,10 @@ import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
-  name: 'Category',
+  name: 'ArCategory',
   components: { Sidebar, Breadcrumbs },
   setup() {
-    const { pageTitle, updateTitle } = usePageTitle()
+    const { pageTitle } = usePageTitle()
     return { pageTitle }
   }
 })
diff --git a/src/pages/index.vue b/src/pages/index.vue
index b06c7c30..0f94c653 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -7,7 +7,7 @@
       <horizontal-article class="mb-8" :data="posts.data[0] || {}" />
     </template>
     <span v-if="themeConfig.theme.feature">
-      <Title id="article-list" :title="'titles.articles'" icon="article" />
+      <MainTitle id="article-list" :title="'titles.articles'" icon="article" />
     </span>
     <div class="main-grid">
       <div class="flex flex-col relative">
@@ -55,21 +55,21 @@
         <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
           <template v-if="posts.data.length === 0">
             <li v-for="n in 6" :key="n">
-              <Article :data="{}" />
+              <ArticleCard :data="{}" />
             </li>
           </template>
 
           <template v-else-if="!themeConfig.theme.feature">
             <template v-for="(post, key) in posts.data" :key="post.slug">
               <li v-if="key !== 0">
-                <Article :data="post" />
+                <ArticleCard :data="post" />
               </li>
             </template>
           </template>
 
           <template v-else>
             <li v-for="post in posts.data" :key="post.slug">
-              <Article :data="post" />
+              <ArticleCard :data="post" />
             </li>
           </template>
         </ul>
@@ -101,8 +101,8 @@
 <script lang="ts">
 import { computed, defineComponent, onMounted, ref } from 'vue'
 import { Feature, FeatureList } from '@/components/Feature'
-import { Article, HorizontalArticle } from '@/components/ArticleCard'
-import { Title } from '@/components/Title'
+import { ArticleCard, HorizontalArticle } from '@/components/ArticleCard'
+import { MainTitle } from '@/components/Title'
 import { Sidebar, TagBox, RecentComment, Profile } from '@/components/Sidebar'
 import { usePostStore } from '@/stores/post'
 import { FeaturePosts, PostList } from '@/models/Post.class'
@@ -116,13 +116,13 @@ import usePageTitle from '@/hooks/usePageTitle'
 import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
-  name: 'Home',
+  name: 'ARHome',
   components: {
     Feature,
     FeatureList,
-    Article,
+    ArticleCard,
     HorizontalArticle,
-    Title,
+    MainTitle,
     Sidebar,
     TagBox,
     Paginator,
diff --git a/src/pages/links.vue b/src/pages/links.vue
index 4501bce7..00ea288a 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,11 @@
 </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 { Title } from '@/components/Title'
-import { Link } from '@/models/Article.class'
+import { Link, Page } from '@/models/Article.class'
 import { useAppStore } from '@/stores/app'
 import { useArticleStore } from '@/stores/article'
 import { useI18n } from 'vue-i18n'
@@ -121,21 +110,20 @@ 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,
-    Title,
     LinkCategoryList,
     LinkList,
     Comment,
@@ -158,7 +146,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..58ef1734 100644
--- a/src/pages/page/[slug].vue
+++ b/src/pages/page/[slug].vue
@@ -16,14 +16,7 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  nextTick,
-  onBeforeMount,
-  ref,
-  watch
-} from 'vue'
+import { computed, defineComponent, onBeforeMount, ref, watch } from 'vue'
 import { useArticleStore } from '@/stores/article'
 import { Page } from '@/models/Article.class'
 import { useI18n } from 'vue-i18n'
@@ -36,10 +29,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 +50,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..f6d474cd 100644
--- a/src/pages/post/[slug].vue
+++ b/src/pages/post/[slug].vue
@@ -149,7 +149,7 @@
               title="settings.paginator.prev"
               icon="arrow-left-circle"
             />
-            <Article :data="post.prev_post" />
+            <ArticleCard :data="post.prev_post" />
           </div>
           <div class="flex flex-col w-full h-full" v-if="post.next_post.title">
             <SubTitle
@@ -157,7 +157,7 @@
               :side="!isMobile ? 'right' : 'left'"
               icon="arrow-right-circle"
             />
-            <Article :data="post.next_post" />
+            <ArticleCard :data="post.next_post" />
           </div>
         </div>
         <template v-if="enabledComment && post.title && post.text && post.uid">
@@ -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'
@@ -186,7 +185,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Comment from '@/components/Comment.vue'
 import { SubTitle } from '@/components/Title'
-import { Article } from '@/components/ArticleCard'
+import { ArticleCard } from '@/components/ArticleCard'
 import { useMetaStore } from '@/stores/meta'
 import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
@@ -200,16 +199,14 @@ interface PostStatsExpose extends Ref<InstanceType<typeof PostStats>> {
   getPostView(): void
 }
 
-declare const Prism: any
-
 export default defineComponent({
-  name: 'ObPost',
+  name: 'ARPost',
   components: {
     Sidebar,
     Toc,
     Comment,
     SubTitle,
-    Article,
+    ArticleCard,
     Profile,
     SvgIcon,
     PostStats
@@ -243,11 +240,13 @@ export default defineComponent({
         loading.value = false
       })
       if (appStore.hexoConfig.writing.highlight.enable) {
+        // eslint-disable-next-line no-console
         console.error(
           '[Aurora Config Error]: Please turn off [Hightlightjs] and enable [Prismjs] instead. '
         )
       }
       if (appStore.hexoConfig.writing.prismjs.preprocess) {
+        // eslint-disable-next-line no-console
         console.error(
           "[Aurora Config Error]: Please set Hexo config's prismjs' [preprocess] property to false! "
         )
@@ -256,7 +255,6 @@ export default defineComponent({
       initializeLightBox()
       postStatsRef.value?.getCommentCount()
       postStatsRef.value?.getPostView()
-      Prism.highlightAll()
     }
 
     watch(
diff --git a/src/pages/post/search/index.vue b/src/pages/post/search/index.vue
index 977060cb..33bc12c6 100644
--- a/src/pages/post/search/index.vue
+++ b/src/pages/post/search/index.vue
@@ -29,12 +29,12 @@
           <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
             <template v-if="isLoading || posts.data.length === 0">
               <li v-for="n in 12" :key="n">
-                <Article :data="{}" />
+                <ArticleCard :data="{}" />
               </li>
             </template>
             <template v-else>
               <li v-for="post in posts.data" :key="post.slug">
-                <Article :data="post" />
+                <ArticleCard :data="post" />
               </li>
             </template>
           </ul>
@@ -73,9 +73,8 @@ import {
 } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { Sidebar, TagBox, CategoryBox } from '@/components/Sidebar'
-import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Paginator from '@/components/Paginator.vue'
-import { Article } from '@/components/ArticleCard'
+import { ArticleCard } from '@/components/ArticleCard'
 import { SpecificPostsList } from '@/models/Post.class'
 import { useRoute } from 'vue-router'
 import { usePostStore } from '@/stores/post'
@@ -83,13 +82,12 @@ import { useMetaStore } from '@/stores/meta'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 
 export default defineComponent({
-  name: 'Result',
+  name: 'ArResult',
   components: {
-    Breadcrumbs,
     Sidebar,
     TagBox,
     Paginator,
-    Article,
+    ArticleCard,
     CategoryBox,
     SvgIcon
   },
@@ -162,7 +160,7 @@ export default defineComponent({
 
     watch(
       () => route.query,
-      toQuery => {
+      () => {
         pageChangeHandler()
       }
     )
diff --git a/src/pages/tags.vue b/src/pages/tags.vue
index 785bce47..40bfe2db 100644
--- a/src/pages/tags.vue
+++ b/src/pages/tags.vue
@@ -42,7 +42,7 @@ import defaultCover from '@/assets/default-cover.jpg'
 import usePageTitle from '@/hooks/usePageTitle'
 
 export default defineComponent({
-  name: 'Tag',
+  name: 'ArTag',
   components: { Breadcrumbs, TagList, TagItem, SvgIcon },
   setup() {
     const commonStore = useCommonStore()
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..d4fdf433 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,10 +34,12 @@
       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"
     />
+    <title>Development Template</title>
   </head>
   <body id="body-container">
     <noscript>
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: []
       }