feat(docs): replace logo with SVG and update navigation styling
- Replace PNG logo with high-definition SVG version for better quality and scalability - Update navigation to use logo image instead of text title for improved branding - Add custom styling for logo display in navigation bar - Exclude navigation logo from automatic image styling rules - Update sitemap timestamps to reflect recent changes
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import { useData, useRoute } from 'vitepress'
|
||||
import { useData, useRoute, withBase } from 'vitepress'
|
||||
import TextType from './components/TextType.vue'
|
||||
import GitHubStars from './components/GitHubStars.vue'
|
||||
import { onMounted, ref, watch, computed } from 'vue'
|
||||
@@ -11,6 +11,13 @@ import easyVibePaths from './data/easyVibePaths.json'
|
||||
const { frontmatter } = useData()
|
||||
const route = useRoute()
|
||||
|
||||
const openWelcomeFromWordmark = () => {
|
||||
const currentPath = window.location.pathname
|
||||
window.location.href = withBase(
|
||||
`/welcome/?next=${encodeURIComponent(currentPath)}`
|
||||
)
|
||||
}
|
||||
|
||||
const homeTaglineTyping = {
|
||||
typingSpeed: 45,
|
||||
initialDelay: 0,
|
||||
@@ -418,9 +425,12 @@ watch(sidebarCollapsed, (collapsed) => {
|
||||
</ClientOnly>
|
||||
</template>
|
||||
<template #home-hero-info-before>
|
||||
<div
|
||||
<button
|
||||
v-if="frontmatter.layout === 'home'"
|
||||
class="vp-home-wordmark"
|
||||
type="button"
|
||||
aria-label="打开欢迎页"
|
||||
@click="openWelcomeFromWordmark"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 460 220"
|
||||
@@ -447,7 +457,7 @@ watch(sidebarCollapsed, (collapsed) => {
|
||||
class="vp-home-wordmark-path"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
<template #home-hero-info-after>
|
||||
<div
|
||||
@@ -493,6 +503,16 @@ watch(sidebarCollapsed, (collapsed) => {
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.VPNavBarTitle .VPImage.logo,
|
||||
.VPNavBarTitle .logo {
|
||||
width: 84px !important;
|
||||
height: 40px !important;
|
||||
max-width: 84px !important;
|
||||
max-height: 40px !important;
|
||||
object-fit: contain;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 隐藏默认的 tagline,因为我们用打字机效果替代了它 */
|
||||
.VPHomeHero .tagline {
|
||||
display: none !important;
|
||||
@@ -542,6 +562,11 @@ watch(sidebarCollapsed, (collapsed) => {
|
||||
justify-content: center;
|
||||
margin-top: -12px;
|
||||
margin-bottom: 18px;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
.vp-home-wordmark-svg {
|
||||
width: min(380px, 52vw);
|
||||
|
||||
@@ -1650,11 +1650,6 @@ const topPromoStyle = computed(() => {
|
||||
}
|
||||
})
|
||||
|
||||
const replayIntro = () => {
|
||||
const currentPath = window.location.pathname
|
||||
router.go(withBase(`/welcome/?next=${encodeURIComponent(currentPath)}`))
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const introDuration = 1800
|
||||
const colorDelay = 500
|
||||
@@ -1920,13 +1915,19 @@ const appendixCards = [
|
||||
<nav class="sticky-nav glass">
|
||||
<div class="nav-content">
|
||||
<div class="nav-cluster">
|
||||
<button
|
||||
<div
|
||||
class="nav-title"
|
||||
type="button"
|
||||
@click="replayIntro"
|
||||
:aria-label="t.nav.title"
|
||||
>
|
||||
{{ t.nav.title }}
|
||||
</button>
|
||||
<img
|
||||
class="nav-title-logo"
|
||||
:src="withBase('/assets/easy-vibe-logo-hd.svg')"
|
||||
:alt="t.nav.title"
|
||||
width="64"
|
||||
height="30"
|
||||
draggable="false"
|
||||
>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<button
|
||||
:class="{ active: activeTab === 'home' }"
|
||||
@@ -2346,16 +2347,27 @@ a {
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-1) !important;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: -0.008em;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-title-logo {
|
||||
display: block;
|
||||
max-width: 64px !important;
|
||||
max-height: 30px !important;
|
||||
height: 30px !important;
|
||||
width: 64px !important;
|
||||
min-width: 64px;
|
||||
min-height: 30px;
|
||||
object-fit: contain;
|
||||
flex: 0 0 auto;
|
||||
filter: grayscale(1) brightness(0.28) contrast(1.05);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
||||
@@ -1787,6 +1787,7 @@ export default {
|
||||
}
|
||||
|
||||
const applyImageStyle = (img) => {
|
||||
if (img.classList.contains('nav-title-logo')) return
|
||||
const { naturalWidth, naturalHeight } = img
|
||||
if (!naturalWidth || !naturalHeight) return
|
||||
|
||||
|
||||
Reference in New Issue
Block a user