从GhostCMS向SvelteKit导入博客内容遇SDK导入错误求助

一、修复SDK导入错误 #

@tryghost/content-api属于CommonJS模块，而SvelteKit默认使用ES模块系统，直接静态导入会出现兼容问题，可通过以下两种方式解决：

方法1：改用动态导入 #

将静态import替换为load函数内的动态导入，同时添加错误捕获便于调试：

<script context='module'>
const GHOST_URL = 'http://blog.nafuna.tv';
const GHOST_KEY = '87f6096411ae42f96df2615620';
const GHOST_VERSION = 'v4';

export async function load() {
  // 动态导入Ghost SDK
  const { default: GhostContentAPI } = await import('@tryghost/content-api');
  const api = GhostContentAPI({
      url: GHOST_URL,
      key: GHOST_KEY,
      version: GHOST_VERSION
  });
  
  try {
    const postsJson = await api.posts.browse({limit: 5, include: 'tags,authors'});
    return {
      props: {
        postsJson
      }
    };
  } catch (err) {
    console.error('获取Ghost文章失败:', err);
    return {
      props: {
        postsJson: []
      }
    };
  }
}
</script>

方法2：配置Vite兼容CommonJS #

在项目根目录的vite.config.js（或vite.config.ts）中添加优化配置，强制将SDK转为ES模块：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  optimizeDeps: {
    include: ['@tryghost/content-api'],
    esbuildOptions: {
      target: 'es2020'
    }
  }
});

配置完成后即可继续使用静态import语法。

二、排查文章获取失败问题 #

1. 验证核心配置准确性

   • 确认GHOST_KEY是Ghost后台创建的内容API密钥（而非管理API密钥）
   • 检查GHOST_URL协议：若Ghost站点启用HTTPS，必须改用https://开头，避免协议不匹配导致的请求失败
   • 核对GHOST_VERSION与Ghost服务器版本一致（比如Ghost v5需写v5，不要用过时的v4）

2. 确认API访问权限
   进入Ghost后台 → 设置 → 集成，找到你创建的集成，确保“内容API”权限已开启（私有站点需明确授权集成可访问API）

3. 通过错误日志定位问题
   借助上面代码中的try-catch，查看控制台输出的具体错误信息（比如认证失败、跨域、网络不通等），精准定位问题点。

三、组件数据使用调整 #

你的组件已通过export let data: PageData;接收数据，模板中需通过data.postsJson访问内容，示例：

{#if data.postsJson.length}
  <ul>
    {#each data.postsJson as post}
      <li>{post.title}</li>
    {/each}
  </ul>
{:else}
  <p>暂无文章</p>
{/if}

内容的提问来源于stack exchange，提问作者Nqobizitha Mlilo