diff --git a/docs/consultant-review-2026-10-26-solution-spec.md b/docs/consultant-review-2026-10-26-solution-spec.md new file mode 100644 index 0000000..a8a1ee3 --- /dev/null +++ b/docs/consultant-review-2026-10-26-solution-spec.md @@ -0,0 +1,388 @@ +这份由 Hermes Agent 整理的补充资料包非常详实,代码结构清晰,尤其是对第四部分“主站断层与 GSC 零收录原因”的诊断非常诚实且精准。 + +在直接进入你要求的 **4 项重点开刀示范** 之前,我先针对你刚暴露出来的 **3 个工程与内容层面的紧急漏洞** 给出快刀斩乱麻的修复指令(这部分一天之内就能改完,但收益巨大): + +### 🚨 紧急修复指令(Day-1 Quick Wins) + +1. **主站 `[www.hoelee.com](https://www.hoelee.com)` 到 `blog.hoelee.com` 的权重导流(解决孤岛与冷启动)**: + + +* 既然主站是 WordPress 且已有一定历史权重,却对博客“0 入链”,请立即在主站 `[www.hoelee.com](https://www.hoelee.com)` 的顶部主导航栏(Main Menu)**和**页脚(Footer)加上 `Engineering Blog` 或 `Case Studies` 链接指向 `[https://blog.hoelee.com/](https://blog.hoelee.com/)`。 + + +* 立即清理主站那 400 个旧版媒体附件薄弱页(Thin attachment pages)(在 WordPress SEO 插件如 RankMath / Yoast 中开启“Redirect attachment URLs to parent post/file”,否则会严重拖累整个 `hoelee.com` 根域名的抓取预算)。 + + +* 立即登录 GSC,在 `hoelee.com` 域名属性下提交 `[https://blog.hoelee.com/sitemap-index.xml](https://blog.hoelee.com/sitemap-index.xml)`,并用 URL Inspection 工具手动请求抓取首页和 4 篇 Featured Case Studies。 + + + + +2. **修复样本 1 中的“规范违背”(Persona 破功)**: +* 在你第一轮发我的规范中,明确写道:**“严格禁用 `my home lab` 等爱好者口吻”**。但在样本 1《DigiKedai Bot》的 `## The architecture` 第 2 段第一句,赫然写着:*“My **homelab** is behind CGNAT...”*。 + + +* **行动**:让 Hermes Agent 对全站 91 篇英文和 91 篇中文 Markdown 跑一次全局正则扫描(搜索 `homelab`、`home lab`、`家用`、`小主机`),统一替换为 `self-hosted production node` / `on-premise host` / `自托管生产节点`。 + + + + +3. **打通 Markdown 到 Astro 组件的渲染能力**: +* 目前你的文章全是 `.md` 格式。为了不破坏现有的 182 篇 `.md` 文件的兼容性,**千万不要把所有文件改成 `.mdx**`。最优雅的工程方案是:将 `` 和 `` 的结构化数据写入文章的 **Frontmatter(YAML)**,由 `src/pages/posts/[...slug].astro` 统一读取并在 `` 的一头一尾自动渲染;而正文里的折叠代码区,直接使用原生 HTML5 的 `
` 标签(Markdown 原生兼容,只需在 `global.css` 里写好极客风样式)。 + + + + + +--- + +下面,我针对你清单中的 **4 大核心任务**,给出可直接复制进项目的代码级示范与重构方案: + +--- + +## 示范一:首屏速览卡片(``)实例文案与实现 + + + +### 1. Frontmatter 结构升级与双套实例文案 + +在 `src/content/config.ts` 的 schema 中增加可选的 `summary` 字段。针对两类完全不同的受众(样本 1 面向中小企业老板/产品负责人,样本 2 面向 CTO/资深运维招聘官),文案侧重点完全不同: + +#### 📌 样本 1:《How I Built the DigiKedai Telegram AI Bot》(商业交付侧重) + + + +```yaml +# 新增至 how-i-built-the-digikedai-telegram-bot.md 的 frontmatter +summary: + audience: "Business Owners & Product Leads" + painPoint: "1人数字商品电商面临大量重复售前咨询(试用申请、账号开通、选品),夜间与周末漏单严重,人工客服成本高。" + impact: + - metric: "24/7 秒级响应" + detail: "全天候接管 Telegram 与 WhatsApp 双端咨询,零人工介入自动发放免费试用账号" + - metric: "0 价格幻觉" + detail: "三层确定性 SKU 检索 + 状态机拦截购买意图,杜绝大模型胡报价或泄漏内部路径" + - metric: "~175 项单测护航" + detail: "单容器稳定运行于 NAS,通过自建 LiteLLM 网关实现模型高可用切换" + stack: ["TypeScript", "grammY", "LiteLLM", "NocoDB", "Cloudflare Tunnel", "PostgreSQL"] + jumpLinks: + business: "#why-a-business-needs-a-bot-like-this" + architecture: "#the-architecture" + result: "#the-result" + +``` + +#### 📌 样本 2:《Docker Reported Exit 0. The Kernel Had Already OOM-Killed It.》(硬核工程/招聘侧重) + + + +```yaml +# 新增至 docker-reported-exit-0-the-oom-killer-disagreed.md 的 frontmatter +summary: + audience: "SREs, DevOps Leads & Systems Engineers" + painPoint: "公网边缘反向代理容器(Traefik)4天内无预警重启7次,但 Docker daemon 谎报 ExitCode=0 且 OOMKilled=false,常规监控完全失明。" + impact: + - metric: "精准定位真凶" + detail: "穿透 Docker 状态假象,通过内核 dmesg 与 cgroup 内存水位线抓出 25,976 个代理爬虫 IP 引发的 512MB 触顶" + - metric: "0 停机热修复" + detail: "单容器精准扩容至 2GB 并锁死 Swap(防磁盘阵列雪崩),18分钟峰值回落至 210MB,连续运行 0 崩溃" + - metric: "防自锁诊断规范" + detail: "沉淀边缘网关高并发防爬虫压测与避免自身 IP 被 WAF 误封(403 假象)的排障 SOP" + stack: ["Docker", "Linux Kernel (dmesg/cgroups)", "Traefik", "Synology DSM", "Security Filtering"] + jumpLinks: + business: "#the-result" + architecture: "#the-kernel-keeps-its-own-record" + result: "#what-i-would-do-differently" + +``` + +### 2. Astro 组件代码(`src/components/ExecutiveSummary.astro`) + +将此组件插入 `src/pages/posts/[...slug].astro` 的 `` 之前: + +```astro +--- +interface Props { + summary?: { + audience: string; + painPoint: string; + impact: { metric: string; detail: string }[]; + stack: string[]; + jumpLinks?: { business?: string; architecture?: string; result?: string }; + }; + lang?: 'en' | 'zh'; +} +const { summary, lang = 'en' } = Astro.props; +if (!summary) return null; + +const labels = lang === 'zh' ? { + badge: '⚡ 核心速览 (Executive Summary)', + for: '适用读者:', + problem: '🎯 核心痛点', + impact: '📈 交付成果与工程指标', + stack: '🛠️ 涉及技术栈', + nav: '⏱️ 快速跳读:', + btnBiz: '看商业/最终结果 ↓', + btnArch: '看系统架构与排障 ↓', + btnLesson: '看复盘与避坑指南 ↓' +} : { + badge: '⚡ Executive Summary', + for: 'Target Audience:', + problem: '🎯 The Problem', + impact: '📈 Key Outcomes & Metrics', + stack: '🛠️ Architecture Stack', + nav: '⏱️ Quick Jump:', + btnBiz: 'Business Outcome ↓', + btnArch: 'Architecture & Root Cause ↓', + btnLesson: 'Lessons Learned ↓' +}; +--- + + +``` + +--- + +## 示范二:正文排版重构、视觉前置与代码折叠(``) + + + +很多技术博客之所以留不住老板,是因为**把最枯燥的文本架构和细节堆在前面,把最性感的成果藏在最后**。以下是针对两篇样本的具体手术刀级重构方案: + +### 🔪 针对样本 1(《DigiKedai Bot》)的重构指令 + +: + +1. **前 30% 黄金视觉区改造(替换简陋的 ASCII 箭头图)**: +* 原文 `## The architecture` 下方那段纯文本箭头(`Customer → Telegram/WhatsApp → ...`)显得过于简陋。 + + +* **改造**:将其替换为一张清晰的 **双轨制状态机架构图(SVG 或 Mermaid)**,重点标出两条颜色不同的路径: +* 🟢 **确定性快车道(Deterministic Fast-Track)**:`购买意图 / /trial 命令 / Deep Link` ➔ **绕过 LLM** ➔ 直接写 NocoDB 发放账号 / 弹出内联菜单。 + + +* 🔵 **语义检索慢车道(RAG LLM Path)**:`开放式商品提问` ➔ 三层 SKU 检索器(自动捆绑免费试用版 `FREECZH01`) ➔ LiteLLM (`mem0-openai`) ➔ 精准回复。 + + + + +* **新增 15 秒实机演示视频**:在 `## Why a business needs a bot like this` 下方,立即嵌入一段左右分屏的 15 秒无声循环 WebM 动图(左边是 Telegram 客户端发一句 *“我要这个试用”*,右边是 NocoDB 表格秒级自动多出一行记录并回复账号密码)。这能让中小企业老板在 **第 15 秒** 就产生付费冲动。 + + + + +2. **应该收进折叠区(`
`)的内容**: +* **折叠点 1**:`## Retrieval: how the bot actually knows the catalogue` 中的具体正则匹配规则(`/\b[A-Z]{2,}\d{2,}\b/gi` 及中英文分词逻辑)。 + + +* *保留在外面的人话*:“为了防止大模型胡编乱造价格,我设计了三层确定性检索器,且在命中付费课程时会自动关联其免费试用版(把原本生硬的‘没有’变成了自动推销)。” + + +* *折叠按钮文案*:`🔍 展开查看:三层 SKU 检索算法与防幻觉 Prompt 注入细节 (For Engineers)` + + +* **折叠点 2**:`## The bugs that ate an afternoon each` 中的 3 个具体排障过程。 + + +* *保留在外面的人话*:用 3 行 Bullet points 总结教训(1. Telegram 超时导致的死循环重发;2. LiteLLM 别名强校验;3. WhatsApp 插件空模板发送字面量 `m_text` 的坑)。 + + +* *折叠按钮文案*:`🛠️ 展开查看:Webhook 50s 超时阻断配置与 WhatsApp 载荷契约排障实录` + + + + + +### 🔪 针对样本 2(《Docker Exit 0 & OOM Killer》)的重构指令 + +: + +> **注意**:样本 2 是一篇写给 Tech Lead 和同行看的顶级 `devops` 硬核排障文。对于这类文章,**千万不要过度折叠核心证据**,因为 `dmesg` 日志和表格正是吸引技术面试官的高光时刻! +> +> + +1. **前 20% 视觉冲击力升级**: +* 将 `## Docker's report says nothing happened` 和 `## The kernel keeps its own record` 的两段代码块,在桌面端改造为 **左右并排对比卡片(Side-by-Side Diff View)**: + + +* 左侧卡片(标红 ❌ **What Docker Reported**):`ExitCode: 0`, `OOMKilled: false` + + +* 右侧卡片(标绿 ✅ **What Kernel dmesg Recorded at the Exact Second**):`Killed process 615 (traefik) ... anon-rss:478480kB` + + + + +* 这种视觉对比会让任何懂行的运维/架构师一眼看出文章的含金量。 + + +2. **应该收进折叠区的内容**: +* 在 `## The fix, and the sentence that has to come with it` 下方,你列出了一长串 Verification 校验细节(挂载列表核对、插件目录检查、路由 200 状态恢复等)。这部分属于严谨但偏冗长的运维 Checklist,适合放入折叠框: + + +* *折叠按钮文案*:`📋 展开查看:生产容器热迁移与 Cgroup 内存上限生效完整验证清单 (5-Step Verification)` + + + +--- + +## 示范三:高转化动态 CTA 矩阵实战文案(``) + + + +扔掉原本底部千篇一律的 `Want a bot like this for your business?`。我们在 `src/components/DynamicCTA.astro` 中根据文章的 `category` 和 `tags` 自动渲染直击痛点的转化钩子,并且**同时兼顾“老板外包询盘”与“雇主/猎头招聘”双目标**: + +### 1. 针对样本 1(`category: case-studies` / `ai`)的专属渲染效果: + +> ### 🚀 想要一个 24/7 自动接单、发试用、不漏单的 AI 销冠? +> +> +> 别让夜间和周末的客户询盘因为“没人回”而流失给竞争对手。我帮中小企业从零搭建 **Telegram / WhatsApp 智能客服与业务自动化流水线**(连接你的商品库、CRM 与自动发货系统,无高昂 SaaS 按人头月费)。 +> * 💬 **企业主定制咨询**:**[点击通过 WhatsApp 发我你的业务场景 (+60 12-797 2969)](https://www.google.com/search?q=https://wa.me/60127972969%3Ftext%3DHi%2520Hoelee,%2520I%2520read%2520your%2520DigiKedai%2520AI%2520Bot%2520case%2520study%2520and%2520want%2520to%2520discuss%2520automation%2520for%2520my%2520business.)** —— 免费为你做 15 分钟自动化可行性与成本评估。 +> * 👔 **团队招聘 / 技术合作**:正在寻找懂状态机架构、能把 LLM 真正落地到生产环境的工程师?**[查看我的工程能力全景与简历 (/about)](https://www.google.com/search?q=/about/)** 或发邮件至 [me@hoelee.com](https://www.google.com/search?q=mailto%3Ame%40hoelee.com)。 +> +> + +### 2. 针对样本 2(`category: devops` / `engineering`)的专属渲染效果: + +> ### 🛡️ 服务器莫名崩溃、云账单失控,或者缺一位能看懂内核日志的架构师? +> +> +> 真正的生产环境排障,靠的不是重启服务器,而是穿透表象抓出根因。我目前独自维护着 **跨 3 台物理/云主机的 162 个生产容器与高可用网络栈**。 +> +> +> * 👨‍💻 **致招聘官与 Tech Leads**:如果你需要一位兼具 Full-Stack 开发能力与底层 Linux/Docker/网关排障功底的实战派工程师,**[点击查看我的自托管基础设施蓝图与履历 →](https://www.google.com/search?q=/about/)** +> * 🔧 **致创业团队与企业主**:需要搭建高安全性的自托管基础设施、企业邮局(SifuMail)或做一次彻底的服务器稳定性诊断?**[直接在 WhatsApp 上联系我 ↗](https://www.google.com/search?q=https://wa.me/60127972969%3Ftext%3DHi%2520Hoelee,%2520I%2520read%2520your%2520Docker%2520OOM%2520debugging%2520post%2520and%2520need%2520help%2520with%2520our%2520infrastructure.)** +> +> + +--- + +## 示范四:3 大系统蓝图(Pillar Pages)的 Astro 路由与挂载规划 + + + +### 1. 路由决策:独立顶层路由 `/blueprints/` vs. 整合进 `/categories/`? + + + +**明确结论:必须采用独立的顶层路由 `/blueprints/`(中文 `/zh/blueprints/`),绝对不要塞进 `/categories/`!** + +**原因有二**: + +1. **UX 与心智层级不同**:`/categories/devops` 是一个按发布时间倒序排列的“文章归档列表(Feed)”,读者点进去看到的是零散的树叶;而 `/blueprints/production-infrastructure` 是一份**精心编排的、带全局拓扑图的“系统白皮书/架构说明书”**,读者看到的是整棵大树的主干。 + + +2. **SEO 权重漏斗(Topic Authority Hub)**:在 Google 眼里,分页的 Category 列表页属于低信息密度的导航页(Thin Hub),极难获得高排名。而一个拥有 2500 字架构综述 + 交互式拓扑图 + 20 个精准内链指向子文章的独立 Pillar Page,是典型的 **Evergreen Cornerstone Content(常青基石内容)**。 + +### 2. 具体目录结构与导航改造方案 + +#### 第一步:在 `src/pages/` 下新增蓝图路由 + + + +```text +src/pages/ +├── blueprints/ +│ ├── index.astro # 3 大系统蓝图总览页(替代或升级原本单薄的分类导航) +│ ├── self-hosted-infrastructure.astro # 蓝图 1:162 容器生产级自托管基础设施全景 +│ ├── ai-agent-automation.astro # 蓝图 2:确定性状态机 + 本地/网关 LLM 业务自动化架构 +│ └── sme-digital-suite.astro # 蓝图 3:中小企业建站、SifuMail 邮局与数字资产交付体系 +└── zh/blueprints/ # 镜像中文版蓝图路由 + +``` + +#### 第二步:顶部导航栏(`BaseLayout.astro`)高价值升级 + + + +目前你的导航栏是:`Posts` | `Categories` | `About` | `RSS`。这太像普通个人博客了。建议立刻改为: + +* 英文:`Blueprints (系统蓝图)` | `Case Studies (商业案例)` | `All Posts (全部文章)` | `Work With Me (合作/雇佣)` +* (注:把低频点击的 `RSS` 移到页脚 Footer 即可,把寸土寸金的顶部导航留给最高转化的入口!) + + + +#### 第三步:单篇蓝图页(如 `/blueprints/self-hosted-infrastructure`)的黄金版面结构 + +当你让 Hermes Agent 生成这 3 个页面时,遵循以下 4 段式模板: + +1. **首屏全局拓扑图**:直接嵌入你在首页用到的架构全景图(可点击放大或分模块高亮),列出硬核指标(3 Hosts: Unraid + Synology + VPS, 162 Containers, 78 Compose Stacks)。 + + +2. **核心架构设计哲学(300~500 字)**:例如讲清楚为什么你用 Cloudflare Tunnel + Traefik + Authentik 做双层零信任入口,为什么备份采用 3-2-1 异地自愈策略。 +3. **按架构层级挂载你的 91 篇实战文章(Cluster Matrix)**: + + +* 不要按时间排!按架构层级排: +* **Layer 1: 边缘网关与安全认证 (Ingress & Auth)** ➔ 挂载《The Forward-Auth Gate That Verified Perfectly...》《Docker Reported Exit 0...》 + + +* **Layer 2: 持续集成与静态交付 (CI/CD & Hosting)** ➔ 挂载《How I Host This Blog: Astro, Gitea Actions...》 + + +* **Layer 3: AI 算力与记忆存储层 (Local GPU & Memory Stack)** ➔ 挂载《How I Self-Hosted a Mem0 Memory Stack...》 + + + + + + +4. **双向内链闭环(极为关键)**: +* 在每一篇子文章的正文开头(或 `` 底部),自动加上一行面包屑提示: +> *🗺️ 本文属于 **[《162 容器生产级自托管基础设施蓝图》](https://www.google.com/search?q=/blueprints/self-hosted-infrastructure)** 的【边缘网关层】实战记录。* + + +* 这样一来,任何通过长尾搜索(比如搜 `Docker ExitCode 0 OOMKilled false`)进来的技术主管,看完单篇排障后,都会顺着这根藤摸到你的全局蓝图页——**一旦他点进蓝图页,你作为高级全栈/DevOps 工程师的专业形象就彻底立住了。** + + + + + +--- + +### 下一步执行建议 + +你可以直接把这份回复保存为 `02-顾问落地方案与组件规范.md` 喂给你的 Hermes Agent: + +1. 让它先执行 **Day-1 紧急修复**(清查 `homelab` 字眼、协助你在 GSC 提交 `sitemap-index.xml`、在主站 WordPress 加导航外链)。 + + +2. 让它根据上方代码创建 `ExecutiveSummary.astro` 和 `DynamicCTA.astro` 两个组件,并率先在 **4 篇首页置顶的 Featured 文章** 上完成 Frontmatter 数据补充与上线测试。 + + + +如果需要在改造 `/about`(升级为 `/work-with-me` 合作与简历二合一页)时帮你设计针对招聘官和企业主的双栏文案,随时把现有的 `about.astro` 源码发给我! \ No newline at end of file diff --git a/docs/consultant-review-2026-10-26-supplement.md b/docs/consultant-review-2026-10-26-supplement.md new file mode 100644 index 0000000..2b77e57 --- /dev/null +++ b/docs/consultant-review-2026-10-26-supplement.md @@ -0,0 +1,658 @@ +# blog.hoelee.com 内容体系与转化漏斗升级 — 顾问补充资料包 + +> **对接目标**:针对外部顾问提出的 **6 大升级方向**(双层阅读架构、3 大系统蓝图、视觉证据链、动态 CTA 矩阵、去模板化生成规范、独立求职与合作页面)及 **搜索引擎收录盲区**,提供现场工程代码、典型文章抽样、两篇代表作完整原文及站点关系诊断。 +> **编制时间**:2026 年 10 月 26 日 +> **整理人**:Lee Teong Hoe (Mr Hoelee) / Hermes Agent +> **站点技术栈**:Astro 5 (Static) + Content Collections + Markdown + Pagefind + Gitea Actions CI/CD + Cloudflare + +--- + +## 目录 +1. [全站结构与核心导航/布局源码](#一全站结构与核心导航布局源码) +2. [15 篇代表性文章清单抽样 (Titles & Frontmatter)](#二15-篇代表性文章清单抽样) +3. [代表作完整 Markdown 原文(商业案例篇 + 硬核排障篇)](#三代表作完整-markdown-原文) +4. [主站与博客的关系及 SEO / GSC 真实状态诊断](#四主站与博客的关系及-seo--gsc-真实状态诊断) +5. [期待顾问重点开刀示范的任务清单](#五期待顾问重点开刀示范的任务清单) + +--- + +## 一、全站结构与核心导航/布局源码 + +### 1. Astro 项目核心目录拓扑 +```text +D:/dev/hoelee-blog/ +├── src/ +│ ├── layouts/ +│ │ └── BaseLayout.astro # 全站唯一基础布局:SEO/JSON-LD/页头Nav/页脚/Umami统计/暗黑模式 +│ ├── pages/ +│ │ ├── index.astro # 英文首页(Hero + 置顶精选 4 篇 + 基础设施数据 + 全文列表) +│ │ ├── zh/ +│ │ │ ├── index.astro # 中文首页(与英文版结构镜像) +│ │ │ ├── about.astro # 中文关于页 +│ │ │ ├── posts/index.astro # 中文文章归档页(带客户端过滤) +│ │ │ ├── categories/ # 中文分类聚合页与各自分类落地页 +│ │ │ └── tags/[tag].astro # 中文标签聚合页 +│ │ ├── posts/ +│ │ │ ├── [...slug].astro # 英文文章详情动态路由(双语自动匹配映射、TOC、相关文章推荐) +│ │ │ └── index.astro # 英文文章归档页 +│ │ ├── categories/ # 英文分类聚合与 [category].astro +│ │ ├── tags/[tag].astro # 英文标签聚合页 +│ │ ├── about.astro # 英文关于页 +│ │ ├── 404.astro # 404 页面 +│ │ ├── robots.txt.ts # 动态生成 robots.txt(纯 ASCII,放行搜索引擎与 AI 爬虫) +│ │ ├── rss.xml.ts # RSS 端点 +│ │ └── llms.txt.ts # 面向 AI 抓取的标准 llms.txt +│ ├── components/ +│ │ ├── AuthorCard.astro # 文章底部实名作者卡片(E-E-A-T 骨架,绑定头像与社媒) +│ │ ├── TableOfContents.astro # 侧边/正文目录组件 +│ │ ├── Search.astro # Pagefind 静态全文搜索弹窗(快捷键 / 触发) +│ │ ├── PostList.astro # 文章列表渲染卡片(带缩略图、分类、阅读时长) +│ │ ├── Archive.astro # 归档时间轴组件 +│ │ ├── CategoryGrid.astro # 7 大分类卡片网格 +│ │ └── CategoryArt.astro # 7 大分类专属矢量 SVG 插画 +│ ├── content/ +│ │ └── posts/ # 91 篇英文 Markdown +│ │ └── zh/ # 91 篇同名对应的中文 Markdown +│ └── styles/ +│ └── global.css # 全站暗色/亮色 Bento 主题变量与排版样式 +``` + +--- + +### 2. 顶部导航栏(Navbar)设计源码(摘自 `src/layouts/BaseLayout.astro`) +```astro + +``` + +--- + +### 3. 首页(`src/pages/index.astro`)核心布局结构 +```astro + +
+
+
+ + + Lee Teong Hoe + +

Lee Teong Hoe — full-stack developer & DevOps engineer

+
+

+ I build and operate production web systems — from the code down to the servers. + 162 containers across three self-managed hosts run client sites, a mail + platform, CI/CD, workflow automation and this blog. I write up what broke, what the + evidence said, and how I fixed it. +

+ +
+ + +
+ + +
+
162
Containers in Prod
+
3 Hosts
Unraid · Synology · VPS
+
78
Compose Stacks
+
91
Bilingual Write-ups
+
+
+ + + +
+ + + + + +
+``` + +--- + +### 4. 文章详情页(`src/pages/posts/[...slug].astro`)核心布局结构 +```astro + + +