double
pfqgauxfb 2 months ago
parent baa6af0cc3
commit 5121b71bfc

@ -0,0 +1,47 @@
import React, { useState, useEffect } from 'react';
import styles from './styles.module.css';
export default function DocBookmark({ docId }) {
const [isBookmarked, setIsBookmarked] = useState(false);
useEffect(() => {
// 从localStorage中读取标记状态
const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
setIsBookmarked(bookmarks[docId] || false);
}, [docId]);
const toggleBookmark = () => {
const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
const newState = !isBookmarked;
bookmarks[docId] = newState;
localStorage.setItem('docBookmarks', JSON.stringify(bookmarks));
setIsBookmarked(newState);
};
return (
<div className={styles.bookmarkContainer}>
<button
onClick={toggleBookmark}
className={`${styles.bookmarkButton} ${isBookmarked ? styles.bookmarked : ''}`}
aria-label={isBookmarked ? '取消标记' : '添加标记'}
type="button"
>
<svg
viewBox="0 0 24 24"
width="20"
height="20"
stroke="currentColor"
strokeWidth="2"
fill={isBookmarked ? 'currentColor' : 'none'}
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
</svg>
<span className={styles.bookmarkText}>
{isBookmarked ? '取消标记' : '添加标记'}
</span>
</button>
</div>
);
}

@ -0,0 +1,42 @@
.bookmarkContainer {
display: flex;
justify-content: flex-end;
margin-bottom: 1rem;
padding: 0.5rem;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.bookmarkButton {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 1px solid var(--ifm-color-emphasis-300);
border-radius: 4px;
background: var(--ifm-background-color);
color: var(--ifm-color-emphasis-700);
cursor: pointer;
transition: all 0.2s ease;
}
.bookmarkButton:hover {
background: var(--ifm-color-emphasis-100);
border-color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
}
.bookmarked {
background: var(--ifm-color-primary);
color: white;
border-color: var(--ifm-color-primary);
}
.bookmarked:hover {
background: var(--ifm-color-primary-darker);
color: white;
}
.bookmarkText {
font-size: 0.9rem;
font-weight: 500;
}

@ -203,4 +203,28 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.bookmarkButton {
z-index: 2;
}
/* 标记项目的样式 */
.menu__link--bookmarked {
color: var(--ifm-color-primary) !important;
font-weight: 500 !important;
background-color: var(--ifm-color-emphasis-100) !important;
}
/* 标记按钮的动画效果 */
@keyframes bookmarkPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.bookmarkButton.bookmarked {
animation: bookmarkPulse 0.3s ease;
}

@ -0,0 +1,17 @@
import React from 'react';
import DocPage from '@theme-original/DocPage';
import DocBookmark from '@site/src/components/DocBookmark';
import {useLocation} from '@docusaurus/router';
export default function DocPageWrapper(props) {
const {content} = props;
const location = useLocation();
const docId = location.pathname;
return (
<>
<DocBookmark docId={docId} />
<DocPage {...props} />
</>
);
}

@ -1,17 +1,24 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import DocSidebarItem from '@theme-original/DocSidebarItem';
import Bookmark from '@site/src/components/Bookmark';
export default function DocSidebarItemWrapper(props) {
const { item } = props;
// 只为文档类型的项目添加标记功能
const [isBookmarked, setIsBookmarked] = useState(false);
useEffect(() => {
if (item.type === 'doc') {
const bookmarks = JSON.parse(localStorage.getItem('docBookmarks') || '{}');
setIsBookmarked(bookmarks[item.docId] || false);
}
}, [item]);
if (item.type === 'doc') {
return (
<li className="menu__list-item">
<div className="menu__link-wrapper" style={{ position: 'relative' }}>
<div
className={`menu__link-wrapper ${isBookmarked ? 'menu__link--bookmarked' : ''}`}
>
<DocSidebarItem {...props} />
<Bookmark docId={item.docId} />
</div>
</li>
);

Loading…
Cancel
Save