この記事は、AutomatticがF(xiàn)rontityとそのチームを買収する前に開始されました。 Frontityの創(chuàng)設(shè)者は、フレームワークをコミュニティ主導(dǎo)のプロジェクトに移行し、その安定性、バグのない操作、包括的なドキュメントを確保することを計畫しています。他のオープンソースプロジェクトと同様に、Frontityは無料であり、コミュニティの貢獻や強化の機會を提供します。詳細については、FAQでご利用いただけます。

私の以前の記事では、Frontityを備えたヘッドレスのWordPressサイトを作成し、そのファイル構(gòu)造を簡単に調(diào)べました。この記事は@frontity/mars-themeパッケージ（Mars Theme）を掘り下げ、カスタマイズに関する段階的なガイドを提供します。 Marsのテーマは、WordPressのTwenty21に似た、Frontityのデフォルトのテーマである優(yōu)れた出発點として機能します。

「ビルディングブロック」を含むMARSテーマのコアコンポーネントを探索し、パッケージに含まれるさまざまなコンポーネントを調(diào)べます。機能、操作、スタイリングを?qū)g用的な例で説明します。

始めましょう！

目次

• はじめに：Frontityの構(gòu)成要素の理解
• セクション1：火星のテーマ構(gòu)造の調(diào)査
• セクション2：リストコンポーネントを利用します
• セクション3：リンク、メニュー、および特集畫像
• セクション4：フロントプロジェクトのスタイリング
• セクション5：Frontity Marsテーマのカスタマイズ
• セクション6：リソースと謝辭
• 結(jié)論：最終的な考えと反省

Frontityの基本的なコンポーネント

Frontityのコアコンポーネントであるfrontity.settings.js 、 package.json 、およびpackages/mars-themeフォルダーを強調(diào)して、前の記事からFrontityプロジェクトファイル構(gòu)造を再確認しましょう。 package.jsonファイルは、名前、説明、著者、依存関係など、重要なプロジェクト情報を提供します。キーパッケージには次のものがあります。

• frontity ： Frontity App開発方法とCLIを含むメインパッケージ。
• @frontity/core ：バンドル、レンダリング、マージ、輸送、およびサービングを処理します。通常、アプリ開発には直接アクセスは必要ありません。完全なリストはFrontityドキュメントにあります。
• @frontity/wp-source ： WordPress REST APIに接続し、MARSテーマのデータを取得します。
• @frontity/tiny-router ： window.historyとルーティングを管理します。
• @frontity/html2react ： HTMLを反応に変換し、プロセッサを使用してHTMLセクションを反応成分に置き換えます。

Frontityのコア、または@frontity/package （「ビルディングブロック」とも呼ばれます）には、 @frontity/componentsの有用なReactコンポーネントライブラリ、 Link 、 Auto Prefetch 、 Image 、 Props 、 Iframe 、 Switch 、その他の機能やオブジェクトなどのコンポーネントのエクスポートが含まれます。詳細な説明と構(gòu)文情報は、パッケージリファレンスAPIにあります。

Frontityドキュメントでは、プロジェクトの起動プロセスについて説明します。Frontity.settings.jsで定義されているすべてのパッケージは@frontity/file-settings frontity.settings.jsインポートされ、その設(shè)定とエクスポートは@frontity/coreによって単一のストアに融合されます。このストアでは@frontity/connect 、Frontityの州マネージャーを使用して、開発中のさまざまなパッケージの州へのアクセスとアクセスを可能にします。

次に、これらのビルディングブロックがMARSテーマ內(nèi)でどのように使用され、ヘッドレスのWordPressエンドポイントを備えた機能的フロントリティプロジェクトを作成する方法を調(diào)べます。

セクション1：火星のテーマ構(gòu)造の理解

カスタマイズする前に、火星のテーマ（ @frontity/mars-theme ）ファイル構(gòu)造に慣れてみましょう。

 <code>packages/mars-theme/ |__ src/ |__ index.js |__ components/ |__ list/ |__ index.js |__ list-item.js |__ list.js |__ pagination.js |__ featured-media.js |__ header.js |__ index.js |__ link.js |__ loading.js |__ menu-icon.js |__ menu-model.js |__ menu.js |__ nav.js |__ page-error.js |__ post.js |__ title.js</code>

Marsテーマの重要なコンポーネントは、 /src/index.js 、 src/list/index.js 、およびsrc/components/index.jsです。 Frontityドキュメントは、これらのコンポーネントがどのように定義され、相互接続されているかについての詳細な説明を提供します。最も重要な3つの3つのルート、テーマ、リストに焦點を當てましょう。

テーマルートコンポーネント（ /src/index.js ）

src/index.jsファイル（テーマのルート）が重要です。エントリポイントとして機能し、ターゲットをターゲットにします<div>サイトマークアップでは、取り付けられたすべてのパッケージの根を注入します。 Frontityテーマは、 <code>rootとその他の必要なパッケージをDOMにエクスポートします。 Frontityのドキュメントは、これをスロットと充填可能性パターンを使用して示しています。 MARSテーマパッケージの例は、ルートコンポーネントの初期化方法を示しています。

 // Mars-Theme/src/components/index.js
// ...（Brevityのためにコードが省略）...

ルートコンポーネントは、 roots 、 fills 、 state 、 actions 、 librariesなどのパッケージをエクスポートします。ルートコンポーネントの詳細については、Frontityドキュメントをご覧ください。

テーマコンポーネント（ /src/components/index.js ）

Frontityテーマコンポーネントは、 Theme名空間によってエクスポートされるメインルートレベルのコンポーネントです。 @frontity/connect関數(shù)に包まれており、 state 、 actions 、 libraries小道具へのアクセスを提供します。これにより、テーマコンポーネントは狀態(tài)を読み取り、アクションを使用し、他のパッケージからコードを使用できます。

 // Mars-Theme/src/components/index.js
