Closed27

prismic開発メモ

Teruhisa - T6ADEVTeruhisa - T6ADEV

コンテンツの種類にSingle Typeがある。サイト内の文章を全てprismicに押し込めるのは魅力的かも。

Teruhisa - T6ADEVTeruhisa - T6ADEV

初Repeatable type操作。ドキュメント読まずなんとなく触ってみる。
画像とか色々組み込みたい気持ちを抑えてひとまず少ない項目で。
Add a new tabとあるがよくわからないままSave

Teruhisa - T6ADEVTeruhisa - T6ADEV

Sliceが目玉らしい?ので推したいんだろうけど。リッチテキストとかゴリゴリ使う場合は確かに便利かも。
No Codeベースで作りたいならいいかも。
コーディングベースだと色々(特にスタイル)いじりたいので扱いが難しそう。特にデザインをライブラリに頼ってる場合は特に。

Teruhisa - T6ADEVTeruhisa - T6ADEV

@prismicio/react

prismic-reactjs
は同じものだった。
ドキュメントが追いついてないっぽい。

Teruhisa - T6ADEVTeruhisa - T6ADEV

てっきりシークレットなアクセストークンありきなものかと思ったら。
プライベートにしたいならクライアント側でアクセストークン露出したらあかんやん。なんかガイドが不親切なきが?(詳しく読んでない)

Teruhisa - T6ADEVTeruhisa - T6ADEV

Nextjsのチュートリアルは古いので参考程度に見て、あとはライブラリ自体の最新版のガイドを見るべし。

Teruhisa - T6ADEVTeruhisa - T6ADEV

Rich textは何もしないとピュアなhtmlで表現される。
カスタマイズしたい場合は、こうできる。

<PrismicRichText
  field={document.data.myRichTextField}
  components={{
    heading1: ({ children }) => <Heading>{children}</Heading>,
    paragraph: ({ children }) => <p className="paragraph">{children}</p>,
  }}
/>

PrismicProviderで一括して変更できるのでこっちが便利か。

const PrismicCustomProvider = ({ children: mainchildren }) => (
  <PrismicProvider
    richTextComponents={{
      paragraph: ({ children }) => <Text>{children}</Text>,
      hyperlink: ({ node, children }) => (
        <ExternalLink link={node.data.url}>{children}</ExternalLink>
      ),
    }}
  >
    {mainchildren}
  </PrismicProvider>
);

https://prismic.io/docs/technical-reference/prismicio-react#prismicrichtext

Teruhisa - T6ADEVTeruhisa - T6ADEV

publish前の記事をローカルだけでいいから見たいなぁ。
preview modeはなんだか用途にあわなさそう。

Teruhisa - T6ADEVTeruhisa - T6ADEV

publish前(unpublish)、archivedな物を引っ張ってくるapiはなさそう。
tagsで運用するか・・・

Teruhisa - T6ADEVTeruhisa - T6ADEV

サーバーサイドで扱うならこうできる

export const getStaticProps = async () => {
  const rawContents = await client.getAllByType('...type...');
  const contents = rawContents
    .filter(({ tags }) => !tags.some((tag) => tag === 'unpublished')) // productionではこうしといて、ローカル開発するときはコメントアウトすればよい
    .map((raw) => raw);
  return {
    props: {
      contents,
    },
  };
};
Teruhisa - T6ADEVTeruhisa - T6ADEV

うん、とりあえず細かな情報は得られなさそうだからdocument idで引っ張ってみるしかなさそう。

このスクラップは2022/02/22にクローズされました