feat: 文章底部导航栏

.github/workflows/ci.yml

@@ -43,33 +43,33 @@ jobs:
   #       run: pnpm run typecheck
 
   # check windows build
-  build:
-    runs-on: ${{ matrix.os }}
+  # build:
+  #   runs-on: ${{ matrix.os }}
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-        os: [ubuntu-latest, windows-latest]
-      fail-fast: false
+  #   strategy:
+  #     matrix:
+  #       node-version: [16.x]
+  #       os: [ubuntu-latest, windows-latest]
+  #     fail-fast: false
 
-    steps:
-      - uses: actions/checkout@v3
+  #   steps:
+  #     - uses: actions/checkout@v3
 
-      - name: Install pnpm
-        uses: pnpm/action-setup@v2
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v2
 
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-          registry-url: https://registry.npmjs.org/
-          cache: pnpm
+  #     - name: Use Node.js ${{ matrix.node-version }}
+  #       uses: actions/setup-node@v3
+  #       with:
+  #         node-version: ${{ matrix.node-version }}
+  #         registry-url: https://registry.npmjs.org/
+  #         cache: pnpm
 
-      - name: Install
-        run: pnpm install
+  #     - name: Install
+  #       run: pnpm install
 
-      - name: Build
-        run: pnpm run build
+  #     - name: Build
+  #       run: pnpm run build
 
-      - name: Build:demo
-        run: pnpm run build:demo
+  #     - name: Build:demo
+  #       run: pnpm run build:demo

theme/components/ShokaxPostCopyright.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
-import { useFrontmatter, useFullUrl } from 'valaxy'
+import type { Post } from 'valaxy'
+import { useFullUrl } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useThemeConfig } from '../composables'
 
+defineProps<{
+  frontmatter: Post
+}>()
 const themeConfig = useThemeConfig()
 const { t } = useI18n()
-const frontmatter = useFrontmatter()
 const postURL = useFullUrl()
 </script>
 

theme/components/ShokaxPostFooter.vue

@@ -0,0 +1,25 @@
+<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>

theme/components/ShokaxPostNav.vue

@@ -0,0 +1,17 @@
+<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>

theme/components/ShokaxPostNavBlock.vue

@@ -0,0 +1,38 @@
+<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>
+  <a
+    :href="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>
+  </a>
+</template>

theme/composables/config.ts

@@ -1,4 +1,5 @@
 import { computed } from 'vue'
+import type { Post } from 'valaxy'
 import { useConfig } from 'valaxy'
 import type { ThemeConfig } from '../types'
 
@@ -9,3 +10,11 @@ export function useThemeConfig<T = ThemeConfig>() {
   const config = useConfig<T>()
   return computed(() => config!.value.themeConfig)
 }
+
+export function getCover(post: Post) {
+  const covers = useConfig<ThemeConfig>().value.themeConfig.covers
+  if (post.cover)
+    return post.cover
+  else if (covers.length >= 1)
+    return covers[0]
+}

theme/node/index.ts

@@ -35,6 +35,9 @@ export const defaultThemeConfig: ThemeConfig = {
     atom: false,
   },
   author: 'Anyone',
+  covers: [
+    'https://example.com',
+  ],
 }
 
 // write a vite plugin

theme/types/index.d.ts

@@ -71,6 +71,8 @@ export interface ThemeConfig {
     rss: boolean
     atom: boolean
   }
+
+  covers: string[]
 }
 
 export interface NavItem {