From 27fa9e605fb5d79f03c9b2c0b0ddf079ad7c7ebd Mon Sep 17 00:00:00 2001
From: bigcode <ibigcode@gmail.com>
Date: Mon, 2 Nov 2026 00:27:15 +0800
Subject: [PATCH] =?UTF-8?q?v0.10.18:=20H18=20=E6=9C=80=E6=96=B0=E5=8D=9A?=
 =?UTF-8?q?=E6=96=87(8bc6b68)=E5=AE=8C=E6=88=90=20+=20=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=85=B3=E7=B3=BB=E6=95=B0=E6=8D=AE=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PostsWidget 忠实重写(skin cards):预取架构 loader 按 widget 收集术语→查文章→
  PostsDataContext 分发;卡 DOM/缩略图比率 0.66/NEWS 徽章(uppercase)/日期 F j,Y/
  摘要 18 词(空回退正文);右列纯文本卡(44px 两行钳制+箭头图标,custom_css 注入)
- posts cards 基础 CSS + slim 白名单 cards_*/_skin/posts_include* 全键
- scripts/repair-content-terms.ts:从 legacy dump wp_term_relationships 提取 67709 对,
  经 legacy_id 映射补插 1162 条 content_terms(Blog 302/News 22 篇,原仅 61 篇有关联)
- 补 icon-arrow-light-orange.png;双端节内几何/样式全等(sec 521),截图目视一致
---
 docs/sections-inventory.md            |   2 +-
 package.json                          |   2 +-
 scripts/repair-content-terms.ts       |  55 ++++++++++
 src/components/elementor/Renderer.tsx | 138 +++++++++++++++++++-------
 src/components/elementor/slim.ts      |  26 +++++
 src/routes/index.tsx                  |  38 ++++++-
 src/server/data.ts                    |  48 +++++++++
 src/styles/app.css                    |  32 ++++++
 8 files changed, 297 insertions(+), 44 deletions(-)
 create mode 100644 scripts/repair-content-terms.ts

diff --git a/docs/sections-inventory.md b/docs/sections-inventory.md
index ec702b3e7..50a449eec 100644
--- a/docs/sections-inventory.md
+++ b/docs/sections-inventory.md
@@ -52,7 +52,7 @@
 | H15 | Trusted By 世界领先品牌 | heading + text + 3 行×5 列 logo 格(9 图 + 6 空占位) + 世界地图底图 | ✅ v0.10.16（审计仅剩口径/亚像素 3 项:heading 40/600/#000 + _padding 左右 10%、text 20px/_margin 顶 10/_padding 9rem、space_between_widgets=0 列内间距 0(scoped 覆盖 kit-spacing)、三行 logo 列 populated flex 纵向垂直居中 + 扣 margin(scoped auto,272-16=256)、列 margin 8px + 边框 #474DFF26 设置驱动、空占位列裸渲染(原站无 populated 盒,margin/边框 0)、logo 图 254 宽 text-align center(Elementor image widget 默认);节 margin-top 3.5%+padding 底 4.5rem;随此版块:ColumnNode 空列裸渲染、populated 语义辨析(H4 溢出=基线 100%,H11/H14/H15 扣减=scoped auto)——曾试基线改 auto 致 H4 -7.7 回归后回滚） |
 | H16 | Developer Ecosystem | heading ×2 + 内嵌 section 两卡(heading+text+button/social-icons+image) | ✅ v0.10.17（审计 0 差异：节 ab35847 bg #F4F5F8 + heading 40/600/#000(_padding 10%)+副题 20px/_margin 顶 -6；两卡 680×528.4 白底圆角 6 边框 #E0E5F9、padding 48/48/16、margin 12(populated 扣减 scoped)、卡标题 24/700/#0D152E、文本 18px/_padding 3rem、Join Now 白底橙字 12px 56px、图 544×282 居中；随此版块:SocialIconsWidget 忠实重写(wrapper grid gap 10/a 44×44 官方底色 linkedin #0077B5/youtube #CD201F/facebook #3B5998/圆角 10%/白色字形)+FA Brands 字体子集(public/fonts/fa-brands-400.woff2 + 三码位 content 规则)+elementor-animation-shrink 通用类） |
 | H17 | News & Updates 标题 | heading | ⬜ |
