YouTube video by Royal Trux

YouTube video by BRAIN DRAIN INDUSTRIES

🧠 概要： 概要 この記事では、WordPressとAstro.jsを利用してヘッドレスCMSを構築するプロセスの一部として、記事ページの作成方法について解説しています。特に、AstroのgetStaticPaths()関数を使用して動的なページを生成し、記事データを取得する方法に焦点を当てています。また、実際のコードとその意味、そして発生した課題についても述べています。 要約の箇条書き 記事ページの作成開始: Astroを使い、記事ページを作成することについて説明。 getStaticPaths() の説明: ビルド時にどのページを生成するか指示する関数。 パン屋の例: 予約を受けて焼くパンの数を決めることで、静的ページ生成の概念を説明。 実際のコード例: APIから記事情報を取得し、各記事のスラッグをリスト化するコードを示す。 Astro.propsの説明: 渡されたデータをどのように取り扱うかに関する説明。 HTML表示の準備: 記事に関するデータを用意し、タイトルや内容を表示するHTMLの基本を記述。 ページビルドと確認: npm run buildコマンドでビルドし、npx astro previewで結果を確認する方法。 発生した問題: 記事ページが表示されない問題に直面し、その原因として日本語のスラッグに言及。 修正と成功: 英語のスラッグに修正後、無事に記事が表示されるようになったことを報告。 さてさて、ようやく各記事ページの作成にいきます！ 記事ページの作成 記事ページを作成する時は、Astro では getStaticPaths() という関数を使用します。 getStaticPaths() とは？ getStaticPaths() はビルド時に「どのページを作るか教える関数」です。Astroで /blog/.astro のような「動的ページ」を使うときは、あらかじめ何個ページが必要かを教える必要があり

🧠 概要： 記事の概要 この記事では、WordPressとAstro.jsを利用してヘッドレスCMSの構築過程における「ページネーション」の実装方法について詳しく説明しています。具体的には、静的なページを生成し、取得したデータを使って複数のページに分けてコンテンツを表示する方法を示しています。 要約の箇条書き 実装目標: ページネーションを実装し、静的ページとして出力する。 URL形式: /tags//page/.astro。 WordPress APIの使用: タグのIDとページ番号を使って、APIからデータを取得する。 ページ数の計算: getStaticPaths()を使って必要な静的ページを計算・生成。 ファイル構成: /pages/tags//page/.astro という動的ルーティング構成。 コード実装: getStaticPaths()内で、受け取ったタグからページ数を計算。 APIから投稿を取得し、エラー処理も実装。 HTML実装: 動的に生成したページで投稿の内容やナビゲーションを表示。 ページ番号のナビゲーション: 各ページに前後のリンクと現在のページ番号を表示する方法を提案。 ビルド結果: 正常にページネーションが動作することを確認。 このプロセスを通じて、Astro.jsの特性とWordPress APIとの連携がどのように活用されるかが解説されています。 今回は、ページネーションを実装してみます。ページネーションとコンテンツの表示部分だけ、Vueで組んでしまったりも出来ますが（Vue や React も利用できるのが Astro のいいとこですよね）、今回はがっつりと静的ページとして吐き出すようにします！ ページネーション実装の概要 URL形式：/tags//page/.astro WordPress APIでページ指定：?tags=ID&page=2&per_page=4 ページ数を計算して、getStaticPaths() で静的ページを複数生成 と、こんな感じになります！ ファイル構成 今回は /pages/tags/ の下に、タグとページ番号の2段階の動的ルーティングになる構成です。 src/pages/tags//page/.astro コード実装

YouTube video by Royal Trux

