@sugarat/theme 0.1.0

package/src/components/BlogHomeTags.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="card tags" v-if="tags.length">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title">🏷 标签</span>
+      <el-tag
+        v-if="activeTag.label"
+        :type="(activeTag.type as any)"
+        :effect="colorMode"
+        closable
+        @close="handleCloseTag"
+      >
+        {{ activeTag.label }}
+      </el-tag>
+    </div>
+    <!-- 标签列表 -->
+    <ul class="tag-list">
+      <li v-for="(tag, idx) in tags" :key="tag">
+        <el-tag
+          :type="tagType[idx % tagType.length]"
+          @click="handleTagClick(tag, tagType[idx % tagType.length])"
+          :effect="colorMode"
+        >
+          {{ tag }}
+        </el-tag>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue'
+import { ElTag } from 'element-plus'
+import { useDark } from '@vueuse/core'
+import { useRouter } from 'vitepress'
+import { useActiveTag, useArticles } from '../composables/config/blog'
+
+const docs = useArticles()
+
+const tags = computed(() => {
+  return [...new Set(docs.value.map((v) => v.meta.tag || []).flat(3))]
+})
+
+const activeTag = useActiveTag()
+
+const isDark = useDark({
+  storageKey: 'vitepress-theme-appearance'
+})
+
+const colorMode = computed(() => (isDark.value ? 'light' : 'dark'))
+
+const tagType: any = ['', 'info', 'success', 'warning', 'danger']
+
+const handleCloseTag = () => {
+  activeTag.value.label = ''
+  activeTag.value.type = ''
+  router.go(`${window.location.origin}${router.route.path}`)
+}
+
+const router = useRouter()
+const handleTagClick = (tag: string, type: string) => {
+  if (tag === activeTag.value.label) {
+    handleCloseTag()
+    return
+  }
+  activeTag.value.type = type
+  activeTag.value.label = tag
+
+  router.go(
+    `${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') || ''
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  margin: 0 auto 10px;
+  padding: 10px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition: all 0.3s;
+  background-color: rgba(var(--bg-gradient));
+  display: flex;
+
+  &:hover {
+    box-shadow: var(--box-shadow-hover);
+  }
+}
+.card-header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+
+  .title {
+    font-size: 12px;
+  }
+}
+
+.tags {
+  flex-direction: column;
+}
+
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 10px;
+  li {
+    margin-right: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/BlogHotArticle.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="card recommend" v-if="recommendList.length || empty">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title">{{ title }}</span>
+      <el-button
+        v-if="showChangeBtn"
+        size="small"
+        type="primary"
+        text
+        @click="changePage"
+        >{{ nextText }}</el-button
+      >
+    </div>
+    <!-- 文章列表 -->
+    <ol class="recommend-container" v-if="currentWikiData.length">
+      <li v-for="(v, idx) in currentWikiData" :key="v.route">
+        <!-- 序号 -->
+        <i class="num">{{ idx + 1 }}</i>
+        <!-- 简介 -->
+        <div class="des">
+          <!-- title -->
+          <el-link type="info" class="title" :href="v.route">{{
+            v.meta.title
+          }}</el-link>
+          <!-- 描述信息 -->
+          <div class="suffix">
+            <!-- 日期 -->
+            <span class="tag">{{ formatShowDate(v.meta.date) }}</span>
+          </div>
+        </div>
+      </li>
+    </ol>
+    <div class="empty-text" v-else>{{ empty }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { ElButton, ElLink } from 'element-plus'
+import { useArticles, useBlogConfig } from '../composables/config/blog'
+import { formatShowDate } from '../utils/index'
+
+const { hotArticle } = useBlogConfig()
+const title = computed(() => hotArticle?.title || '🔥 精选文章')
+const nextText = computed(() => hotArticle?.nextText || '换一组')
+const pageSize = computed(() => hotArticle?.pageSize || 9)
+const empty = computed(() => hotArticle?.empty ?? '暂无精选内容')
+
+const docs = useArticles()
+
+const recommendList = computed(() => {
+  const data = docs.value.filter((v) => v.meta.sticky)
+  data.sort((a, b) => b.meta.sticky! - a.meta.sticky!)
+  return [...data]
+})
+
+const currentPage = ref(1)
+const changePage = () => {
+  const newIdx =
+    currentPage.value % Math.ceil(recommendList.value.length / pageSize.value)
+  currentPage.value = newIdx + 1
+}
+
+const currentWikiData = computed(() => {
+  const startIdx = (currentPage.value - 1) * pageSize.value
+  const endIdx = startIdx + pageSize.value
+  return recommendList.value.slice(startIdx, endIdx)
+})
+
+const showChangeBtn = computed(() => {
+  return recommendList.value.length > pageSize.value
+})
+</script>
+
+<style lang="scss" scoped>
+.card {
+  position: relative;
+  margin: 0 auto 10px;
+  padding: 10px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition: all 0.3s;
+  background-color: rgba(var(--bg-gradient));
+  display: flex;
+
+  &:hover {
+    box-shadow: var(--box-shadow-hover);
+  }
+}
+
+.card-header {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+
+  .title {
+    font-size: 12px;
+  }
+}
+
+.recommend {
+  flex-direction: column;
+}
+
+.recommend-container {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0 10px 0 0px;
+  width: 100%;
+
+  li {
+    display: flex;
+
+    &:nth-child(1) .num {
+      background-color: #f56c6c;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 8px 0 8px 0;
+    }
+
+    &:nth-child(2) .num {
+      background-color: #67c23a;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 0 8px 0 8px;
+    }
+
+    &:nth-child(3) .num {
+      background-color: #409eff;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 6px;
+    }
+
+    .num {
+      display: block;
+      font-size: 14px;
+      color: var(--description-font-color);
+      font-weight: 600;
+      margin: 6px 12px 10px 0;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      text-align: center;
+    }
+
+    .des {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: 14px;
+      color: var(--vp-c-text-1);
+    }
+
+    .suffix {
+      font-size: 12px;
+      color: var(--vp-c-text-2);
+    }
+  }
+}
+
+.empty-text {
+  padding: 6px;
+  font-size: 14px;
+  text-align: center;
+}
+</style>

package/src/components/BlogImagePreview.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ElImageViewer } from 'element-plus'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
+
+const show = ref(false)
+const previewImageInfo = reactive<{ url: string; list: string[]; idx: number }>(
+  {
+    url: '',
+    list: [],
+    idx: 0
+  }
+)
+const previewImage = (e: Event) => {
+  const target = e.target as HTMLElement
+  const currentTarget = e.currentTarget as HTMLElement
+  if (target.tagName.toLowerCase() === 'img') {
+    const imgs = currentTarget.querySelectorAll<HTMLImageElement>(
+      '.content-container .main img'
+    )
+    const idx = Array.from(imgs).findIndex((el) => el === target)
+    const urls = Array.from(imgs).map((el) => el.src)
+
+    const url = target.getAttribute('src')
+    previewImageInfo.url = url!
+    previewImageInfo.list = urls
+    previewImageInfo.idx = idx
+
+    show.value = true
+  }
+}
+onMounted(() => {
+  const docDomContainer = document.querySelector('#VPContent')
+  docDomContainer?.addEventListener('click', previewImage)
+})
+
+onUnmounted(() => {
+  const docDomContainer = document.querySelector('#VPContent')
+  docDomContainer?.removeEventListener('click', previewImage)
+})
+</script>
+
+<template>
+  <ElImageViewer
+    :infinite="false"
+    hide-on-click-modal
+    teleported
+    @close="show = false"
+    :url-list="previewImageInfo.list"
+    :initial-index="previewImageInfo.idx"
+    v-if="show"
+  />
+</template>

package/src/components/BlogItem.vue

@@ -0,0 +1,112 @@
+<template>
+  <a class="blog-item" :href="route">
+    <!-- 左侧信息  -->
+    <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>
+      </div>
+    </div>
+    <div
+      v-if="cover"
+      class="cover-img"
+      :style="`background-image: url(${cover});`"
+    ></div>
+  </a>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { formatShowDate } from '../utils/index'
+
+const props = defineProps<{
+  route: string
+  title: string
+  date: string | Date
+  sticky?: number
+  description?: string
+  tag?: string[]
+  author?: string
+  cover?: string
+}>()
+
+const showTime = computed(() => {
+  return formatShowDate(props.date)
+})
+</script>
+
+<style lang="scss" scoped>
+.blog-item {
+  position: relative;
+  margin: 0 auto 20px;
+  padding: 16px 20px;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 0.25rem;
+  box-shadow: var(--box-shadow);
+  box-sizing: border-box;
+  transition: all 0.3s;
+  background-color: rgba(var(--bg-gradient));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  &:hover {
+    box-shadow: var(--box-shadow-hover);
+  }
+}
+
+.info-part {
+  flex: 1;
+}
+.title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.description {
+  color: var(--description-font-color);
+  font-size: 14px;
+  margin-bottom: 8px;
+  // 多行换行
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.badge-list {
+  font-size: 13px;
+  color: var(--badge-font-color);
+  .split:not(:last-child) {
+    &::after {
+      content: '';
+      display: inline-block;
+      width: 1px;
+      height: 8px;
+      margin: 0 10px;
+      background-color: #4e5969;
+    }
+  }
+}
+.cover-img {
+  width: 120px;
+  height: 80px;
+  margin-left: 24px;
+  border-radius: 2px;
+  background-repeat: no-repeat;
+  background-size: 120px 80px;
+}
+
+@media screen and (max-width: 500px) {
+  .cover-img {
+    width: 100px;
+    height: 60px;
+    background-size: 100px 60px;
+  }
+}
+</style>

package/src/components/BlogList.vue

@@ -0,0 +1,75 @@
+<template>
+  <ul>
+    <li v-for="v in currentWikiData" :key="v.route">
+      <blog-item
+        :route="v.route"
+        :title="v.meta.title"
+        :description="v.meta.description"
+        :date="v.meta.date"
+        :tag="v.meta.tag"
+        :cover="v.meta.cover"
+        :author="v.meta.author || globalAuthor"
+      />
+    </li>
+  </ul>
+  <el-pagination
+    v-if="wikiList.length >= pageSize"
+    small
+    background
+    v-model:current-page="currentPage"
+    :page-size="pageSize"
+    :total="filterData.length"
+    layout="prev, pager, next, jumper"
+  />
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ElPagination } from 'element-plus'
+import { useData } from 'vitepress'
+import BlogItem from './BlogItem.vue'
+import {
+  useArticles,
+  useActiveTag,
+  useBlogConfig
+} from '../composables/config/blog'
+import { Theme } from '../composables/config'
+
+const { theme, frontmatter } = useData<Theme.Config>()
+const globalAuthor = computed(() => theme.value.blog.author || '')
+const docs = useArticles()
+
+const activeTag = useActiveTag()
+
+const activeTagLabel = computed(() => activeTag.value.label)
+
+const wikiList = computed(() => {
+  const data = docs.value
+    .filter((v) => v.meta.date && v.meta.title)
+    .filter((v) => !v.meta.hidden)
+  data.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
+  return data
+})
+
+const filterData = computed(() => {
+  if (!activeTagLabel.value) return wikiList.value
+  return wikiList.value.filter((v) =>
+    v.meta?.tag?.includes(activeTagLabel.value)
+  )
+})
+
+const { home } = useBlogConfig()
+const pageSize = computed(
+  () => frontmatter.value.blog?.pageSize || home?.pageSize || 6
+)
+const currentPage = ref(1)
+
+const currentWikiData = computed(() => {
+  const startIdx = (currentPage.value - 1) * pageSize.value
+  const endIdx = startIdx + pageSize.value
+  return filterData.value.slice(startIdx, endIdx)
+})
+</script>
+<style lang="scss" scoped>
+.blog-list {
+}
+</style>