Merge pull request #1599 from milvus-io/breadcrumb

feat: add breadcrumb for blog
milvus-io · Sep 9, 2024 · 69300b1 · 69300b1
2 parents 0a8a609 + 3b1ce34
commit 69300b1
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;