解决 Headless CMS 与静态网站生成工具结合使用的路径问题

随着现代 Web 应用程序的发展和迭代，Headless CMS 和静态网站生成工具已成为前端开发者必不可少的工具之一。Headless CMS 可以帮助开发者以 API 的形式管理和提供内容，而静态网站生成工具则可以将这些内容转换成静态 HTML、CSS 和 JavaScript 文件，加快网站的加载速度。

但两者结合使用时，可能会遇到一个路径问题：对于在 Headless CMS 中管理的静态资源，如图片、PDF 文件等，如何在生成的静态网站中正确引用这些资源呢？

以下是一个针对这个问题的解决方案，具体步骤如下：

1. 在 Headless CMS 中设置资源路径

在 Headless CMS 的管理界面中，可以设置静态资源在 CDN 上的路径或 domain，这个路径或 domain 将作为静态资源在静态网站中的访问路径。此处以 Strapi 为例：

// 静态资源路径
SERVER_URL=/uploads

2. 在静态网站生成工具中添加插件

对于 GatsbyJS、Vuepress 等静态网站生成工具，可以通过添加第三方插件来实现对静态资源路径的修改。

以 GatsbyJS 为例，可以添加 gatsby-source-strapi 插件来获取 Strapi 中的数据，并在 GatsbyJS 的 gatsby-config.js 中添加以下配置：

// www.javascriptcn.com code example
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: "http://localhost:1337",
        contentTypes: ["article", "category", "tag"],
        singleTypes: [`homepage`],
        queryLimit: 1000,
      },
    },
    {
      resolve: "gatsby-plugin-remote-images",
      options: {
        nodeType: "StrapiArticle",
        imagePath: "cover_image.url",
        name: "cover_image_local_path",
        prepareUrl: (url) => `${process.env.SERVER_URL}${url}`,
      },
    },
  ],
};

其中，gatsby-plugin-remote-images 就是一个解决路径问题的插件，通过从 Headless CMS 中获取文章的封面图片路径，并拼接上上一步中设置的资源路径，将这个 URL 转存到本地目录中，以方便后续使用。

3. 在模板中正确引用静态资源

最后，在模板中正确引用静态资源即可。以 GatsbyJS 中的 React 模板为例：

// www.javascriptcn.com code example
// 通过 GraphQL 查询文章数据
export const query = graphql`
  query GetArticle($slug: String!) {
    strapiArticle(slug: { eq: $slug }) {
      id
      title
      content
      cover_image_local_path {
        childImageSharp {
          fluid(maxWidth: 960) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
`;

// 在组件中使用已经解析出的 cover_image_local_path
const Article = ({ data }) => {
  const { strapiArticle } = data;

  return (
    <div>
      <h1>{strapiArticle.title}</h1>
      <Img fluid={strapiArticle.cover_image_local_path.childImageSharp.fluid} />
      <div dangerouslySetInnerHTML={{ __html: strapiArticle.content }} />
    </div>
  );
};

至此，你已经成功解决了在 Headless CMS 和静态网站生成工具结合使用时的路径问题。指导意义有以下几点：

1. 在 Headless CMS 中设置资源路径或 domain，是这个问题的关键所在；
2. 第三方插件可以帮助你在静态网站生成工具中快速解决路径问题；
3. 代码示例中使用了 GatsbyJS 和 Strapi，但是这个解决方案同样适用于其他静态网站生成工具和 Headless CMS。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d83ba0a941bf7134eb8f30