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
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
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

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