feat(theme): add signdown frontmatter for home page (#691)

* signdow 参数添加 是否显示向下箭头标志

* VPSignDown components add.

* Delete the wrongly modified code.

* feat(theme): signdown parameter adds whether to display a downward arrow flag

* feat(theme): signdown marks are changed to be fixed

---------

Co-authored-by: wb_huyunan <wb_huyunan@kuaishou.com>

docs/notes/theme/config/frontmatter/basic.md

@@ -99,6 +99,14 @@ permalink: /config/frontmatter/basic/
 
   当前文章是否 显示 回到顶部 的按钮。
 
+### signDown
+
+- 类型： `boolean`
+- 默认值： `false`
+- 详情：
+
+  当前文章是否 显示 向下前头 的标志。
+
 ### comments
 
 - 类型： `boolean`

theme/src/client/components/VPSignDown.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import type { ThemeHomeConfig } from 'theme/src/shared/index.js'
+import { useElementSize, useWindowSize } from '@vueuse/core'
+import { computed, onMounted, shallowRef } from 'vue'
+import { useData } from '../composables/index.js'
+
+const body = shallowRef<HTMLElement | null>()
+const { height: bodyHeight } = useElementSize(body)
+const { height: windowHeight } = useWindowSize()
+onMounted(() => {
+  body.value = document.body
+})
+
+const { page, isDark } = useData()
+
+const mustHidden = computed(() => {
+  if (page.value.frontmatter.signDown !== true || page.value.frontmatter.pageLayout !== 'home' || !page.value.frontmatter.config) {
+    return true
+  }
+  const homeConfig = page.value.frontmatter.config as ThemeHomeConfig[]
+  if (homeConfig.length <= 1 || homeConfig[0].full !== true) {
+    return true
+  }
+  return false
+})
+
+const show = computed(() => {
+  if (bodyHeight.value < windowHeight.value)
+    return false
+  else
+    return true
+})
+</script>
+
+<template>
+  <svg v-show="!mustHidden && show" aria-label="sign down" class="vp-sign-down" :class="{ 'vp-sign-down-dark': isDark }" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="currentColor" fill-rule="evenodd" clip-rule="evenodd">
+      <path d="M16.884 5.348a1.25 1.25 0 0 1 0 1.768L12 12L7.116 7.116a1.25 1.25 0 0 1 1.768-1.768L12 8.464l3.116-3.116a1.25 1.25 0 0 1 1.768 0" />
+      <path d="M16.884 12.366a1.25 1.25 0 0 1 0 1.768L12 19.018l-4.884-4.884a1.25 1.25 0 0 1 1.768-1.768L12 15.482l3.116-3.116a1.25 1.25 0 0 1 1.768 0" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+@keyframes top-bot {
+  0%,
+  100% {
+    transform: translate(0, -15px);
+  }
+
+  50% {
+    transform: translate(0, 0);
+  }
+}
+
+.vp-sign-down {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  z-index: 100;
+  width: 26px;
+  height: 26px;
+  color: white;
+  opacity: 0.8;
+  transform: translate(-50%, 0);
+  animation: top-bot 3s infinite;
+}
+
+.vp-sign-down-dark {
+  color: gray;
+}
+
+@media (min-width: 768px) {
+  .vp-sign-down {
+    bottom: 10px;
+    width: 34px;
+    height: 34px;
+  }
+}
+
+@media print {
+  .vp-sign-down {
+    display: none;
+  }
+}
+</style>

theme/src/client/layouts/Layout.vue

@@ -8,6 +8,7 @@ import VPEncryptGlobal from '@theme/VPEncryptGlobal.vue'
 import VPFooter from '@theme/VPFooter.vue'
 import VPLocalNav from '@theme/VPLocalNav.vue'
 import VPSidebar from '@theme/VPSidebar.vue'
+import VPSignDown from '@theme/VPSignDown.vue'
 import VPSkipLink from '@theme/VPSkipLink.vue'
 import { watch } from 'vue'
 import { useRoute } from 'vuepress/client'
@@ -199,6 +200,7 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
         </VPContent>
       </slot>
       <VPBackToTop />
+      <VPSignDown />
       <VPFooter>
         <template #footer-content>
           <slot name="footer-content" />

theme/src/shared/frontmatter/normal.ts

@@ -40,6 +40,13 @@ export type ThemeNormalFrontmatter = PageFrontmatter<{
    */
   backToTop?: boolean
 
+  /**
+   * 是否显示向下箭头标志
+   *
+   * @default false
+   */
+  signDown?: boolean
+
   /**
    * 当前页面是否显示 外部链接图标
    *