旅行記事のように「場所」を持つページ向けの機能です。ページに緯度経度を書くと、同じサイト内で座標を持つ近くのページが、このページの末尾に自動で並びます(このページの末尾にも表示されています)。リンクは「関連記事ブロック」風のカードで表示されます。

座標を設定する

フロントマターに 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)で変わります。

周辺のスポット