-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
570 additions
and
410 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,5 @@ | ||
| import type { FooterData } from '@theojs/lumen' | ||
|
|
||
| export const Footer_Data: FooterData = { | ||
| author: { name: 'ikenxuan', link: 'https://github.com/ikenxuan' }, | ||
| group: [ | ||
| { | ||
| title: '框架', | ||
| icon: 'fa-solid fa-robot', | ||
| links: [ | ||
| { name: 'Karin', href: 'https://github.com/Karinjs/Karin' }, | ||
| ] | ||
| }, | ||
| { | ||
| title: '相关链接', | ||
| icon: 'fab fa-github', | ||
| links: [ | ||
| { name: 'ICQQ', href: 'https://github.com/icqqjs/icqq' }, | ||
| { name: '插件库', href: 'https://plugin.karin.fun' }, | ||
| { name: '解析库', href: 'https://github.com/ikenxuan/amagi' } | ||
| ] | ||
| }, | ||
| ] | ||
| author: { name: 'ikenxuan', link: 'https://github.com/ikenxuan' } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <script setup lang="ts"> | ||
| import { Icon } from '@iconify/vue' | ||
| /** DocPill 接口 */ | ||
| interface Pill { | ||
| /** Pill 名称。 */ | ||
| name: string | ||
| /** Pill 链接。 */ | ||
| link: string | ||
| /** 图标名称，支持 `iconify`。 */ | ||
| icon?: string | { light: string; dark: string } | ||
| /** 图标的颜色。 */ | ||
| color?: string | { light: string; dark: string } | ||
| /** 图片地址或包含 light 和 dark 模式的对象。 */ | ||
| image?: string | { light: string; dark: string } | ||
| /** 是否加粗。 */ | ||
| bold?: boolean | ||
| } | ||
| /** | ||
| * 检查链接是否为外部链接。 | ||
| * | ||
| * @param link - 要判断的链接字符串。 | ||
| * @returns 如果链接是外部链接，则返回 `true`，否则返回 `false`。 | ||
| */ | ||
| const isExternal = (link: string): boolean => | ||
| /^(?:[a-z]+:|\/\/)/i.test(link) | ||
| const pill = defineProps<Pill>() | ||
| </script> | ||
|
|
||
| <template> | ||
| <a class="link" :class="{ 'bold': pill.bold }" :href="pill.link" :title="pill.name" :aria-label="pill.name" | ||
| :target="isExternal(pill.link) ? '_blank' : '_self'" rel="noopener noreferrer"> | ||
| <template v-if="pill.icon"> | ||
| <Icon v-if="typeof pill.icon === 'object'" class="iconify light-only" :icon="pill.icon.light" :style="{ | ||
| color: typeof pill.color === 'object' ? pill.color.light : pill.color | ||
| }" :alt="pill.name" aria-hidden="true" /> | ||
| <Icon v-if="typeof pill.icon === 'object'" class="iconify dark-only" :icon="pill.icon.dark" :style="{ | ||
| color: typeof pill.color === 'object' ? pill.color.dark : pill.color | ||
| }" :alt="pill.name" aria-hidden="true" /> | ||
| <Icon v-else class="iconify" :icon="pill.icon" :style="{ color: pill.color }" :alt="pill.name" | ||
| aria-hidden="true" /> | ||
| </template> | ||
| <template v-else-if="pill.image"> | ||
| <img v-if="typeof pill.image === 'object'" class="icon light-only" :src="pill.image.light" :alt="pill.name" | ||
| loading="lazy" aria-hidden="true" /> | ||
| <img v-if="typeof pill.image === 'object'" class="icon dark-only" :src="pill.image.dark" :alt="pill.name" | ||
| loading="lazy" aria-hidden="true" /> | ||
| <img v-else class="icon" :src="pill.image" :alt="pill.name" loading="lazy" aria-hidden="true" /> | ||
| </template> | ||
| <span class="name">{{ pill.name }}</span> | ||
| </a> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| /** | ||
| * 处理不同模式下的图标显示：暗色模式下隐藏浅色图标，浅色模式下隐藏暗色图标。 | ||
| */ | ||
| :root:not(.dark) .dark-only, | ||
| :root:is(.dark) .light-only { | ||
| display: none; | ||
| } | ||
| .link { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| gap: 0.25rem; | ||
| transform: translateY(1px); | ||
| transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); | ||
| border: 1px solid transparent; | ||
| border-radius: 0.5rem; | ||
| background-color: var(--pill-bg); | ||
| padding: 0.75rem 0.25rem; | ||
| height: 1rem; | ||
| text-decoration: none !important; | ||
| white-space: nowrap; | ||
| } | ||
| .link:hover { | ||
| transform: translateY(-1px); | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| border-color: var(--vp-c-brand-1); | ||
| background-color: var(--vp-c-brand-soft); | ||
| } | ||
| .link:active { | ||
| transform: scale(0.9); | ||
| } | ||
| .bold { | ||
| font-weight: bold; | ||
| } | ||
| .icon { | ||
| height: 1em; | ||
| } | ||
| .iconify { | ||
| flex-shrink: 0; | ||
| color: var(--vp-c-text-1); | ||
| font-size: 1em; | ||
| } | ||
| .name { | ||
| font-size: 1rem; | ||
| letter-spacing: 0.05rem; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!-- .vitepress/theme/Layout.vue --> | ||
| <!-- https://vitepress.dev/guide/extending-default-theme#using-view-transitions-api --> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { useData } from 'vitepress' | ||
| import DefaultTheme from 'vitepress/theme' | ||
| import { nextTick, provide } from 'vue' | ||
|
|
||
| // 页面分享按钮、首页公告栏、页脚 | ||
| import { ShareButton, Announcement, HomeFooter } from '@theojs/lumen' | ||
| import { Footer_Data } from '../../data/fooertData.ts' | ||
| // 顶级的阅读增强，页面右上角小书本 | ||
| import { | ||
| NolebaseEnhancedReadabilitiesMenu, | ||
|
|
||
| } from '@nolebase/vitepress-plugin-enhanced-readabilities/client' | ||
| // 闪烁高亮当前目标标题 | ||
| import { | ||
| NolebaseHighlightTargetedHeading, | ||
| } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client' | ||
|
|
||
| const { isDark } = useData() | ||
|
|
||
| const enableTransitions = () => | ||
| 'startViewTransition' in document && | ||
| window.matchMedia('(prefers-reduced-motion: no-preference)').matches | ||
|
|
||
| provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => { | ||
| if (!enableTransitions()) { | ||
| isDark.value = !isDark.value | ||
| return | ||
| } | ||
|
|
||
| const clipPath = [ | ||
| `circle(0px at ${x}px ${y}px)`, | ||
| `circle(${Math.hypot( | ||
| Math.max(x, innerWidth - x), | ||
| Math.max(y, innerHeight - y) | ||
| )}px at ${x}px ${y}px)` | ||
| ] | ||
|
|
||
| await document.startViewTransition(async () => { | ||
| isDark.value = !isDark.value | ||
| await nextTick() | ||
| }).ready | ||
|
|
||
| document.documentElement.animate( | ||
| { clipPath: isDark.value ? clipPath.reverse() : clipPath }, | ||
| { | ||
| duration: 300, | ||
| easing: 'ease-in', | ||
| pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)` | ||
| } | ||
| ) | ||
| }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <DefaultTheme.Layout> | ||
| <!-- 顶级的阅读增强，页面右上角小书本 --> | ||
| <template #nav-bar-content-after> | ||
| <NolebaseEnhancedReadabilitiesMenu /> | ||
| </template> | ||
| <template #nav-screen-content-after> | ||
| <NolebaseEnhancedReadabilitiesScreenMenu /> | ||
| </template> | ||
| <!-- 页面分享按钮 --> | ||
| <template #aside-outline-before> | ||
| <ShareButton /> | ||
| </template> | ||
| <!-- 闪烁高亮当前目标标题 --> | ||
| <template #layout-top> | ||
| <NolebaseHighlightTargetedHeading /> | ||
| </template> | ||
| <template #home-hero-info-before> | ||
| <Announcement /> | ||
| </template> | ||
| <!-- 页脚 --> | ||
| <template #layout-bottom> | ||
| <HomeFooter :Footer_Data="Footer_Data" /> | ||
| </template> | ||
|
|
||
| </DefaultTheme.Layout> | ||
| </template> | ||
|
|
||
| <style> | ||
| ::view-transition-old(root), | ||
| ::view-transition-new(root) { | ||
| animation: none; | ||
| mix-blend-mode: normal; | ||
| } | ||
|
|
||
| ::view-transition-old(root), | ||
| .dark::view-transition-new(root) { | ||
| z-index: 1; | ||
| } | ||
|
|
||
| ::view-transition-new(root), | ||
| .dark::view-transition-old(root) { | ||
| z-index: 9999; | ||
| } | ||
|
|
||
| .VPSwitchAppearance { | ||
| width: 22px !important; | ||
| } | ||
|
|
||
| .VPSwitchAppearance .check { | ||
| transform: none !important; | ||
| } | ||
| </style> |
Oops, something went wrong.