search

themusecatcher / vue-amazing-ui

Vue3 + TypeScript + Vite + Less 开发的常用基础 UI 组件库！如果好用，记得来颗 ⭐️⭐️ 哦 🫶🫶🫶
https://themusecatcher.github.io/vue-amazing-ui/
191 stars 30 forks source link

vitepress博客的header #2

Closed hr1201 closed 2 months ago

hr1201 commented 1 year ago

可以告诉我您的header是怎么实现透明，并且不会影响到其他页面吗，我也有尝试过使header透明，但是会使博客文章的标题被隐藏一部分。

以下是我在style.css中使用暴力方式将header隐藏： .VPContent { padding-top: 0 !important; }

image

themusecatcher commented 1 year ago

以下是我的代码，具体细节你自己看下吧

/**

:root { --vp-c-brand: #646cff; --vp-c-brand-light: #747bff; --vp-c-brand-lighter: #9499ff; --vp-c-brand-lightest: #bcc0ff; --vp-c-brand-dark: #535bf2; --vp-c-brand-darker: #454ce1; --vp-c-brand-dimm: rgba(100, 108, 255, 0.08); --c-brand: #646cff; --c-brand-light: #747bff; }

/**

:root { --vp-button-brand-border: var(--vp-c-brand-light); --vp-button-brand-text: var(--vp-c-white); --vp-button-brand-bg: var(--vp-c-brand); --vp-button-brand-hover-border: var(--vp-c-brand-light); --vp-button-brand-hover-text: var(--vp-c-white); --vp-button-brand-hover-bg: var(--vp-c-brand-light); --vp-button-brand-active-border: var(--vp-c-brand-light); --vp-button-brand-active-text: var(--vp-c-white); --vp-button-brand-active-bg: var(--vp-button-brand-bg); }

/**

:root { --vp-home-hero-name-color: transparent; --vp-home-hero-name-background: -webkit-linear-gradient( 120deg,

bd34fe30%,

41d1ff

);

--vp-home-hero-image-background-image: linear-gradient( -45deg,

bd34fe50%,

47caff50%

); --vp-home-hero-image-filter: blur(40px); }

@media (min-width: 640px) { :root { --vp-home-hero-image-filter: blur(56px); } }

@media (min-width: 960px) { :root { --vp-home-hero-image-filter: blur(72px); } }

/**

:root { --vp-custom-block-tip-border: var(--vp-c-brand); --vp-custom-block-tip-text: var(--vp-c-brand-darker); --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); }

.dark { --vp-custom-block-tip-border: var(--vp-c-brand); --vp-custom-block-tip-text: var(--vp-c-brand-lightest); --vp-custom-block-tip-bg: var(--vp-c-brand-dimm); }

/**

.DocSearch { --docsearch-primary-color: var(--vp-c-brand) !important; }

/**

/ Use lighter colors for links in dark mode for a11y. Also specify some classes twice to have higher specificity over scoped class data attribute. / .dark.vp-doca, .dark.vp-doca>code, .dark.VPNavBarMenuLink.VPNavBarMenuLink:hover, .dark.VPNavBarMenuLink.VPNavBarMenuLink.active, .dark.link.link:hover, .dark.link.link.active, .dark.edit-link-button.edit-link-button, .dark.pager-link.title { color: var(--vp-c-brand-lighter); }

.dark.vp-doca:hover, .dark.vp-doca>code:hover { color: var(--vp-c-brand-lightest); opacity: 1; } .vp-doca { text-decoration: none; font-weight: normal; } .vp-docp { margin: 0; } / Transition by color instead of opacity / .dark.vp-doc.custom-blocka { transition: color.25s; } a:hover { text-decoration: none!important; } summary { font-weight: 600; &:hover { cursor: pointer; color: var(--vp-c-brand-lighter); } } svg { fill: var(--vp-c-text-1); } h1 { // h1 标签渐变色文本 display: inline-block; -webkit-background-clip: text; background-clip: text; color: #0000; white-space: nowrap; background-image: linear-gradient(toright, #09c8ce, #eb2f96); margin-bottom: 20px; } html:not(.dark) .VPHome { background: url(/waterfall.jpg)no-repeatcenter; background-size: cover; min-height: 100vh; } html.dark.VPHome { background: url(/girl.jpg)no-repeatcenter; background-size: cover; min-height: 100vh; } .VPHero { .name, .text, .tagline { transition: transform .3scubic-bezier(0.18, 0.89, 0.32, 1.28); transform-origin: 0%50%; &:hover { transform: scale(1.2); } } .text { color: var(--vp-c-text-1); } .image-src { transition: transform .5scubic-bezier(0.18, 0.89, 0.32, 1.28); &:hover { transform: translate(-50%, -50%) scale(1.2); } } } .Layout { position: relative; .VPFooter { position: absolute; right: 0; left: 0; bottom: 0; border: none; background-color: transparent; text-align: center; padding: 24px32px; .container { display: inline-block; transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28); .message, .copyright { color: var(--vp-c-text-1); } &:hover { transform: scale(1.25); .message, .copyright { font-weight: 600; } } } } } .VPNavBar.fill:not(.has-sidebar) { border: none!important; background-color: transparent!important; } .VPNavBar { .curtain { display: none; } .content-body { pointer-events: none; border: none; background-color: transparent!important; } .VPNavBarSearch { pointer-events: none; } } .VPNavBarTitle.title { transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28); &:hover { transform: scale(1.1); color: #bd34fe; .VPImage { transform: scale(1.25); } } .VPImage { transition: transform .5scubic-bezier(0.18, 0.89, 0.32, 1.28); } } .VPButton { border-color: transparent!important; border-radius: 12px!important; } .VPButton.brand { font-weight: 700; border: none; background: linear-gradient(toright, #09c8ce, #e4c31b, #eb2f96); transition: all.25s; &:hover { background: linear-gradient(toright, #eb2f96, #09c8ce, #e4c31b); } } .VPButton.alt { background-color: transparent!important; transition: all.25s; &:hover { border-color: #41d1ff!important; box-shadow: 003px3pxrgba(65, 209, 255, .12); } } .VPSwitch { border-color: transparent!important; background-color: transparent!important; &:hover { border-color: #e4c31b!important; box-shadow: 003px3pxrgba(228, 195, 27, .12); } } .DocSearch-Button { border-radius: 12px; background-color: rgba(0, 0, 0, .36); transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28); &:hover { transform: scale(1.1); border-color: #bd34fe; background-color: rgba(0, 0, 0, .36); box-shadow: 003px3pxrgba(189, 52, 254, .12); .DocSearch-Search-Icon, .DocSearch-Button-Placeholder { color: #FFF; } } .DocSearch-Search-Icon, .DocSearch-Button-Placeholder { color: #FFF; } .DocSearch-Button-Keys { .DocSearch-Button-Key { color: #FFF; &::after { color: #FFF; } } } } .items { align-items: flex-start; } .grid-3 { cursor: pointer; transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28); .VPFeature { border-radius: 20px; border: none; background-color: rgba(0, 0, 0, .36); transition: all.25s; .icon, .title, .details { color: #FFF; transition: all.25s; } .details { color: rgba(255, 255, 255, .88); } .icon { border-radius: 50%; background-image: radial-gradient(circleat0%, #f669bb, #98e8de, #ffd666); } } &:hover { transform: scale(1.2); transform-origin: 50%, 50%; .VPFeature { border-color: #fbdf93; background: linear-gradient(toright, #09c8ce, #e4c31b, #eb2f96); box-shadow: 06px16px0rgba(0, 0, 0, .08), 03px6px-4pxrgba(0, 0, 0, .12), 09px28px8pxrgba(0, 0, 0, .05); .icon { background-image: radial-gradient(circleat0%, #ffd666, #f669bb, #98e8de); } } } } .VPLink.text { transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28); transform-origin: 0%50%; &:hover { transform: scale(1.1); font-weight: 600!important; } } .is-active.VPLink.text { transform: scale(1.1) cubic-bezier(0.18, 0.89, 0.32, 1.28); font-weight: 600!important; } .pager-link { border-radius: 12px!important; transition: all.25scubic-bezier(0.18, 0.89, 0.32, 1.28) !important; &:hover { transform: scale(1.05); box-shadow: 003px3pxrgba(100, 108, 255, .12); } } .tag-version { font-size: 16px; line-height: 1.5; font-weight: bold; padding: 4px8px; margin-left: 8px; border-radius: 12px; display: inline-block; vertical-align: top; margin-top: 2px; -webkit-background-clip: text; background-clip: text; color: #FFF; background: linear-gradient(toright, #41d1ff, #c41d7f); }

Mr.Dear

@.*** |

---- 回复的原邮件 ---- | 发件人 | @.> | | 发送日期 | 2023年09月22日 22:35 | | 收件人 | @.> | | 抄送人 | @.***> | | 主题 | [themusecatcher/vue-amazing-ui] vitepress博客的header (Issue #2) |

可以告诉我您的header是怎么实现透明，并且不会影响到其他页面吗，我也有尝试过使header透明，但是会使博客文章的标题被隐藏一部分。

以下是我在style.css中使用暴力方式将header隐藏： .VPContent { padding-top: 0 !important; }

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.***>

hr1201 commented 1 year ago

好的，谢谢