xfy/yggdrasil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: SSR for post detail page

Browse Source
This commit is contained in:
xfy 2026-06-03 14:17:52 +08:00
parent 60a2cd49ab
commit fe30d0495f
1 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/post_detail.rs
View File

@ -8,21 +8,35 @@ use crate::components::post::post_cover::PostCover;
use crate::components::post::post_footer::PostFooter;
use crate::components::post::post_header::PostHeader;
use crate::components::post::post_toc::PostToc;
use crate::hooks::delayed_loading::use_delayed_loading;
use crate::components::suspense_wrapper::SuspenseWrapper;
use crate::router::Route;
#[component]
pub fn PostDetail(slug: String) -> Element {
let route = use_route::<Route>();
let slug_clone = slug.clone();
let post_res = use_resource(move || get_post_by_slug(slug_clone.clone()));
let nav_items = use_nav_items(route);
let show_skeleton = use_delayed_loading(move || post_res.read().is_none());
rsx! {
PageLayout { nav_items,
match &*post_res.read() {
Some(Ok(SinglePostResponse { post: Some(post) })) => {
SuspenseWrapper {
PostDetailContent { slug: slug.clone() }
}
}
}
}
#[component]
fn PostDetailContent(slug: String) -> Element {
let post_res = use_server_future(move || get_post_by_slug(slug.clone()))?;
let post_data = post_res.read().as_ref().map(|r| match r {
Ok(SinglePostResponse { post: Some(post) }) => Ok(post.clone()),
Ok(SinglePostResponse { post: None }) => Err("not_found"),
Err(_) => Err("error"),
});
match post_data {
Some(Ok(post)) => {
rsx! {
article { class: "post-single",
PostHeader { post: post.clone() }
@ -43,7 +57,7 @@ pub fn PostDetail(slug: String) -> Element {
}
}
}
Some(Ok(SinglePostResponse { post: None })) => {
Some(Err("not_found")) => {
rsx! {
div { class: "text-center py-20",
h2 { class: "text-2xl font-bold text-paper-primary mb-4",
@ -62,23 +76,17 @@ pub fn PostDetail(slug: String) -> Element {
}
}
}
Some(Err(e)) => {
Some(Err("error")) => {
rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}"
"加载失败"
}
}
}
None => {
_ => {
rsx! {
div { class: if show_skeleton() { "animate-pulse py-6 space-y-4" } else { "py-6 space-y-4 opacity-0" },
div { class: "h-10 w-3/4 bg-paper-tertiary rounded" }
div { class: "h-4 w-32 bg-paper-tertiary rounded" }
div { class: "h-4 w-full bg-paper-tertiary rounded mt-8" }
div { class: "h-4 w-full bg-paper-tertiary rounded" }
div { class: "h-4 w-2/3 bg-paper-tertiary rounded" }
}
}
div { class: "text-center py-20",
"加载中..."
}
}
}