double
pfqgauxfb 2 months ago
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;
}

@ -149,4 +149,31 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.widget{
display: none!important;
opacity: 0;
}
/* 标记按钮的全局样式 */
.menu__link-wrapper {
position: relative;
}
/* 已标记项目的样式 */
.menu__link-wrapper--active {
font-weight: bold;
}
/* 标记按钮的动画效果 */
@keyframes bookmarkPulse {
0% {
transform: translateY(-50%) scale(1);
}
50% {
transform: translateY(-50%) scale(1.1);
}
100% {
transform: translateY(-50%) scale(1);
}
}
.bookmarkButton.bookmarked {
animation: bookmarkPulse 0.3s ease;
}

@ -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…
Cancel
Save