// ...（Brevityのためにコードが省略）...

この例は、MARS Themeの/src/components/index.jsから、 state.source.get()を使用して、リストや投稿などのレンダリングコンポーネントのデータを取得します。

セクション2：リストコンポーネントの操作

前のセクションでは、テーマレベルのコンポーネントを取り上げました。次に、特定のコンポーネント：リストを調(diào)べましょう。

リストコンポーネントは、コード分割に@loadable/componentsを使用して、 src/components/list/index.jsによってエクスポートされます。コンポーネントは、ユーザーがリストを表示した場合にのみロードされます。単一の投稿を表示するときにレンダリングされません。

投稿のリストを表示します

src/components/list/list.jsコンポーネントは、 state.source.get(link)とそのitemsフィールドを使用して投稿のリストをレンダリングします。

 // src/components/list/list.js
// ...（Brevityのためにコードが省略）...

connect関數(shù)は、グローバル狀態(tài)へのアクセスを提供します。 list-item.jsおよびpagination.jsもインポートされます。

投稿のリストのページング

Paginationコンポーネント（ src/components/list/pagination.js ）により、ユーザーは投稿のページ間でナビゲートできます。

 // src/components/list/pagination.js
// ...（Brevityのためにコードが省略）...

connect関數(shù)は、グローバルな狀態(tài)とアクションへのアクセスを付與します。

単一の投稿を表示します

Postコンポーネントには、単一の投稿とページが表示されます。構(gòu)造は類似していますが、投稿にはメタデータ（著者、日付、カテゴリなど）が含まれます。

 // src/components/post.js
// ...（Brevityのためにコードが省略）...

條件付きレンダリングにより、メタデータが投稿に対してのみ表示され、テーマ設(shè)定に基づいて注目畫像が表示されます。

セクション3：リンク、メニュー、および特集畫像

リストコンポーネントは、投稿を表示するために重要です。他の重要なコンポーネントを調(diào)べてみましょう。

リンクコンポーネント（ src/components/link.js ）

MarsLinkコンポーネント（ src/components/link.js ）は@frontity/components/linkコンポーネントの周りのラッパーです。

 // src/components/link.js
// ...（Brevityのためにコードが省略）...

リンクがクリックされたときにモバイルメニューを閉じるためのハンドラーが含まれています。

Frontityメニュー（ src/components/nav.js ）

Navコンポーネント（ src/components/nav.js ）は、 frontity.settings.jsまたはFrontity狀態(tài)で定義されたメニュー項目を反復(fù)し、URLの一致し、ヘッダー內(nèi)にコンポーネントを表示します。

 // src/components/nav.js
// ...（Brevityのためにコードが省略）...

connect関數(shù)は、狀態(tài)へのアクセスを提供します。モバイルビュー用に追加のメニューコンポーネント（ menu.jsおよびmenu-modal.js ）が提供されています。

注目の畫像コンポーネント（ /src/components/featured-media.js ）

注目のメディアは、ルートコンポーネントのtheme.state.featuredで定義されています。完全なコードは/src/components/featured-media.jsにあります。

セクション4：フロントプロジェクトのスタイリング

フロントのスタイリングはWordPressとは異なります。 Frontityは、スタイルのコンポーネントと感情で構(gòu)築された再利用可能なコンポーネント、CSS-in-JSライブラリを提供します。

スタイルのコンポーネントを使用します

スタイルのコンポーネントは、感情のstyled機能を使用して作成されます。例えば：

 //ボタンスタイルのコンポーネントを作成します
「Frontity」から{styled}をインポートします。

const button = styled.div`
  背景：LightBlue;
  幅：100％;
  テキストアライグ：センター;
  色：白;
`;

CSSプロップを使用します

css Propを使用すると、テンプレートリテラルを使用したインラインスタイリングが可能です。

 / * as as css proped */
「Frontity」から{css}をインポートします。

const pinkbutton =（）=>（
  <div css="{css`background:" pink>
    私のピンクのボタン
  </div>
）;

を使用して<global></global>成分

<global></global>コンポーネントは、サイト全體のスタイルを適用します。

 // ...（Brevityのためにコードが省略）...

セクション5：Frontity Marsテーマのカスタマイズ

このセクションでは、Marsテーマのカスタマイズを示しています。 （簡潔にするために省略された詳細な例とコードスニペット。完全なコードの例については、元の応答を參照してください。）重要なカスタマイズには以下が含まれます。

• テーマパッケージの名前を変更します。
• ダイナミックメニューフェッチを使用したリファクタリングナビゲーション（WP-Rest-API V2メニュープラグインを使用）。
• より良い組織のためにファイル構(gòu)造を変更します。
• カスタムフッターコンポーネントを追加します。
• テーマヘッダーのカスタマイズ。
• 追加<global></global>スタイルコンポーネント。
• 流體のタイポグラフィの実裝。
• WebFontsの追加。
• スタイリングページと投稿（Gutenbergブロックスタイルを含む）。

セクション6：リソースと謝辭

（簡潔にするために省略されたリソースとクレジットのリスト。完全なリストの元の応答を參照してください。）

結(jié)論：最終的な考えと反省

このフロントとその火星のテーマの探求は、初心者に優(yōu)しい、メンテナンスの少ない、実験的なブロックテーマとの互換性を強調(diào)しています。ただし、現(xiàn)在のホスティングコストとドキュメントの改善のための領(lǐng)域に注意してください。 GatsbyとFrontityを使用したヘッドレスサイト開発のさらなる調(diào)査と、WordPressブロックテーマの進化が計畫されています。