次のブログを構築する銀河ガイド.JSと満足

遠く離れた銀河では、グリルと朝食の男として知られていた個人が住んでいた.それで、彼はちょうどパドワンシェフだけでなく、マスターシェフ(彼の前に来た人々のような)になるために、壮大な探索に出かけました.
これは、次の人気のJavaScriptフレームワークを使用している間、Contentfulでブログを構築するガイドです.jsあなたが既にキャッチされていない場合は、スターウォーズは料理の本は、複数の家族や友人から渡されたレシピでいっぱいのテーマです.私はあなたがこの旅を楽しむことが期待され、このアプリの構築.食べ物があなたと一緒にありますように.

エピソードI：ファントムスターター

あなたのプロジェクトを取得するには、この驚くべきに沿って従う必要が始まるNext.js and Contentful starter guide 開発者の提唱者によって作られた.このチュートリアルでは、プロジェクトを作成し、Contentfulアカウントを接続し、Vercelで展開します.このスターターに続いて、以下の詳細な機能を実装することができます.

エピソードII：Woohooksの攻撃

プロジェクトを作成し、ローカルで実行し、Contentfulに接続したので、Webhookを追加しましょう.あなたのVercelのプロジェクトに接続することで、それはあなたのコンテンツに変更を行い、再構築するためにcontentfulトリガするたびにVercelに通知します.
Webhookを追加するには、Contentful Webアプリケーションの設定に移動し、単に“WebHoopを追加”を選択するか、このプロジェクトはすでに配備されているので、我々はできることをすることができますVercelのテンプレートを使用することができます.あなたがマニュアルアプローチをしているならば、ここにありますWebhooks documentation あなたを助けるために.

エピソードIII：教区の復讐

どんな良いブログでも、読者が対話する能力を持つことは必須です.複数の機会に私はコメントセクションを追加するときにDisqusを使用しました.しかし、次に新しいです.JS私はどこにそれを追加し、Disqusは次との統合を持っていないことを確認されませんでした.そのツールの中のJS.だからここに追加するステップですDisqus .
まず、Disqusのアカウントにサインアップします.彼らは仕事を得る無料プランを持っている.サインアップした後、あなたは私のサイトにDisqusをインストールしたいですあなたのウェブサイトの名前とカテゴリを追加することにより、指示に従ってください.繰り返しますが、あなたは次に見えません.JSは、プラットフォームのセクションに記載されているので、マニュアルユニバーサルインストールを選択する必要があります.私は以下のコードの例を提供します.
今は運がいいからDisqus React , DisqusのためのNPMパッケージ.端末の実行時:npm install disqus-react次はAを加える予定ですcomment.js コンポーネントフォルダにファイルを追加し、次のコードを追加します

// /components/comment.js
import {DiscussionEmbed} from "disqus-react"
const DisqusComments = ({ post }) => {
 const disqusShortname = "stahlwalkercookbook"
 const disqusConfig = {
   url: `https://cookblog.vercel.app/posts/${post.slug}`,
   identifier: post.slug, // Single post slug
   title: post.title // Single post title
 }
 return (
   <div>
     <DiscussionEmbed
       shortname={disqusShortname}
       config={disqusConfig}
     />
   </div>
 )
}
export default DisqusComments;

次にDisqusコンポーネントをインポートする必要があります[slug.js] あなたのページディレクトリのポストフォルダにあるファイル.それから、それはちょうどあなたがどこへのコメントを望むかについて見つけることの問題です、私は私のブログ柱の終わりにそれを置きました.

エピソードIV：新しい社会的共有

私は、あなたが好むどんな社会的ネットワークにでもあなたのブログを共有する能力のファンです.我々は、もう一つを使いそうですnpm package to add social sharing . プロジェクトの実行中です.npm i next-shareそこから次のコードを追加できます[slug.js] ファイル.私はコメントの前に私の記事の後にこのコンポーネントを加えました.すべての個々の投稿をつかむためにあなたのサイトのURLにURLを更新する必要があります.ここから、人々はあなたのサイトだけでなく、あなたが書いたブログ記事を共有することができます.以下は例です.

