From d53ae5d4cd8c5fadec2775e95ec629e1a9045f06 Mon Sep 17 00:00:00 2001
From: zkz098 <zkz20081204@126.com>
Date: Wed, 31 Jan 2024 16:57:55 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E7=AD=89?=
 =?UTF-8?q?=E5=BE=85=E9=87=8D=E6=9E=84=E7=BB=84=E4=BB=B6=20&=20feat:=20?=
 =?UTF-8?q?=E9=9D=A2=E5=8C=85=E5=B1=91=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 theme/components/ShokaxArticleInner.vue   |  33 ---
 theme/components/ShokaxBreadcrumb.vue     |  85 +++++++
 theme/components/ShokaxHead.vue           |  22 --
 theme/components/ShokaxLoading.vue        | 296 ----------------------
 theme/components/ShokaxPostBreadcrumb.vue |  45 ----
 theme/components/ShokaxPostCopyright.vue  |  50 ----
 theme/components/ShokaxPostFooter.vue     |  25 --
 theme/components/ShokaxPostFooterTags.vue |  16 --
 theme/components/ShokaxPostNav.vue        |  17 --
 theme/components/ShokaxPostNavBlock.vue   |  38 ---
 theme/components/ShokaxPostReward.vue     |  44 ----
 theme/components/ValaxyMain.vue           |   2 -
 theme/styles/css-vars.scss                |  54 +++-
 uno.config.ts                             |   7 +
 14 files changed, 143 insertions(+), 591 deletions(-)
 delete mode 100644 theme/components/ShokaxArticleInner.vue
 create mode 100644 theme/components/ShokaxBreadcrumb.vue
 delete mode 100644 theme/components/ShokaxHead.vue
 delete mode 100644 theme/components/ShokaxLoading.vue
 delete mode 100644 theme/components/ShokaxPostBreadcrumb.vue
 delete mode 100644 theme/components/ShokaxPostCopyright.vue
 delete mode 100644 theme/components/ShokaxPostFooter.vue
 delete mode 100644 theme/components/ShokaxPostFooterTags.vue
 delete mode 100644 theme/components/ShokaxPostNav.vue
 delete mode 100644 theme/components/ShokaxPostNavBlock.vue
 delete mode 100644 theme/components/ShokaxPostReward.vue
 create mode 100644 uno.config.ts

