Я ищу AMP-версию нишевого сайта о погоде. В связи с погодой возникает проблема единиц измерения - C / F, MPH / KMH и т. д.
Это не было бы проблемой, за исключением того, что у меня есть изображения и диаграммы, которые тоже относятся к конкретным единицам. В версии HTML я могу легко использовать немного JS для замены единиц, однако я не вижу способа сделать это на странице AMP, кроме как путем ссылки на другую страницу.
Итак, есть ли способ сделать это с помощью AMP, или я просто хочу иметь ссылку на блок изменений? Спасибо
@BachchaSingh не уверен, что это поможет, поскольку они совершенно разные - существующая страница использует диаграммы и файлы cookie на основе JS для хранения настроек единиц. Немного покопавшись, я подумываю использовать выбор единиц на основе географии и просто иметь ссылку на сайт html, если пользователь хочет изменить.
Вероятно, вы захотите использовать комбинацию 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/…
@ не могли бы вы поделиться рабочим примером в html и js