Content Widgets
コンテンツブロックとして使える記事ウィジェット:注意書き、アコーディオン、タブ、ステップ、商品ボックス、埋め込み、コード、カード、引用、目次、最新記事。
プラグイン
Content Widgets
コンテンツブロックとして使える記事ウィジェット:注意書き、アコーディオン、タブ、ステップ、商品ボックス、埋め込み、コード、カード、引用、目次、最新記事。
説明
Content Widgets
ライブデモ: emdashhq.com/blog/widget-gallery — 19 個すべてのウィジェットを 1 つの記事でレンダリングしています。
EmDash サイト向けの記事ウィジェット集:コールアウト、アコーディオン、タブ、チェックリスト、ボタン、YouTube と iframe の埋め込み、商品/レビューボックス、プルクオート、ファクト表、自動目次、シリーズナビゲーション、そしてリアルタイムの「最新記事」リスト。
各ウィジェットは blocks フィールドのブロックタイプなので、スキーマで許可している限り、ページコンテンツ、ブログ記事の本文、ランディングページなど、ブロックベースのどのフィールドにも編集者がドロップできます。
含まれるもの
すべて widget_ で始まる 19 種類のブロックタイプ:Prose、Notice、Accordion、Tabs、Checklist、Steps、Button、YouTube、Embed、Image、Code、Product box、Link cards、Pull quote、Facts table、Table of contents、Series nav、Latest posts、Divider。
仕組み
サンドボックス化されたプラグインは Astro のレンダーコンポーネントを同梱できないため、ウィジェットは、パッケージの site/ ディレクトリ内にブロックタイプの JSON と、すぐ使える Astro コンポーネントとして配布されます。これらをサイトに一度コピーするだけです。YouTube のプライバシーモード、アフィリエイト開示の一文、記事クエリといった共有のランタイム動作は、コンポーネントがプロセス内で呼び出す 2 つの公開ルートを通じてプラグインが提供します。HTTP の往復はありません。
プラグインはさらに、すべてのブロックのフィールドを説明する Widget catalog 管理ページと、正確なインストール手順と設定の状態を示す Setup guide ページを追加します。
インストール
インストール
1. プラグインをインストールする
EmDash のプラグインレジストリから @bitdoze.com/emdashhq-widgets をインストールするか、ファイル依存としてリンクして、astro.config.mjs の sandboxed: に登録します。
import widgetsPlugin from "emdashhq-widgets";
emdash();
プラグインは content:read と schema:read を要求します。Latest posts ウィジェットと posts ルートを動作させるために、これらを承認してください。静的なウィジェットは承認しなくてもレンダリングされます。
2. スキーマにブロックタイプを追加する
site/block-types/*.json をシードファイルの blockTypes 配列にコピーし(または、稼働中のサイトでは各ファイルの内容を /_emdash/api/schema/block-types に POST し)、それらを受け入れるべき blocks フィールド(たとえば pages.content や posts.body)の allowedTypes にタイプを列挙します。
3. レンダラーを登録する
site/components/*.astro、site/components/config.ts、site/components/icons.ts、site/widget-components.ts、site/WidgetBlocks.astro をプロジェクトにコピーし、ウィジェット専用のフィールドには WidgetBlocks をレンダリングします。
または、既存のマップに widgetComponents を展開します。
const blockComponents = defineBlockComponents();
4. 設定する
設定は Plugins → Content Widgets → Settings にあります。
- Privacy-enhanced YouTube embeds — プレーヤーを
youtube-nocookie.comから配信します(デフォルトでオン)。 - Affiliate disclosure — Product box ウィジェット内の小さな注記行。空にすると非表示になります。
- Posts collection — Latest posts ウィジェットと
postsルートのデフォルトのコレクション。
よくある質問
よくある質問
なぜプラグインが自動でやってくれず、ファイルをコピーする必要があるのですか?
サンドボックス化されたプラグインは隔離されたランタイムで動作し、Astro のレンダーコンポーネントを登録できません。site/ ディレクトリには、プラグイン作者が使っているものと同じブロックタイプの JSON とコンポーネントが入っているので、インストールはリポジトリへの一度きりのコピーです。その後は、ウィジェットは自分で作ったブロックタイプと同じように動作します。
プラグインをインストールしなくてもウィジェットは動作しますか? 静的なものは動作します。Prose、Notice、Accordion、Tabs、Checklist、Button、Embed、Quote、Facts、TOC、Series は、ブロックタイプとコンポーネントだけで足ります。YouTube、Product box、Latest posts はプラグインの設定やルートを読み取ります。プラグインがない場合は、デフォルト(Cookie なしがオン、開示なし、空のリスト)に戻ります。
YouTube ウィジェットは Cookie を設定しますか?
訪問者がサムネイルをクリックするまで、プレーヤーは読み込まれません。デフォルトのプライバシー設定では、プレーヤーは youtube-nocookie.com から読み込まれ、その時点でもトラッキング Cookie は設定されません。
Latest posts はどのようにリストを作りますか?
コンポーネントがプラグインの公開 posts ルートをプロセス内で呼び出します(HTTP リクエストなし)。このルートは、設定されたコレクションから公開済みのエントリーを新しい順に列挙し、各エントリーの公開 URL をコレクションの urlPattern から解決します。
ウィジェットのスタイルを変更できますか?
はい。すべてのコンポーネントは wgt-* クラスを使い、デザイントークン(--color-brand、--color-surface など)を、中立的なフォールバックとともに読み取ります。クラスまたはトークンを上書きして、テーマに合わせてください。
通常のページ内でもウィジェットは動作しますか?
はい。ページ、投稿、その他どんな blocks フィールドの allowedTypes にも widget_* タイプを追加してください。
変更履歴
変更履歴
1.0.4
- JavaScript なしのタブ:ラベルはページ内アンカーに縮退し、すべてのパネルが表示されたままになります。JS があれば、矢印キー、Home/End、ローヴィング tabindex に対応した本物のタブに拡張されます。
- ドキュメント:ギャラリーのデモリンクに UTM パラメーターを付与しました。
1.0.3
- Product box:画像がないレイアウトでコンテンツが狭い列に押し込まれる問題を修正。メディア列は画像が設定されている場合にのみレンダリングされます
- Product box のスタイルを刷新:等幅フォントの開示行、価格チップ、長所と短所のチェック/バツ印、サイトのボタンに合わせたボタンスタイル
- サイトのアイコンセットに、短所の列用の
xアイコンを追加
1.0.2
- ドキュメント:説明からライブのウィジェットギャラリーデモ記事へリンク
1.0.1
- レジストリ掲載用アセット:プラグインのアイコン、バナー、スクリーンショット
- ドキュメントの修正:説明と変更履歴にある 19 ブロックの一覧
1.0.0
- 初回リリース:19 種類の
widget_*ブロックタイプ(prose、notice、accordion、tabs、checklist、steps、button、YouTube、embed、image、code、product、link cards、quote、facts、table of contents、series nav、latest posts、divider) site/配下のブロックタイプ JSON と自己完結した Astro コンポーネント- 共有設定(YouTube のプライバシーモード、アフィリエイト開示、投稿コレクション)用の公開
configルート - 解決済み URL 付きで最新の公開エントリーを列挙する公開
postsルート - Block Kit の管理ページ:ウィジェットカタログとセットアップガイド