Бесплатно Weather Informer (1 Viewer)

[heroma]

​

Регистрируемся на сайте https://openweathermap.org/ для получения ключа.
Страница генерации ключей https://home.openweathermap.org/api_keys

[Weather-block city="..."] ... [/weather-block] - определяет блок информера.
В параметре city введите название города на английском языке.

В каждом блоке для каждой страны применяются следующие теги:
{weather-temp} - Температура
{Weather-value} - погода
{weather-icon} - [{THEME}/weather/icons/{weather-icon}.png]
{weather-country} - двухсимвольный код страны
{weather-humidity} - влажность
{weather-pressure} - давление
{weather-wind} - скорость ветра
{weather-clouds} - облачность

Спойлер: Установка

1. Установить модуль через систему установки плагинов в dle
2. Там же выбрать плагин Weather Informer и в его коде найти строку:
   $api_key = '3eacddd82cb9fcaa8a280e69b31059ee';
   и заменить api_key на свой.
3. В шаблоне main.tpl найти:
   </head>
   Добавить выше:
   
   

4. <link rel="stylesheet" href="{THEME}/weather/icons/icons.css">
   <style>
       .weather {
               background-color: #ffffff;
               border-radius: 20px;
               margin-top: 20px;
               color: #6f707d;
               border:solid 1px #0cc652;
               box-shadow:5px 20px 39px 0 rgba(0,0,0,0.51);
               transition:ease-in-out .3s
           }
   
           #heading{
               font-size: 55px;  
               color: #2b304d;
           }
   
           .temp{
               place-items: center;
           }
   
           .temp-details > p >span, .grey{
               color: #a3acc1;
               font-size: 12px;
           }
   
           .fa{
               color: #a5a5b1
           }
   
            *:focus{
               outline: none;
           }
   </style>
   
   <script>
      var timeNode = document.getElementById('time-node');
   
      function getCurrentTimeString() {
         return new Date().toTimeString().replace(/ .*/, '');
      }
   
      setInterval(
         () => timeNode.innerHTML = getCurrentTimeString(),
         1000
      );
   </script>

5. В нужное место шаблона добавить:
   
   

   [weather-block city="Batumi"]
   <div class="container-fluid">
           <div class="row justify-content-center">
               <div class="col-12 col-md-4 col-sm-12 col-xs-12">
                      <div class="weather p-4">  
   
                          <div class="d-flex">
                              <h6 class="flex-grow-1">{weather-city} / {weather-country}</h6>
                              <h6 class="small grey"><div id="time-node"></div></h6>
                          </div>
   
                          <div class="d-flex flex-column temp mt-5 mb-3">
                              <h1 class="mb-0 font-weight-bold" id="heading">{weather-temp}  </h1>
                              <span class="small grey">{weather-value}</span>
                          </div>
   
                          <div class="d-flex">
                              <div class="temp-details flex-grow-1">
                                   <p class="my-1">
                                    <i class="uil-tear mr-2" aria-hidden="true"></i>
                                      <span> {weather-humidity} </span>
                                   </p>
   
                                   <p class="my-1">
                                      <i class="uil-temperature-empty mr-2" aria-hidden="true"></i>
                                      <span> {weather-pressure} </span>
                                   </p>
   
                                   <p class="my-1">
                                       <i class="uil-wind mr-2" aria-hidden="true"></i>
                                      <span> {weather-wind} </span>
                                   </p>
                                   <p class="my-1">
                                       <i class="uil-clouds mr-2" aria-hidden="true"></i>
                                      <span> {weather-clouds} </span>
                                   </p>
                              </div>
   
                              <div>
                                  <img src="{THEME}/weather/icons/{weather-icon}.png" width="100px">
                              </div>
                          </div>
   
                       </div> </div></div></div>
   [/weather-block]

6. Готово!

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Источник