Skip to main content

yggdrasil/components/post/
post_footer.rs

1//! 文章页脚组件
2//!
3//! 展示文章标签、上一篇/下一篇导航与返回首页链接。
4
5use dioxus::prelude::*;
6use dioxus::router::components::Link;
7
8use crate::components::post::post_nav_links::PostNavLinks;
9use crate::models::post::Post;
10use crate::router::Route;
11
12/// 文章页脚组件。
13///
14/// Props:
15/// - `post`:文章数据模型
16///
17/// 展示内容包括:
18/// - 文章标签云,链接到对应标签详情页
19/// - 相邻文章导航(如有)
20/// - 返回首页链接
21#[component]
22pub fn PostFooter(post: Post) -> Element {
23    let tags = post.tags.clone();
24
25    rsx! {
26        footer { class: "post-footer",
27            if !tags.is_empty() {
28                ul { class: "post-tags",
29                    for tag in tags.into_iter() {
30                        li { key: "{tag}",
31                            Link {
32                                to: Route::TagDetail {
33                                    tag: tag.clone(),
34                                },
35                                "{tag}"
36                            }
37                        }
38                    }
39                }
40            }
41
42            if post.prev_post.is_some() || post.next_post.is_some() {
43                PostNavLinks { prev: post.prev_post, next: post.next_post }
44            }
45
46            div { class: "back-to-home",
47                Link { to: Route::Home {}, "← 返回首页" }
48            }
49        }
50    }
51}