次のstrapi v 3のプレビューボタンを作成します.js

Quadri保安官、意欲的な技術的な作家、ソフトウェアプログラマーとアミルTadrisi、最先端のテクノロジーで働く挑戦を愛しているFullstackエンジニアは、大きな記事を書きました;Implementing Previews with Next Applications using a Strapi backend & How to use Image and preview in your Nextjs - Strapi blog 次のプレビューシステムを使用する.strapiによるjs
私は、このユースケースが非常に要求されて、彼らの記事が多くの質問に答えるので、彼らに感謝するためにこの機会を利用しています.私は、このタイプの貢献がStrapiコミュニティにとって非常に重要であると強調したいです、そして、あなたがそれの一部でありたいならば、私はあなたに我々に加わるよう招待しますWrite for the Community Program .
この(非常に)短い記事は、Quadriとアミルが書いたものを補うものになります.あなたはstrapi管理者に直接プレビューボタンを実装する方法が表示されます.すごいじゃない?

カスタマイズ

あなたが確かに知っていなければならないように、Strapiは完全にオープンソースです.ランダムなGIFを生成するコンテンツマネージャーにボタンを入れたいなら、それは絶対に可能です.単にコンポーネントを作成し、管理者にそれを注入します.
コンポーネントを注入することは、我々がここでするつもりです.
注意してください、このチュートリアルはstrapiのv 3に基づいています.v 4版のこのチュートリアルのバージョンは、それが利用可能になるとき、ページの最上位で言及されます.
前に述べたように、あなたは既にあなたの好きなフロントエンドのフレームワークのようなプレビューシステムを持っていると仮定するつもりですNext.js このような特定のプレビューURLが必要です.

http://localhost:3000/api/preview?secret=fdsfasdmgrNPQXtfdsfMswfdsfdsfasdkjfow&slug=pricing](http://localhost:3000/api/preview?secret=fdsfasdmgrNPQXtfdsfMswfdsfdsfasdkjfow&slug=pricing&lang=en&type=page

我々は、単にあなたのコレクションタイプに基づいてこのURLを構築するコンテンツマネージャのボタンを作成します.

拡張

The /extensions フォルダには、すべてのプラグインのカスタマイズ可能なファイルが含まれます.詳細情報the dedicated documentation page.
あなたはcontent-manager 以下のフォルダ

クリエイトア./extensions/content-manager/admin/src/index.js 以下を含むファイル

import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import pluginLogo from './assets/images/logo.svg';
import App from './containers/Main';
import ExternalLink from './InjectedComponents/ExternalLink';
import ConfigureViewButton from './InjectedComponents/ContentTypeBuilder/ConfigureViewButton';
import lifecycles from './lifecycles';
import reducers from './reducers';
import trads from './translations';

export default (strapi) => {
  const pluginDescription = pluginPkg.strapi.description || pluginPkg.description;
  const plugin = {
    blockerComponent: null,
    blockerComponentProps: {},
    description: pluginDescription,
    icon: pluginPkg.strapi.icon,
    id: pluginId,
    initializer: null,
    injectedComponents: [
      {
        plugin: 'content-type-builder.listView',
        area: 'list.link',
        component: ConfigureViewButton,
        key: 'content-manager.link',
      },
      // This is the injection zone
      {
        plugin: 'content-manager.editView',
        area: 'right.links',
        component: ExternalLink,
        key: 'content-manager.preview-link',
      },
    ],
    injectionZones: {
      editView: { informations: [] },
      listView: { actions: [], deleteModalAdditionalInfos: [] },
    },
    isReady: true,
    isRequired: pluginPkg.strapi.required || false,
    layout: null,
    lifecycles,
    mainComponent: App,
    name: pluginPkg.strapi.name,
    pluginLogo,
    preventComponentRendering: false,
    reducers,
    trads,
  };

  return strapi.registerPlugin(plugin);
};

このファイルを使用すると、すぐに作成するカスタムコンポーネントを注入できます.このコンポーネントはすでにインポート中です.

import ExternalLink from './InjectedComponents/ExternalLink';

そうすると、

injectedComponents: [
  {
    plugin: 'content-type-builder.listView',
    area: 'list.link',
    component: ConfigureViewButton,
    key: 'content-manager.link',
  },
  // This is the injection zone
  {
    plugin: 'content-manager.editView',
    area: 'right.links',
    component: ExternalLink,
    key: 'content-manager.preview-link',
  },
],

それについての詳細情報を見つけるdocumentation .

クリエイトア./extensions/content-manager/admin/src/InjectedComponents/ExternalLink/index.js 以下を含むファイル

import React from 'react';
import styled from 'styled-components';
import { useContentManagerEditViewDataManager } from 'strapi-helper-plugin';
import EyeIcon from './view.svg';

const StyledExternalLink = styled.a`
  display: block;
  color: #333740;
  width: 100%;
  text-decoration: none;
  span,
  i,
  svg {
    color: #333740;
    width: 13px;
    height: 12px;
    margin-right: 10px;
    vertical-align: 0;
  }
  span {
    font-size: 13px;
  }
  i {
    display: inline-block;
    background-image: url(${EyeIcon});
    background-size: contain;
  }
  &:hover {
    text-decoration: none;
    span,
    i,
    svg {
      color: #007eff;
    }
  }
`;

