@sugarat/theme 0.1.24 → 0.1.25

package/node.d.ts

@@ -33,6 +33,8 @@ declare namespace Theme {
         tag?: string[];
         description?: string;
         cover?: string;
+        hiddenCover?: boolean;
+        readingTime?: boolean;
         sticky?: number;
         author?: string;
         hidden?: boolean;
@@ -100,6 +102,7 @@ declare namespace Theme {
     }
     interface ArticleConfig {
         readingTime?: boolean;
+        hiddenCover?: boolean;
     }
     interface Alert {
         type: 'success' | 'warning' | 'info' | 'error';
@@ -156,6 +159,12 @@ declare namespace Theme {
         author?: string;
         hotArticle?: HotArticle;
         home?: HomeBlog;
+        /**
+         * 本地全文搜索定制
+         * 内置pagefind 实现，
+         * VitePress 官方提供 minisearch 实现，
+         * 社区提供 flexsearch 实现
+         */
         search?: SearchConfig;
         /**
          * 配置评论
@@ -170,6 +179,7 @@ declare namespace Theme {
         alert?: Alert;
         popover?: Popover;
         friend?: FriendLink[];
+        authorList?: Omit<FriendLink, 'avatar'>[];
     }
     interface Config extends DefaultTheme.Config {
         blog?: BlogConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sugarat/theme",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "description": "简约风的 Vitepress 博客主题，sugarat vitepress blog theme",
   "main": "src/index.ts",
   "exports": {

package/src/components/BlogArticleAnalyze.vue

@@ -9,15 +9,36 @@
       预计：{{ readTime }} 分钟
     </span>
   </div>
-  <div class="meta-des 123" ref="$des" id="hack-article-des">
-    <span v-if="author">
-      <el-icon><UserFilled /></el-icon>
-      {{ author }}
+  <div class="meta-des" ref="$des" id="hack-article-des">
+    <!-- TODO：是否需要原创？转载等标签，理论上可以添加标签解决 -->
+    <span v-if="author && !hiddenAuthor" class="author">
+      <el-icon title="本文作者"><UserFilled /></el-icon>
+      <a
+        class="link"
+        :href="currentAuthorInfo.url"
+        :title="currentAuthorInfo.des"
+        v-if="currentAuthorInfo"
+      >
+        {{ currentAuthorInfo.nickname }}
+      </a>
+      <template v-else>
+        {{ author }}
+      </template>
     </span>
-    <span>
-      <el-icon><Clock /></el-icon>
+    <span v-if="publishDate && !hiddenTime" class="publishDate">
+      <el-icon :title="timeTitle"><Clock /></el-icon>
       {{ publishDate }}
     </span>
+    <span v-if="tags.length" class="tags">
+      <el-icon :title="timeTitle"><CollectionTag /></el-icon>
+      <a class="link" :href="`/?tag=${tag}`" v-for="tag in tags" :key="tag"
+        >{{ tag }}
+      </a>
+    </span>
+    <!-- 封面展示 -->
+    <ClientOnly>
+      <BlogDocCover />
+    </ClientOnly>
   </div>
 </template>
 
@@ -27,13 +48,31 @@
 import { useData, useRoute } from 'vitepress'
 import { computed, onMounted, ref, watch } from 'vue'
 import { ElIcon } from 'element-plus'
-import { UserFilled, Clock, EditPen, AlarmClock } from '@element-plus/icons-vue'
+import {
+  UserFilled,
+  Clock,
+  EditPen,
+  AlarmClock,
+  CollectionTag
+} from '@element-plus/icons-vue'
 import { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
 import countWord, { formatShowDate } from '../utils/index'
 import { Theme } from '../composables/config'
+import BlogDocCover from './BlogDocCover.vue'
 
-const { article } = useBlogConfig()
+const { article, authorList } = useBlogConfig()
 const { frontmatter } = useData()
+const tags = computed(() => {
+  const { tag, tags, categories } = frontmatter.value
+  return [
+    ...new Set(
+      []
+        .concat(tag, tags, categories)
+        .flat()
+        .filter((v) => !!v)
+    )
+  ]
+})
 const showAnalyze = computed(
   () => frontmatter.value?.readingTime ?? article?.readingTime ?? true
 )
@@ -103,11 +142,22 @@ const publishDate = computed(() => {
   return formatShowDate(currentArticle.value?.meta?.date || '')
 })
 
+const timeTitle = computed(() =>
+  frontmatter.value.date ? '发布时间' : '最近修改时间'
+)
+const hiddenTime = computed(() => frontmatter.value.date === false)
+
 const { theme } = useData<Theme.Config>()
 const globalAuthor = computed(() => theme.value.blog?.author || '')
 const author = computed(
-  () => currentArticle.value?.meta.author || globalAuthor.value
+  () =>
+    (frontmatter.value.author || currentArticle.value?.meta.author) ??
+    globalAuthor.value
+)
+const currentAuthorInfo = computed(() =>
+  authorList?.find((v) => author.value === v.nickname)
 )
+const hiddenAuthor = computed(() => frontmatter.value.author === false)
 
 watch(
   () => route.path,
@@ -143,6 +193,7 @@ watch(
   font-size: 14px;
   margin-top: 6px;
   display: flex;
+  flex-wrap: wrap;
   span {
     margin-right: 16px;
     display: flex;
@@ -151,5 +202,22 @@ watch(
       margin-right: 4px;
     }
   }
+
+  .link {
+    color: var(--vp-c-text-2);
+    &:hover {
+      color: var(--vp-c-brand);
+      cursor: pointer;
+    }
+  }
+}
+.tags {
+  a.link:not(:last-child) {
+    &::after {
+      content: '·';
+      display: inline-block;
+      padding: 0 4px;
+    }
+  }
 }
 </style>

package/src/components/BlogDocCover.vue

@@ -0,0 +1,25 @@
+<template>
+  <img class="blog-doc-cover" v-if="cover && !hiddenCover" :src="cover" />
+</template>
+
+<script lang="ts" setup>
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { frontmatter } = useData()
+const cover = computed(() => frontmatter.value.cover)
+const { article } = useBlogConfig()
+const hiddenCover = computed(
+  () => frontmatter.value?.hiddenCover ?? article?.hiddenCover ?? false
+)
+</script>
+
+<style lang="scss" scoped>
+img.blog-doc-cover.blog-doc-cover.blog-doc-cover {
+  width: 100%;
+  object-fit: cover;
+  max-height: none;
+  margin-top: 20px;
+}
+</style>

package/src/components/BlogHomeTags.vue

@@ -29,9 +29,9 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted } from 'vue'
+import { computed, watch } from 'vue'
 import { ElTag } from 'element-plus'
-import { useDark } from '@vueuse/core'
+import { useBrowserLocation, useDark } from '@vueuse/core'
 import { useRouter } from 'vitepress'
 import { useActiveTag, useArticles } from '../composables/config/blog'
 
@@ -70,11 +70,20 @@ const handleTagClick = (tag: string, type: string) => {
     `${window.location.origin}${router.route.path}?tag=${tag}&type=${type}`
   )
 }
-onMounted(() => {
-  const url = new URL(window.location.href)
-  activeTag.value.type = url.searchParams.get('type') || ''
-  activeTag.value.label = url.searchParams.get('tag') || ''
-})
+const location = useBrowserLocation()
+watch(
+  () => location.value,
+  () => {
+    if (location.value.href) {
+      const url = new URL(location.value.href!)
+      activeTag.value.type = url.searchParams.get('type') || ''
+      activeTag.value.label = url.searchParams.get('tag') || ''
+    }
+  },
+  {
+    immediate: true
+  }
+)
 </script>
 
 <style lang="scss" scoped>

package/src/components/BlogItem.vue

@@ -1,31 +1,46 @@
 <template>
   <a class="blog-item" :href="withBase(route)">
     <i class="pin" v-if="!!pin"></i>
-    <!-- 左侧信息  -->
-    <div class="info-part">
-      <!-- 标题 -->
-      <p class="title">{{ title }}</p>
-      <!-- 简短描述 -->
-      <p class="description" v-if="!!description">{{ description }}</p>
-      <div class="badge-list">
-        <span class="split" v-if="author">{{ author }}</span>
-        <span class="split">{{ showTime }}</span>
-        <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+    <!-- 标题 -->
+    <p class="title" v-if="inMobile">{{ title }}</p>
+    <div class="info-container">
+      <!-- 左侧信息 -->
+      <div class="info-part">
+        <!-- 标题 -->
+        <p class="title" v-if="!inMobile">{{ title }}</p>
+        <!-- 简短描述 -->
+        <p class="description" v-if="!!description">{{ description }}</p>
+        <!-- 底部补充描述 -->
+        <div class="badge-list" v-if="!inMobile">
+          <span class="split" v-if="author">{{ author }}</span>
+          <span class="split">{{ showTime }}</span>
+          <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+        </div>
       </div>
+      <!-- 右侧封面图 -->
+      <div
+        v-if="cover"
+        class="cover-img"
+        :style="`background-image: url(${cover});`"
+      ></div>
+    </div>
+    <!-- 底部补充描述 -->
+    <div class="badge-list" v-if="inMobile">
+      <span class="split" v-if="author">{{ author }}</span>
+      <span class="split">{{ showTime }}</span>
+      <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
     </div>
-    <div
-      v-if="cover"
-      class="cover-img"
-      :style="`background-image: url(${cover});`"
-    ></div>
   </a>
 </template>
 
 <script lang="ts" setup>
 import { withBase } from 'vitepress'
 import { computed } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 import { formatShowDate } from '../utils/index'
 
+const { width } = useWindowSize()
+const inMobile = computed(() => width.value <= 500)
 const props = defineProps<{
   route: string
   title: string
@@ -86,11 +101,16 @@ const showTime = computed(() => {
   background-color: rgba(var(--bg-gradient));
   cursor: pointer;
   display: flex;
-  align-items: center;
+  flex-direction: column;
   &:hover {
     box-shadow: var(--box-shadow-hover);
   }
 }
+.info-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
 
 .info-part {
   flex: 1;
@@ -114,6 +134,7 @@ const showTime = computed(() => {
 .badge-list {
   font-size: 13px;
   color: var(--badge-font-color);
+  margin-top: 8px;
   .split:not(:last-child) {
     &::after {
       content: '';

package/src/components/BlogLazyImage.vue

@@ -0,0 +1,63 @@
+<script lang="ts" setup>
+import { useData, useRoute } from 'vitepress'
+import { computed, onMounted, ref, watch } from 'vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+const routeData = useRoute()
+const { frontmatter } = useData()
+const { article } = useBlogConfig()
+const openLazy = computed(() => {
+  return (frontmatter.value.lazy || article?.lazy) ?? true
+})
+const imageList = ref<HTMLImageElement[]>([])
+const currentObserver = ref<IntersectionObserver>()
+const refresh = () => {
+  if (openLazy.value) {
+    const docDomContainer = window.document.querySelector('#VPContent')
+    const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
+      '.content-container .main img'
+    )
+    // 销毁旧的
+    imageList.value.forEach((v) => currentObserver.value?.unobserve(v))
+
+    // 存新的
+    imageList.value = Array.from(imgs as unknown as HTMLImageElement[])
+
+    // 初始化
+    imageList.value.forEach((img) => {
+      const src = img.getAttribute('src')
+      if (src) {
+        img.removeAttribute('src')
+        img.setAttribute('data-src', src)
+      }
+    })
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const img = entry.target
+          const src = img.getAttribute('data-src')
+          if (src) {
+            img.setAttribute('src', src)
+          }
+          observer.unobserve(img)
+
+          console.log('render', src)
+        }
+      })
+    })
+
+    // 监听
+    imageList.value.forEach((img) => {
+      observer.observe(img)
+    })
+  }
+}
+watch(routeData, () => {
+  refresh()
+})
+
+onMounted(() => {
+  refresh()
+})
+</script>

package/src/components/BlogList.vue

@@ -36,7 +36,7 @@ import {
 import { Theme } from '../composables/config'
 
 const { theme, frontmatter } = useData<Theme.Config>()
-const globalAuthor = computed(() => theme.value.blog.author || '')
+const globalAuthor = computed(() => theme.value.blog?.author || '')
 const docs = useArticles()
 
 const activeTag = useActiveTag()
@@ -45,7 +45,11 @@ const activeTagLabel = computed(() => activeTag.value.label)
 
 const wikiList = computed(() => {
   const topList = docs.value.filter((v) => !!v.meta.top)
-  topList.sort((a, b) => a.meta!.top - b.meta!.top)
+  topList.sort((a, b) => {
+    const aTop = a?.meta?.top
+    const bTop = b?.meta.top
+    return Number(aTop) - Number(bTop)
+  })
   const data = docs.value.filter(
     (v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
   )
@@ -72,7 +76,3 @@ const currentWikiData = computed(() => {
   return filterData.value.slice(startIdx, endIdx)
 })
 </script>
-<style lang="scss" scoped>
-.blog-list {
-}
-</style>

package/src/composables/config/index.ts

@@ -38,6 +38,8 @@ export namespace Theme {
     tag?: string[]
     description?: string
     cover?: string
+    hiddenCover?: boolean
+    readingTime?: boolean
     sticky?: number
     author?: string
     hidden?: boolean
@@ -111,6 +113,7 @@ export namespace Theme {
 
   export interface ArticleConfig {
     readingTime?: boolean
+    hiddenCover?: boolean
   }
   export interface Alert {
     type: 'success' | 'warning' | 'info' | 'error'
@@ -172,7 +175,12 @@ export namespace Theme {
     author?: string
     hotArticle?: HotArticle
     home?: HomeBlog
-    // TODO: 本地全文搜索定制 pagefind || minisearch || flexsearch
+    /**
+     * 本地全文搜索定制
+     * 内置pagefind 实现，
+     * VitePress 官方提供 minisearch 实现，
+     * 社区提供 flexsearch 实现
+     */
     search?: SearchConfig
     /**
      * 配置评论
@@ -187,6 +195,7 @@ export namespace Theme {
     alert?: Alert
     popover?: Popover
     friend?: FriendLink[]
+    authorList?: Omit<FriendLink, 'avatar'>[]
   }
 
   export interface Config extends DefaultTheme.Config {