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_footer::PostFooter;
use crate::components::post::post_header::PostHeader; use crate::components::post::post_header::PostHeader;
use crate::components::post::post_toc::PostToc; 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; use crate::router::Route;
#[component] #[component]
pub fn PostDetail(slug: String) -> Element { pub fn PostDetail(slug: String) -> Element {
let route = use_route::<Route>(); 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 nav_items = use_nav_items(route);
let show_skeleton = use_delayed_loading(move || post_res.read().is_none());
rsx! { rsx! {
PageLayout { nav_items, PageLayout { nav_items,
match &*post_res.read() { SuspenseWrapper {
Some(Ok(SinglePostResponse { post: Some(post) })) => { 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! { rsx! {
article { class: "post-single", article { class: "post-single",
PostHeader { post: post.clone() } PostHeader { post: post.clone() }
@ -43,7 +57,7 @@ pub fn PostDetail(slug: String) -> Element {
} }
} }
} }
Some(Ok(SinglePostResponse { post: None })) => { Some(Err("not_found")) => {
rsx! { rsx! {
div { class: "text-center py-20", div { class: "text-center py-20",
h2 { class: "text-2xl font-bold text-paper-primary mb-4", 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! { rsx! {
div { class: "text-center text-red-500 dark:text-red-400 py-20", div { class: "text-center text-red-500 dark:text-red-400 py-20",
"加载失败: {e}" "加载失败"
} }
} }
} }
None => { _ => {
rsx! { rsx! {
div { class: if show_skeleton() { "animate-pulse py-6 space-y-4" } else { "py-6 space-y-4 opacity-0" }, div { class: "text-center py-20",
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" }
}
}
} }
} }
} }