const ExternalLink = () => {
  const { modifiedData, layout } = useContentManagerEditViewDataManager();

  if (modifiedData.published_at) {
    return null;
  }

  if (!modifiedData.slug) {
    return null;
  }

  if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
    return null;
  }

  return (
    <li>
      <StyledExternalLink
        href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
        target="_blank"
        rel="noopener noreferrer"
        title="page preview"
      >
        <i />
        Preview
      </StyledExternalLink>
    </li>
  );
};

export default ExternalLink;

ここで説明するのにかなりのものがあります.最初の1つは、ボタンのSVGアイアイコンをインポートすることです.

クリエイトア./extensions/content-manager/admin/src/InjectedComponents/ExternalLink/view.svg 以下を含むファイル

<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>

さあ、これに集中しましょう.

const ExternalLink = () => {
  const { modifiedData, layout } = useContentManagerEditViewDataManager();

  if (modifiedData.published_at) {
    return null;
  }

  if (!modifiedData.slug) {
    return null;
  }

  if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
    return null;
  }

  return (
    <li>
      <StyledExternalLink
        href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
        target="_blank"
        rel="noopener noreferrer"
        title="page preview"
      >
        <i />
        Preview
      </StyledExternalLink>
    </li>
  );
};

これは、FoodAdvisor , 次のライブデモ.JSフロントエンド.まず第一にmodifiedData and layout からuseContentManagerEditViewDataManager フック.第一は、あなたのエントリーデータを含んでいるオブジェクトです、そして、第2にはあなたのエントリー(AIIID、Content - Type、Metadatas等の種類)についてのより興味深い情報があります
コンテンツが既に公開されている場合、我々は何もしないslug フィールドまたは必要なENV変数が存在しない場合.実際には、コンテンツがまだ公開されていないときにプレビューボタンを表示するだけです.また、それがスラグまたは必要なENV変数を含まないならば、それはあなたがあなたのフロントエンドでそれをプレビューすることができないことを意味します.

if (modifiedData.published_at) {
  return null;
}

if (!modifiedData.slug) {
  return null;
}

if (!CLIENT_URL || !CLIENT_PREVIEW_SECRET) {
  return null;
}

問題がない場合は、コンテンツマネージャーの編集ビューでボタンを単に表示します.

return (
    <li>
      <StyledExternalLink
        href={`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`}
        target="_blank"
        rel="noopener noreferrer"
        title="page preview"
      >
        <i />
        Preview
      </StyledExternalLink>
    </li>
  );

URLがどのように構築されているかを見てください.

`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}`

ここで本当に複雑なものはありませんが、単にクライアントアプリケーションのURLをとっています./api/preview?secret=xxx&slug=xxxあなたはおそらくあなたの次にファイルを持っているでしょう.この呼び出しを処理するJSアプリケーション.あなたにアイデアを与えるには、これはFoodAdvisorで行うことです.

// ./pages/api/preview.js

import { getData } from '../../utils';

export default async (req, res) => {
  if (
    req.query.secret !== process.env.PREVIEW_SECRET ||
    (req.query.slug != '' && !req.query.slug)
  ) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  const previewData = await getData(
    req.query.slug,
    req.query.locale,
    req.query.apiID,
    req.query.kind,
    null
  );

  if (!previewData.data) {
    return res.status(401).json({ message: 'Invalid slug' });
  }
  res.setPreviewData({});

  res.writeHead(307, {
    Location: previewData.slug,
  });

  res.end();
};

私たちのデモでは、ロケール、APIID、およびコンテンツタイプの種類など、より柔軟にプレビューするデータに関する詳細な情報が必要でした.私は、単に私のURLにより多くのparamsを加えることによってそれをすることができます:

`${CLIENT_URL}/api/preview?secret=${CLIENT_PREVIEW_SECRET}&slug=${modifiedData.slug}&locale=${modifiedData.locale}&apiID=${layout.apiID}&kind=${layout.kind}`

これがレイアウトオブジェクトを必要とした理由ですが、必要な場合は削除できます.私がこの記事でこれらの分野を必要とした理由を詳述しません、しかし、よりよく私のアプローチを理解するためにFoodAdvisorのソースコードをチェックしてください.

./pages/api

./utils/index.js

まあ、何もすることはありません!あなたの管理者を構築することができますあなたのサーバーを実行し、コンテンツをプレビュー!

次のコマンドを使用して管理者をビルドします.

yarn build --clean

サーバの再起動

yarn develop

今、エントリを作成した後、またはスラグのフィールドを充填するだけで、コンテンツマネージャの右側にプレビューボタンを表示することができます.

これはFoodAdviderフロントエンドのようになります.

結論

strapiのカスタマイズは非常に簡単です.我々は、ここで3つのファイルを作成し、それらの1つだけです.SVG!
Straapiはネイティブのプレビュー機能を提供していませんので、それはヘッドレスCMSですが、オープンソースであることで、それはあなたのフロントエンドアプリケーションのニーズに適応する自由と柔軟性を与える.
これはおそらく管理者で行うことができるプレビューの最も簡単な実装でした.コンテンツマネージャでフロントエンドのアプリケーションプレビューを直接表示するコンポーネントを作成することで、さらに進むことに挑戦します!
次の記事でお会いしましょう!