yggdrasil/components/post/
post_nav_links.rs

1//! 文章上一篇/下一篇导航组件
2//!
3//! 在文章详情页底部提供相邻文章的快速跳转。
4
5use dioxus::prelude::*;
6use dioxus::router::components::Link;
7
8use crate::models::post::PostNav;
9use crate::router::Route;
10
11/// 文章相邻导航组件。
12///
13/// Props：
14/// - `prev`：上一篇文章摘要
15/// - `next`：下一篇文章摘要
16///
17/// 左右两侧分别渲染 Prev/Next 链接，若无相邻文章则占位空白。
18#[component]
19pub fn PostNavLinks(prev: Option<PostNav>, next: Option<PostNav>) -> Element {
20    rsx! {
21        nav { class: "paginav",
22            if let Some(prev_post) = prev {
23                Link {
24                    class: "prev",
25                    to: Route::PostDetail {
26                        slug: prev_post.slug.clone(),
27                    },
28                    span { class: "title", "« Prev" }
29                    span { class: "post-title-nav", "{prev_post.title}" }
30                }
31            } else {
32                span { class: "prev" }
33            }
34
35            if let Some(next_post) = next {
36                Link {
37                    class: "next",
38                    to: Route::PostDetail {
39                        slug: next_post.slug.clone(),
40                    },
41                    span { class: "title", "Next »" }
42                    span { class: "post-title-nav", "{next_post.title}" }
43                }
44            } else {
45                span { class: "next" }
46            }
47        }
48    }
49}
yggdrasil/components/post/post_nav_links.rs

yggdrasil/components/post/
post_nav_links.rs
