@sugarat/theme 0.1.0

package/src/components/BlogArticleAnalyze.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="doc-analyze" v-if="showAnalyze">
+    <span>
+      <el-icon><EditPen /></el-icon>
+      字数：{{ wordCount }} 个字
+    </span>
+    <span>
+      <el-icon><AlarmClock /></el-icon>
+      预计：{{ readTime }} 分钟
+    </span>
+  </div>
+  <div class="meta-des" ref="$des" id="hack-article-des">
+    <span v-if="author">
+      <el-icon><UserFilled /></el-icon>
+      {{ author }}
+    </span>
+    <span>
+      <el-icon><Clock /></el-icon>
+      {{ publishDate }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 阅读时间计算方式参考
+// https://zhuanlan.zhihu.com/p/36375802
+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 { useBlogConfig, useCurrentArticle } from '../composables/config/blog'
+import countWord, { formatShowDate } from '../utils/index'
+import { Theme } from '../composables/config'
+
+const { article } = useBlogConfig()
+const { frontmatter } = useData()
+const showAnalyze = computed(
+  () => frontmatter.value?.readingTime ?? article?.readingTime ?? true
+)
+
+const wordCount = ref(0)
+const imageCount = ref(0)
+const wordTime = computed(() => {
+  return ~~((wordCount.value / 275) * 60)
+})
+
+const imageTime = computed(() => {
+  const n = imageCount.value
+  if (imageCount.value <= 10) {
+    // 等差数列求和
+    return n * 13 + (n * (n - 1)) / 2
+  }
+  return 175 + (n - 10) * 3
+})
+
+const readTime = computed(() => {
+  return Math.ceil((wordTime.value + imageTime.value) / 60)
+})
+
+const route = useRoute()
+const $des = ref<HTMLDivElement>()
+
+const analyze = () => {
+  if (!$des.value) {
+    return
+  }
+  const docDomContainer = window.document.querySelector('#VPContent')
+  const imgs = docDomContainer?.querySelectorAll<HTMLImageElement>(
+    '.content-container .main img'
+  )
+  imageCount.value = imgs?.length || 0
+
+  const words =
+    docDomContainer?.querySelector('.content-container .main')?.textContent ||
+    ''
+
+  wordCount.value = countWord(words)
+  docDomContainer?.querySelector('h1')?.after($des.value!)
+}
+
+onMounted(() => {
+  const observer = new MutationObserver(() => {
+    const targetInstance = document.querySelector('#hack-article-des')
+    if (!targetInstance) {
+      analyze()
+    }
+  })
+  observer.observe(document.body, {
+    childList: true, // 观察目标子节点的变化，是否有添加或者删除
+    subtree: true // 观察后代节点，默认为 false
+  })
+
+  // 初始化时执行一次
+  analyze()
+})
+
+// 阅读量
+const pv = ref(6666)
+
+const currentArticle = useCurrentArticle()
+const publishDate = computed(() => {
+  return formatShowDate(currentArticle.value?.meta?.date || '')
+})
+
+const { theme } = useData<Theme.Config>()
+const globalAuthor = computed(() => theme.value.blog.author || '')
+const author = computed(
+  () => currentArticle.value?.meta.author || globalAuthor.value
+)
+
+watch(
+  () => route.path,
+  () => {
+    // TODO: 调用接口取数据
+    pv.value = 123
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.doc-analyze {
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: center;
+  span {
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    .el-icon {
+      margin-right: 4px;
+    }
+  }
+}
+.meta-des {
+  text-align: left;
+  color: var(--vp-c-text-2);
+  font-size: 14px;
+  margin-top: 6px;
+  display: flex;
+  span {
+    margin-right: 16px;
+    display: flex;
+    align-items: center;
+    .el-icon {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

package/src/components/BlogComment.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="comment" v-if="show" id="giscus-comment">
+    <el-affix
+      :class="{ hidden: !showCommnetAffix }"
+      class="comment-btn"
+      target="main"
+      position="bottom"
+      @change="handleVisibleChange"
+      :offset="40"
+    >
+      <el-button
+        @click="handleScrollToComment"
+        plain
+        :icon="Comment"
+        type="primary"
+        >评论</el-button
+      >
+    </el-affix>
+    <component
+      v-if="showComment"
+      :is="'script'"
+      src="https://giscus.app/client.js"
+      :data-repo="commentConfig.repo"
+      :data-repo-id="commentConfig.repoId"
+      :data-category="commentConfig.category"
+      :data-category-id="commentConfig.categoryId"
+      :data-mapping="commentConfig.mapping || 'pathname'"
+      data-reactions-enabled="1"
+      data-emit-metadata="0"
+      :data-input-position="commentConfig.inputPosition || 'top'"
+      :data-theme="isDark ? 'dark' : 'light'"
+      :data-lang="commentConfig.lang || 'zh-CN'"
+      crossorigin="anonymous"
+      :data-loading="commentConfig.loading || ''"
+      async
+    >
+    </component>
+  </div>
+</template>
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+import { useData, useRoute } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import { ElAffix, ElButton } from 'element-plus'
+import { Comment } from '@element-plus/icons-vue'
+import { useGiscusConfig } from '../composables/config/blog'
+import { Theme } from '../composables/config/index'
+
+const { frontmatter } = useData()
+const showCommnetAffix = ref(true)
+const handleVisibleChange = (v: boolean) => {
+  showCommnetAffix.value = v
+}
+const handleScrollToComment = () => {
+  document.querySelector('#giscus-comment')?.scrollIntoView({
+    behavior: 'smooth',
+    block: 'start'
+  })
+}
+const giscusConfig = useGiscusConfig()
+
+const commentConfig = computed<Partial<Theme.GiscusConfig>>(() => {
+  if (!giscusConfig) {
+    return {}
+  }
+  return giscusConfig
+})
+
+const show = computed(() => {
+  if (frontmatter.value.comment === false) {
+    return frontmatter.value.comment
+  }
+  if (!giscusConfig) {
+    return giscusConfig
+  }
+  return (
+    giscusConfig.repo &&
+    giscusConfig.repoId &&
+    giscusConfig.category &&
+    giscusConfig.categoryId
+  )
+})
+
+const isDark = useDark({
+  storageKey: 'vitepress-theme-appearance'
+})
+
+const route = useRoute()
+const showComment = ref(true)
+watch(
+  () => route.path,
+  () => {
+    showComment.value = false
+    setTimeout(() => {
+      showComment.value = true
+    }, 100)
+  }
+)
+</script>
+<style scoped lang="scss">
+.comment {
+  width: 100%;
+  text-align: center;
+  padding: 40px 0;
+}
+
+.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.comment-btn {
+  :deep(.el-affix--fixed) {
+    text-align: right;
+    .el-button {
+      position: relative;
+      right: -100px;
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .comment-btn {
+    :deep(.el-affix--fixed) {
+      opacity: 0.7;
+      .el-button {
+        position: static;
+      }
+    }
+  }
+}
+</style>

package/src/components/BlogFriendLink.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="card friend-wrapper" v-if="friend?.length">
+    <!-- 头部 -->
+    <div class="card-header">
+      <span class="title">🤝 友情链接</span>
+    </div>
+    <!-- 文章列表 -->
+    <ol class="friend-list">
+      <li v-for="v in friend" :key="v.nickname">
+        <a :href="v.url" target="_blank">
+          <el-avatar :size="50" :src="v.avatar" />
+          <div>
+            <span class="nickname">{{ v.nickname }}</span>
+            <p class="des">{{ v.des }}</p>
+          </div>
+        </a>
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ElAvatar } from 'element-plus'
+import { useBlogConfig } from '../composables/config/blog'
+
+const { friend } = useBlogConfig()
+</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;
+  }
+}
+
+.friend-wrapper {
+  flex-direction: column;
+}
+
+.friend-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  margin: 0;
+  padding: 0 10px 0 0px;
+  width: 100%;
+
+  li {
+    padding: 6px;
+    margin-top: 10px;
+    .el-avatar {
+      min-width: 50px;
+    }
+    a {
+      display: flex;
+    }
+    div {
+      padding-left: 10px;
+    }
+    .nickname {
+      font-size: 16px;
+      font-weight: 450;
+    }
+
+    .des {
+      color: var(--vp-c-text-2);
+      font-size: 14px;
+    }
+  }
+}
+</style>

package/src/components/BlogHomeBanner.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <h1>
+      <span class="name">{{ name }}</span>
+      <span class="motto" v-show="motto">{{ motto }}</span>
+    </h1>
+    <div class="inspiring-wrapper">
+      <h2 @click="changeSlogan" v-show="!!inspiring">{{ inspiring }}</h2>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useData } from 'vitepress'
+import { useHomeConfig, useBlogConfig } from '../composables/config/blog'
+
+const { site, frontmatter } = useData()
+const { home } = useBlogConfig()
+
+const name = computed(
+  () => (frontmatter.value.blog?.name ?? site.value.title) || home?.name || ''
+)
+const motto = computed(() => frontmatter.value.blog?.motto || home?.motto || '')
+const initInspiring = ref<string>(
+  frontmatter.value.blog?.inspiring || home?.inspiring || ''
+)
+const inspiring = computed({
+  get() {
+    return initInspiring.value
+  },
+  set(newValue) {
+    initInspiring.value = newValue
+  }
+})
+
+const homeConfig = useHomeConfig()
+
+const changeSlogan = async () => {
+  if (typeof homeConfig?.handleChangeSlogan !== 'function') {
+    return
+  }
+  const newSlogan = await homeConfig.handleChangeSlogan(inspiring.value)
+  if (typeof newSlogan !== 'string' || !newSlogan.trim()) {
+    return
+  }
+
+  // 重新渲染数据，同时触发动画
+  inspiring.value = ''
+  setTimeout(async () => {
+    inspiring.value = newSlogan
+  })
+}
+</script>
+<style lang="scss" scoped>
+h1 {
+  text-align: center;
+  .name {
+    transition: all 0.25s ease-in-out 0.04s;
+    transform: translateY(0px);
+    opacity: 1;
+    font-weight: bold;
+    margin: 0 auto;
+    font-size: 36px;
+  }
+
+  .motto {
+    position: relative;
+    bottom: 0px;
+    font-size: 14px;
+    margin-left: 10px;
+
+    &::before {
+      content: '- ';
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .motto {
+    display: none;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+.inspiring-wrapper {
+  margin: 16px 0;
+  height: 24px;
+  width: auto;
+  h2 {
+    animation: fade-in 0.5s ease-in-out;
+    cursor: pointer;
+    text-align: center;
+    font-size: 20px;
+    line-height: 1.6;
+  }
+}
+</style>

package/src/components/BlogHomeInfo.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import BlogHomeOverview from './BlogHomeOverview.vue'
+import BlogHotArticle from './BlogHotArticle.vue'
+import BlogHomeTags from './BlogHomeTags.vue'
+import BlogFriendLink from './BlogFriendLink.vue'
+</script>
+
+<template>
+  <div class="blog-info">
+    <!-- 统计数据，日后支持，点击筛选出左侧的数据 -->
+    <BlogHomeOverview />
+
+    <!-- 置顶的一些文章 -->
+    <BlogHotArticle />
+
+    <!-- 友链 -->
+    <BlogFriendLink />
+
+    <!-- 标签 -->
+    <BlogHomeTags />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.blog-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 240px;
+  position: relative;
+  box-sizing: border-box;
+}
+
+@media screen and (min-width: 767px) {
+  .blog-info {
+    max-width: 300px;
+  }
+}
+</style>

package/src/components/BlogHomeOverview.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="card overview-data">
+    <div class="overview-item">
+      <span class="count">{{ notHiddenArticles.length }}</span>
+      <span class="label">博客文章</span>
+    </div>
+    <div class="split"></div>
+    <div class="overview-item">
+      <span class="count">+{{ currentMonth?.length }}</span>
+      <span class="label">本月更新</span>
+    </div>
+    <div class="split"></div>
+    <div class="overview-item">
+      <span class="count">+{{ currentWeek?.length }}</span>
+      <span class="label">本周更新</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { isCurrentWeek } from '../utils'
+import { useArticles } from '../composables/config/blog'
+
+const docs = useArticles()
+const notHiddenArticles = computed(() => {
+  return docs.value.filter((v) => !v.meta.hidden)
+})
+const nowMonth = new Date().getMonth()
+const nowYear = new Date().getFullYear()
+const currentMonth = computed(() => {
+  return notHiddenArticles.value.filter((v) => {
+    const pubDate = new Date(v.meta?.date)
+    return pubDate?.getMonth() === nowMonth && pubDate.getFullYear() === nowYear
+  })
+})
+
+const currentWeek = computed(() => {
+  return notHiddenArticles.value.filter((v) => {
+    const pubDate = new Date(v.meta?.date)
+    return isCurrentWeek(pubDate)
+  })
+})
+</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);
+  }
+}
+
+.overview-data {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.split {
+  width: 1px;
+  opacity: 0.8;
+  height: 10px;
+  background-color: var(--badge-font-color);
+}
+
+.overview-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  margin: 0 10px;
+
+  .count {
+    font-size: 18px;
+  }
+
+  .label {
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--description-font-color);
+  }
+}
+</style>