feat: add breadcrumb for blog

Signed-off-by: ryjiang <jiangruiyi@gmail.com>
milvus-io · Sep 9, 2024 · 3b1ce34 · 3b1ce34
1 parent 0a8a609
commit 3b1ce34
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/src/pages/blog/[id].jsx b/src/pages/blog/[id].jsx
@@ -63,17 +63,17 @@ export default function Template(props) {
         <div>
           <div className={clsx(pageClasses.docContainer, styles.upLayout)}>
             <section className={styles.blogHeader}>
-              <p className={styles.authorDate}>
-                <span>{dateTime}</span>
-                {author && <span>by {author}</span>}
-              </p>
               <h1 className={styles.title}>{title}</h1>
 
               <Tags
                 list={tags}
                 tagsClass={styles.tags}
                 onClick={handleTagClick}
               />
+              <p className={styles.authorDate}>
+                <span>{dateTime}</span>
+                {author && <span>by {author}</span>}
+              </p>
             </section>
 
             <section className={styles.blogContent}>
@@ -117,7 +117,22 @@ export default function Template(props) {
           </div>
 
           <section className={clsx(pageClasses.container, styles.bottomLayout)}>
-            <h2 className={styles.title}>Keep Reading</h2>
+            <p className={styles.breadcrumb}>
+              <svg
+                width="16"
+                height="17"
+                viewBox="0 0 16 17"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M7.03277 2.8535C7.59146 2.38217 8.40854 2.38217 8.96723 2.8535L13.4672 6.64986C13.8051 6.93487 14 7.35436 14 7.79636V14.3317C14 14.976 13.4777 15.4983 12.8333 15.4983H10.8333C10.189 15.4983 9.66667 14.976 9.66667 14.3317V10.9983C9.66667 10.7222 9.44281 10.4983 9.16667 10.4983H6.83333C6.55719 10.4983 6.33333 10.7222 6.33333 10.9983V14.3317C6.33333 14.976 5.811 15.4983 5.16667 15.4983H3.16667C2.52233 15.4983 2 14.976 2 14.3317V7.79636C2 7.35436 2.19494 6.93487 2.53277 6.64986L7.03277 2.8535Z"
+                  fill="#00B3FF"
+                />
+              </svg>
+              <a href="/blog">Blog</a> / {title}
+            </p>
+            {/* <h2 className={styles.title}>Keep Reading</h2> */}
             <ul className={styles.blogCards}>
               {moreBlogs.map((v, index) => {
                 const { desc, cover, date, tags, title, id } = v;

diff --git a/src/pages/blog/index.jsx b/src/pages/blog/index.jsx
@@ -137,7 +137,9 @@ const BlogTemplate = props => {
             <div className={clsx(styles.featuredBlogContent)}>
               <div className="">
                 <p className={styles.tag}>{featuredBlog.tags.join(' ')}</p>
-                <h2 className={styles.title}>{featuredBlog.title}</h2>
+                <h2 className={styles.title}>
+                  <a href={featuredBlog.href}>{featuredBlog.title}</a>
+                </h2>
                 <p className={styles.desc}>{featuredBlog.desc}</p>
               </div>
               <CustomButton

diff --git a/src/styles/blog.module.less b/src/styles/blog.module.less
@@ -57,6 +57,9 @@
         .heading3();
         .overflowEllipsis3Row();
         color: #000;
+        a {
+          color: #000;
+        }
         margin-bottom: 12px;
       }
 

diff --git a/src/styles/blogDetail.module.less b/src/styles/blogDetail.module.less
@@ -12,6 +12,8 @@
     flex-direction: column;
     align-items: center;
 
+
+
     .authorDate {
       color: @color-grey-02;
       font-size: 18px;
@@ -107,6 +109,25 @@
 
 .bottomLayout {
   margin-bottom: 100px;
+  .breadcrumb {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 12px;
+    color: @color-black2;
+    font-size: 16px;
+
+    a {
+      color: @color-blue1;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    svg {
+      color: @color-grey-02;
+      font-size: 18px;
+    }
+  }
 
   .title {
     font-weight: bold;