「テンプレート:駅名 飲食店ページ」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
|||
| 1行目: | 1行目: | ||
<html> | |||
<nav class="breadcrumb"> | |||
<a href="/">ホーム</a> | |||
› <a href="/wiki/飲食店検索">飲食店検索</a> | |||
<span id='navText'></span> | |||
</nav> | |||
<style> | |||
.breadcrumb { | |||
font-size: 14px; | |||
color: #555; | |||
margin-bottom: 12px; | |||
} | |||
.breadcrumb a { | |||
color: #3366cc; | |||
text-decoration: none; | |||
} | |||
.breadcrumb span { | |||
color: #333; | |||
font-weight: bold; | |||
} | |||
.search-intro p { | |||
margin: 4px 0; | |||
} | |||
/* --- 検索説明文（ライトテーマ） --- */ | |||
html.skin-theme-clientpref-day .search-intro { | |||
background: #f7f9fc; | |||
padding: 12px 16px; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
font-size: 0.95rem; | |||
line-height: 1.6; | |||
} | |||
/* --- 検索説明文（ダークテーマ） --- */ | |||
html.skin-theme-clientpref-night .search-intro { | |||
background: #1f2430; | |||
color: #e5e7eb; | |||
padding: 12px 16px; | |||
border-radius: 8px; | |||
margin-bottom: 20px; | |||
font-size: 0.95rem; | |||
line-height: 1.6; | |||
} | |||
</style> | |||
</html> | |||
<div class="search-intro"> | |||
<p> | |||
<strong>{{{station}}}</strong>人気のグルメを一覧でご紹介しています。 | |||
</p> | |||
<p> | |||
下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。 | |||
</p> | |||
</div> | |||
<html> | <html> | ||
<nav class="breadcrumb"> | <nav class="breadcrumb"> | ||
| 421行目: | 476行目: | ||
const titleEl = document.querySelector('.mw-page-title-main'); | const titleEl = document.querySelector('.mw-page-title-main'); | ||
let station = '川西市'; | |||
if (titleEl) { | |||
station = titleEl.textContent.trim().replace(/_飲食店$/, ''); | |||
} | |||
// タイトル生成 | // タイトル生成 | ||
let title = `${station}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`; | let title = `${station}でおすすめのおいしいグルメをご紹介！ | 川西図鑑`; | ||
| 567行目: | 627行目: | ||
<strong>{{{station}}}</strong>の<strong>グルメ</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">{{#var:hitCount}} 件の結果があります（{{#var:from}} 件目～） | <strong>{{{station}}}</strong>の<strong>グルメ</strong></h1><strong style="float: right;" id="count" data-total="{{#var:hitCount}}" data-limit="{{#var:limit}}">{{#var:hitCount}} 件の結果があります（{{#var:from}} 件目～） | ||
</strong> | </strong> | ||
== 検索結果 == | |||
<!-- 検索実行 --> | |||
{{#cargo_query: | |||
tables=飲食店情報 | |||
|fields=飲食店情報._pageName,飲食店情報.店名,飲食店情報.画像,飲食店情報.ジャンル,飲食店情報.郵便番号,飲食店情報.住所,飲食店情報.最寄り,飲食店情報.営業時間月,飲食店情報.定休日,飲食店情報.電話番号,飲食店情報.予算昼下限,飲食店情報.予算昼上限,飲食店情報.予算夜下限,飲食店情報.予算夜上限,飲食店情報.ストリートビューURL,飲食店情報.座標 | |||
|where=( | |||
飲食店情報.最寄り LIKE CONCAT('%{{{station}}}%') | |||
) | |||
|format=template | |||
|template=検索結果カード | |||
|named args=yes | |||
|default=該当する店舗はありません。 | |||
|limit={{#var:limit}} | |||
|offset={{#var:offset}} | |||
|order by=score DESC | |||
|more results text= | |||
}} | |||
<html> | |||
<div class="pagination"> | |||
<a data-role="first-page" href="#">＜＜</a> | |||
<a data-role="prev-page" href="#">＜</a> | |||
<div class="page-numbers" data-role="page-numbers"></div> | |||
<a data-role="next-page" href="#">＞</a> | |||
<a data-role="last-page" href="#">＞＞</a> | |||
</div> | |||
<style> | |||
.pagination { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
margin: 24px 0; | |||
font-size: 14px; | |||
} | |||
.pagination a { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 14px; | |||
min-width: 40px; | |||
text-decoration: none; | |||
border-radius: 6px; | |||
border: 1px solid; | |||
transition: background-color 0.15s ease, | |||
color 0.15s ease, | |||
box-shadow 0.15s ease; | |||
} | |||
.page-numbers { | |||
display: flex; | |||
gap: 6px; | |||
} | |||
.page-numbers a { | |||
min-width: 36px; | |||
padding: 8px 0; | |||
} | |||
/* ライト・通常 */ | |||
.pagination a { | |||
background: #f9fafb; | |||
color: #1f2937; | |||
border-color: #d1d5db; | |||
} | |||
.pagination a:hover { | |||
background: #eef2f7; | |||
box-shadow: 0 1px 4px rgba(0,0,0,0.08); | |||
} | |||
/* 非活性 */ | |||
.pagination a.disabled { | |||
background: #f1f5f9; | |||
color: #94a3b8; | |||
border-color: #e2e8f0; | |||
pointer-events: none; | |||
box-shadow: none; | |||
} | |||
/* 現在ページ（数字） */ | |||
.pagination .page-numbers a.current { | |||
background: #1f2937; | |||
color: #fff; | |||
border-color: #1f2937; | |||
font-weight: 600; | |||
pointer-events: none; | |||
} | |||
/* ダーク・通常 */ | |||
.skin-theme-clientpref-night .pagination a { | |||
background: #374151; | |||
color: #f9fafb; | |||
border-color: #4b5563; | |||
} | |||
.skin-theme-clientpref-night .pagination a:hover { | |||
background: #4b5563; | |||
} | |||
/* ダーク・非活性 */ | |||
.skin-theme-clientpref-night .pagination a.disabled { | |||
background: #1f2937; | |||
color: #6b7280; | |||
border-color: #374151; | |||
} | |||
/* ダーク・現在ページ */ | |||
.skin-theme-clientpref-night .pagination .page-numbers a.current { | |||
background: #f9fafb; | |||
color: #1f2937; | |||
border-color: #f9fafb; | |||
} | |||
</style> | |||
</html> | |||
__目次非表示__ | |||
== 検索結果 == | == 検索結果 == | ||
<!-- 検索実行 --> | <!-- 検索実行 --> | ||
2026年1月7日 (水) 19:48時点における版
{{{station}}}人気のグルメを一覧でご紹介しています。
下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。
{{{station}}}人気のグルメを一覧でご紹介しています。
下の検索フォームを使えば、さらに条件を絞り込んで探すこともできます。
検索条件
{{{station}}}のグルメ
<strong style="float: right;" id="count" data-total="
エラー: テーブル飲食店情報が見つかりません。
" data-limit="30">
エラー: テーブル飲食店情報が見つかりません。
件の結果があります（1 件目～）
検索結果
エラー: テーブル飲食店情報が見つかりません。
検索結果
エラー: テーブル飲食店情報が見つかりません。