feat: course tag

src/theme/DocCard/CourseCodeTag.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './CourseCodeTag.module.css';
+
+/**
+ * 课程代码标签组件
+ * 用于显示课程编号
+ */
+export default function CourseCodeTag({ code }) {
+    if (!code) {
+        return null;
+    }
+
+    return (
+        <span className={styles.courseCodeTag}>
+            {code}
+        </span>
+    );
+}

src/theme/DocCard/CourseCodeTag.module.css

@@ -0,0 +1,21 @@
+.courseCodeTag {
+    display: inline-block;
+    padding: 0.2rem 0.6rem;
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1;
+    color: var(--ifm-color-primary);
+    background-color: #e8f4fd;
+    border: 1px solid var(--ifm-color-primary-light);
+    border-radius: 0.375rem;
+    white-space: nowrap;
+    width: fit-content;
+    max-width: 100%;
+}
+
+html[data-theme='dark'] .courseCodeTag {
+    color: var(--ifm-color-primary-lightest);
+    background-color: #1a2838;
+    border-color: var(--ifm-color-primary-dark);
+}

src/theme/DocCard/index.js

@@ -10,6 +10,7 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import { translate } from '@docusaurus/Translate';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
+import CourseCodeTag from './CourseCodeTag';
 function useCategoryItemsPlural() {
     const { selectMessage } = usePluralForm();
     return (count) =>
@@ -36,6 +37,16 @@ function CardContainer({ className, href, children }) {
     );
 }
 function CardLayout({ className, href, icon, title, description }) {
+    // 检查是否以"课程代码:"开头
+    const courseCodePrefix = '课程代码:';
+    let courseCode = null;
+    let displayDescription = description;
+
+    if (description && description.startsWith(courseCodePrefix)) {
+        courseCode = description.substring(courseCodePrefix.length).trim();
+        displayDescription = null; // 不显示原始描述
+    }
+
     return (
         <CardContainer href={href} className={className}>
             <Heading
@@ -44,13 +55,14 @@ function CardLayout({ className, href, icon, title, description }) {
                 title={title}>
                 {icon} {title}
             </Heading>
-            {description && (
+            {displayDescription && (
                 <p
                     className={clsx('text--truncate', styles.cardDescription)}
-                    title={description}>
+                    title={displayDescription}>
-                    {description}
+                    {displayDescription}
                 </p>
             )}
+            {courseCode && <CourseCodeTag code={courseCode} />}
         </CardContainer>
     );
 }
@@ -69,6 +81,7 @@ function CardCategory({ item }) {
     } catch (e) {
         doc = null;
     }
+    console.log(item.description, doc?.description);
     return (
         <CardLayout
             className={item.className}