座標・周辺スポット・関連リンクカード
旅行記事のように「場所」を持つページ向けの機能です。ページに緯度経度を書くと、同じサイト内で座標を持つ近くのページが、このページの末尾に自動で並びます(このページの末尾にも表示されています)。リンクは「関連記事ブロック」風のカードで表示されます。
座標を設定する
フロントマターに lat(緯度)と lng(経度)を書きます。
---
title: 〇〇神社
lat: 35.6800
lng: 139.7600
---
地図アプリでコピーした「緯度, 経度」をそのまま貼れる geo も使えます。
geo: 35.6800, 139.7600
- 緯度は -90〜90、経度は -180〜180 です。範囲外・数値でない値は無視されます(座標なし扱い)。
/backyard/のページ作成フォームにも「座標」欄があり、同じ形式で貼り付けられます。- 座標を持つ記事は、構造化データ(JSON-LD)の
contentLocationにも座標が入ります。
周辺スポットの自動表示
座標を持つページの本文の後ろに、近い順にカードが並びます。距離は大円距離(直線距離)で、「約 1.1 km」のように表示されます。
| 設定 | 既定値 | 内容 |
|---|---|---|
CMS_NEARBY_AUTO |
true |
false で自動表示を全ページ無効 |
CMS_NEARBY_LIMIT |
6 |
最大表示件数(1〜24) |
CMS_NEARBY_RADIUS_KM |
30 |
表示する半径(km)。0 で距離を絞らない |
いずれも Helm の phpEnv(環境変数)で設定します。ページ単位の指定は次のとおりです。
| フロントマター | 効果 |
|---|---|
nearby: false |
このページには周辺スポットを自動表示しない |
spot: false |
このページを、他のページの周辺スポットに表示しない(概要ページなど) |
draft: true |
下書きは周辺スポットに表示されない |
候補になるのは、同じ言語(ロケール)のツリーで座標を持つページです。
本文の好きな位置に置く
自動表示の代わりに、本文中の好きな位置へ置けます(本文に書くと自動表示は出ません)。
{{nearby}}
{{nearby:limit=4|radius=10|style=text|title=近くの観光地}}
{{nearby:geo=35.68, 139.76|limit=3}}
| オプション | 内容 |
|---|---|
limit=4 |
表示件数 |
radius=10 |
半径(km)。0 で無制限 |
style=card / text |
カード or テキストリンク |
image=off / excerpt=off |
サムネイル / あらすじを隠す |
title=… |
見出し(title= と空にすると見出しなし) |
geo=緯度, 経度 |
起点を指定(座標を持たないページでも使える) |
関連記事カード
任意のリンク 1 件を、サムネイル・タイトル・あらすじ・キャプションを備えたカードで表示します。
{{related:/guide/shortcodes/}}
内部ページはタイトル・description・image(フロントマター)が自動で入ります。オプションで表示を調整できます。
{{related:/guide/shortcodes/|caption=こちらも参考に}}
{{related:/guide/shortcodes/|excerpt=off|image=off}}
{{related:/guide/shortcodes/|style=text}}
{{related:/guide/shortcodes/|new=1|rel=nofollow}}
テキストリンク版(style=text):
| オプション | 内容 |
|---|---|
style=card / text |
カード(既定)/ テキストリンク |
image=on / off |
サムネイルの表示(既定 on) |
excerpt=on / off |
あらすじの表示(既定 on) |
caption=… |
ラベル(既定「あわせて読みたい」。空にすると非表示) |
new=1 |
別タブで開く(外部リンクは常に別タブ) |
rel=… |
rel 属性(外部リンクには noopener が付く) |
title= desc= thumb= |
タイトル・あらすじ・画像を上書き |
外部 URL と名前付きリンク
外部サイトは、表示内容を自分で指定します(外部ページの内容は取得しません)。
{{related:https://example.com/|title=例のサイト|desc=説明文|thumb=/media/example.jpg|site=Example}}
config/links.php(または /backyard/links/)に登録した名前付きリンクは、@キー で呼び出せます。説明と画像は管理画面の「説明」「画像 URL」欄で設定します。
{{related:@example}}
見た目は、Swell テーマの関連記事ブロックの設定項目(カード/テキスト、画像・あらすじの表示切替、キャプション、別タブ、rel)を参考にした独自のスタイルです。配色・角丸はテーマのトークン(theme.css)で変わります。