升级博客程序为v2

.github/workflows/build-deploy.yml

@@ -30,33 +30,4 @@ jobs:
           ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # toKen私密变量
         with:
           folder: docs/.vuepress/dist
-          branch: gh-pages # 部署到的分支
-
-  test_website:
-    needs: deploy
-    runs-on: ubuntu-20.04
-    steps:
-      - name: Test Connect
-        run: |
-          curl https://eryajf.github.io/HowToStartOpenSource/ --connect-timeout 5
-          curl https://ms-d5d5d07c4cab-1961.sgp.meilisearch.io/health --connect-timeout 5
-
-  scrape-docs:
-    needs: test_website
-    runs-on: ubuntu-20.04
-    steps:
-        - uses: actions/checkout@v2
-        - uses: actions/setup-node@v2
-          with:
-              node-version: 14
-              registry-url: https://registry.npmjs.org/
-        - name: Run docs-scraper
-          env:
-              API_KEY: ${{ secrets.MEILISEARCH_API_KEY }}
-              CONFIG_FILE_PATH: ${{ github.workspace }}/docs/.vuepress/public/data/docs-scraper-config.json
-          run: |
-              docker run -t --rm \
-                -e MEILISEARCH_HOST_URL="https://ms-d5d5d07c4cab-1961.sgp.meilisearch.io" \
-                -e MEILISEARCH_API_KEY=$API_KEY \
-                -v $CONFIG_FILE_PATH:/docs-scraper/config.json \
-                getmeili/docs-scraper:v0.12.7 pipenv run ./docs_scraper config.json
+          branch: gh-pages # 部署到的分支

.gitignore

@@ -1,19 +1,18 @@
+# vuepress
+docs/.vuepress/.cache
+docs/.vuepress/.temp
+docs/.vuepress/dist
+node_modules
+
 # npm
 package-lock.json
-node_modules
 
 # yarn
 yarn.lock
 
 # vscode
 .vscode
 
-# vuepress
-docs/.vuepress/dist
-
-# 百度链接推送
-urls.txt
-
 # mac
 .DS_Store
 yarn-error.log

docs/.vuepress/components/CustomBanner.vue

@@ -0,0 +1,91 @@
+<template>
+  <section class="banner-brand__wrapper" :style="{ ...bgImageStyle }">
+    <div class="banner-brand__content">
+      <h1 class="title" v-if="frontmatter?.customBanner?.title">{{ frontmatter?.customBanner?.title }}</h1>
+
+      <p class="description" v-if="frontmatter?.customBanner?.description">{{ frontmatter?.customBanner?.description }}</p>
+
+      <p class="tagline" v-if="frontmatter?.customBanner?.tagline">{{ frontmatter?.customBanner?.tagline }}</p>
+
+
+      <div class="btn-group" v-if="buttons.length > 0">
+        <Xicons
+          v-for="(btn, index) in buttons" :class="btn.type" :key="index"
+          :icon="btn.icon"
+          :text="btn.text"
+          :link="btn.link"
+          icon-size="18"
+          text-size="14"
+        />
+      </div>
+
+      <ul class="social-links" v-if="socialLinks.length > 0">
+        <li
+          class="social-item"
+          v-for="(item, index) in socialLinks"
+          :key="index"
+        >
+          <Xicons :icon="item.icon" :link="item.link" :style="{ color: item.color }" target="_blank" />
+        </li>
+      </ul>
+
+      <div class="shields-wrapper">
+        <img alt="GitHub license" src="https://img.shields.io/github/license/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="GitHub stars" src="https://img.shields.io/github/stars/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="GitHub forks" src="https://img.shields.io/github/forks/vuepress-reco/vuepress-theme-reco?style=flat-square&logo=github&color=616ae5">
+        <img alt="Npm downloads" src="https://img.shields.io/npm/dt/vuepress-theme-reco?style=flat-square&logo=npm&color=616ae5">
+        <img alt="GitHub package.json version (subfolder of monorepo)" src="https://img.shields.io/github/package-json/v/vuepress-reco/vuepress-theme-reco?filename=packages%2Fvuepress-theme-reco%2Fpackage.json&style=flat-square&color=616ae5&logo=npm">
+        <img alt="Npm version" src="https://img.shields.io/badge/tailwindcss-3.1.6-616ae5?style=flat-square&logo=tailwindcss"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { usePageFrontmatter, withBase } from '@vuepress/client'
+import Link from 'vuepress-theme-reco/lib/client/components/Link.vue'
+import { createOneColor } from 'vuepress-theme-reco/lib/client/utils'
+
+const frontmatter = usePageFrontmatter()
+
+const heroImage = computed(() => {
+  return frontmatter.value?.customBanner?.heroImage
+    ? withBase(frontmatter.value?.customBanner?.heroImage)
+    : null
+})
+
+const buttons = computed(() => {
+  return frontmatter.value?.customBanner?.buttons || []
+})
+
+const socialLinks = computed(() =>
+  (frontmatter.value?.customBanner?.socialLinks || []).map(item => {
+    if (!item.color) item.color = createOneColor()
+    return item
+  }))
+
+const heroImageStyle = computed(
+  () => frontmatter.value.customBanner.heroImageStyle || {}
+)
+
+const bgImageStyle = computed(() => {
+  const { bgImageStyle, bgImage } = frontmatter.value?.customBanner || {}
+
+  const initBgImageStyle = bgImage ? {
+    overflow: 'hidden',
+    background: `url(${withBase(bgImage)}) center/cover no-repeat`
+  } : {}
+
+  return bgImageStyle ? { ...initBgImageStyle, ...bgImageStyle } : initBgImageStyle
+})
+</script>
+
+<style scoped>
+.shields-wrapper {
+  @apply mt-20 text-left;
+  img {
+    @apply inline-block ml-0 mr-1 my-1 w-auto h-6 !important;
+  }
+}
+</style>

