yggdrasil/components/post/
breadcrumbs.rs

1//! 面包屑组件
2//!
3//! 在文章详情页展示从首页到当前文章标题的导航路径。
4
5use dioxus::prelude::*;
6use dioxus::router::components::Link;
7
8use crate::router::Route;
9
10/// 面包屑导航组件。
11///
12/// Props：
13/// - `title`：当前文章标题
14/// - `full_reload`：Home 链接走整页加载而非客户端路由（默认 false）。仅当
15///   渲染在 admin 布局内（`/admin/preview`）时传 true——跨 layout 分支的
16///   客户端导航会触发 dioxus 0.7.10 的 suspense 卸载双重回收 bug（详见
17///   `src/pages/admin/preview.rs` 模块文档），整页加载可完全规避。
18///
19/// 渲染 `Home > 当前标题` 的面包屑路径。
20#[component]
21pub fn Breadcrumbs(title: String, #[props(default = false)] full_reload: bool) -> Element {
22    let home_to = super::nav_target(Route::Home {}, full_reload);
23    rsx! {
24        nav {
25            class: "breadcrumbs",
26            role: "navigation",
27            aria_label: "Breadcrumb",
28            Link { to: home_to, "data-vt-return": (!full_reload).then_some("true"), "Home" }
29            svg {
30                xmlns: "http://www.w3.org/2000/svg",
31                view_box: "0 0 24 24",
32                fill: "none",
33                stroke: "currentColor",
34                stroke_width: "2",
35                stroke_linecap: "round",
36                stroke_linejoin: "round",
37                class: "feather feather-chevron-right",
38                width: "16",
39                height: "16",
40                polyline { points: "9 18 15 12 9 6" }
41            }
42            span { "{title}" }
43        }
44    }
45}
yggdrasil/components/post/breadcrumbs.rs

yggdrasil/components/post/
breadcrumbs.rs
