問題タブ [netlify-cms]

Gatsby/Netlify CMS スタックを使用しており、メイン ページにマークダウン ファイルの内容を表示しようとしています。たとえば、src/pages/experience にすべてのエクスペリエンス マークダウン ファイルを表示するディレクトリがあります。

したがって、graphql を使用すると、実際に機能するクエリがあります。

ただし、コンポーネントページで実行すると、 × TypeError: Cannot read property 'allMarkdownRemark' of undefined が表示されます

ただし、戻る前にこれを入力した後：

エラーは消えますが、セクション全体が消えます。ここでは以下です：

gatsby-config-js で、経験ディレクトリが src/pages/experience である /src/posts とは別に、gatsby-source-filesystem resolve を /src/pages に追加しました。

更新: 2019 年 2 月 7 日 gatsby-config-js ファイルは次のとおりです。

私が感じているのは、gatsby-node-js のどこかで、そのタイプのクエリで何かを行うためのインスタンスを作成していないということです。

誰かが仕事に似たものを手に入れることができたかどうか知りたいですか? よろしくお願いいたします。

更新: 2019 年 2 月 6 日

そのため、pageQuery から StaticQuery にコードを変更しましたが、残念ながらまだ機能しませんが、正しい方向に進んでいると思います。

このエラー TypeError: Cannot read property 'title' of undefined が表示されます

したがって、私が達成しようとしているのは、このセクション全体のこのインスタンスです。もちろん、これはプレースホルダーですが、そのプレースホルダーを各マークダウンの内容に置き換えたいと考えています。 体験切り抜き

更新: 2019 年 2 月 7 日

今日は変更はありませんが、私がやろうとしていることをよりよく理解するために、いくつかのフィールドを投稿したかったのです。これは、コレクションを表示している NetlifyCMS の config.yml ファイルです。これは私が達成していることです (注: テスト リポジトリは実際の CMS を確認するためのものです。変更を検討します):

マークダウン ページの例として、エクスペリエンス セクションで探すべき形式は次のとおりです。画像でわかるように、コンテナー全体に表示されるためです。

更新: 2019 年 2 月 8 日

以下に提供するコードでいくつかの更新がありますが、それに入る前に、ここに私が達成しようとしているもののいくつかの画像があります. これらは、実際のデータに置き換えようとしているプレースホルダーです。これは、セクションごとに次のとおりです。

フル エクスペリエンス スニップ

プロジェクトの切り取り

ブログ抜粋

以下の回答で @staypuftman から提供されたコードを実行したところ、次のエラーが発生しました。

あなたのサイトの「gatsby-node.js」は、存在しないコンポーネントを含むページを作成しました。

既にあるものに加えてコードを追加し、そのエラーを処理しました。これは、私が最初に起こると思っていたことであり、StaticQuery を単独で使用したかった理由です。これは、ドキュメントとスターター リポジトリで実際に発生した主な問題でした。node.js で複数の変数を実際に作成した人はいません。

@DerekNguyen のリビジョンも試してみましたが、これは次のようになりました。

ただし、それにもエラーが発生しました。

TypeError: 未定義のプロパティ 'edges' を読み取れません

まだまだ研究中ですが、解決に近づいていると思います。他の変数についても作成する必要があることに注意してください。

更新: 2019 年 2 月 10 日

私が gatsby-starter を使用してどのようにサイトを構築したかを知りたい方は、以下をご覧ください。

私のポートフォリオ

grapghql を介してデータをクエリすると、独立したノードではなく、html ノード内にすべてが含まれます

CMS に 2 つのタイトル タグを挿入し、それらのタグをコンポーネント内で使用したいとします。

これを生成します：

問題は、最初の p タグを取得してコンポーネント内で使用し、他の p タグをメイン コンポーネント内の別のコンポーネント内に挿入するにはどうすればよいかということです。htmlノードがデータを提供する方法を制御するにはどうすればよいですか

そして、いくつかの子コンポーネント内にそれらを挿入したくないという事実を想定して、最初の p タグに特定のスタイルを持たせ、2 番目の p タグに別のスタイルを持たせたいとしましょう。

htmlノード内の特定の要素にアクセスする方法があれば、より多くの送信が行われます

ホスト ボックスから表示できるように、Linux コンテナーの「npm start」アドレスを 10.XX.XX.XX にバインドできるようにする必要があります。ホストもコンテナもUbuntuです。ホストは Ubuntu 18、コンテナーは 16 Xenial です。

現在、netlify-cms victor-hugo チュートリアルに従っています。私のセットアップは、Ubuntu 16 Xenial を実行している Linux コンテナー上にあります。npm は機能しますが、アドレスを Linux コンテナーの IP アドレスにバインドする方法がわかりません。

サーバーには通常 -b フラグ、または使用する何らかのバインディングまたはホスト設定、または同様のものがあるため、通常これを理解できますが、これを理解することはできません。package.json ファイルに変更を加え、一部のオンライン例では http-server を使用していますが、netlify-cms と victor-hugo を使用した私のセットアップでは "start":"run-p start:**" を使用しています。run-p の例を検索すると空白になります。

node.js と npm の経験はほとんどありません。これはpackage.jsonセットアップの一部です

コンテンツを表示するには、10.XX.XX.XX を参照できる必要があります。