valaxy-theme-hairy 1.2.1 → 1.2.3

package/components/parts/HairyTimelineContent.vue

@@ -4,7 +4,6 @@ import dayjs from 'dayjs'
 import { withDefaults } from 'vue'
 import { last } from 'lodash-es'
 import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { toArray } from '../../utils'
 
 withDefaults(
@@ -17,8 +16,6 @@ withDefaults(
   },
 )
 
-const i18n = useI18n()
-
 const router = useRouter()
 
 function displayCategory(keys: string | string[] = []) {
@@ -32,7 +29,7 @@ function displayCategory(keys: string | string[] = []) {
       {{ dayjs(post.date).format(format) }}
     </div>
     <HairyLink v-if="post.categories?.length" bordered type="white" @click="displayCategory(post.categories)">
-      {{ i18n.t(last(toArray(post.categories)) || '') }}
+      {{ $t(last(toArray(post.categories)) || '', {}, { missingWarn: false }) }}
     </HairyLink>
   </div>
   <a class="cursor-pointer text-size-4" @click="$router.push(post.path || '')">{{ post.title }}</a>

package/components/posts/HairyArticleImage.vue

@@ -3,7 +3,6 @@ import type { Post } from 'valaxy'
 import { computed, defineProps } from 'vue'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
 import { removeTags, toArray } from '../../utils'
 import { useLayoutPost } from '../../composables'
 
@@ -17,7 +16,6 @@ const layout = useLayoutPost()
 const slice = computed(() => layout.value.includes('slice'))
 const image = computed(() => props.post.image?.toString())
 const text = computed(() => removeTags(props.post.excerpt))
-const i18n = useI18n()
 function onReadMore() {
   if (props.post.path)
     router.push(props.post.path)
@@ -29,13 +27,15 @@ function displayCategory(keys: string | string[] = []) {
 </script>
 
 <template>
-  <li class="HairyArticleImage mb-10 py-2" :class="[slice && 'slice', reverse && 'reverse']">
+  <li class="HairyArticleImage mb-10 py-2 lt-sm:mb-5 lt-md:mb-6" :class="[slice && 'slice', reverse && 'reverse']">
     <article>
       <div class="flex justify-between items-center">
         <a
-          class="text-size-2xl font-bold truncate cursor-pointer lt-sm:text-size-lg"
+          class="text-size-2xl lt-sm:max-w-200px font-bold truncate cursor-pointer lt-sm:text-size-lg"
           :class="[reverse ? 'order-last' : 'order-first']" @click="onReadMore"
-        >{{ post.title }}</a>
+        >
+          {{ post.title }}
+        </a>
         <div class="flex justify-end gap-2 text-size-sm lt-sm:text-size-xs">
           <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
           <span>{{ post.wordCount }}字</span>
@@ -43,22 +43,22 @@ function displayCategory(keys: string | string[] = []) {
         </div>
       </div>
       <div
-        class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5"
+        class="h-200px lt-sm:h-120px flex bg-light-2 dark:bg-transparent rounded-5"
         :class="[reverse ? 'pl-4' : 'pr-4']"
       >
         <div class="flex-1 post-image-content" :class="[reverse ? 'order-last' : 'order-first']">
           <img class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image" @click="onReadMore">
         </div>
-        <div class="flex-1 flex flex-col justify-between py-2 dark:py-0">
+        <div class="flex-1 lt-md:flex-[1.2] flex flex-col justify-between py-2 dark:py-0">
           <div class="flex-1 text-size-sm">
-            <div class="line-clamp-text">
+            <div class="line-clamp-text line-clamp-5 lt-sm:line-clamp-3">
               {{ text }}
             </div>
           </div>
           <div class="flex justify-between items-center">
-            <a class="cursor-pointer" :class="[reverse && 'order-1']">
+            <a class="cursor-pointer truncate lt-sm:max-w-120px" :class="[reverse && 'order-1']">
               <span v-if="post.categories?.length" @click="displayCategory(post.categories)">
-                {{ i18n.t(toArray(post.categories).at(-1) || '') }}
+                {{ $t(toArray(post.categories).at(-1) || '', {}, { missingWarn: false }) }}
               </span>
             </a>
             <div class="text-base leading-6 font-medium">
@@ -83,7 +83,6 @@ function displayCategory(keys: string | string[] = []) {
   display: -webkit-box;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
 }
 
 .post-image {

package/components/posts/HairyArticleSeries.vue

@@ -57,6 +57,7 @@ async function changePost(path = '') {
   line-height: 28px;
   color: var(--va-c-text-light);
   white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
   transition: color 0.5s;
   cursor: pointer;

package/components/posts/HairyUpdatedPost.vue

@@ -35,7 +35,7 @@ function displayCategory(keys: string | string[] = []) {
       最近更新：
     </div>
     <div class="flex-1 flex items-center justify-end gap-2 flex-wrap">
-      <HairyLink :href="post.path">
+      <HairyLink class="truncate lt-sm:max-w-220px" :href="post.path">
         {{ post.title }}
       </HairyLink>
       <template v-if="post.tags?.length">
@@ -64,7 +64,7 @@ function displayCategory(keys: string | string[] = []) {
         <div class="lt-md:hidden flex items-center gap-2">
           <div class="i-material-symbols-folder-open-rounded text-14px" />
           <ElTag size="small" class="dark:bg-dark-50 cursor-pointer border-none!" @click="displayCategory(post.categories)">
-            {{ toArray(post.categories).map($t).join('/') }}
+            {{ toArray(post.categories).map((v) => $t(v, {}, { missingWarn: false })).join('/') }}
           </ElTag>
         </div>
       </template>

package/library/loading.ts

@@ -6,11 +6,10 @@ import { createDeferred } from '../utils'
 
 let el: HTMLElement
 
-showFullLoading()
-
 export const deferred = createDeferred<void>()
 
 export function install({ router }: ViteSSGContext) {
+  showFullLoading()
   loadFonts('Seto', Seto)
   router.afterEach(() => deferred.then(hideFullLoading))
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "packageManager": "pnpm@8.15.8",
   "author": {
     "email": "wwu710632@gmail.com",

package/pages/categories/[...its].vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useThemeConfig } from 'valaxy'
 import { ElTimeline, ElTimelineItem } from 'element-plus'
@@ -19,8 +18,6 @@ const paths = computed(() => categories.value.split('/').filter(Boolean))
 const current = useCategory(paths)
 const posts = useCategoryPost(paths)
 
-const i18n = useI18n()
-
 function getBreadcrumbPath(index: number) {
   const paths = categories.value.split('/').filter(Boolean)
   if (paths[index] === paths[paths.length - 1])
@@ -42,12 +39,12 @@ function displayCategory(key: string) {
       全部
     </HairyBreadcrumbItem>
     <HairyBreadcrumbItem v-for="(key, index) in categories.split('/')" :key="key" :to="getBreadcrumbPath(index)">
-      {{ i18n.t(key) }}
+      {{ $t(key, {}, { missingWarn: false }) }}
     </HairyBreadcrumbItem>
   </HairyBreadcrumb>
 
   <div class="grid__view dark:text-gray-3 flex-wrap">
-    <template v-for="([key, item]) in current.children" :key="key">
+    <template v-for="([key]) in current.children" :key="key">
       <div
         v-if="!key.startsWith('/post')"
         class="relative flex items-center flex-col cursor-pointer hover:text-primary transition-colors"
@@ -55,11 +52,11 @@ function displayCategory(key: string) {
       >
         <div class="i-material-symbols-folder-open-rounded text-22 lt-sm:text-15" />
         <div class="text-center leading-normal">
-          {{ i18n.t(key) }}
+          {{ $t(key, {}, { missingWarn: false }) }}
         </div>
-        <div class="badge text-12px right-20px top-12px">
+        <!-- <div class="badge text-12px right-20px top-12px">
           {{ item.total }} dir
-        </div>
+        </div> -->
       </div>
     </template>
   </div>