docs/.vuepress/components/Examples.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="examples__container">
+    <div
+      class="examples__item"
+      v-for="(item, index) in examplesOfCurrentPage"
+      :key="index"
+      :style="{ backgroundImage: `url(${item.thumbnail})`}"
+    >
+      <div
+        class="examples__item__btn"
+        :style="{ backgroundImage: `url(${item.avator})` }"
+      >
+        <span
+          class="btn--go"
+          @click="jumpLink(item.link)"
+        >Go</span>
+      </div>
+    </div>
+  </div>
+
+  <Pagation
+    :currentPage="currentPage"
+    :total="examplesData.length"
+    @change="handlePagation"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import examplesData from '../data/examples';
+import Pagation from 'vuepress-theme-reco/lib/client/components/Pagation.vue';
+
+const jumpLink = (link?: string) => {
+  if (link) {
+    window.open(link, '_blank')
+  }
+}
+
+const currentPage = ref(1)
+const perPage = 9
+const examplesOfCurrentPage = computed(() => {
+  const start = (currentPage.value - 1) * perPage
+  const end = currentPage.value * perPage
+
+  return (examplesData || []).slice(start, end)
+})
+
+let handlePagation = (page) => {
+  currentPage.value = page
+}
+// @ts-ignore
+if (!__VUEPRESS_SSR__) {
+  handlePagation = (page) => {
+    currentPage.value = page
+
+    setTimeout(() => {
+      window.scrollTo({ left: 0, top: 0, behavior: 'smooth' })
+    }, 100)
+  }
+}
+</script>
+
+<style scoped>
+@import '@vuepress-reco/tailwindcss-config/lib/client/styles/tailwindcss-base.css';
+
+.examples__container {
+  @apply flex flex-wrap;
+  .examples__item {
+    @apply relative w-full h-48 my-4 border-block overflow-hidden bg-cover bg-center;
+    @apply hover:border-0 hover:border-primary hover:shadow-2xl hover:shadow-reco-primary;
+    transition: box-shadow 0.4s;
+    @apply md:w-72 md:h-40;
+    &:nth-child(3n+2) {
+      @apply mx-0;
+      @apply md:mx-8;
+    }
+    &:hover {
+      .examples__item__btn {
+        @apply bottom-1/2 right-1/2 translate-y-1/2 translate-x-1/2 shadow shadow-reco-primary;
+        .btn--go {
+          @apply block;
+        }
+      }
+    }
+    .examples__item__btn {
+      @apply absolute right-4 bottom-4 w-10 h-10 overflow-hidden bg-cover bg-center;
+      @apply transition-all duration-500 ease-in-out;
+      border-radius: 50%;
+      .btn--go {
+        @apply hidden w-full h-full text-center leading-10 cursor-pointer bg-reco-primary text-reco-text-darkmode;
+        @apply hover:font-bold;
+      }
+    }
+  }
+}
+</style>