From bb9a4b5afb306eb5ff494c8dff2d7bc1da46eec5 Mon Sep 17 00:00:00 2001
From: Kuizuo <hi@kuizuo.cn>
Date: Thu, 28 Dec 2023 02:33:56 +0800
Subject: [PATCH] fix: unable to click title on image-mask

---
 ...47\224\250 python ddddocr \345\272\223.md" |  1 -
 src/css/custom.scss                           | 23 +++++++++++++++++++
 src/theme/BlogPostItem/Content/index.tsx      |  6 ++---
 src/theme/BlogPostItem/Footer/index.tsx       |  6 ++---
 .../BlogPostItem/Footer/styles.module.scss    | 15 ------------
 src/theme/BlogPostItem/Header/index.tsx       |  2 +-
 6 files changed, 29 insertions(+), 24 deletions(-)

diff --git "a/blog/program/Nest grpc \345\256\236\350\267\265\344\271\213\350\260\203\347\224\250 python ddddocr \345\272\223.md" "b/blog/program/Nest grpc \345\256\236\350\267\265\344\271\213\350\260\203\347\224\250 python ddddocr \345\272\223.md"
index a46e0bd4..e3a645d0 100644
--- "a/blog/program/Nest grpc \345\256\236\350\267\265\344\271\213\350\260\203\347\224\250 python ddddocr \345\272\223.md"	
+++ "b/blog/program/Nest grpc \345\256\236\350\267\265\344\271\213\350\260\203\347\224\250 python ddddocr \345\272\223.md"	
@@ -6,7 +6,6 @@ authors: kuizuo
 tags: [nest, grpc, python, ddddocr]
 keywords: [nest, grpc, python, ddddocr]
 description: 本文将使用 nest 通过 grpc 的方式来调用 python 的 ddddocr 库来识别验证码。
-image: https://img.kuizuo.cn/202307290823586.png
 ---
 
 我曾经写过一个项目 [ddddocr_server](https://github.com/kuizuo/ddddocr_server)，使用 fastapi 提供 http 接口，以此来调用 [ddddocr](https://github.com/sml2h3/ddddocr) 库。
diff --git a/src/css/custom.scss b/src/css/custom.scss
index 02e0146c..08e1de86 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -262,6 +262,25 @@ div[class^='announcementBar_'] {
   border-left: 3px solid #ff000080;
 }
 
+.readMore {
+  display: flex;
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 2px;
+
+  opacity: 0;
+
+  transition: 0.2s;
+
+  color: var(--ifm-link-color);
+  font-weight: 500;
+
+  a:hover {
+    text-decoration: none;
+  }
+}
+
 .blog-card {
   border-radius: var(--ifm-pagination-nav-border-radius);
   margin-top: 0;
@@ -269,6 +288,10 @@ div[class^='announcementBar_'] {
   background: var(--blog-item-background-color);
   box-shadow: var(--blog-item-shadow);
   padding: 1em 1.25em 0.75em;
+
+  &:hover .readMore {
+    opacity: 1;
+  }
 }
 
 .container-wrapper {
diff --git a/src/theme/BlogPostItem/Content/index.tsx b/src/theme/BlogPostItem/Content/index.tsx
index 02296bda..4a3011ac 100644
--- a/src/theme/BlogPostItem/Content/index.tsx
+++ b/src/theme/BlogPostItem/Content/index.tsx
@@ -5,10 +5,7 @@ import { useBlogPost } from '@docusaurus/theme-common/internal'
 import MDXContent from '@theme/MDXContent'
 import type { Props } from '@theme/BlogPostItem/Content'
 
-export default function BlogPostItemContent({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemContent({ children, className }: Props): JSX.Element {
   const { isBlogPostPage } = useBlogPost()
   return (
     <div
@@ -16,6 +13,7 @@ export default function BlogPostItemContent({
       id={isBlogPostPage ? blogPostContainerID : undefined}
       className={clsx('markdown', className)}
       itemProp="articleBody"
+      style={{ position: 'relative', zIndex: 2 }}
     >
       <MDXContent>{children}</MDXContent>
     </div>
diff --git a/src/theme/BlogPostItem/Footer/index.tsx b/src/theme/BlogPostItem/Footer/index.tsx
index 5371b0ef..be040070 100644
--- a/src/theme/BlogPostItem/Footer/index.tsx
+++ b/src/theme/BlogPostItem/Footer/index.tsx
@@ -25,7 +25,7 @@ export default function BlogPostItemFooter(): JSX.Element | null {
 
   if (!renderFooter) {
     return (
-      <>
+      <div style={{ position: 'relative', zIndex: 2 }}>
         <div className={styles.blogPostInfo}>
           {/* {authorsExists && (
             <>
@@ -67,7 +67,7 @@ export default function BlogPostItemFooter(): JSX.Element | null {
           )}
           {truncatedPost && (
             <div
-              className={clsx(styles.readMore, {
+              className={clsx('readMore', {
                 'col--3': tagsExists,
               })}
             >
@@ -75,7 +75,7 @@ export default function BlogPostItemFooter(): JSX.Element | null {
             </div>
           )}
         </div>
-      </>
+      </div>
     )
   }
 
diff --git a/src/theme/BlogPostItem/Footer/styles.module.scss b/src/theme/BlogPostItem/Footer/styles.module.scss
index 5ab7eca2..b5dc01f7 100644
--- a/src/theme/BlogPostItem/Footer/styles.module.scss
+++ b/src/theme/BlogPostItem/Footer/styles.module.scss
@@ -56,18 +56,3 @@
 html[data-theme='dark'] .divider {
   background-color: #2f3336;
 }
-
-.readMore {
-  display: flex;
-  flex: 1 1 auto;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 2px;
-
-  color: var(--ifm-link-color);
-  font-weight: 500;
-
-  a:hover {
-    text-decoration: none;
-  }
-}
diff --git a/src/theme/BlogPostItem/Header/index.tsx b/src/theme/BlogPostItem/Header/index.tsx
index 7f4047f0..5f53ee7b 100644
--- a/src/theme/BlogPostItem/Header/index.tsx
+++ b/src/theme/BlogPostItem/Header/index.tsx
@@ -7,7 +7,7 @@ import { useBlogPost } from '@docusaurus/theme-common/internal'
 export default function BlogPostItemHeader(): JSX.Element {
   const { isBlogPostPage } = useBlogPost()
   return (
-    <header>
+    <header style={{ position: 'relative', zIndex: 2 }}>
       <BlogPostItemHeaderTitle />
       {isBlogPostPage && (
         <>