feng

src/components/Bookmark/index.js

@@ -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>
+  );
+} 

src/components/Bookmark/styles.module.css

@@ -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;
+} 

src/css/custom.css

@@ -150,3 +150,30 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   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;
+}

src/theme/DocSidebarItem/index.js

@@ -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} />;
+}