-| H18 | 最新博文 *2 | posts widget ×2(标题行 + 列卡) | ⬜ |
+| H18 | 最新博文 ×2 | 8bc6b68:左 posts 卡×2(3025217)+右 Latest blogs>>标题(1c96d68)+posts 列表×5(a22c185) | ✅ v0.10.18（双端节内几何/样式全等(sec 521):左 skin-cards grid 335×2/gap 16 10、卡 520 高(custom_css .ele-post-dif)、缩略图比率 0.66×内宽+img 铺满、NEWS 徽章(uppercase/白 70%/12px/圆角 4,绝对右上)、标题 18/400/#000+mb16、日期 F j,Y/#ADADAD/padding 10 12、摘要 18 词/#767676/底距 44(空摘要回退正文 18 词);右列卡 grid 630、卡 bg #F4F5F8/圆角 3、纯标题 44px 两行钳制+右侧箭头图标(custom_css);Latest blogs>> 标题 24px+#E0E5F9 下划线+橙线图背景;随此版块:PostsWidget 忠实重写(PostsDataContext 预取架构:loader 按 widget 收集 posts_include_term_ids→listPostsByTermLegacy)、posts cards 基础 CSS、slim 白名单 cards_* 全键、**数据修复** scripts/repair-content-terms.ts(从 legacy dump wp_term_relationships 补 1162 条分类关联,Blog 302/News 22——原导入仅 61/609 篇有关联)） |
 | H19 | 定制 CTA | button(大按钮) | ⬜ |
 
 ## 四、其他核心页型版块(自上而下,概览)
diff --git a/package.json b/package.json
index 19b123a83..f42b44624 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dusuniot-rebuild",
-  "version": "0.10.17",
+  "version": "0.10.18",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/scripts/repair-content-terms.ts b/scripts/repair-content-terms.ts
new file mode 100644
index 000000000..a0c7ac9f4
--- /dev/null
+++ b/scripts/repair-content-terms.ts
@@ -0,0 +1,55 @@
+/**
+ * # 脚本 修复 posts 的分类关联（content_terms）
+ * 背景：导入管线只落了部分文章的分类（609 篇中 548 篇无关联），首页 H18 posts widget
+ * （按 Blog/News 分类查最新文章）因此查不到数据。原站完整关系在 legacy 镜像
+ * dusuniot-db-20261029.sql 的 wp_term_relationships INSERT 段中（(post_id,term_id,0) 行）。
+ * 做法：从 dump 提取全部 (wp_post_id, wp_term_id) 对 → 经 contents.legacy_id /
+ * categories.legacy_id 映射为本库 id → 补插缺失的 content_terms（幂等）。
+ * 运行：bun scripts/repair-content-terms.ts
+ */
+import { SQL } from "bun";
+
+const DUMP = "/home/bigcode/data/dev/sites/dusuniot/legacy/dusuniot-db-20261029.sql";
+const db = new SQL("postgres://dusuniot:dusuniot@127.0.0.1:25432/dusuniot");
+
+// 1) 提取 dump 中的关系对
+const text = await Bun.file(DUMP).text();
+const pairs = new Set<string>();
+const re = /\((\d+),(\d+),0\)/g;
+for (const m of text.matchAll(re)) {
+  pairs.add(`${m[1]}:${m[2]}`);
+}
+console.log("dump 关系对:", pairs.size);
+
+// 2) 本库映射表：legacyId → id
+const contents = await db`SELECT id, legacy_id FROM contents WHERE legacy_id IS NOT NULL`;
+const contentMap = new Map<number, number>(contents.map((r) => [Number(r.legacy_id), Number(r.id)]));
+const cats = await db`SELECT id, legacy_id FROM categories WHERE legacy_id IS NOT NULL`;
+const catMap = new Map<number, number>(cats.map((r) => [Number(r.legacy_id), Number(r.id)]));
+
+// 3) 已有关联集合（幂等）
+const existing = await db`SELECT content_id, category_id FROM content_terms`;
+const have = new Set(existing.map((r) => `${r.content_id}:${r.category_id}`));
+
+// 4) 补插
+let inserted = 0;
+for (const p of pairs) {
+  const [wpPost, wpTerm] = p.split(":").map(Number);
+  const cid = contentMap.get(wpPost);
+  const tid = catMap.get(wpTerm);
+  if (!cid || !tid) continue;
+  if (have.has(`${cid}:${tid}`)) continue;
+  await db`INSERT INTO content_terms (content_id, category_id) VALUES (${cid}, ${tid})`;
+  have.add(`${cid}:${tid}`);
+  inserted++;
+}
+console.log(`补插 ${inserted} 条 content_terms`);
+
+// 5) 验证：Blog(53)/News(54) 分类下的文章数
+const check = await db`
+  SELECT ca.name, COUNT(*) AS n FROM content_terms ct
+  JOIN categories ca ON ca.id = ct.category_id AND ca.legacy_id IN (53, 54)
+  JOIN contents c ON c.id = ct.content_id AND c.type = 'post' AND c.status = 'published'
+  GROUP BY ca.name`;
+console.log("验证:", JSON.stringify(check));
+await db.end();
diff --git a/src/components/elementor/Renderer.tsx b/src/components/elementor/Renderer.tsx
index f3dfc2f46..e7cea80d1 100644
--- a/src/components/elementor/Renderer.tsx
+++ b/src/components/elementor/Renderer.tsx
@@ -5,8 +5,8 @@
  * 样式以内联 style 复现视觉效果（背景、内边距、对齐、列宽百分比），
  * 未识别的 widgetType 优雅降级：渲染 heading_title / editor 文本或忽略。
  */
