valaxy-theme-hairy 0.0.14 → 0.0.15

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="/" />
+      </span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

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" /> 次
+      </div>
+    </div>
     <template #body-slide>
       <HairyUserTab />
     </template>
   </HairyLayout>
 </template>
 
+<style lang="scss">
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-hairy",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "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

@@ -57,4 +57,19 @@ 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);
+}
+
+.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;
+  }
 }