Merge pull request #7 from ChangJun2019/dev

components/HomeGallery.vue

@@ -4,11 +4,11 @@
 <template>
   <div class="grid grid-cols-2 animate-zoom-in-right gap-4">
     <div class="grid gap-4">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="https://file.52chinaweb.com/2023/08/blog-home-we.jpeg" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-we.jpg" alt="">
     </div>
     <div class="grid gap-4">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="https://file.52chinaweb.com/2023/08/website-home-max.jpg" alt="">
-      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="https://file.52chinaweb.com/2023/08/wangzai.jpg" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-max.jpg" alt="">
+      <img class="aspect-auto w-full rounded-lg hover:animate-wobble" src="/images/blog-home-wangzai.jpg" alt="">
     </div>
   </div>
 </template>

layouts/content.vue

@@ -10,6 +10,10 @@
         <UButton to="/blog" variant="outline" class="mt-6 not-prose">
           Go Back
         </UButton>
+
+        <p class="c-text-muted">
+          🌟 如果觉着这篇内容对你有所帮助，可以去 <a href="/sponsors" target="_blank">投喂</a> 旺仔和 Max 一点好吃（🍗🥩）的，他们一定会很开心的。
+        </p>
       </main>
       <Footer />
       <PostBackTop />

layouts/empty.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <AppLayout>
+    <slot />
+  </AppLayout>
+</template>

pages/sponsors.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+definePageMeta({
+  documentDriven: false,
+  layout: 'empty',
+})
+</script>
+
+<template>
+  <div>
+    <NuxtLayout>
+      <section>
+        <div class="container px-6 py-8 mx-auto">
+          <div class="lg:flex lg:space-x-16 lg:item-center">
+            <div class="lg:w-1/2 flex flex-col prose prose-slate dark:prose-invert tracking-wide">
+              <p>🌟 如果觉得这些内容对你有帮助，可以投喂旺仔和 Max 一点好吃的。 🍗🥩</p>
+              <img class="rounded-lg" src="/images/0-sponsors.png" alt="Alipay and Wechat collection codes">
+            </div>
+            <div class="mt-8 lg:mt-0 lg:w-1/2">
+              <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4">
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-1.jpg" alt="" loading="lazy">
+                  </div>
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-3.jpg" alt="" loading="lazy">
+                  </div>
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-5.jpg" alt="" loading="lazy">
+                  </div>
+                </div>
+                <div class="grid gap-4">
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-2.jpg" alt="" loading="lazy">
+                  </div>
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-6.jpg" alt="" loading="lazy">
+                  </div>
+                  <div>
+                    <img class="h-auto max-w-full rounded-lg animate-fade-in" src="/images/sponsors-4.jpg" alt="" loading="lazy">
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </NuxtLayout>
+  </div>
+</template>