Velo 第９０回 動的ページ（３）
前回で５種類の動的ページを作成しました。
それらはサイドバーの動的ページセクションに表示されます。
下図をご覧下さい。
動的ページの名前は「３点メニュー/名前を変更」で適切な名前に変更できます。
各動的ページと URL slug との対応を以下に示しておきます。
MeCollection(Class)：mycollection-2/{class}
MeCollection(Grade)：mycollection-1/{grade}
MeCollection(GradeClass)：mycollection/{grade}/{class}
MeCollection(Item)：mycollection/{title}
MeCollection(List)：mycollection/
これら５種類の動的ページを行き来できるリンクを張りましょう。
リンク
リストページ→アイテムページ
デフォルトの「Read More」ボタンをリネームして「詳細」ボタンにしました。「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(Item)」を選択します。
リストページ→学年ページ
リピーターに新規ボタンを設置し、テキストの編集で「to Grade」とボタン名を設定。
「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(Garde)」を選択します。
リストページ→組ページ
リピーターに新規ボタンを設置し、テキストの編集で「to Class」とボタン名を設定。
「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(Class)」を選択します。
リストページ→学年・組ページ
リピーターに新規ボタンを設置し、テキストの編集で「to GradeClass」とボタン名を設定。
「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(GradeClass)」を選択します。
アイテムページ→リストページ
アイテムページの Backボタンを選択し、「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(List)」を選択します。
学年ページ→組ページ
リピーターに新規ボタンを設置し、テキストの編集で「to Class」とボタン名を設定。
「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(Class)」を選択します。
組ページ→学年ページ
リピーターに新規ボタンを設置し、テキストの編集で「to Grade」とボタン名を設定。
「CMS接続」マークをクリックし「クリック時の動作を選択」から「MyCollection(Grade)」を選択します。
その他のページ間のリンクも全く同様に張ることが出来ます。
まとめ
動的ページはノーコードであっても非常に効果的なユーザー体験を与える優れたツールです。
その背景にあるのはルーター機能と URL slug です。
コーディングの有無に関わらず、動的ページを自由に扱うためには押さえておきたい知識です。
例えばノーコードであっても、prefix を変えて動的カテゴリーページを作れば、ページ毎のデザインを変えることが出来ます。
下図では学年ページと組ページではデザインを変えています。
これらがノーコードで実装できることは驚異的です。
もちろんコーディングを使えばルーター情報を受取ったり、フックしたりすることで自由度は際限なく広がってゆきます。
Velo開発のご依頼はこちら