ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Адаптивный вид статей для uCoz в 1 колонку

Адаптивный вид статей для uCoz в 1 колонку

Адаптивный вид статей для uCoz в 1 колонку
Оригинальный стиль на адаптивный вид материалов, который по умолчанию настроен по написание статей для сайта uCoz, что можно увидеть в новостях. Ведь по своей структуре, такая стилистика будет отличным решением поставить под каталог новости, разве только останется операторы поменять, это делается для вывода информации. Также все элементы здесь адаптивные, что корректно просматривается, как на большом мониторе, так и на самом мелком экране мобильного аппарата.

Что по качеству, то вид создал waak, что можно с уверенностью создать, что данный материал по всем категориям соответствует. Хотя мы видим, что изначально он создавался под светлый формат, но здесь полностью цвета гаммы ответственны от CSS. Где при небольших знаний вы можете вывести тот оттенок, что вам требуется. Только одно не забываем, цвета безусловно можно поменять, но не лезем в отзывчивость данного вида, так как она реально отлично построена, и не нужно вносить своих поправок.

Сам скрин снят с тестового сайта, где при установке будем видеть такой стиль. Где не забываем просмотреть видео обзор на адаптивность, как все работает, и какой вид к примеру будем наблюдать на планшете или смартфоне.

Красивый вид материала для сайта юкоз

Видео обзор:


Установка:

HTML

Код
<div class="stateyn_katalog">
  <div class="vasdel_saytum">
  <div class="ksumaned"><img src="/_ld/0/04331991.png" alt="$MESSAGE$" title="$TITLE$"></div>
  <div class="nudesilomas">
  <div class="kanulubesa" id="datawaak$ID$"> $DATE$</div>
  <script>
  var str = $("#datawaak$ID$").html();
var mas = str.split('.');
var code='';
for (i=0; i<mas.length; i++){
  code+= '<div>'+mas[i]+'</div>';
}
$("#datawaak$ID$").html(code);
</script>
  <div class="osemilan">
   
<span><i class="fa fa-heart-o" aria-hidden="true"></i> $RATED$</span>
<span><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span>
<span><i class="fa fa-commenting-o" aria-hidden="true"></i> $COMMENTS_NUM$</span>

  </div>

  <div class="clr"></div>
  </div>
  </div>
  <div class="kavasnuda">
  <a href=""><h1>$TITLE$</h1></a>
  <div class="uservidmat"><a href=""><i class="fa fa-user" aria-hidden="true"></i>waak</a></div>
  <p>$MESSAGE$</p>
  <span><a href="$ENTRY_URL$">подробнее</a></span>
  </div>
  <div class="clr"></div>
</div>

CSS

Код
.clr {clear: both;}
.stateyn_katalog {
  position: relative;
  margin-top: 20px;
  margin-bottom: 60px;
  padding:20px 15px;
  background: #FFF;
  border: 1px dashed #bbbbbb;
}

.vasdel_saytum, .kavasnuda {
  width: 50%;
  float: left;
  padding: 10px;
}

.vasdel_saytum {
  position: relative;
}
.kavasnuda {overflow: hidden;}

.ksumaned {
  margin-top: -50px;
}
.ksumaned img {
  width: 100%;
  max-width: 100%;
  height: 250px;
  object-fit: cover;

}

