pull/4532/merge
Leo 3 weeks ago committed by GitHub
commit 753d79dccb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -20,6 +20,9 @@ export interface Footer {
// The actual copyright text. // The actual copyright text.
copyright?: string copyright?: string
// Whether to show the footer when the sidebar is visible.
showWithSidebar?: boolean
} }
``` ```
@ -40,7 +43,7 @@ export default {
Only inline elements can be used in `message` and `copyright` as they are rendered inside a `<p>` element. If you want to add block elements, consider using [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead. Only inline elements can be used in `message` and `copyright` as they are rendered inside a `<p>` element. If you want to add block elements, consider using [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead.
::: :::
Note that footer will not be displayed when the [SideBar](./default-theme-sidebar) is visible. By default, the footer will not be displayed when the [SideBar](./default-theme-sidebar) is visible. But you can change this behavior by setting `showWithSidebar` to `true` in the configuration.
## Frontmatter Config ## Frontmatter Config

@ -20,6 +20,9 @@ export interface Footer {
// 实际的版权文本 // 实际的版权文本
copyright?: string copyright?: string
// 是否在侧边栏可见时显示页脚
showWithSidebar?: boolean
} }
``` ```
@ -40,7 +43,7 @@ export default {
只有内联元素可以在 `message``copyright` 中使用,因为它们渲染在 `<p>` 元素中。如果想添加块元素,请考虑使用 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 插槽。 只有内联元素可以在 `message``copyright` 中使用,因为它们渲染在 `<p>` 元素中。如果想添加块元素,请考虑使用 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 插槽。
::: :::
请注意,当[侧边栏](./default-theme-sidebar)可见时,不会显示页脚。 默认情况下,当[侧边栏](./default-theme-sidebar)可见时,不会显示页脚。但可以通过在配置中设置 `showWithSidebar` 来更改此行为。
## frontmatter 配置 {#frontmatter-config} ## frontmatter 配置 {#frontmatter-config}

@ -7,7 +7,11 @@ const { hasSidebar } = useLayout()
</script> </script>
<template> <template>
<footer v-if="theme.footer && frontmatter.footer !== false" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }"> <footer
v-if="theme.footer && frontmatter.footer !== false && (!hasSidebar || theme.footer.showWithSidebar || frontmatter.footer)"
class="VPFooter"
:class="{ 'has-sidebar': hasSidebar }"
>
<div class="container"> <div class="container">
<p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p> <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
<p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p> <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
@ -24,10 +28,6 @@ const { hasSidebar } = useLayout()
background-color: var(--vp-c-bg); background-color: var(--vp-c-bg);
} }
.VPFooter.has-sidebar {
display: none;
}
.VPFooter :deep(a) { .VPFooter :deep(a) {
text-decoration-line: underline; text-decoration-line: underline;
text-underline-offset: 2px; text-underline-offset: 2px;
@ -50,6 +50,12 @@ const { hasSidebar } = useLayout()
text-align: center; text-align: center;
} }
@media (min-width: 960px) {
.has-sidebar .container {
padding-left: var(--vp-sidebar-width);
}
}
.message, .message,
.copyright { .copyright {
line-height: 24px; line-height: 24px;

@ -324,6 +324,7 @@ export namespace DefaultTheme {
export interface Footer { export interface Footer {
message?: string message?: string
copyright?: string copyright?: string
showWithSidebar?: boolean
} }
// team ---------------------------------------------------------------------- // team ----------------------------------------------------------------------

Loading…
Cancel
Save