fix: unable to click title on image-mask

kuizuo · Dec 27, 2023 · bb9a4b5 · bb9a4b5 · vercel · Dec 27, 2023
1 parent ed99e1b
commit bb9a4b5
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 24 deletions.
diff --git a/blog/program/Nest grpc 实践之调用 python ddddocr 库.md b/blog/program/Nest grpc 实践之调用 python ddddocr 库.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
@@ -262,13 +262,36 @@ 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;
 
  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
@@ -5,17 +5,15 @@ 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
  // This ID is used for the feed generation to locate the main content
  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
@@ -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,15 +67,15 @@ export default function BlogPostItemFooter(): JSX.Element | null {
  )}
  {truncatedPost && (
  <div
- className={clsx(styles.readMore, {
+ className={clsx('readMore', {
  'col--3': tagsExists,
  })}
  >
  <ReadMoreLink blogPostTitle={title} to={metadata.permalink} />
  </div>
  )}
  </div>
- </>
+ </div>
  )
  }
 

diff --git 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
@@ -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 && (
  <>