/*дата*/
.kanulubesa { color: #434343;margin: 20px 0 0;float: left;}
  .kanulubesa div:nth-child(1) {

  font-size: 60px;
  font-weight: bold;
  }
/*месяц*/
  .kanulubesa div:nth-child(2) {  
  font-size: 22px;
  text-transform: uppercase;
   
  }
/*год*/
  .kanulubesa div:nth-child(3) {
  font-size: 0
  }

.osemilan {
  float: right;
  position: absolute;
  z-index: 2;
  bottom: 15px;
  right: 30px;

}
.osemilan span {
  display: inline-block;
  padding: 0 10px;
}
.osemilan span i {
  margin-right: 10px;
}

.kavasnuda a {
  color: #434343;
  text-decoration: none;
  font-size: 18px;
  line-height: 35px;
}

.uservidmat a {
  display: inline-block;
  background: #000;
  color: #FFF;
  font-size: 13px;
  padding: 0 15px;
  border-radius: 20px;
  line-height: 22px;
  margin: 15px 0;
}
.uservidmat a i {
  margin-right: 10px;
}
.kavasnuda p {
  display: block;
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 35px;

}
.kavasnuda span a {
  display: inline-block;
  line-height: 30px;
  padding: 0 20px;
  position: absolute;
  z-index: 2;
  bottom: 20px;
  right: 20px;
  background: #000;
  color: #FFF;
}

@media screen and (max-width: 1000px){  
  .kavasnuda, .vasdel_saytum {float: none;width: 100%;}
  .kavasnuda span a {
  display: block;
  bottom: 20px;
  right: 20px;
  left: 20px;
  text-align: center;
}
.kavasnuda a {
  font-size: 14px;
  line-height: 27px;
}
}

На этом все, не забываем про шрифтовые знаки, вероятно они уже у всех по умолчанию стоят, но все же здесь они прописаны, если не будут показывать, то в head нужно стиль прописать.

На этом все, как видим не чего сложного по установочному процессу нет, но сразу замечаем как изменился тот каталог или главная страница, вид каждый уникальный стиль привносит свое изменение в основной стиль сайта.

Из важного: Это касается вывода даты в данном виде, как на скрине, то вам нужно зайти в админ панель, далее общие настройки формата даты в виде дата точка название месяца точка год.

Источник: Talantlev.ucoz
2022-08-24 Просмотров: 340 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 5
-SAM-
-SAM- 2022-08-25 01:351
0
Скрипт на вывод-смену формата даты добавления материала здесь не нужен. Как и смена формата времени в настройках всего сайта (ага, а если кто-то не хочет этого, ведь оно поменяет везде, а не только в виде материалов статей... или нет в ПУ доступа - такое вполне может быть). Это всё делается условными операторами системы uCoz, уже ведь обсуждали (там как раз рабочий пример я давал, да и не только в той теме + говорилось как делать эту подрезку, есть тот же форум системы).
Также в вид материала нежелательно ставить h1, ибо потом будет их куча на странице (им нужно выделить один раз название текущей страницы, где идёт вывод этих материалов). То есть, если расчёт был на SEO - ставиться не совсем грамотно здесь, а когда просто размер нужно текста сменить (сделать таким как у h1) - делать это через стили:
Код
.kavasnuda h3{font-size:2em}
Кто не понял, то я про это:
Код
<a href=""><h1>$TITLE$</h1></a>
Здесь же ошибка - не прописано $ENTRY_URL$.

И там дальше еще нужен $PROFILE_URL$ и $USERNAME$ соответственно:
Код
<a href=""><i class="fa fa-user" aria-hidden="true"></i>waak</a>

Собственно, кто не знает какой именно стиль нужно подключать себе, чтобы была поддержка шрифтовых иконок, то информацию эту желательно прямо здесь написать (как пишется код на стиль нужный в других материалах, что публикуют на ZorNet). Или вот такая тема на форуме, в качестве примера нашёл вам.

Ну и вот это исправить:
Код
<img src="/_ld/0/04331991.png" alt="$MESSAGE$" title="$TITLE$">
Текст статьи в качестве alt там точно не к чему. Для удовлетворения скорости загрузки прописываем в приоритете вывод уменьшенной копии изображения прикрепленного к материалу:
Код
<img src="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>" alt="$TITLE$">
В общем, это в зависимости от того, какой размер его выставлен у вас в настройках модуля, а так - должна быть переменная $IMG_URL1$.

UPD.:
Kosten
Kosten 2022-08-25 03:302
0
Как заметил, в материале нет кучи H1, который установлен по сути правильно, но его там не должно быть, так как h1 ставят под заголовок вид материала и комментариев, но вид материала можно поставить h3, но лучше вывести под размер.

А на вид материала будет их реально много, так как на станице много тем, а это означает, на одной страницы может быть до 10 h1, и это не нужно делать.

Код
<a href=""><h1>$TITLE$</h1></a>

Все могут в чем-то ошибаться, здесь нужно принять, а не вести лютую дискуссию, это я на будущее.
waak
waak 2022-08-28 16:013
0
Цитата -SAM- ()
Скрипт на вывод-смену формата даты добавления материала здесь не нужен
Что значит не нужен? я так сделал а значит нужен!

Цитата -SAM- ()
а если кто-то не хочет этого, ведь оно поменяет везде
Если не хочет и не надо не кто тут некого не заставляет!

по поводу других пунктов тут я проморгал немного и не указал пару ссылок а по поводу картинке то там стоял оператор но почему то после публикации он меняется на ссылку ( наверное опять юкоз балуется!) так как я его редактировал и пробивал через разные редакторы публиковать и всё ровно оператор выводиться как ссылка
Kosten
Kosten 2022-08-28 18:064
0
waak, в создание материала, ты реально наверно единственный остался, просто не знаю, кто бы создавал, потому у тебя один оригинал. Но вот в SEO ты не так силен, а аналогично, но какие то верха мне знакомы. И заметил одно, ты не внимателен.

Это в том, что да все сделано, все функции работают как нужно, адаптивность на 99%, а вот проверить, возможно система изменилась и операторы старые работают, но есть новые, тенденция тебя не сильно волнует, так как по сути ты техник, на первом мести техника, чтоб все четко выводило.

Хотя с другой стороны, ты не seoшник, чтоб сделать оптимизацию. Но когда начнешь дела оптимизацию для поиска, тогда вид засверкает другими оттенками.

SAM, не просто оставил все эти замечание для пользователя, они больше тебе понадобятся, и это нормально.

Так как SEO такая очень тонкая вещь, как помер, у тебя один запрос в топе, но ты видишь в описание ошибку, к примеру не правильно запятые расставлены, ты редактируешь, делаешь все правильно, и смотришь через неделю, твой запрос уже не в топ 3 а в топ 20, у меня на кино сайте такое не раз было, потом не когда не правил, если запрос в топ 30, оставлял как есть.

Вот даже мелочь, а уже влияет, и здесь получается так, вся конструкция как конфетка, оптимизация, все эффекты, а внутри все по старому. Но h1 но для чего он в титле, в вил материалов и комментариев понимаю, так как на странице должен быть только один быть H1, а мы вид поставим, сколько у нас будет, на каждом материале.

Ведь h1 и h2 больше вот материал и описание сделаны, а вот с h3, 4 можно на размер поставить.

Ты как технарь, тебе просто значение нужно знать и не более, и иногда следить за тенденциями в SE0, и после этого, вид материала будет упакован. Но с другой стороны можно все упаковать как нужно, но все же некоторые сами полезут исправлять, но для таких людей больше адаптивность волнует, вот показывает все грамотно на разных экранах, а как подается по информации это уже в крайнею очередь.

И завершаю, спасибо что критику принял как профи, так как без критики не будет не какого продвижение, это уже касается самого человека, что для меня конкретно больше важно, чем все допущенные ошибки.
-SAM-
-SAM- 2022-08-29 07:365
+1

Вот еще раз для примера подрезка для даты 29.08.2022 (разделитель - точка):

Число:
Код
<?substr($DATE$,0,strpos($DATE$,'.'))?>
Месяц:
Код
<?substr($DATE$,strpos($DATE$,'.')+1,strpos(substr($DATE$,strpos($DATE$,'.')+1),'.'))?>
Год:
Код
<?substr($DATE$,strrpos($DATE$,'.')+1)?>

Как-то так.

У кого дата Сегодня-Вчера активирована в ПУ, то еще так:
Код
<?if($DATE$="Сегодня" or $DATE$="Вчера")?>$DATE$<?else?>Операторы с подрезкой даты тут прописываются.<?endif?>
avatar