valaxy-theme-hairy 0.0.13 → 0.0.16

package/components/HairyBody.vue

@@ -11,7 +11,7 @@ const showWaline = computed(() => route.path.includes('/posts/') || fr.value.wal
 <template>
   <div class="HairyBody min-h-49vh relative">
     <div class="mx-auto breakpoint flex z-1 relative">
-      <div class="relative flex-1 pt-2">
+      <div class="relative flex-1 pt-2 w-0">
         <slot />
         <HairyWaline v-if="showWaline" />
       </div>

package/components/HairyFooter.vue

@@ -21,7 +21,7 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
 </script>
 
 <template>
-  <footer v-if="themeConfig.footer" class="va-footer p-4 pb-10" text="center sm" style="color:var(--va-c-text-light)">
+  <footer v-if="themeConfig.footer" class="va-footer p-4 pt-5 pb-14" text="center sm" style="color:var(--va-c-text-light)">
     <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
         {{ themeConfig.footer.beian.icp }}
@@ -41,7 +41,12 @@ const footerIcon = computed(() => themeConfig.value.footer.icon)
         <div :class="footerIcon.name" />
       </a>
 
-      <span class="ml-2">{{ config.author.name }}</span>
+      <span>{{ config.author.name }}</span>
+      <span class="mx-2">|</span>
+      <span v-if="config.comment.waline" class="flex items-center">
+        <div class="i-ri-eye-fill mr-1" />
+        <span class="waline-pageview-count" data-path="/">1</span>
+      </span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

package/components/HairyLayout.vue

@@ -9,7 +9,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="HairyLayout min-h-100vh">
+  <div class="HairyLayout min-h-80vh">
     <HairyNav />
     <HairyHeader v-bind="header">
       <template #description>

package/components/HairyLinks.vue

@@ -14,7 +14,10 @@ defineProps<{
 <template>
   <div class="min-h-30vh">
     <div class="links">
-      <div v-for="(item, index) in links" :key="index" class="link-block flex items-center py-0.5rem px-1rem rounded-lg" :style="{ '--block-color': item.color }">
+      <div
+        v-for="(item, index) in links" :key="index" class="link-block flex items-center py-0.5rem px-1rem rounded-lg"
+        :style="{ '--block-color': item.color }"
+      >
         <a :href="item.url" class="w-4rem h-4rem">
           <HairyImage class="w-full h-full rounded-xl" :src="item.image" />
         </a>
@@ -22,7 +25,7 @@ defineProps<{
           <a :href="item.url" class="font-bold text-lg title">
             {{ item.name }}
           </a>
-          <div class="max-w-180px text-sm my-0.5rem truncate">
+          <div class="max-w-180px text-sm my-0.5rem truncate desc">
             {{ item.desc }}
           </div>
         </div>
@@ -34,23 +37,28 @@ defineProps<{
 <style lang="scss" scoped>
 .link-block {
   border: 0.0625rem solid #f7f7f7;
-  box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0,0,0,0.1);
+  box-shadow: 0 0.625rem 1.875rem -0.9375rem rgba(0, 0, 0, 0.1);
   --bg-color: var(--block-color, #666);
   @apply transition-all;
+
   .title {
     color: var(--block-color);
   }
 }
+
 .dark .link-block {
   background: rgba($color: #989898, $alpha: 0.1);
 }
+
 .links .link-block:hover {
-    background-color: var(--bg-color);
-    box-shadow: 0 0.125rem 1.25rem var(--bg-color);
-    border-color: var(--bg-color);
-    .title {
-      color: #fff;
-    }
+  background-color: var(--bg-color);
+  box-shadow: 0 0.125rem 1.25rem var(--bg-color);
+  border-color: var(--bg-color);
+
+  .title,
+  .desc {
+    color: #fff;
+  }
 }
 
 .links {

package/components/HairyWaline.vue

@@ -6,6 +6,10 @@ const config = useConfig()
 // 挂载 Waline
 useWaline({
   el: '#waline',
+  emoji: [
+    '//unpkg.com/@waline/emojis@1.0.1/weibo',
+    '//unpkg.com/@waline/emojis@1.0.1/bilibili',
+  ],
   ...config.value.comment.waline,
 })
 </script>
@@ -26,4 +30,15 @@ useWaline({
   padding: 4px;
   width: calc(100% - 1rem - 8px);
 }
+.wl-emoji-popup {
+  border-bottom: none !important;
+  z-index: 1000;
+}
+.wl-emoji-popup .wl-tabs {
+  height: auto !important;
+  overflow-x: auto !important;
+  padding: 0 !important;
+  margin-left: -1px;
+  margin-right: -1px;
+}
 </style>

package/layouts/hairy.vue

@@ -1,11 +1,20 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 import { useRoute } from 'vue-router'
+import { pageviewCount } from '@waline/client'
+import { useConfig } from 'valaxy'
 
 const route = useRoute()
 const meta = computed(() => route.meta)
 const type = computed(() => meta.value.type || '')
-console.log(type.value)
+const config = useConfig()
+
+onMounted(() => {
+  pageviewCount({
+    serverURL: config.value.comment.waline.serverURL,
+    path: window.location.pathname,
+  })
+})
 </script>
 
 <template>

package/layouts/post.vue

@@ -1,8 +1,16 @@
 <script lang="ts" setup>
 import { useFrontmatter } from 'valaxy'
+import { ElTag } from 'element-plus/es/components/tag/index'
+import 'element-plus/es/components/tag/style/index'
 import dayjs from 'dayjs'
+import { useRouter } from 'vue-router'
+const router = useRouter()
 
 const post = useFrontmatter()
+
+const displayTag = (tag: string) => {
+  router.push(`/tags/${tag}`)
+}
 </script>
 
 <template>
@@ -16,11 +24,25 @@ const post = useFrontmatter()
         <span>本文字数 {{ (post.length / 1000).toFixed(1) }}k 字</span>
         <span>阅读时长 {{ post.durations.minutes.toFixed(2) }} 分钟</span>
       </div>
+      <div v-if="post.tags?.length" class="tags flex-center gap-2 mt-2">
+        <el-tag v-for="(tag) in post.tags" :key="tag" class="dark:bg-dark-50 cursor-pointer" @click="displayTag(tag)">
+          {{ tag }}
+        </el-tag>
+      </div>
     </template>
     <router-view />
+    <div class="mb-15">
+      <div class="border-t border-gray-200 dark:border-gray-600"></div>
+      <div class="flex items-center justify-end mt-2">
+        <div class="i-ri-eye-fill mr-2" />
+        阅读次数 <span class="waline-pageview-count mx-2">1</span> 次
+      </div>
+    </div>
     <template #body-slide>
       <HairyUserTab />
     </template>
   </HairyLayout>
 </template>
 
+<style lang="scss">
+</style>

package/modules/loading.scss

@@ -1,10 +1,11 @@
 .hy-loading {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
+  bottom: 0;
+  right: 0;
   z-index: 100;
-  width: 100vw;
-  height: 100%;
+
   background: #eee;
 
   transition: opacity 0.5s;
@@ -14,10 +15,10 @@
     height: 50px;
     position: fixed;
     top: 50%;
-    left: 50%;
-    margin-left: -50px;
+    margin: auto;
     margin-top: -50px;
-
+    left: 0;
+    right: 0;
   }
 
   #preloader {

package/modules/loading.ts

@@ -30,6 +30,8 @@ function showFullLoading() {
     el = createElement()
   el.style.opacity = '0'
   document.body.appendChild(el)
+  document.body.style.overflow = 'hidden'
+
   setTimeout(() => el.style.opacity = '1')
   isLoading.value = true
 }
@@ -38,6 +40,7 @@ function hideFullLoading() {
   if (!el)
     return
   el.style.opacity = '0'
+  document.body.style.overflow = ''
   setTimeout(() => {
     isLoading.value = true
     el.remove()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.0.13",
+  "version": "0.0.16",
   "packageManager": "pnpm@7.5.0",
   "author": {
     "email": "wwu710632@gmail.com",

package/styles/index.scss

@@ -8,6 +8,7 @@
 body {
   font-family: var(--hy-font-family-seto);
   @apply transition-colors duration-200;
+  color: var(--va-c-text);
 }
 
 #app {

package/styles/markdown.scss

@@ -48,6 +48,16 @@ html.dark {
   max-width: calc(100vw - 56px);
 }
 
+.markdown-body div[class*=language-] {
+  width: 100%;
+}
+
+@media screen and (max-width: 640px) {
+  .markdown-body div[class*=language-] {
+    margin: auto;
+  }
+}
+
 
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::before,
 .prose :where(:not(pre) > code):not(:where(.not-prose, .not-prose *))::after {
@@ -57,4 +67,23 @@ html.dark {
 .custom-block.tip {
   background-color: rgba(200, 200, 200, 0.1);
   border-color: var(--hy-c-primary);
+}
+
+.markdown-body {
+  --un-prose-borders: var(--hy-c-primary);
+}
+
+.markdown-body div[class*=language-] pre {
+  max-width: none;
+}
+
+.prose :where(blockquote):not(:where(.not-prose, .not-prose *)) {
+  background: rgba(200, 200, 200, 0.1);
+  @apply py-1px;
+
+  font-size: 15px;
+
+  >p {
+    margin: 0.5rem 0;
+  }
 }