diff --git a/theme/components/ShokaxArticleInner.vue b/theme/components/ShokaxArticleInner.vue
deleted file mode 100644
index ed1773c..0000000
--- a/theme/components/ShokaxArticleInner.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { useThemeConfig } from 'composables'
-import { type Post, useSiteConfig } from 'valaxy'
-
-defineProps<{
-  frontmatter: Post
-}>()
-
-const siteConfig = useSiteConfig()
-const themeConfig = useThemeConfig()
-</script>
-
-<template>
-  <article itemscope itemtype="http://schema.org/Article" class="post block" :lang="siteConfig.lang">
-    <link itemprop="mainEntityOfPage" :href="frontmatter.url">
-    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
-      <meta itemprop="image" :content="siteConfig.author.avatar">
-      <meta itemprop="name" :content="siteConfig.author.name">
-      <meta itemprop="description" :content="frontmatter.title">
-    </span>
-    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
-      <meta itemprop="name" :content="frontmatter.title">
-    </span>
-    <RouterView />
-    <slot name="main-footer-before" />
-    <footer>
-      <ShokaxPostFooter :frontmatter="frontmatter" />
-      <ShokaxPostReward v-if="themeConfig.reward" :post="frontmatter" />
-      <ShokaxPostCopyright v-if="siteConfig.license.enabled" :frontmatter="frontmatter" />
-    </footer>
-    <slot name="main-footer-after" />
-  </article>
-</template>
diff --git a/theme/components/ShokaxBreadcrumb.vue b/theme/components/ShokaxBreadcrumb.vue
new file mode 100644
index 0000000..4762b2d
--- /dev/null
+++ b/theme/components/ShokaxBreadcrumb.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { type Post, useSiteConfig } from 'valaxy'
+import { defineBreadcrumb, useSchemaOrg } from '@unhead/schema-org'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  post: Post
+}>()
+
+const breadcrumb = [
+  { name: 'home', url: '/' },
+]
+
+if (typeof props.post.categories === 'undefined') {
+  // 无分类
+}
+else if (typeof props.post.categories === 'string') {
+  breadcrumb.push({
+    name: props.post.categories,
+    url: `/categories/${props.post.categories}`, // 占位符
+  })
+}
+else if (Array.isArray(props.post.categories)) {
+  props.post.categories.forEach((category) => {
+    breadcrumb.push({
+      name: category,
+      url: `/categories/${category}`, // 占位符
+    })
+  })
+}
+
+useSchemaOrg([
+  defineBreadcrumb({
+    itemListElement: breadcrumb,
+  }),
+])
+
+const { t } = useI18n()
+const site = useSiteConfig()
+const brLength = Object.getOwnPropertyNames(breadcrumb).length
+</script>
+
+<template>
+  <div v-for="(item, key) in breadcrumb" :key="key" class="breadcrumb flex-wrap items-center mt-5 mb-5 text-sm inline-flex">
+    <template v-if="item.name === 'home'">
+      <div class="i-ri-home-2-fill ml-0 mr-1.25" />
+      <span class="whitespace-pre">
+        <a :href="site.url">
+          {{ t('menu.home') }}
+        </a>
+      </span>
+    </template>
+    <template v-else>
+      <span :class="{ current: key === brLength - 1 }" class="whitespace-pre">
+        <a :href="item.url">
+          <span>
+            {{ item.name }}
+          </span>
+        </a>
+      </span>
+    </template>
+    <div v-if="key !== brLength - 1" class="i-ri-arrow-right-s-line" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+span .current {
+  background-color: var(--color-red-a1);
+  border-radius: .625rem;
+  padding: 0 .625rem;
+  transition: all .2s ease-in-out;
+
+  span {
+    white-space: normal;
+  }
+
+  a {
+    color: var(--primary-color);
+  }
+
+  &:hover {
+    background-color: var(--color-red-a3);
+  }
+}
+</style>
diff --git a/theme/components/ShokaxHead.vue b/theme/components/ShokaxHead.vue
deleted file mode 100644
index 62d98fd..0000000
--- a/theme/components/ShokaxHead.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { useThemeConfig } from '../composables'
-
-const themeConfig = useThemeConfig()
-</script>
-
-<template>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="theme-color" content="#222">
-
-  <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1">
-  <meta name="renderer" content="webkit">
-
-  <link rel="icon" type="image/ico" sizes="32x32" href="/favicon.ico">
-
-  <meta http-equiv="Cache-Control" content="no-transform">
-  <meta http-equiv="Cache-Control" content="no-siteapp">
-
-  <link v-if="themeConfig.feed.rss" rel="alternate" type="application/rss+xml" :title="themeConfig.title" href="/rss.xml">
-  <link v-if="themeConfig.feed.atom" rel="alternate" type="application/atom+xml" :title="themeConfig.title" href="/atom.xml">
-</template>
diff --git a/theme/components/ShokaxLoading.vue b/theme/components/ShokaxLoading.vue
deleted file mode 100644
index 72d7e74..0000000
--- a/theme/components/ShokaxLoading.vue
+++ /dev/null
@@ -1,296 +0,0 @@
-<template>
-  <div id="loading">
-    <div class="cat">
-      <div class="body" />
-      <div class="head">
-        <div class="face" />
-      </div>
-      <div class="foot">
-        <div class="tummy-end" />
-        <div class="bottom" />
-        <div class="legs left" />
-        <div class="legs right" />
-      </div>
-      <div class="paw">
-        <div class="hands left" />
-        <div class="hands right" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import '../styles/mixins.scss';
-
-@mixin center-center {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  margin: auto;
-}
-
-@mixin tummy-style {
-  width: $tummyWidth;
-  height: $tummyWidth;
-  position: absolute;
-  border-radius: 50%;
-  background-color: $tummyColor;
-}
-
-@mixin body-color {
-  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 46%, $tummyColor 46%, $tummyColor 60%, $bodyColor 60%, $bodyColor 67%, $borderColor 67%, $borderColor 100%);
-}
-
-@mixin head-foot-color {
-  background-image: radial-gradient(transparent 0%, transparent 35%, $borderColor 35%, $borderColor 39%, $bodyColor 39%, $bodyColor 67%, $borderColor 67%, $borderColor 100%);
-}
-
-#loading {
-  @include fix-fullscreen;
-  background-color: #fdfdfd; // var(--grey-1);
-}
-
-$bgColor: #fdfdfd; // var(--grey-1);
-$bodyColor: rgb(237, 166, 93);
-$tailColor: rgb(198, 130, 59);
-$tummyColor: rgb(242, 192, 137);
-$borderColor: rgb(56, 60, 75);
-$innerR: 8.125em;
-$middleR: 12.8125em;
-$outerR: 15em;
-$tummyWidth: 1.5em;
-$borderWidth: .375em;
-$polygon-start: polygon(50% 50%, 0% 50%, 0% 100%, 100% 100%, 100% 20%);
-$polygon-a: polygon(50% 50%, 30% 120%, 50% 100%, 100% 100%, 100% 20%);
-$polygon-b: polygon(50% 50%, 100% 90%, 120% 90%, 100% 100%, 100% 20%);
-$polygon-middle: polygon(50% 50%, 100% 45%, 120% 45%, 120% 50%, 100% 20%);
-$polygon-c: polygon(50% 50%, 100% 65%, 120% 65%, 120% 50%, 100% 20%);
-$polygon-d: polygon(50% 50%, 75% 130%, 120% 65%, 120% 50%, 100% 20%);
-$polygon-e: polygon(50% 50%, -20% 110%, 50% 120%, 100% 100%, 100% 20%);
-
-.cat {
-  position: relative;
-  display: block;
-  width: $outerR;
-  height: 100%;
-  font-size: 10px;
-  margin: auto;
-
-  * {
-    box-sizing: content-box;
-  }
-
-  .head, .foot, .body, .paw {
-    @include center-center;
-    border-radius: 50%;
-    width: $outerR;
-    height: $outerR;
-  }
-
-  .body {
-    @include body-color;
-  }
-
-  .head:before, .foot:before {
-    @include head-foot-color;
-  }
-
-  .head {
-    &:before {
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      border-radius: 50%;
-      clip-path: polygon(100% 20%, 50% 50%, 70% -10%);
-      -webkit-clip-path: polygon(100% 20%, 50% 50%, 70% -10%);
-    }
-
-    &:after {
-      content: '';
-      width: 4.125em;
-      height: 2.5em;
-      position: absolute;
-      top: 0.8125em;
-      right: 3.9375em;
-      background-image: linear-gradient($bgColor 65%, transparent 65%), radial-gradient($bgColor 51%, $borderColor 55%, $borderColor 68%, transparent 70%);
-      transform: rotate(-66deg);
-    }
-
-    .face {
-      width: 5em;
-      height: 3.75em;
-      left: 9.0625em;
-      top: 1.8125em;
-      position: absolute;
-      transform: rotate(-47deg);
-      background: radial-gradient(circle, $tummyColor 0%, $tummyColor 23%, transparent 23%) -0.1875em 1.0625em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) 0.75em -0.75em no-repeat, radial-gradient(circle, $borderColor 0%, $borderColor 6%, transparent 6%) -0.75em -0.75em no-repeat, radial-gradient($bodyColor 0%, $bodyColor 15%, transparent 15%) 0 -0.6875em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) -0.1875em -0.3125em no-repeat, radial-gradient(circle, transparent 5%, $borderColor 5%, $borderColor 10%, transparent 10%) 0.1875em -0.3125em no-repeat, radial-gradient(circle, $bodyColor 45%, transparent 45%) 0 -0.1875em, linear-gradient(transparent 35%, $borderColor 35%, $borderColor 41%, transparent 41%, transparent 44%, $borderColor 44%, $borderColor 50%, transparent 50%, transparent 53%, $borderColor 53%, $borderColor 59%, transparent 59%);
-    }
-  }
-
-  .foot {
-    &:before, &:after {
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-    }
-
-    &:before {
-      border-radius: 50%;
-      clip-path: polygon(50% 50%, 0% 50%, 0% 25%);
-      -webkit-clip-path: polygon(50% 50%, 0% 50%, 0% 25%);
-    }
-
-    .tummy-end {
-      @include tummy-style;
-      left: 1.1875em;
-      top: 6.5625em;
-    }
-
-    .bottom {
-      width: 2.1875em;
-      height: 0.9375em;
-      position: absolute;
-      top: 4.875em;
-      left: 0.75em;
-      border: 0.375em solid $borderColor;
-      border-bottom: 0;
-      border-radius: 50%;
-      transform: rotate(21deg);
-      background: $bodyColor;
-    }
-  }
-
-  .hands, .legs, .foot:after {
-    width: 0.625em;
-    height: 1.5625em;
-    position: absolute;
-    border: $borderWidth solid $borderColor;
-    background-color: $bodyColor;
-  }
-
-  .hands {
-    border-top: 0;
-    border-radius: 0 0 0.75em 0.75em;
-
-    &.left {
-      top: 4.3em;
-      left: 13.1875em;
-      transform: rotate(-20deg);
-    }
-
-    &.right {
-      top: 5.125em;
-      left: 10.975em;
-      transform: rotate(-25deg);
-    }
-  }
-
-  .legs {
-    border-bottom: 0;
-    border-radius: 0.75em 0.75em 0 0;
-
-    &.left {
-      top: 4.0625em;
-      left: 3.125em;
-      transform: rotate(25deg);
-    }
-
-    &.right {
-      top: 3.3125em;
-      left: 0.75em;
-      transform: rotate(22deg);
-    }
-  }
-
-  .foot:after {
-    width: .9em;
-    height: 2.5em;
-    top: 2.625em;
-    left: 2.5em;
-    z-index: -1;
-    transform: rotate(25deg);
-    background-color: $tailColor;
-    border-bottom: 0;
-    border-radius: 0.75em 0.75em 0 0;
-  }
-
-  animation: 2.74s linear infinite loading-cat;
-
-  .body {
-    animation: 2.74s linear infinite body;
-  }
-
-  .foot {
-    animation: 2.74s linear infinite foot;
-  }
-
-  &:hover {
-    animation-play-state: paused;
-    .body, .foot {
-      animation-play-state: paused;
-    }
-  }
-
-  &:active {
-    animation-play-state: running;
-    .body, .foot {
-      animation-play-state: running;
-    }
-  }
-}
-
-@keyframes body {
-  0% {
-    clip-path: $polygon-start;
-  }
-  10% {
-    clip-path: $polygon-a;
-  }
-  20% {
-    clip-path: $polygon-b;
-  }
-  40% {
-    clip-path: $polygon-middle;
-  }
-  50% {
-    clip-path: $polygon-middle;
-  }
-  65% {
-    clip-path: $polygon-c;
-  }
-  80% {
-    clip-path: $polygon-d;
-  }
-  90% {
-    clip-path: $polygon-e;
-  }
-  100% {
-    clip-path: $polygon-start;
-  }
-}
-
-@keyframes loading-cat {
-  0% { transform: rotate(0deg); }
-  10% { transform: rotate(-80deg); }
-  20% { transform: rotate(-180deg); }
-  40% { transform: rotate(-245deg); }
-  50% { transform: rotate(-250deg); }
-  68% { transform: rotate(-300deg); }
-  90% { transform: rotate(-560deg); }
-  100% { transform: rotate(-720deg); }
-}
-
-@keyframes foot {
-  0% { transform: rotate(-10deg); }
-  10% { transform: rotate(-100deg); }
-  20% { transform: rotate(-145deg); }
-  35% { transform: rotate(-190deg); }
-  50% { transform: rotate(-195deg); }
-  70% { transform: rotate(-165deg); }
-  100% { transform: rotate(-10deg); }
-}
-</style>
diff --git a/theme/components/ShokaxPostBreadcrumb.vue b/theme/components/ShokaxPostBreadcrumb.vue
deleted file mode 100644
index 0fb2a24..0000000
--- a/theme/components/ShokaxPostBreadcrumb.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-defineProps<{
-  post: Post
-}>()
-
-const { t } = useI18n()
-const blank = ref('')
-</script>
-
-<template v-if="typeof post.categories === 'object'">
-  <div class="breadcrumb text-sm inline-flex flex-wrap mt-5 mb-5 items-center" itemListElement itemscope itemtype="https://schema.org/BreadcrumbList">
-    <div class="i-ri-home-4-fill ml-0 mr-1.25" />
-    <span class="whitespace-pre">
-      <RouterLink to="/">
-        {{ t('menu.home') }}
-      </RouterLink>
-    </span>
-  </div>
-  <div class="i-ri-arrow-right-s-line ml-0.5 mr-0.5" />
-  <span
-    v-for="(item, index) in post.categories" :key="item" :class="{ current: index === Number(post.categories?.length) - 1 }"
-    itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"
-  >
-    <RouterLink :to="blank">
-      <span itemprop="name">
-        {{ item }}
-        <meta itemprop="position" :content="String(index)">
-      </span>
-    </RouterLink>
-    <div v-if="index > 1 && index !== Number(post.categories?.length) - 1" class="i-ri-arrow-right-s-line  ml-0.5 mr-0.5" />
-  </span>
-</template>
-
-<style scoped>
-.breadcrumb span.current {
-  background-color: var(--color-red-a1);
-  border-radius: .625rem;
-  padding: 0 .625rem;
-  transition: .2s ease-in-out;
-}
-</style>
diff --git a/theme/components/ShokaxPostCopyright.vue b/theme/components/ShokaxPostCopyright.vue
deleted file mode 100644
index cb73e48..0000000
--- a/theme/components/ShokaxPostCopyright.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-import { useFullUrl, useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
-
-defineProps<{
-  frontmatter: Post
-}>()
-const siteConfig = useSiteConfig()
-const { t } = useI18n()
-const postURL = useFullUrl()
-</script>
-
-<template>
-  <div v-if="frontmatter.copyright" id="copyright" class="bg-gray-200 p-4 relative text-xs rounded-md text-gray-600">
-    <ul>
-      <li class="author">
-        <div class="i-ri-account-circle-fill" />
-        <strong>
-          {{ t("post.copyright.author") + t('symbol.colon') }}
-        </strong>
-        {{ frontmatter.author || siteConfig.author.name }}
-        <div class="i-ri-at-line" />
-        {{ frontmatter.title }}
-      </li>
-      <li class="link">
-        <div class="i-ri-link" />
-        <strong>
-          {{ t('post.copyright.link') + t('symbol.colon') }}
-        </strong>
-        <RouterLink :to="postURL">
-          {{ frontmatter.title }}
-        </RouterLink>
-      </li>
-      <li class="license">
-        <div class="i-ri-arrow-go-forward-line" />
-        <strong>
-          {{ t('post.copyright.license') + t('symbol.colon') }}
-        </strong>
-        <!-- cc协议部分未完成 -->
-        <a v-if="frontmatter.copyright === true">
-          {{ t('post.copyright.license_content') }}
-        </a>
-        <a v-else>
-          {{ t('post.copyright.nocopy') }}
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/theme/components/ShokaxPostFooter.vue b/theme/components/ShokaxPostFooter.vue
deleted file mode 100644
index 0d726d2..0000000
--- a/theme/components/ShokaxPostFooter.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-import { formatDate } from 'valaxy'
-
-import { useI18n } from 'vue-i18n'
-
-defineProps<{
-  frontmatter: Post
-}>()
-
-const { t } = useI18n()
-</script>
-
-<template>
-  <div class="text-right text-sm text-gray-500">
-    <span v-if="frontmatter.updated !== frontmatter.date" class="inline-block mr-2">
-      <div class="mr-1 i-ri-calendar-check-fill inline-block" />
-      <span>{{ t('post.edited') }}</span>
-      <time :title="t('post.modified') + t('symbol.colon') + frontmatter.updated" itemprop="dateModified" :datetime="formatDate(frontmatter.date || '')">
-        {{ formatDate(frontmatter.updated || frontmatter.date || '') }}
-      </time>
-    </span>
-  </div>
-  <!-- 等待和waline&twikoo进行阅读量重构 -->
-</template>
diff --git a/theme/components/ShokaxPostFooterTags.vue b/theme/components/ShokaxPostFooterTags.vue
deleted file mode 100644
index 5ba0bee..0000000
--- a/theme/components/ShokaxPostFooterTags.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-
-defineProps<{
-  post: Post
-}>()
-</script>
-
-<template>
-  <div v-if="post.tags" class="tags text-left mt-3 text-sm">
-    <RouterLink v-for="tag in post.tags" :key="tag" :to="`/tags/${tag}/`">
-      <div class="i-ri-price-tag-3-line" />
-      {{ tag }}
-    </RouterLink>
-  </div>
-</template>
diff --git a/theme/components/ShokaxPostNav.vue b/theme/components/ShokaxPostNav.vue
deleted file mode 100644
index d75f438..0000000
--- a/theme/components/ShokaxPostNav.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import { usePrevNext } from 'valaxy'
-import ShokaxPostNavBlock from './ShokaxPostNavBlock.vue'
-
-const [prev, next] = usePrevNext()
-</script>
-
-<template>
-  <div class="post-nav flex mb-4">
-    <div class="item left w-1/2">
-      <ShokaxPostNavBlock v-if="prev" type="prev" :item="prev" />
-    </div>
-    <div class="item right w-1/2">
-      <ShokaxPostNavBlock v-if="next" type="next" :item="next" />
-    </div>
-  </div>
-</template>
diff --git a/theme/components/ShokaxPostNavBlock.vue b/theme/components/ShokaxPostNavBlock.vue
deleted file mode 100644
index 6510ab6..0000000
--- a/theme/components/ShokaxPostNavBlock.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-import { useI18n } from 'vue-i18n'
-import { getCover } from '../composables'
-
-const props = defineProps<{
-  item: Post
-  type: 'next' | 'prev'
-}>()
-
-const cover = getCover(props.item)
-let lastcat: string
-if (typeof props.item.categories === 'object')
-  lastcat = props.item.categories[-1]
-else if (typeof props.item.categories === 'string')
-  lastcat = props.item.categories
-const { t } = useI18n()
-</script>
-
-<template>
-  <RouterLink
-    :to="item.path || ''"
-    class="flex flex-col h-full text-white p-5 bg-cover relative"
-    :rel="type"
-    itemprop="url"
-    :data-background-image="item.cover || cover"
-    :title="item.title || item.path || t('post.untitled')"
-  >
-    <span class="type text-sm self-start"> {{ t(`post.${type}`) }}</span>
-    <span v-if="lastcat" class="category text-sm self-start">
-      <div class="i-ri-flag-fill" />
-      {{ lastcat }}
-    </span>
-    <h3>
-      {{ item.title || item.path || t('post.untitled') }}
-    </h3>
-  </RouterLink>
-</template>
diff --git a/theme/components/ShokaxPostReward.vue b/theme/components/ShokaxPostReward.vue
deleted file mode 100644
index fbc066d..0000000
--- a/theme/components/ShokaxPostReward.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<script setup lang="ts">
-import type { Post } from 'valaxy'
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { RewardAccounts } from 'types'
-import { useThemeConfig } from '../composables'
-
-defineProps<{
-  post: Post
-}>()
-const toggled = ref(false)
-const { t } = useI18n()
-const themeConfig = useThemeConfig()
-const accounts: RewardAccounts[] = themeConfig.value.reward.accounts
-
-const toggleQR = function (event: Event) {
-  event.preventDefault()
-  toggled.value = !toggled.value
-}
-</script>
-
-<template v-if="post.reward">
-  <div id="reward" class="mx-auto mt-5 mb-5 p-2 pt-2 pb-2 text-center">
-    <button class="bg-[color:var(--primary-color)] text-gray-1 border-0 rounded-md cursor-pointer leading-2 px-3 py-0" @click="toggleQR">
-      <div class="i-ri-heart-pulse-fill" />
-      {{ t('reward.donate') }}
-    </button>
-    <p class="text-sm text-gray-500 m-0">
-      {{ t('reward.text') }}
-    </p>
-    <Transition appear>
-      <div v-if="toggled" id="qr">
-        <div>
-          <img v-for="item in accounts" :key="item.name" :src="item.image" :alt="item.name" loading="lazy">
-          <!-- 需要修复一下i18n问题，先保证不报错 -->
-          <p>{{ t('reward.text') }}</p>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style>
-</style>
diff --git a/theme/components/ValaxyMain.vue b/theme/components/ValaxyMain.vue
index 2e1bb24..3df3faf 100644
--- a/theme/components/ValaxyMain.vue
+++ b/theme/components/ValaxyMain.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
-import ShokaxPostFooterTags from './ShokaxPostFooterTags.vue'
 
 defineProps<{
   frontmatter: Post
@@ -21,6 +20,5 @@ defineProps<{
     </Transition>
 
     <slot name="main-content-after" />
-    <ShokaxPostFooterTags :post="frontmatter" />
   </div>
 </template>
diff --git a/theme/styles/css-vars.scss b/theme/styles/css-vars.scss
index e6e4fc0..6521c51 100644
--- a/theme/styles/css-vars.scss
+++ b/theme/styles/css-vars.scss
@@ -3,9 +3,57 @@
 
 :root {
   --un-prose-links: var(--st-c-link);
+  --color-red-a1: #e9546b1a;
+
+  --grey-0: #fff;
+  --grey-1: #fdfdfd;
+  --grey-2: #f7f7f7;
+  --grey-3: #eff2f3;
+  --grey-4: #ccc;
+  --grey-5: #999;
+  --grey-6: #666;
+  --grey-7: #333;
+  --grey-8: #222;
+  --grey-9: #000;
+
+  --grey-1-a0: alpha(#fdfdfd, 0);
+  --grey-1-a7: alpha(#fdfdfd, .7);
+  --grey-1-a5: alpha(#fdfdfd, .5);
+  --grey-1-a3: alpha(#fdfdfd, .3);
+  --grey-9-a1: alpha(#000, .1);
+  --grey-9-a5: alpha(#000, .5);
+  --grey-2-a0: alpha(#f7f7f7, 0);
+
+  --color-pink-light-old: #ffe6fa;
+  --color-pink-light: alpha(#ffe6fa, .72);
+  --color-cyan-light-old: #e3fdf5;
+  --color-cyan-light: alpha(#e3fdf5, .72);
+
+  --color-red: #e9546b;
+  --color-pink: #ed6ea0;
+  --color-orange: #ec8c69;
+  --color-yellow: #eab700;
+  --color-green: #0a7426;
+  --color-aqua: #3e999f;
+  --color-blue: #38a1db;
+  --color-purple: #9d5b8b;
+  --color-grey: #869194;
+
+  --color-red-a1: alpha(#e9546b, .1);
+  --color-red-a3: alpha(#e9546b, .3);
+  --color-pink-a3: alpha(#ed6ea0, .3);
+  --color-pink-light-a3: alpha(#ffe6fa, .3);
+  --color-pink-light-a5: alpha(#ffe6fa, .5);
+  --color-pink-light-a7: alpha(#ffe6fa, .7);
+
+  --body-bg-shadow: var(--grey-2);
+  --box-bg-shadow: var(--grey-9-a1);
+  --text-color: var(--grey-7);
+  --header-text-color: var(--grey-0);
+  --primary-color: var(--color-red);
+
+  --nav-bg: linear-gradient(-225deg, var(--color-cyan-light) 0, var(--color-pink-light) 100%);
 
-  @include set-css-var-from-map($common);
-  @include set-css-var-from-map($z-index, "z");
 }
 
 :root {
@@ -18,4 +66,4 @@ html.dark {
 
 :root {
   --va-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
+}
\ No newline at end of file
diff --git a/uno.config.ts b/uno.config.ts
new file mode 100644
index 0000000..e61e059
--- /dev/null
+++ b/uno.config.ts
@@ -0,0 +1,7 @@
+import {
+  defineConfig,
+} from 'unocss'
+
+export default defineConfig({
+
+})