Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/601https://channel.meo-ai.com/posts/601Sat, 18 Apr 2026 08:38:00 GMT<span class="post-title-source">《用TanStack_Start构建博客（上篇）》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23TanStack_Start" title="#TanStack_Start">#TanStack_Start</a> <a href="/search/result?q=%23TanStack_Router" title="#TanStack_Router">#TanStack_Router</a> <a href="/search/result?q=%23Server_Functions" title="#Server_Functions">#Server_Functions</a> <a href="/search/result?q=%23%E9%9D%99%E6%80%81%E9%A2%84%E6%B8%B2%E6%9F%93" title="#静态预渲染">#静态预渲染</a> <a href="/search/result?q=%23Markdown%E5%8D%9A%E5%AE%A2" title="#Markdown博客">#Markdown博客</a> <a href="/search/result?q=%23%E4%BB%A3%E7%A0%81%E9%AB%98%E4%BA%AE" title="#代码高亮">#代码高亮</a><br /><br />总结：<br />本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。<br /><br />文章要点：<br />- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions<br />- 使用 <code>import.meta.glob</code> 动态扫描 Markdown 文件，配合 <code>gray-matter</code> 解析文章元数据<br />- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行<br />- 动态路由通过 <code>$slug.tsx</code> 文件命名实现，配合 <code>createFileRoute</code> 和 <code>head</code> 函数设置页面标题<br />- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持 <code>line-numbers</code> 语法标记，结合 CSS counter 渲染行号<br />- 文章预告下篇将介绍静态生成和部署策略<br /><br />文章URL：<a href="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/" target="_blank" rel="noopener" title="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/">https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/</a><a class="tgme_widget_message_link_preview" href="https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2" target="_blank" rel="noopener" title="TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…"> <div class="link_preview_site_name accent_color">Frontend Masters</div> <img class="link_preview_image" alt="Building a Blog in TanStack (Part 1 of 2)" src="/static/https://cdn4.telesco.pe/file/SdcbHy_4OJWiubsSxzCgJ8NcIYv3G7kH2N2jNrB8t3TbMqiok_ID_AkaDmpPliaU4mXl1YiJIt3X3zT5g_gp8XQIkHth8B2EEC2I6G6apJbHqmdP2u2Iq-PnmtOwfh1fZkB1rppS9zlgzO9GOVVvwO0zRR2yAlmLqAU9C7EOxHZhSNDPt17w8I2KFUxv3OSj56leWB3dwsNJFepmI9N7zNXorIyCzBwmT7GCZHtrwEnltgmCDIt4nT8mhUDinBDAZx9s5sWD59uA5puezmNjeqKksJ_7mhc2d6iqHJLkaLTwRw1kfBYYT_nZECaijRBLRkP0cOM2iq8MiPqUgxhZeg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Building a Blog in TanStack (Part 1 of 2)</div> <div class="link_preview_description">TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…</div> </a>