SvelteKit集成Netlify CMS后无法加载内容，报Cannot read property 'title'错误

问题原因定位 #

你遇到的报错核心原因是参考了Sapper体系的教程，但SvelteKit的API路由、页面加载逻辑与Sapper存在大量不兼容差异，同时还有配置文件路径错误的问题，具体如下：

1. API端点写法不兼容SvelteKit #

Sapper的端点采用Node.js风格的res.writeHead、res.end返回响应，而SvelteKit的API端点要求返回固定格式的对象。你当前的端点写法在SvelteKit中无法正常返回数据，导致请求报500错误，页面拿到的post变量为undefined，直接触发读取title属性失败的报错。
如果你使用的是SvelteKit v1+版本，端点文件应放在src/routes/blog/[slug]/+server.js，正确写法参考：

import path from "path";
import fs from "fs";
import grayMatter from "gray-matter";
import marked from "marked";

const getPost = (fileName) => {
  // 调整路径适配生产环境构建结构
  return fs.readFileSync(
    path.join(process.cwd(), "static/posts/", `${fileName}.md`),
    "utf-8"
  );
};

export async function GET({ params }) {
  const { slug } = params;
  try {
    const post = getPost(slug);
    const renderer = new marked.Renderer();
    const { data, content } = grayMatter(post);
    const html = marked(content, { renderer });
    return new Response(JSON.stringify({ html, ...data }), {
      status: 200,
      headers: {
        "Content-Type": "application/json"
      }
    })
  } catch (e) {
    return new Response(JSON.stringify({
      message: "Not found"
    }), {
      status: 404,
      headers: {
        "Content-Type": "application/json"
      }
    })
  }
}

2. 页面加载逻辑写法不兼容 #

Sapper的preload方法在SvelteKit中已经替换为load方法，你当前页面的preload逻辑不会正常执行，无法给post变量赋值，也是导致post为undefined的核心原因之一。
正确的页面加载逻辑写法参考：

<script context="module">
  export async function load({ fetch, params }) {
    const res = await fetch(`/blog/${params.slug}.json`);
    const data = await res.json();
    if (res.status === 200) {
      return {
        post: data
      };
    } else {
      return {
        status: res.status,
        error: new Error(data.message)
      };
    }
  }
</script>

<script>
  export let post;
</script>

<!-- 剩余样式、页面结构部分保持不变即可 -->

3. Netlify CMS配置文件路径错误 #

控制台报错提示Failed to load config.yml (500)，Netlify CMS要求配置文件必须放在站点根路径，也就是你项目的static/config.yml位置，不能放在blog子目录下，调整文件位置即可解决该报错。

4. 可选优化：调整markdown文件存储位置 #

当前你把markdown存在static/posts目录下，部署到Netlify后这些文件会被当作静态资源对外暴露，存在不必要的资源泄露风险。建议把markdown文件迁移到src/content目录下，读取时路径调整为path.join(process.cwd(), 'src/content', ${fileName}.md)即可。

内容的提问来源于stack exchange，提问作者Alexander Hemming