feat(home-links): support custom pictures.

Theo-Messi · Jan 13, 2025 · bfd3f6d · bfd3f6d
1 parent 1540347
commit bfd3f6d
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git a/docs/.vitepress/configs/socialLinks.ts b/docs/.vitepress/configs/socialLinks.ts
@@ -22,7 +22,7 @@ export const socialLinks: DefaultTheme.SocialLink[] = [
     icon: {
       svg: '<iconify-icon icon="twemoji:red-heart" style="font-size:1.2em" alt="Github Sponsors"></iconify-icon>'
     },
-    link: 'https://github.com/sponsors/Theo-Messi',
+    link: 'https://i.theojs.cn/docs/202405201759098.webp',
     ariaLabel: 'Github Sponsors'
   }
 ]
diff --git a/docs/.vitepress/data/AsideData.ts b/docs/.vitepress/data/AsideData.ts
@@ -43,7 +43,7 @@ export const Aside_Data: AsideItem[] = [
     activity: '飞兔云'
   },
   {
-    link: 'https://github.com/sponsors/Theo-Messi',
+    link: 'https://i.theojs.cn/docs/202405201759098.webp',
     icon: 'twemoji:red-heart',
     name: '赞助我的项目'
   },

diff --git a/docs/index.md b/docs/index.md
@@ -42,9 +42,9 @@ hero:
 
     - theme: sponsor
       text: ✨ 成为赞助商
-      link: https://github.com/sponsors/Theo-Messi
+      link: https://i.theojs.cn/docs/202405201759098.webp
 
-    - theme: lumen theo
+    - theme: custom-alt
       text: 玄学宝典
       link: https://xx.theojs.cn
 

diff --git a/src/theme/components-var.css b/src/theme/components-var.css
@@ -112,6 +112,13 @@
   --ShareButton-bg-hover: var(--vp-c-brand-soft);
   --ShareButton-border-hover: var(--vp-c-brand-1);
   --ShareButton-icon: var(--vp-c-brand-1);
+
+  /**
+  * Home-links
+  * -------------------------------------------------------------------------- */
+
+  --Home-links-custom-brand: url('https://i.theojs.cn/avatar.webp');
+  --Home-links-custom-alt: url('https://i.theojs.cn/avatar.webp');
 }
 
 .dark {

diff --git a/src/theme/home-links.css b/src/theme/home-links.css
@@ -1,33 +1,60 @@
 /**
  * Component: home-links
  * -------------------------------------------------------------------------- */
+a.custom-brand {
+  border-color: var(--vp-button-brand-border);
+  background-color: var(--vp-button-brand-bg);
+  color: var(--vp-button-brand-text);
+}
+
+a.custom-brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  background-color: var(--vp-button-brand-hover-bg);
+  color: var(--vp-button-brand-hover-text);
+}
+
+a.custom-brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  background-color: var(--vp-button-brand-active-bg);
+  color: var(--vp-button-brand-active-text);
+}
 
-a.lumen {
+a.custom-brand::before {
+  display: inline-block;
+  transform: translateY(7px);
+  margin-right: 0.5em;
+  background-image: var(--Home-links-custom-brand);
+  background-position: bottom;
+  background-size: 1.5rem;
+  background-repeat: no-repeat;
+  width: 1.5rem;
+  height: 1.5rem;
+  content: '';
+}
+
+a.custom-alt {
   border-color: var(--vp-button-alt-border);
   background-color: var(--vp-button-alt-bg);
   color: var(--vp-button-alt-text);
-  font-size: 16px;
-  line-height: 46px;
-  text-align: center;
 }
 
-a.lumen:hover {
+a.custom-alt:hover {
   border-color: var(--vp-button-alt-hover-border);
   background-color: var(--vp-button-alt-hover-bg);
   color: var(--vp-button-alt-hover-text);
 }
 
-a.lumen:active {
+a.custom-alt:active {
   border-color: var(--vp-button-alt-active-border);
   background-color: var(--vp-button-alt-active-bg);
   color: var(--vp-button-alt-active-text);
 }
 
-a.lumen.theo::before {
+a.custom-alt::before {
   display: inline-block;
   transform: translateY(7px);
   margin-right: 0.5em;
-  background-image: url('https://i.theojs.cn/avatar.webp');
+  background-image: var(--Home-links-custom-alt);
   background-position: bottom;
   background-size: 1.5rem;
   background-repeat: no-repeat;
@@ -36,16 +63,9 @@ a.lumen.theo::before {
   content: '';
 }
 
-@keyframes ping {
-  15%,
-  to {
-    transform: scale(1.25, 2);
-    opacity: 0;
-  }
-}
-
 @media (max-width: 420px) {
-  a.lumen.theo {
+  a.custom-alt,
+  a.custom-brand {
     display: block;
     margin-right: 8px;
     margin-left: 8px;