住房
- 简介设置价格图片库详细信息请求部分社交折叠/手风琴抵押贷款计算器附近售出的房产用户分析

网站

住房

简介

此示例展示了如何使用 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 英镑

伦敦 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 的更多信息，请单击此处。

<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>

社交分享扩展为分享按钮提供了一个公共接口。了解有关 amp-social-share 的更多信息，请单击此处。

<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 的更多信息，请单击此处。通过 Google Maps Embed API 可以嵌入 Google Maps，有关示例请单击此处。

描述

地理位置优越，靠近地铁站
开放式厨房
自行车存放处、访客停车场、公共花园和屋顶露台

在地图上查看

平面图

<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 的更多信息，请单击此处。

抵押贷款计算器

<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 的更多信息，请单击此处

附近售出的房产

显示更多

<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>

用户分析

必须在主体中配置分析。这里我们使用 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 撰写