parent
0c69f446f8
commit
375e18b206
@ -0,0 +1,41 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
export default function Bookmark({ 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 (
|
||||
<button
|
||||
onClick={toggleBookmark}
|
||||
className={`${styles.bookmarkButton} ${isBookmarked ? styles.bookmarked : ''}`}
|
||||
aria-label={isBookmarked ? '取消标记' : '添加标记'}
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
);
|
||||
}
|
@ -0,0 +1,33 @@
|
||||
.bookmarkButton {
|
||||
position: absolute;
|
||||
left: -30px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
color: var(--ifm-color-emphasis-600);
|
||||
transition: all 0.2s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bookmarkButton:hover {
|
||||
color: var(--ifm-color-primary);
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
}
|
||||
|
||||
.bookmarked {
|
||||
color: var(--ifm-color-primary);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 当鼠标悬停在侧边栏项目上时显示标记按钮 */
|
||||
:global(.menu__link-wrapper:hover) .bookmarkButton {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 已标记的项目始终显示标记按钮 */
|
||||
:global(.menu__link-wrapper) .bookmarked {
|
||||
opacity: 1;
|
||||
}
|
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import DocSidebarItem from '@theme-original/DocSidebarItem';
|
||||
import Bookmark from '@site/src/components/Bookmark';
|
||||
|
||||
export default function DocSidebarItemWrapper(props) {
|
||||
const { item } = props;
|
||||
|
||||
// 只为文档类型的项目添加标记功能
|
||||
if (item.type === 'doc') {
|
||||
return (
|
||||
<div style={{ position: 'relative' }}>
|
||||
<DocSidebarItem {...props} />
|
||||
<Bookmark docId={item.docId} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return <DocSidebarItem {...props} />;
|
||||
}
|
Loading…
Reference in new issue