🧠 概要： 概要 この記事では、WordPressとAstro.jsを使用してヘッドレスCMSのカテゴリーとタグの一覧ページを作成する方法が解説されています。具体的には、カテゴリー一覧及び各カテゴリーに属する記事一覧、タグ一覧及び各タグに属する記事一覧を作成する手順が示されています。 要約の箇条書き NuxtからAstro.jsへの移行: Nuxtでの経験を基に、Astro.jsで同様のアプローチを試行する。 注意点: カテゴリーやタグのスラッグは英語に設定しないと404エラーが発生する。 カテゴリー一覧ページの作成: /pages/categories/ ディレクトリを作成。 APIからカテゴリー情報をフェッチして表示するスクリプトを実装。 各カテゴリー記事一覧: /pages/categories/.astro を作成し、getStaticPathsを使用して静的パスを生成。 該当カテゴリーの投稿をフェッチし、エラーハンドリングを行う。 タグ一覧と各タグ記事一覧: タグ一覧ページを /pages/tags/index.astro に実装。 各タグに対するデータ取得と表示を行うための getStaticPaths を使用したスクリプトを作成。 次回は、ページネーション機能の追加についての計画が示されています。 2025年5月19日 17:03 Nuxtでも同じことをやりましたが、Astroでもやってみます！ 注意！ 記事ページ同様に、各カテゴリー、各tagの slug が日本語だとリンクが上手くいかず、プレビューだと404ページになってしまうので、slug は英語にしてください！ カテゴリー一覧ページの作成 まずは /pages/categories/ のディレクトリと /pages/categories/index.astro を作成します！ そしてスクリプトは ---let categories = [];let error = false; try { const res = await fetch(' if (!res.ok) throw new Error("HTTPエラー"); categories = await res.json();} catch (err) { console.error("記事の取得に失敗しました:", err); error = true;}---

Buy Royal Trux - Spike Cyclone - Vertical Records, Vertical Records - 2x7", EP, Num - V-2, V0002, includes Spike Cyclone, Bhagdad Buzz, No Fixed Address, Sunflavor

🧠 概要： 概要 この記事では、WordPressとAstro.jsを使用してヘッドレスCMSを構築する過程の6回目として、記事ページのメタ情報やアイキャッチ画像の設定、前後の記事リンクの実装について説明しています。特に、WordPressのAdvanced Custom Fields (ACF)を利用してメタ情報を追加し、REST API経由でアイキャッチ画像情報を取得してOpen Graph（OG）画像を設定する方法が詳述されています。 要約 (箇条書き) 記事ページの構築を続ける Meta情報の追加 ACFを利用してWordPressにキーワードを追加 function.phpにコードを記述してREST APIにキーワードを表示させる 基本の実装例 JSONからkeywordsを取得し、descriptionはexcerptから生成 HTMLにmetaタグを追加 アイキャッチ画像の情報取得 WordPressでアイキャッチ画像を設定し、REST APIに_embedを追加して画像情報を取得 HTMLにOG画像メタタグを追加 前後の記事リンクの実装 getStaticPaths()を用いて全記事を取得し、前後の記事のデータをpropsとして渡す 簡単なナビゲーションリンクをHTMLに追加 これにより、各記事ページにメタ情報、アイキャッチ画像、前後の記事へのリンクが実装された。 2025年5月16日 16:40 今回も引き続き記事ページを作ってきます！ 追加実装！ meta情報 meta情報を記事に追加していきましょう！今回、wordpress側ではkeywordsはプラグインの「Advanced Custom Fields」を使用しています！ Nuxtの時にも書きましたが、ACFのフィールドは、デフォルトでは REST API に出てこないので、wordpressのfunction.phpに下記を記述する必要があります。 function add_acf_to_rest_api() { register_rest_field('post', 'keywords', [ 'get_callback' => function($post_arr) { return get_field('keywords', $post_arr['id']); }, 'schema' => null, ]);}add_action('rest_api_init', 'add_acf_to_rest_api');

🧠 概要： 概要 この記事では、WordPressとAstro.jsを使用したヘッドレスCMSの構築プロセスを紹介しています。特に、ページネーション機能をコンポーネント化する方法に焦点を当てています。このコンポーネント化により、他のカテゴリーや記事ページでも再利用が可能になり、管理が簡単になります。 要約（箇条書き） 目標：Pagination.astroコンポーネントを作成し、どのページでも簡単にページネーションを利用できるようにする。 ステップ①：共通コンポーネントを新規作成し、totalPages、currentPage、baseUrlというpropsを受け取る。 HTML構造：ページネーションの表示ロジックは論理演算子を使って簡潔に書く。 補足説明： 論理演算子（&&）の使用例と三項演算子での条件分岐機能を紹介。 ステップ②：スタイルの設定を行い、視覚的な整備を施す。 ステップ③： タグページやカテゴリページにコンポーネントを組み込み、実際に表示を確認。 ビルド後、正しくページネーションが表示されることを確認。 最終確認：異なるタイプのページにコンポーネントを適用することで、再利用の流れを見せる。次回はリダイレクトの設定が予定されている。 この構築方法により、開発者は効率的にページネーション機能を実装し、再利用性を高めることができます。 まだまだページネーションの実装が続きます！😅今回は前回で作ったページネーションを、他のカテゴリーや記事ページでも使えるようにコンポーネント化します！ ページネーションのコンポーネント化のゴール Pagination.astro コンポーネントを作成 どのページでも <Pagination totalPages={x} currentPage={y} baseUrl="/xxx/" /> のように呼び出すだけでOK 見た目や構造は1か所で管理 さてやってみましょう！ ステップ①：共通コンポーネントを作成 ファイルを下記に作りますsrc/components/Pagination.astro まずはスクリプトですが、コンポーネントの中で props を受け取るだけなのでシンプルです😁 --- const { totalPages, currentPage, baseUrl } = Astro.props;---

🧠 概要： 概要 この記事は、WordPressとAstro.jsを使用してヘッドレスCMSを構築する過程の第3回目で、デバッグの方法について詳しく説明しています。JavaScriptに慣れた著者が、特にAstro.jsにおけるconsole.log()の使い方や、クライアントサイドでデータをどのように取り扱うかに焦点を当てています。 要約 デバッグの重要性 JavaScriptを使ってデバッグを行いたいが、Astro.js内でのconsole.log()の使い方が難しいと感じている。 Node.jsとブラウザの違い Node.jsサーバー側でのconsole.log()は、ブラウザのDevToolsには表示されない。 HTML内のJavaScript HTML内に直接JavaScriptを埋め込む方法を説明。 Reactコンポーネントの使用 Reactを使用してデータをブラウザに渡す仕組みを考察。Reactを使うにはあらかじめReactをインストールしておく必要がある。 クライアントサイドReactの仕組み Astroがビルド時にWordPress APIからpostsを取得し、Reactコンポーネントに渡す流れを説明。 デバッグ用コンポーネント PostLogger PostLogger.jsxの作成方法と、ReactのuseEffect()を使用してコンソールにデータを出力する方法を確認。 Vue.jsでの実装 Vue.jsでも同様の手順でデバッグを行う方法を説明し、propsの受取についての注意点を指摘。 他の手法 set:htmlを用いてJavaScriptコードをHTML内に埋め込む方法や、JSONデータの扱いについても解説。 各手法の選択 どの手法を使うかは個人の好みによるが、ReactやVueを使ったコンポーネントを作る方法が推奨される。 次回予告 次回は各ページを作成することについて話す予定がある。 ってな訳で、javaScriptに慣れ親しんだ者としては、cosole.log() をバシバシに使いたいところ…。astro ではデバッグはどうすればいいんじゃ…🫠 デバッグについて ひとまずは前回使用した、下記のコードで変数 res の中身を確認したい場合はどうすりゃいいんじゃ？ってことで const res = await fetch('http: たとえば --- const res = await fetch(' console.log(res); --- としてみても、--- ブロック内に記述された console.log() はNode.js のサーバー側（ターミナル）に出力されるので、ブラウザのDevToolsでは見えないのです😅 1. html内の <!]> --- const x = 12; --- …

Royal Trux didn’t arrive to please anyone, least of all the music industry. When Jennifer Herrema and Neil Hagerty started making music together in the late

YouTube video by Royal Trux - Topic