Astro + Storyblok：SSR提示和技巧
#javascript #cms #astro #storyblok

这是Astro + Storyblok: SSR preview for instant visual editing的同伴文章。如果您还没有，请先阅读！

下面您会发现我在开发Astro + Storyblok网站时发现的一些额外技巧和技巧。

从生产地点删除草稿

为了避免在生产中加载草稿内容，我为Storyblok API创建了包装器功能：

// src/storyblok/utils.ts

import * as sb from '@storyblok/astro';

export const storyblokApi = (slug: string, params?: sb.ISbStoryParams) => {
  const api = sb.useStoryblokApi();

  return api.get(slug, {
    version:
      import.meta.env.PUBLIC_ENV === 'production' ? 'published' : 'draft',
    ...params,
  });
};

然后，您可以在任何地方使用StoryBlok API，例如：

// src/pages/[slug].astro

import { storyblokApi } from '../storyblok/utils';

export async function getStaticPaths() {
  const { data } = await storyblokApi('cdn/links');
  let links = data.links;
  links = Object.values(links);

  return links
    .filter((link: any) => !['index', 'site-config'].includes(link.slug))
    .map((link: any) => {
      return {
        params: { slug: link.slug },
      };
    });
}

// ...

防止搜索引擎索引预览网站

您可能不希望您的预览网站包含草稿和未完成的内容由搜索引擎索引。为了防止这种情况，请使用koude0集成：

npx astro add astro-robots-txt

// astro.config.{mjs,ts}

import robotsTxt from 'astro-robots-txt';
// ...

export default defineConfig({
  // ...
  integrations: [
    robotsTxt({
      policy: [
        {
          userAgent: '*',
          disallow: process.env.PUBLIC_ENV !== 'production' ? '/' : '',
        },
      ],
    }),
    // ...
  ],
  // ...
});

在SSR中禁用astro-imagetools图像处理

我发现我的SSR页面加载非常缓慢，因为我正在使用koude1处理图像。由于在编辑过程中不需要优化的图像，因此我创建了一个包装组件来绕过预览环境中的图像处理：

---
import type { Picture } from 'astro-imagetools/components';

export type Props = Parameters<typeof Picture>[0];

let {
  breakpoints = [500, 900, 1800], // fallback breakpoints
  class: pictureClass = '',
  ...props
} = Astro.props;

let Component;
if (import.meta.env.PUBLIC_ENV === 'preview') {
  Component = 'img';
  props = {
    class: pictureClass,
    ...props,
  };
} else {
  Component = (await import('astro-imagetools/components')).Picture;
  props = {
    breakpoints,
    attributes: {
      picture: {
        class: pictureClass,
      },
    },
    ...props,
  };
}
---

<Component {...props} />