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;
|
||||
}
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
Loading…
Reference in new issue