この記事は、AutomatticがFrontityとそのチームを買収する前に開始されました。 Frontityの創設者は、フレームワークをコミュニティ主導のプロジェクトに移行し、その安定性、バグのない操作、包括的なドキュメントを確保することを計画しています。他のオープンソースプロジェクトと同様に、Frontityは無料であり、コミュニティの貢献や強化の機会を提供します。詳細については、FAQでご利用いただけます。
私の以前の記事では、Frontityを備えたヘッドレスのWordPressサイトを作成し、そのファイル構造を簡単に調べました。この記事は@frontity/mars-themeパッケージ（Mars Theme）を掘り下げ、カスタマイズに関する段階的なガイドを提供します。 Marsのテーマは、WordPressのTwenty21に似た、Frontityのデフォルトのテーマである優れた出発点として機能します。
「ビルディングブロック」を含むMARSテーマのコアコンポーネントを探索し、パッケージに含まれるさまざまなコンポーネントを調べます。機能、操作、スタイリングを実用的な例で説明します。
始めましょう！
Frontityのコアコンポーネントであるfrontity.settings.js 、 package.json 、およびpackages/mars-themeフォルダーを強調して、前の記事からFrontityプロジェクトファイル構造を再確認しましょう。 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 、その他の機能やオブジェクトなどのコンポーネントのエクスポートが含まれます。詳細な説明と構文情報は、パッケージリファレンスAPIにあります。
Frontityドキュメントでは、プロジェクトの起動プロセスについて説明します。Frontity.settings.jsで定義されているすべてのパッケージは@frontity/file-settings frontity.settings.jsインポートされ、その設定とエクスポートは@frontity/coreによって単一のストアに融合されます。このストアでは@frontity/connect 、Frontityの州マネージャーを使用して、開発中のさまざまなパッケージの州へのアクセスとアクセスを可能にします。
次に、これらのビルディングブロックがMARSテーマ内でどのように使用され、ヘッドレスのWordPressエンドポイントを備えた機能的フロントリティプロジェクトを作成する方法を調べます。
カスタマイズする前に、火星のテーマ（ @frontity/mars-theme ）ファイル構造に慣れてみましょう。
<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関数に包まれており、 state 、 actions 、 libraries小道具へのアクセスを提供します。これにより、テーマコンポーネントは状態を読み取り、アクションを使用し、他のパッケージからコードを使用できます。
// Mars-Theme/src/components/index.js // ...（Brevityのためにコードが省略）...
この例は、MARS Themeの/src/components/index.jsから、 state.source.get()を使用して、リストや投稿などのレンダリングコンポーネントのデータを取得します。
前のセクションでは、テーマレベルのコンポーネントを取り上げました。次に、特定のコンポーネント：リストを調べましょう。
リストコンポーネントは、コード分割に@loadable/componentsを使用して、 src/components/list/index.jsによってエクスポートされます。コンポーネントは、ユーザーがリストを表示した場合にのみロードされます。単一の投稿を表示するときにレンダリングされません。
src/components/list/list.jsコンポーネントは、 state.source.get(link)とそのitemsフィールドを使用して投稿のリストをレンダリングします。
// src/components/list/list.js // ...（Brevityのためにコードが省略）...
connect関数は、グローバル状態へのアクセスを提供します。 list-item.jsおよびpagination.jsもインポートされます。
Paginationコンポーネント（ src/components/list/pagination.js ）により、ユーザーは投稿のページ間でナビゲートできます。
// src/components/list/pagination.js // ...（Brevityのためにコードが省略）...
connect関数は、グローバルな状態とアクションへのアクセスを付与します。
Postコンポーネントには、単一の投稿とページが表示されます。構造は類似していますが、投稿にはメタデータ（著者、日付、カテゴリなど）が含まれます。
// src/components/post.js // ...（Brevityのためにコードが省略）...
条件付きレンダリングにより、メタデータが投稿に対してのみ表示され、テーマ設定に基づいて注目画像が表示されます。
リストコンポーネントは、投稿を表示するために重要です。他の重要なコンポーネントを調べてみましょう。
src/components/link.js ） MarsLinkコンポーネント（ src/components/link.js ）は@frontity/components/linkコンポーネントの周りのラッパーです。
// src/components/link.js // ...（Brevityのためにコードが省略）...
リンクがクリックされたときにモバイルメニューを閉じるためのハンドラーが含まれています。
src/components/nav.js ） Navコンポーネント（ src/components/nav.js ）は、 frontity.settings.jsまたはFrontity状態で定義されたメニュー項目を反復し、URLの一致し、ヘッダー内にコンポーネントを表示します。
// src/components/nav.js // ...（Brevityのためにコードが省略）...
connect関数は、状態へのアクセスを提供します。モバイルビュー用に追加のメニューコンポーネント（ menu.jsおよびmenu-modal.js ）が提供されています。
/src/components/featured-media.js ）注目のメディアは、ルートコンポーネントのtheme.state.featuredで定義されています。完全なコードは/src/components/featured-media.jsにあります。
フロントのスタイリングはWordPressとは異なります。 Frontityは、スタイルのコンポーネントと感情で構築された再利用可能なコンポーネント、CSS-in-JSライブラリを提供します。
スタイルのコンポーネントは、感情のstyled機能を使用して作成されます。例えば：
//ボタンスタイルのコンポーネントを作成します
「Frontity」から{styled}をインポートします。
const button = styled.div`
背景：LightBlue;
幅：100％;
テキストアライグ：センター;
色：白;
`;css Propを使用すると、テンプレートリテラルを使用したインラインスタイリングが可能です。
/ * as as css proped */
「Frontity」から{css}をインポートします。
const pinkbutton =（）=>（
<div css="{css`background:" pink>
私のピンクのボタン
</div>
）;<global></global>成分<global></global>コンポーネントは、サイト全体のスタイルを適用します。
// ...（Brevityのためにコードが省略）...
このセクションでは、Marsテーマのカスタマイズを示しています。 （簡潔にするために省略された詳細な例とコードスニペット。完全なコードの例については、元の応答を参照してください。）重要なカスタマイズには以下が含まれます。
<global></global>スタイルコンポーネント。（簡潔にするために省略されたリソースとクレジットのリスト。完全なリストの元の応答を参照してください。）
このフロントとその火星のテーマの探求は、初心者に優しい、メンテナンスの少ない、実験的なブロックテーマとの互換性を強調しています。ただし、現在のホスティングコストとドキュメントの改善のための領域に注意してください。 GatsbyとFrontityを使用したヘッドレスサイト開発のさらなる調査と、WordPressブロックテーマの進化が計画されています。
以上が火星のテーマ：Frontityの頭のないWordPressテーマを深く見てくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
