Amp-страницы с функцией "изменить единицы измерения" для веб-сайта погоды.

Я ищу AMP-версию нишевого сайта о погоде. В связи с погодой возникает проблема единиц измерения - C / F, MPH / KMH и т. д.

Это не было бы проблемой, за исключением того, что у меня есть изображения и диаграммы, которые тоже относятся к конкретным единицам. В версии HTML я могу легко использовать немного JS для замены единиц, однако я не вижу способа сделать это на странице AMP, кроме как путем ссылки на другую страницу.

Итак, есть ли способ сделать это с помощью AMP, или я просто хочу иметь ссылку на блок изменений? Спасибо

@ не могли бы вы поделиться рабочим примером в html и js

Bachcha Singh 31.10.2018 12:18

@BachchaSingh не уверен, что это поможет, поскольку они совершенно разные - существующая страница использует диаграммы и файлы cookie на основе JS для хранения настроек единиц. Немного покопавшись, я подумываю использовать выбор единиц на основе географии и просто иметь ссылку на сайт html, если пользователь хочет изменить.

Chris Leather 31.10.2018 12:36
0
2
56
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вероятно, вы захотите использовать комбинацию amp-bind и amp-list. Компонент amp-list позволит вам получать контент с конечной точки JSON, откуда, как я полагаю, поступают ваши данные о погоде. Затем вы можете использовать amp-bind для переключения видимого состояния диаграммы на странице в зависимости от того, какая единица измерения выбрана пользователем. Вы можете найти более подробные примеры на AMP-сайт, но вот небольшой пример, который переключает стиль в div, когда вы нажимаете серию из двух кнопок.

Голова:

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

<amp-state id="unitMeasurement">
  <script type="application/json">
    {
      "selected": "f",
      "f": {
        "style": "showF",
      },
      "c": {
        "style": "showC",
      }
    }
  </script>
</amp-state>

Тело

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'f'}})">
  Switch F
</button>

<button class="btn"
  on="tap:AMP.setState({unitMeasurement: {selected: 'c'}})">
  Switch C
</button>

<p [class]="unitMeasurement[unitMeasurement.selected].style"
  class="measurement">Units.</p>

Не используется канал JSON, но amp-bind выглядит идеально, проверив документы и пример здесь: ampbyexample.com/playground/#url=https://ampbyexample.com/…

Chris Leather 01.11.2018 11:48

Другие вопросы по теме