-import { Component, Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react";
-import { getLatestPosts, getLatestProducts, type LatestItem } from "~/server/data";
+import { Component, createContext, useContext, Fragment, useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import { getLatestPosts, getLatestProducts, type LatestItem, type PostCardItem } from "~/server/data";
 import TickerBar from "~/components/website/TickerBar";
 import { InquiryForm } from "~/components/website/InquiryForm";
 import { localSiteUrl } from "~/utils/media";
@@ -232,18 +232,23 @@ function normalizeDoc(doc: ElDocument): ElElement[] {
   return [];
 }
 
+/** # 成员变量 posts widget 文章数据上下文（loader 预取,经 widget id 分发） **/
+const PostsDataContext = createContext<Record<string, PostCardItem[]>>({});
+
 /** # 组件 Elementor 渲染器入口 */
-export function ElementorRenderer({ doc }: { doc: ElDocument }) {
+export function ElementorRenderer({ doc, postsData }: { doc: ElDocument; postsData?: Record<string, PostCardItem[]> }) {
   const elements = normalizeDoc(doc);
   if (!elements.length) return null;
   const css = collectCustomCss(elements) + collectResponsiveCss(elements);
   return (
-    <div className="content-html">
-      {css ? <style dangerouslySetInnerHTML={{ __html: css }} /> : null}
-      {elements.map((el, i) => (
-        <ElementNode key={el.id || i} el={el} />
-      ))}
-    </div>
+    <PostsDataContext.Provider value={postsData || {}}>
+      <div className="content-html">
+        {css ? <style dangerouslySetInnerHTML={{ __html: css }} /> : null}
+        {elements.map((el, i) => (
+          <ElementNode key={el.id || i} el={el} />
+        ))}
+      </div>
+    </PostsDataContext.Provider>
   );
 }
 
@@ -571,7 +576,7 @@ function WidgetNodeInner({ el }: { el: ElElement }) {
     case "eael-content-ticker":
       return <TickerWidget settings={settings} />;
     case "posts":
-      return <PostsWidget settings={settings} />;
+      return <PostsWidget el={el} settings={settings} />;
     case "social-icons":
       return <SocialIconsWidget settings={settings} />;
     case "eael-contact-form-7":
@@ -750,42 +755,99 @@ function TickerWidget({ settings }: { settings: Record<string, unknown> }) {
 }
 
 /** # 组件 posts widget（Elementor Pro 卡片皮肤：文章/产品卡片网格） */
-function PostsWidget({ settings }: { settings: Record<string, unknown> }) {
-  const perPage = Number(s(settings.cards_posts_per_page)) || 3;
-  const [posts, setPosts] = useState<Array<{ title: string; slug: string; excerpt: string | null; publishedAt: Date | string | null; image: string | null }>>([]);
-  useEffect(() => {
-    let alive = true;
-    getLatestPosts()
-      .then((rows) => { if (alive) setPosts(rows.slice(0, perPage).map((r) => ({ title: r.title, slug: r.url, excerpt: null as string | null, publishedAt: null, image: null }))); })
-      .catch(() => {});
-    return () => { alive = false; };
-  }, [perPage]);
+/** # 组件 posts widget（Elementor skin cards 忠实 DOM，H18 实测 2026-11-01）
+ * .elementor-posts-container.elementor-posts.elementor-posts--skin-cards.elementor-grid
+ * （grid 列数 cards_columns、gap 16/10=row/column）> article.elementor-post > .elementor-post__card
+ * （flex 纵向、边框/底色/圆角 3 由设置）> [缩略图链接(比率 0.66 内宽、badge 绝对右上)]
+ * + .elementor-post__text(padding 12) > .elementor-post__title(div,fs18/400,#000)
+ *   + .elementor-post__meta-data(日期 F j, Y,#ADADAD) + .elementor-post__excerpt(18 词,#767676,底距 44)；
+ * 缩略图 thumbnail=none 时省略（右列卡 74 高纯文本）；文章数据经 PostsDataContext 预取。
+ */
+function PostsWidget({ el, settings }: { el: ElElement; settings: Record<string, unknown> }) {
+  const allPosts = useContext(PostsDataContext);
+  const posts = (el.id && allPosts[el.id]) || [];
   if (!posts.length) return null;
+  const showThumb = s(settings.cards_thumbnail) !== "none";
+  const cols = Number(s(settings.cards_columns)) || 1;
+  const rowGap = sizeCss(settings.cards_row_gap) || "16px";
+  const colGap = sizeCss(settings.cards_column_gap) || "10px";
+  const textPad = sizeCss(settings.cards_card_padding) || "12px";
+  const titleSpacing = sizeCss(settings.cards_title_spacing) || "16px";
+  const excSpacing = sizeCss(settings.cards_excerpt_spacing) || "44px";
+  const excerptColor = s(settings.cards_excerpt_color) || undefined;
+  const titleTag = (["h1", "h2", "h3", "h4", "h5", "h6", "div", "span", "p"].includes(s(settings.cards_title_tag)) ? s(settings.cards_title_tag) : "h3") as "h3";
+  const TitleTag = titleTag;
+  // 徽章/日期/摘要开关：switcher 键缺省 = 开（左卡无键但有徽章/摘要的实测语义），
+  // 空串 = 显式关（右卡 cards_show_badge/cards_show_excerpt 均为空串）
+  const showBadge = settings.cards_show_badge === undefined ? true : s(settings.cards_show_badge) !== "";
+  const showMeta = Array.isArray(settings.cards_meta_data) && (settings.cards_meta_data as string[]).includes("date");
+  const showExcerpt = settings.cards_show_excerpt === undefined ? true : s(settings.cards_show_excerpt) !== "";
+  // 日期格式 F j, Y（October 21, 2026）
+  const fmtDate = (d: Date | string | null) => {
+    if (!d) return null;
+    const dt = typeof d === "string" ? new Date(d) : d;
+    if (isNaN(dt.getTime())) return null;
+    return dt.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
+  };
   return (
-    <div className="mx-auto grid max-w-[1140px] grid-cols-1 gap-[22px] px-6 py-2.5 min-[900px]:grid-cols-3">
-      {posts.map((p) => (
-        <a
-          className="block overflow-hidden rounded-lg border border-line bg-white text-inherit transition-shadow hover:shadow-[0_10px_26px_rgba(16,42,76,0.12)]"
-          key={p.slug}
-          href={"/blog/" + p.slug + "/"}
-        >
-          {p.image ? (
-            <div className="aspect-video overflow-hidden bg-[#f2f5f9]">
-              <img src={p.image} alt="" loading="lazy" className="h-full w-full object-cover" />
+    <div
+      className="elementor-posts-container elementor-posts elementor-posts--skin-cards elementor-grid"
+      style={{ display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: `${rowGap} ${colGap}` }}
+    >
+      {posts.map((p) => {
+        // 链接前缀按主分类：News → /news/，其余 → /blog/（原站 News 文章走 /news/<slug>/）
+        const href = (p.categoryName === "News" ? "/news/" : "/blog/") + p.slug + "/";
+        return (
+          <article key={p.slug} className="elementor-post elementor-grid-item post type-post status-publish format-standard has-post-thumbnail">
+            <div className="elementor-post__card">
+              {showThumb && p.imageUrl ? (
+                <a className="elementor-post__thumbnail__link" href={href} tabIndex={-1}>
+                  <div className="elementor-post__thumbnail">
+                    <img src={localSiteUrl(p.imageUrl)} alt={p.title} loading="lazy" />
+                  </div>
+                  {showBadge && p.categoryName ? (
+                    <span className="elementor-post__badge">{p.categoryName}</span>
+                  ) : null}
+                </a>
+              ) : null}
+              <div className="elementor-post__text">
+                <TitleTag className="elementor-post__title" style={{ marginBottom: titleSpacing }}>
+                  <a href={href}>{p.title}</a>
+                </TitleTag>
+                {showMeta && p.publishedAt ? (
+                  <div className="elementor-post__meta-data">
+                    <span className="elementor-post-date">{fmtDate(p.publishedAt)}</span>
+                  </div>
+                ) : null}
+                {showExcerpt ? (
+                  <p
+                    className="elementor-post__excerpt"
+                    style={{ color: excerptColor, marginBottom: excSpacing }}
+                    dangerouslySetInnerHTML={{ __html: postExcerpt(p) }}
+                  />
+                ) : null}
+              </div>
             </div>
-          ) : null}
-          <div className="px-4 pt-3.5 pb-[18px]">
-            <h3 className="mt-0 mb-1.5 text-[17px] leading-[1.4]">{p.title}</h3>
-            {p.publishedAt ? <time className="text-[13px] text-muted-foreground">{String(p.publishedAt).slice(0, 10)}</time> : null}
-            {p.excerpt ? <p className="mt-2 mb-0 line-clamp-2 text-sm text-muted-foreground">{p.excerpt}</p> : null}
-          </div>
-        </a>
-      ))}
+          </article>
+        );
+      })}
     </div>
   );
 }
 
 /** # 组件 social-icons widget（图标行） */
+/** # 函数 文章卡摘要：excerpt 优先，空则取正文纯文本前 N 词（WP wp_trim_words 语义） */
+function postExcerpt(p: PostCardItem): string {
+  return p.excerpt && p.excerpt.trim() ? p.excerpt : postWords(p.content || "", 18);
+}
+
+/** # 函数 纯文本取前 N 词（去 HTML 标签后按空白分词,"…" 结尾） */
+function postWords(html: string, n: number): string {
+  const text = html.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
+  const words = text.split(" ");
+  return words.length <= n ? text : words.slice(0, n).join(" ") + " …";
+}
+
 /** # 组件 social-icons widget：忠实 Elementor DOM（widget-social-icons 语义，H16 实测）
  * .elementor-social-icons-wrapper.elementor-grid（inline-grid + column-gap=icon_spacing，
  * 由父级 text-align 居中）> a.elementor-icon.elementor-social-icon.elementor-social-icon-<name>
diff --git a/src/components/elementor/slim.ts b/src/components/elementor/slim.ts
index 890350c4c..168b3d272 100644
--- a/src/components/elementor/slim.ts
+++ b/src/components/elementor/slim.ts
@@ -113,7 +113,33 @@ const SETTING_KEYS = new Set([
   "youtube_url",
   "map",
   "posts_per_page",
+  "_skin",
+  "posts_include",
+  "posts_include_term_ids",
   "cards_posts_per_page",
+  "cards_columns",
+  "cards_columns_tablet",
+  "cards_row_gap",
+  "cards_column_gap",
+  "cards_meta_data",
+  "cards_title_tag",
+  "cards_card_padding",
+  "cards_open_new_tab",
+  "cards_excerpt_color",
+  "cards_image_spacing",
+  "cards_title_spacing",
+  "cards_excerpt_length",
+  "cards_excerpt_spacing",
+  "cards_card_border_width",
+  "cards_thumbnail",
+  "cards_show_badge",
+  "cards_show_excerpt",
+  "cards_show_read_more",
+  "cards_read_more_text",
+  "cards_read_more_alignment",
+  "cards_title_color",
+  "cards_card_bg_color",
+  "cards_item_ratio_mobile",
   "post_type",
   "eael_ticker_tag_text",
   // EAEL Infobox / flip-box / 高级标签页 / 数据表 / 评价等（Renderer 对应组件读取）
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index efc8ac9ed..a02752b77 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -4,10 +4,38 @@
  */
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { getLayoutData, Layout } from "~/components/website/Layout";
-import { ElementorRenderer, extractElementor } from "~/components/elementor/Renderer";
+import { ElementorRenderer, extractElementor, type ElElement } from "~/components/elementor/Renderer";
 import { ProductCard } from "~/components/website/ProductCard";
 import { Button } from "~/components/ui/button";
-import { getHomePage, getProductCategoryTree, listProducts, listPosts } from "~/server/data";
+import { getHomePage, getProductCategoryTree, listProducts, listPosts, listPostsByTermLegacy, type PostCardItem } from "~/server/data";
+
+/** # 函数 收集 Elementor 文档中 posts widget 的查询并预取文章（H18）
+ * posts widget（skin cards）按 settings.posts_include_term_ids（WP 术语 legacy_id）+
+ * cards_posts_per_page 查询最新文章，结果按 widget id 传给渲染器。
+ * 参数 meta 首页 contents.meta
+ * 返回值 widgetId → 文章卡数组的映射
+ */
+async function loadPostsWidgets(meta: Record<string, unknown> | null): Promise<Record<string, PostCardItem[]>> {
+  const out: Record<string, PostCardItem[]> = {};
+  if (!meta) return out;
+  const walk = async (els: ElElement[] | undefined) => {
+    for (const el of els || []) {
+      if (el.widgetType === "posts" && el.id) {
+        const st = (el.settings || {}) as Record<string, unknown>;
+        const termIds = Array.isArray(st.posts_include_term_ids) ? (st.posts_include_term_ids as number[]) : [];
+        const perPage = Number(st.cards_posts_per_page) || 5;
+        if (termIds.length) {
+          out[el.id] = await listPostsByTermLegacy(Number(termIds[0]), perPage).catch(() => []);
+        }
+      }
+      await walk(el.elements);
+    }
+  };
+  const elementor = (meta.elementor ?? null) as { elements?: ElElement[] } | ElElement[] | null;
+  // 文档可能为裸数组或 {elements} 包装两种形态（extractElementor 同款兼容）
+  await walk(Array.isArray(elementor) ? elementor : elementor?.elements);
+  return out;
+}
 
 export const Route = createFileRoute("/")({
   loader: async () => {
@@ -20,7 +48,9 @@ export const Route = createFileRoute("/")({
       listPosts(1, 3).catch(() => ({ items: [], total: 0, page: 1, pageSize: 3 })),
     ]);
     const meta = (home?.meta ?? null) as Record<string, unknown> | null;
-    return { layout, home, meta, cats, products, posts };
+    // Elementor posts widget 预取（H18：左右两个 posts widget）
+    const postsData = await loadPostsWidgets(meta);
+    return { layout, home, meta, cats, products, posts, postsData };
   },
   head: ({ loaderData }) => ({
     meta: [
@@ -43,7 +73,7 @@ function HomePage() {
   return (
     <Layout layout={data.layout}>
       {elementor ? (
-        <ElementorRenderer doc={elementor} />
+        <ElementorRenderer doc={elementor} postsData={data.postsData} />
       ) : (
         <FallbackHome cats={data.cats} products={data.products} posts={data.posts} />
       )}
diff --git a/src/server/data.ts b/src/server/data.ts
index dfb3e65c4..667e4004e 100644
--- a/src/server/data.ts
+++ b/src/server/data.ts
@@ -560,3 +560,51 @@ export const getLatestPosts = createServerFn({ method: "GET" }).handler(async ()
     .limit(8);
   return rows.map((r) => ({ title: r.title, url: "/blog/" + r.slug + "/" }));
 });
+
+/** # 类型 文章卡数据（Elementor posts widget 骨架卡） **/
+export type PostCardItem = {
+  slug: string;
+  title: string;
+  excerpt: string | null;
+  publishedAt: Date | null;
+  imageUrl: string | null;
+  content: string | null;
+  categoryName: string | null;
+};
+
+/** # Server Function 按 WP 术语 legacy_id 取最新文章（Elementor posts widget 查询）
+ * 首页 H18：posts_include=terms + posts_include_term_ids=[54]（News 分类 legacy 54）等；
+ * 经 categories.legacy_id 反查本库分类，再经 content_terms 取其下最新发布文章。
+ * 参数 legacyTermId WP 术语 id（legacy_id）；limit 取条数
+ * 返回值 文章卡数组（标题/摘要/发布时间/特色图/首个分类名）
+ */
+export async function listPostsByTermLegacy(legacyTermId: number, limit: number) {
+  const [cat] = await db
+    .select({ id: categories.id })
+    .from(categories)
+    .where(eq(categories.legacyId, legacyTermId))
+    .limit(1);
+  if (!cat) return [] as PostCardItem[];
+  const rows = await db
+    .select({
+      slug: contents.slug,
+      title: contents.title,
+      excerpt: contents.excerpt,
+      publishedAt: contents.publishedAt,
+      imageUrl: media.url,
+      content: contents.html,
+      categoryName: sql<string | null>`(SELECT cat.name FROM content_terms ct JOIN categories cat ON cat.id = ct.category_id WHERE ct.content_id = ${contents.id} AND cat.taxonomy = 'category' LIMIT 1)`,
+    })
+    .from(contents)
+    .leftJoin(media, eq(media.id, contents.featuredMediaId))
+    .where(
+      and(
+        eq(contents.type, "post"),
+        eq(contents.status, "published"),
+        sql`EXISTS (SELECT 1 FROM content_terms ct WHERE ct.content_id=${contents.id} AND ct.category_id=${cat.id})`,
+      ),
+    )
+    .orderBy(desc(contents.publishedAt))
+    .limit(Math.max(1, Math.min(20, limit)));
+  return rows as PostCardItem[];
+}
diff --git a/src/styles/app.css b/src/styles/app.css
index 1129ba224..e8091ae6f 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -372,6 +372,38 @@
    * padding 48/48/16 + 白底 + 圆角 6 + 边框 #E0E5F9 均设置驱动 */
   [data-el="65282de"] > div, [data-el="cc3e8ca"] > div { width: auto !important; }
 
+  /* ===== Elementor posts widget（skin cards 基础；H18 实测 2026-11-01）
+   * 卡 = flex 纵向（h 520 由节点 custom_css .ele-post-dif .elementor-post 注入）；
+   * 缩略图比率 0.66×内宽（img 绝对定位铺满 object-fit fill）、badge 绝对右上
+   * （bg rgba(255,255,255,.7)/12px/圆角 4,自定义样式经 custom_css 注入）；
+   * 标题 18/400/#000、meta 16/#ADADAD/padding 10 12、摘要在 H18 组件内联 */
+  .elementor-post__card {
+    display: flex; flex-direction: column; overflow: hidden;
+    border-radius: 3px;
+  }
+  .elementor-post__thumbnail__link { display: block; position: relative; margin: 0 0 20px; }
+  .elementor-post__thumbnail { position: relative; overflow: hidden; padding-bottom: 66%; }
+  .elementor-post__thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
+  .elementor-post__badge {
+    position: absolute; top: 0; right: 0; z-index: 1;
+    font-size: 12px; line-height: 1; padding: 7.2px 14.4px;
+    text-transform: uppercase;
+  }
+  .elementor-post__text { padding: 0 12px; flex-grow: 1; }
+  .elementor-post__title { font-size: 18px; line-height: 27px; font-weight: 400; color: #000; }
+  .elementor-post__title a { color: inherit; text-decoration: none; }
+  .elementor-post__meta-data {
+    display: block; margin: 0; padding: 10px 12px;
+    font-size: 16px; color: #ADADAD;
+  }
+  .elementor-post__excerpt { font-size: 16px; line-height: 1.7; color: #333; }
+  /* 右列卡（a22c185 .ele-post-dif-2）：纯文本卡 bg #F4F5F8、标题链接右侧箭头图标
+   * 与 44px 两行钳制均由 custom_css 注入；此处理品牌底色/箭头 hover 位移 */
+  [data-el="a22c185"] .elementor-post__card { background-color: #F4F5F8; }
+  [data-el="a22c185"] .elementor-post__text { padding: 0 18px; }
+  /* H18 两列 populated 扣水平 margin（右列 680-16=664，margin 左 1rem 设置驱动） */
+  [data-el="1621f99"] > div, [data-el="5db48f4"] > div { width: auto !important; }
+
   /* ===== 首页 H2 产品线入口（post-18.css 对应块；1436px 实测 2026-10-31）
    * 外层 section：白→#F4F5F8 线性渐变（180deg）+ 1360 容器（SectionNode 背景已渲染）；
    * 中列 0.5rem 内边距；内层 e38a898 六列均分 224px，列内容 wrap padding 10px（高 107）；