fix(theme): fix page cover

vuepress-theme-hope · Jan 6, 2024 · 47dcc5c · 47dcc5c
1 parent 46cc1c5
commit 47dcc5c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/packages/theme/src/client/components/NormalPage.ts b/packages/theme/src/client/components/NormalPage.ts
@@ -1,4 +1,4 @@
-import { usePageData, usePageFrontmatter, withBase } from "@vuepress/client";
+import { usePageFrontmatter, withBase } from "@vuepress/client";
 import type { ComponentOptions, SlotsType, VNode } from "vue";
 import { computed, defineComponent, h, resolveComponent } from "vue";
 import { RenderDefault, hasGlobalComponent } from "vuepress-shared/client";
@@ -32,7 +32,6 @@ export default defineComponent({
 
   setup(_props, { slots }) {
     const frontmatter = usePageFrontmatter<ThemeNormalPageFrontmatter>();
-    const page = usePageData();
     const { isDarkmode } = useDarkmode();
     const themeLocale = useThemeLocaleData();
 
@@ -53,12 +52,15 @@ export default defineComponent({
           () => [
             slots.top?.(),
             frontmatter.value.cover
-              ? h("img", {
-                  class: "page-cover",
-                  src: withBase(frontmatter.value.cover),
-                  alt: page.value.title,
-                  "no-view": "",
-                })
+              ? h(
+                  "div",
+                  { class: "page-cover" },
+                  h("img", {
+                    src: withBase(frontmatter.value.cover),
+                    alt: "",
+                    "no-view": "",
+                  }),
+                )
               : null,
             h(BreadCrumb),
             h(PageTitle),

diff --git a/packages/theme/src/client/styles/page.scss b/packages/theme/src/client/styles/page.scss
@@ -13,25 +13,21 @@
 }
 
 .page-cover {
-  object-fit: cover;
-  width: calc(100% + 2rem);
-  max-height: 25vh;
-  margin-inline-start: -2rem;
+  width: var(--content-width);
+  margin-inline: auto;
 
   @media (max-width: hope-config.$tablet) {
     width: 100%;
-    margin: 0;
-    border-radius: 0;
   }
 
-  @media (min-width: hope-config.$pc) {
-    width: calc(100% - 2rem);
-    margin: 0 1rem;
+  img {
+    object-fit: cover;
+    width: 100%;
+    max-height: 25vh;
     border-radius: 0.5rem;
-  }
 
-  .sidebar-collapsed {
-    width: 100%;
-    margin-inline-start: 0;
+    @media (max-width: hope-config.$tablet) {
+      border-radius: 0;
+    }
   }
 }