feat: 文章架构

.vscode/settings.json

@@ -1,10 +1,11 @@
 {
   "cSpell.words": [
     "algoliasearch",
+    "beian",
     "instantsearch",
+    "Shokax",
     "valaxy",
-    "valaxyjs",
-    "beian"
+    "valaxyjs"
   ],
   "i18n-ally.sourceLanguage": "en",
   "i18n-ally.keystyle": "nested",

theme/components/ShokaxPostReward.vue

@@ -11,7 +11,7 @@ defineProps<{
 const toggled = ref(false)
 const { t } = useI18n()
 const themeConfig = useThemeConfig()
-const accounts: RewardAccounts[] = themeConfig.reward.accounts
+const accounts: RewardAccounts[] = themeConfig.value.reward.accounts
 
 const toggleQR = function (event: Event) {
   event.preventDefault()
@@ -28,7 +28,7 @@ const toggleQR = function (event: Event) {
     <p class="text-sm text-gray-500 m-0">
       {{ t('reward.text') }}
     </p>
-    <Transition name="fade">
+    <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">
@@ -41,10 +41,4 @@ const toggleQR = function (event: Event) {
 </template>
 
 <style>
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}
 </style>

theme/components/ValaxyMain.vue

@@ -1,45 +1,51 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
 import { useSiteConfig } from 'valaxy'
+import { useThemeConfig } from 'composables/config'
+import ShokaxPostFooterTags from './ShokaxPostFooterTags.vue'
+import ShokaxPostFooter from './ShokaxPostFooter.vue'
+import ShokaxPostReward from './ShokaxPostReward.vue'
+import ShokaxPostCopyright from './ShokaxPostCopyright.vue'
 
 defineProps<{
   frontmatter: Post
   data?: PageData
 }>()
 const siteConfig = useSiteConfig()
+const themeConfig = useThemeConfig()
 </script>
 
 <template>
-  <main>
-    <div w="full" flex="~">
-      <slot name="main">
-        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
-          <slot name="main-header" />
-          <slot name="main-header-after" />
-
-          <slot name="main-content">
-            <div class="markdown-body prose max-w-none pb-8">
-              <ValaxyMd :frontmatter="frontmatter">
-                <slot name="main-content-md" />
-                <slot />
-              </ValaxyMd>
-            </div>
-            <slot name="main-content-after" />
-          </slot>
-        </div>
-
-        <slot name="main-nav-before" />
-
-        <slot name="main-nav" />
-
-        <slot name="main-nav-after" />
-
-        <slot v-if="siteConfig.comment.enable && frontmatter.comment !== false" name="comment" />
-
-        <slot name="footer" />
-      </slot>
+  <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>
+    <slot name="main-header" />
+    <div class="body md" itemprop="articleBody">
+      <!-- photos 部分 TODO -->
+      <!-- summary 部分 TODO -->
+      <Transition appear>
+        <ValaxyMd :frontmatter="frontmatter">
+          <slot name="main-content-md" />
+          <slot />
+        </ValaxyMd>
+      </Transition>
+
+      <slot name="main-content-after" />
+      <ShokaxPostFooterTags :post="frontmatter" />
     </div>
-
-    <slot name="aside" />
-  </main>
+    <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>