Weather Informer 1.1 : информер погоды

Модуль вывода текущей погоды на сайте DLE. Перед его использованием следует зарегистрироваться на сайте OpenWeather и после на этой странице получить API ключ.


Установка:

1. Установить модуль через систему установки плагинов.
   
2. Там же выбрать плагин Weather Informer и в его коде найти строку:
   

     	$api_key = '3eacddd82cb9fcaa8a280e69b31059ee'; 

   
   Заменить api_key на свой.
   
3. В шаблоне main.tpl найти:
   

   </head>

   
   Добавить выше:
   

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

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

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

   
   Где:
   

   [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} - облачность

Готово!

• Версия DLE: 13.х
• Автор: TeraMoune
• Модификация: Ticcix
• Источник

Примечание от Oxigen: при создании статьи использовался машинный перевод с английского