// /pages/posts/[slug.js]
      <div className="social">
           <h2>Looks tasty, share with friends</h2>
           <FacebookShareButton
             url={`https://cookblog.vercel.app/posts/${post.slug}`} >
             <FacebookIcon size={32} round />
           </FacebookShareButton>
           <TwitterShareButton
             url={`https://cookblog.vercel.app/posts/${post.slug}`} >
             <TwitterIcon size={32} round />
           </TwitterShareButton>
      </div>

エピソードV：開いたグラフ

今、あなたのブログからのリンクが共有されるとき、すべてが大きく見えることを確認するために、我々は開いているグラフタグを更新することに取り組むつもりです.オープングラフタグは、検索エンジンとソーシャルメディアプラットフォームで使用されるメタデータを保持します.このセクションはあなたの開いたグラフタグを更新し、TwitterやFacebookを含むことに焦点を当てます.
作業中のファイルは、コンポーネントディレクトリと名前meta.js .
あなたのプロジェクトに合わせてカスタマイズすることを確認します.たとえば、あなたのFacebookを取得するプロジェクトを作成する必要がありますfb:app_id . さえずりで、私はあなたが「小さい」内容表示を好むならば、あなたがちょうど「要約」を置くことができるだけで、「ScenyCount Largechenイメージ」Twitterカードを作成しました.
私が出くわした1つの問題は、イメージがきちんと表示されなかったということでした.これは、イメージのメタプロパティが完全なイメージのURLを必要とするため、これは念頭に置いて維持しながら更新されます.
以下に、メタタグのような例を示します.

// /components/meta.js

     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:site" content="@LucasStahl11" />
     <meta name="twitter:creator" content="@LucasStahl11" />
     <meta name="twitter:title" content="Stahlwalker Cookbook" />
     <meta name="twitter:description" content="A blog dedicated to cooking up recipes for all those far far and away." />
     <meta property="twitter:image" content="https://cookblog.vercel.app/images/starwarssocialfinal.jpg"/>

     <meta property="og:title" content="Stahlwalker Cookbook"/>
     <meta property="og:type" content="website"/>
     <meta property="og:url" content="https://cookblog.vercel.app/"/>
     <meta property="og:image" content="https://cookblog.vercel.app/images/starwarssocialfinal.jpg"/>
     <meta property="fb:app_id" content="add Facebook id"/>
     <meta property="og:description" content="A blog dedicated to cooking up recipes for all those far far and away."/>

これらを検証するには、正しくチェックすることができますFacebook’s debugger .
あなたのfavicon画像については、これらのパブリックディレクトリに配置することができます.ここへのリンクですFavicon generator 正しいイメージのサイズを作成するには、現在の次の置換する必要があります.js画像.

エピソードVI：カテゴリーの復帰

あなたのブログ記事を持っているが、カテゴリタグでソートすることができればそれはクールではないだろうか?これを行うには、Contentful Webアプリケーションの「Content - Model」セクションで行うことができるコンテンツモデルに別のフィールドを追加する必要があります.“POST”コンテンツタイプでは、私は新しいテキストフィールドを追加し、“ショート”と“リスト”オプションを選択しました.この新しいフィールドは、後で検索することができますあなたのブログの記事をタグ付けを開始できることを意味します.料理の本では、料理の種類によってレシピを分類しました.
コンテンツモデルを更新したら、コードでGraphSQLクエリを更新する必要があります.にapi.js リポジトリに新しいフィールドの名前を追加します.私はフィールドのfoodcategoryと呼ばれる.あなたがあなたの質問がどのように見えるべきかわからないならば、これはあなたがあなたの質問が正しいことを確認するためにGraphics Playgroundアプリを使うことができるところです.
Graph Playgroundアプリをインストールするには.あなたは“アプリ”に移動し、あなたのcontentfulアプリのトップメニューで“アプリを管理”をクリックしてこれを見つけることができます.単にインストールをクリックし、この機能を使用してプロジェクト内のデータを照会できます.注は、このアプリを構成する必要がありますので、あなたのcontentfulプレビューAPIトークンをご利用いただけます.

