Skip to content

feat(theme): allow footer and sidebar to be displayed at the same time #4532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
+20 −7
Open

feat(theme): allow footer and sidebar to be displayed at the same time #4532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8a9fcc3
feat(theme): allow footer and siderbar to be displayed at the same time
yuyinws Jan 31, 2025
9549edb
docs: update
yuyinws Jan 31, 2025
e2ac42e
feat: enable footer by frontmatter
yuyinws Jan 31, 2025
a60ead1
Merge branch 'main' into feat/footer-with-sidebar
yuyinws Feb 14, 2025
6414b5e
Merge branch 'main' into feat/footer-with-sidebar
yuyinws Mar 13, 2025
b990fe3
Merge branch 'main' into feat/footer-with-sidebar
yuyinws Apr 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion docs/en/reference/default-theme-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export interface Footer {

// The actual copyright text.
copyright?: string

// Whether to show the footer when the sidebar is visible.
showWithSidebar?: boolean
}
```

Expand All @@ -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.
:::

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

Expand Down
5 changes: 4 additions & 1 deletion docs/zh/reference/default-theme-footer.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ export interface Footer {

// 实际的版权文本
copyright?: string

// 是否在侧边栏可见时显示页脚
showWithSidebar?: boolean
}
```

Expand All @@ -40,7 +43,7 @@ export default {
只有内联元素可以在 `message` 和 `copyright` 中使用，因为它们渲染在 `<p>` 元素中。如果想添加块元素，请考虑使用 [`layout-bottom`](../guide/extending-default-theme#layout-slots) 插槽。
:::

请注意，当[侧边栏](./default-theme-sidebar)可见时，不会显示页脚。
默认情况下，当[侧边栏](./default-theme-sidebar)可见时，不会显示页脚。但可以通过在配置中设置 `showWithSidebar` 来更改此行为。

## frontmatter 配置 {#frontmatter-config}

Expand Down
16 changes: 11 additions & 5 deletions src/client/theme-default/components/VPFooter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,11 @@ const { hasSidebar } = useLayout()
</script>

<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">
<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>
Expand All @@ -24,10 +28,6 @@ const { hasSidebar } = useLayout()
background-color: var(--vp-c-bg);
}

.VPFooter.has-sidebar {
display: none;
}

.VPFooter :deep(a) {
text-decoration-line: underline;
text-underline-offset: 2px;
Expand All @@ -50,6 +50,12 @@ const { hasSidebar } = useLayout()
text-align: center;
}

@media (min-width: 960px) {
.has-sidebar .container {
padding-left: var(--vp-sidebar-width);
}
}

.message,
.copyright {
line-height: 24px;
Expand Down
1 change: 1 addition & 0 deletions types/default-theme.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,7 @@ export namespace DefaultTheme {
export interface Footer {
message?: string
copyright?: string
showWithSidebar?: boolean
}

// team ----------------------------------------------------------------------
Expand Down
Loading