Velo 第６２回 パンくずリスト
何とも奇妙な名前ですがページの階層を表示するエレメントです。ヘンゼルとグレーテルの物語が名前の起源なのでしょう。さて、以下は Velo API Reference からの引用です。
Breadcrumbs(パンくずリスト)
「Velo を使えばパンくずリストのアイテム(items)を構成するラベル(label)、リンク(link)、アイコン(icon)をカスタマイズすることが出来ます。また Wix エディターではサポートされていない動的ページにもパンくずリストを追加することが出来ます。」
「パンくずリストはラベル、アイコン、リンクから成り立っています。サイトビジターはラベルやアイコンをクリックしてリンク先に移動することが出来ます。アイコンはメディア・マネジャー上のベクターイメージなどです。リンクはオプションです。また表示する階層を … を使って短縮することも可能です。」
従ってパンくずリストの要点は以下の２点です。
（１）items プロパティを持ち、label、icon、link で構成されている。
（２）動的ページ上では階層を表示しない。
items
サイトのパンくずリスト(breadscrumbs1)の items プロパティをコンソールに表示してみると以下の様になっています。
戻り値はページの階層通りの配列になっています。ホームページはアイコン表示になっているので画像ソースが登録されています。芸の細かいところは配列の３番目のオブジェクトに isCurrent: true で、これは現在表示しているページ名 Page3 の下線に対応しています。
items は読み書き可能なので、ページ読み込み時に書き換えればパンくずのカスタマイズは可能です。例えば以下のコードを実行してみましょう。
結果は以下の様に期待通りになります。
動的ページのパス
パンくずリストのデフォルトのラベル(label)はSEOベーシックで定義されるページの名前です。ところが動的ページの場合は表示が違っていてもページの名前はすべて同じです。従って表示されている内容(CMSのitem)に応じたラベルは作ってくれません。これがサポートしていないという意味なのだと思います。
動的ページはパス(path) によって表示内容を変えています。従って表示内容に応じたパンくずリストを作りたければ表示ページの path 特にその最後尾の slug を取ってくればカスタマイズが可能になります。
slug を取得する
上図ではパンくずリストは Fiends(name) となっていて、確かに名前の Jiro を反映していません。
一方 path はURLの一部なのでブラウザーで確認できます。動的ページでは prefix にすべてのページがぶら下がる構成になっています。ここでの prefix は "friends" です。そしてその傘下にぶら下がっているのがページ固有の slug で、ここではCMSの名前(name)フィールドで slug を作っています。つまりこのページの slug は "jiro" で、これが path になります。
slug とページは１対１に対応しています。これは動的ページに限らずブログの Posts でも同じことです。実際、ブログには関数 getPostBySlug( ) が用意されています。
カスタマイズのコーディング
それでは以下のコーディングで動的ページから slug を取得してパンくずリストをカスタマイズしてみましょう。
１行目で path を取得するためのモジュールをインポートしています。５行目で path を取得し、６行目でその配列から slug を取得しています。path が配列になっているのは階層を持つことを意味していますが、ここでは slug 以外の階層はありませんから path[0] で slug が取得できます。
８行目～１１行目で、この slug を使ってパンくずリストを書き換えています。本来は２階層のパンくずリストを３階層に書き換えています。ホームページのアイコンはそのままにしています。実行結果を以下に示しました。
パンくずリストは期待通りの表示になっています。jiro に下線もついています。
Wixブログの場合
ブログの場合も同様で、パンくずリストの階層に記事のタイトルは反映されません。従って slug を取得しますが、ブログの場合はこの slug からバックエンド関数 getPostsBySlug( ) を実行すれば CMSの当該 postオブジェクトを取得できます。以下のコードを見てみましょう。
２行目でバックエンド関数をインポートしています。
９行目で当該postオブジェクトを取得し、１０行目でそのタイトルを取得しています。１２行目からは動的ページの場合と同じです。
CMSの利用
動的ページの場合も、ブログの場合も、データを保存するCMSを持っています。従って slug を取得した後はCMSにクエリーして当該アイテムを取得する方法もあります。
Velo開発のご依頼はこちら