私はカテゴリーがブログ柱ページのヘッダーの下でリストされることを望みました.私はPostheaderコンポーネント内のカテゴリにアクセスできるように、私のPostheaderコンポーネントの支柱としてfoodcategoryを追加しました.

    // /pages/posts/[slug.js]      
               <PostHeader
               title={post.title}
               coverImage={post.coverImage}
               foodCategory={post.foodCategory}
               date={post.date}
               author={post.author}
               />

ユーザーがカテゴリ別に検索できるようにする場合は、API検索ツールなどを追加することができますAlgolia or Elasticsearch . また、カテゴリ別にすべてのブログ記事をフィルタリングし、それを構築することがあります.これがプロセスの最初のステップです.

エピソードVII：CSS覚醒

私はToowindとゼロの経験を持っており、それは事前にこのプロジェクトでインストールされています.あなたが私のような場合は、正規のCSSでスタイルをすることができます基本に戻るしたい.スタイルフォルダーはパブリックディレクトリにあります.クラスを適用する必要があります(Next . jsを使用しているので覚えておいてください)“スタイル”を探しているコンテナに“classname”を使用する必要があります.
これはスターウォーズテーマ料理ですので、私は使用Google Fonts 映画で使用されているものに似た外観を持ったフォントを得るために.私も、社会的なアイコンのために使われます.両方のライブラリを追加しましたapp.js ヘッドタグ.

エピソードVIII：最後の荷より多くのボタン

この時点で、私のホームページはすべてのブログ記事を表示していました.私はどのように多くのポストが記載されていた以上の制御をしたかった.あなたにはページ化を加えるオプションがあります、そして、その興味があなたならば、私は次のブログを見てみることを提案しますNext.js pagination with Contentful . あなたは何かシンプルで甘い場合は、負荷をより多くのボタンを追加することができます.この例では、私は後者と行きました.
既存変更more-stories コンポーネントを表示するには、多くの投稿を制御することができますどのように多くのユーザーが表示するときに多くの負荷をクリックします.私はまた、コンポーネントが複数の場所で使用されているため、コンポーネントは、より多くのボタンを読み込む必要があるかどうかを判断するために支柱を使用しました.以下に例を示します.

// /components/more-stories.js
import React, { useState } from 'react';
import PostPreview from '../components/post-preview'

export default function MoreStories({ posts, showMore }) {
 const [ postNum, setPostNum] = useState(4); // Default number of posts displayed
  function handleClick() {
   setPostNum(prevPostNum => prevPostNum + 4) 
 }

 posts.length + 1 === postNum ? showMore = false : showMore = true;

 return (
   <section>
     <h2 className="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">
       More Recipes
     </h2>
     <div className="grid grid-cols-0 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32">
       {posts.slice(0, postNum).map((post) => (
         <PostPreview
           key={post.slug}
           title={post.title}
           coverImage={post.coverImage}
           date={post.date}
           author={post.author}
           slug={post.slug}
           excerpt={post.excerpt}
         />
       ))}
     </div>

    {showMore && (
         <button className="load-more" onClick={handleClick}>Load More</button>
       )}
   </section>
 )
}

コンポーネントにコードを更新したら、必ず新しい小道具を追加してください.showMore , をindex.js ファイル

// /pages/index.js
{morePosts.length > 0 && <MoreStories posts={morePosts} showMore={true} />}

そして、そこには、あなたの負荷をより効果的にする必要があります!

エピソードIX：stahlwalkerクックブックの上昇

そして、それは私が私の最初の次をつくった方法です.プロジェクト.我々はスターターを取って、アプリを追加することによってそれを構築し、コメントセクション、共有する機能、風船よりもCSSでスタイルを追加し、負荷を追加して視聴者のためのオプションは、ブログの記事にさらに飛び込む.すべての最後のコードを表示するにはhere .
The Next.js and Contentful starter guide 本当に私にインスピレーションを与えたので、私はあなたと同様にそれを構築したものを見てみたい!私は私の新しいブログに機能を加え続けることを計画しています、しかし、あなたがそれをチェックしたいならばStahlwalker Cookbook プロジェクト