房屋
- 簡介設定價格圖片庫詳細資訊請求區塊社群可摺疊/手風琴效果房貸計算器附近售出的房產使用者分析

網站

房屋

簡介

這個範例展示如何在 AMP HTML 中建立房屋頁面。探索如何使用 AMP 組件，例如 amp-carousel、form 和 amp-list 來建立房屋頁面。

設定

我們使用 amp-carousel 來顯示房屋圖片。

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

我們使用 amp-accordion 來隱藏和顯示房屋產品的額外資料。

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

我們使用 amp-list 來顯示房產列表。

<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>

我們使用 amp-mustache 作為 amp-list 的格式範本。

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

我們使用 amp-social-share 來新增平台分享按鈕。

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

我們使用 amp-iframe 來嵌入房屋位置的地圖。

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

我們使用 amp-form 來實作房貸計算器。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

我們使用 amp-fit-text 來調整房屋頁面標題以符合頁面。

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

我們使用 amp-analytics 來追蹤頁面使用者。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

價格

amp-fit-text 可用於調整文字以符合可用空間。它適用於長度變化不大的標題。

倫敦市中心的舒適住宅

£430,000

London SW1A 1AA

<h1>
  <amp-fit-text class="price-heading" width="300" height="45" layout="responsive" max-font-size="45">
          Cosy House in Central London
  </amp-fit-text>
</h1>
<div class="price-description">£430,000</div>
<p class="housing-description">London SW1A 1AA</p>

圖片庫

amp-carousel 非常適合用於房屋圖片庫。在此處了解更多關於 amp-carousel 的資訊 here。

<amp-carousel class="image-gallery" width="512" height="384" layout="responsive" type="slides">
    <amp-img src="/static/samples/img/buckingham_palace_building_1280x960.jpg" layout="fill" alt="Buckingham Palace" attribution="https://pixabay.com"></amp-img>
    <amp-img src="/static/samples/img/buckingham_palace_entrance_1280x853.jpg" layout="fill" alt="Buckingham Palace entrance" attribution="https://pixabay.com"></amp-img>
</amp-carousel>

詳細資訊請求區塊

這些按鈕用於請求房產的詳細資訊。

您喜歡這間房產嗎？

聯絡仲介電子郵件聯絡仲介

<div class="contact-section">
    <div> Do you like this property?</div>
    <div class="contact">
        <a href="tel:012 3456789">Call agent</a>
        <a href="mailto:someone@example.com">Email agent</a>
    </div>
</div>

Social Share 擴充功能為分享按鈕提供通用的介面。在此處了解更多關於 amp-social-share 的資訊 here。

<p class="social-share">
    <amp-social-share type="twitter" width="60" height="44"></amp-social-share>
    <amp-social-share type="facebook" width="60" height="44" data-attribution="254325784911610"> </amp-social-share>
    <amp-social-share type="gplus" width="60" height="44"></amp-social-share>
    <amp-social-share type="email" width="60" height="44"></amp-social-share>
    <amp-social-share type="pinterest" width="66" height="44"></amp-social-share>
</p>

可摺疊/手風琴效果

使用 amp-accordion 來隱藏和顯示產品的額外資料。在此處了解更多關於 amp-accordion 的資訊 here。透過 Google Maps Embed API 可以嵌入 Google 地圖，請參閱 here 的範例。

描述

地理位置優越，靠近地鐵站
開放式廚房
自行車停放處、訪客停車位、公共花園和屋頂露台

在地圖上檢視

樓層平面圖

<amp-accordion class="additional-data">
  <section>
    <h2>Description</h2>
    <ul class="description">
      <li>Ideally located near tube station</li>
      <li>Open plan kitchen</li>
      <li>Bicycle storage, visitors parking, communal gardens and roof terraces</li>
    </ul>
  </section>
  <section>
    <h2>View on map</h2>
    <amp-iframe title="Embedded Google map" width="600" height="400" layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848&q=London SW1A 1AA">
    </amp-iframe>
  </section>
  <section>
    <h2>Floorplan</h2>
    <amp-img src="/static/samples/img/floorplan_518x340.jpg" width="518" height="340"></amp-img>
  </section>
</amp-accordion>

房貸計算器

使用 amp-form 來實作房貸計算器。在此處了解更多關於 amp-form 的資訊 here。

房貸計算器

<h2>Mortgage Calculator</h2>
<form method="GET" action="calculate-mortgage" action-xhr="calculate-mortgage-xhr" target="_top">
  <div>
    <label>
        <input type="number" name="price" maxlength="10" value="2000000" required>
      Price
    </label>
  </div>
  <div>
    <label>
      <input type="number" name="deposit" maxlength="10" value="100000" required>
      Deposit
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="annual_interest" maxlength="10" value="2.5" step="0.01" required>
      Annual interest
    </label>
  </div>
  <div>
    <label>
        <input type="number" name="repayment_period" value="25" required>
      Repayment period (years)
    </label>
  </div>
  <div>
    <input type="submit" value="Calculate">
  </div>
  <div submit-success>
    <template type="amp-mustache">
      Monthly repayment {{monthly_repayment}}
    </template>
  </div>
  <div submit-error>
    <template type="amp-mustache">
      Error! You entered some incorrect details {{err}}
    </template>
  </div>
</form>

附近售出的房產

使用 amp-list 來顯示附近售出的房產列表。在此處了解更多關於 amp-list 的資訊 here

附近售出的房產

<h2>Properties sold nearby</h2>
<amp-list width="auto" height="150" layout="fixed-height" src="/static/samples/json/other_properties.json" binding="no">
  <template type="amp-mustache">
    <a href="#" class="ampstart-card related m1">
      <amp-img width="122" height="100" src="https://ampbyexample.com{{src}}" alt="{{alt}}" attribution="{{attribution}}"></amp-img>
            <p>{{desc}}</p>
            <p>{{address}}</p>
            <p class="price-other">{{price}}</p>
    </a>
  </template>
  <div overflow role="button" aria-label="Show more" class="list-overflow">
    Show more
  </div>
</amp-list>

使用者分析

分析功能必須在 body 中設定。在這裡，我們使用 Google Analytics 來追蹤頁面瀏覽量。

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
        "vars": {
            "account": "UA-73836974-1"
        },
        "triggers": {
            "default pageview": {
                "on": "visible",
                "request": "pageview",
                "vars": {
                    "title": "Housing"
                }
            }
        }
    }
  </script>
</amp-analytics>

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的具體使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @aghassemi 撰寫