feat(breadcrumbs): add option to hide current page (#601)
* feat(breadcrumbs): add option to hide current page * Remove debug lines Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com> --------- Co-authored-by: ruant <ruant@ruant.net> Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
		
							parent
							
								
									296c1cf83f
								
							
						
					
					
						commit
						9a599aebea
					
				
					 2 changed files with 12 additions and 4 deletions
				
			
		| 
						 | 
					@ -20,6 +20,7 @@ Component.Breadcrumbs({
 | 
				
			||||||
  rootName: "Home", // name of first/root element
 | 
					  rootName: "Home", // name of first/root element
 | 
				
			||||||
  resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
 | 
					  resolveFrontmatterTitle: true, // whether to resolve folder names through frontmatter titles
 | 
				
			||||||
  hideOnRoot: true, // whether to hide breadcrumbs on root `index.md` page
 | 
					  hideOnRoot: true, // whether to hide breadcrumbs on root `index.md` page
 | 
				
			||||||
 | 
					  showCurrentPage: true, // wether to display the current page in the breadcrumbs
 | 
				
			||||||
})
 | 
					})
 | 
				
			||||||
```
 | 
					```
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -25,6 +25,10 @@ interface BreadcrumbOptions {
 | 
				
			||||||
   * Wether to display breadcrumbs on root `index.md`
 | 
					   * Wether to display breadcrumbs on root `index.md`
 | 
				
			||||||
   */
 | 
					   */
 | 
				
			||||||
  hideOnRoot: boolean
 | 
					  hideOnRoot: boolean
 | 
				
			||||||
 | 
					  /**
 | 
				
			||||||
 | 
					   * Wether to display the current page in the breadcrumbs.
 | 
				
			||||||
 | 
					   */
 | 
				
			||||||
 | 
					  showCurrentPage: boolean
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
const defaultOptions: BreadcrumbOptions = {
 | 
					const defaultOptions: BreadcrumbOptions = {
 | 
				
			||||||
| 
						 | 
					@ -32,6 +36,7 @@ const defaultOptions: BreadcrumbOptions = {
 | 
				
			||||||
  rootName: "Home",
 | 
					  rootName: "Home",
 | 
				
			||||||
  resolveFrontmatterTitle: true,
 | 
					  resolveFrontmatterTitle: true,
 | 
				
			||||||
  hideOnRoot: true,
 | 
					  hideOnRoot: true,
 | 
				
			||||||
 | 
					  showCurrentPage: true,
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
 | 
					function formatCrumb(displayName: string, baseSlug: FullSlug, currentSlug: SimpleSlug): CrumbData {
 | 
				
			||||||
| 
						 | 
					@ -95,10 +100,12 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
      // Add current file to crumb (can directly use frontmatter title)
 | 
					      // Add current file to crumb (can directly use frontmatter title)
 | 
				
			||||||
      crumbs.push({
 | 
					      if (options.showCurrentPage) {
 | 
				
			||||||
        displayName: fileData.frontmatter!.title,
 | 
					        crumbs.push({
 | 
				
			||||||
        path: "",
 | 
					          displayName: fileData.frontmatter!.title,
 | 
				
			||||||
      })
 | 
					          path: "",
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
 | 
					      <nav class={`breadcrumb-container ${displayClass ?? ""}`} aria-label="breadcrumbs">
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue