Меню
Автор:
Фильтры
Что нового
РЕКЛАМА

Бесплатно Bloxsy - новостной шаблон DLE

Puerchik

Puerchik

Участник
Регистрация
3 Мар 2022
Сообщения
120
Реакции
259
1-3[1].webp

Автор: HideDev
версия по умолчанию: 18.0 DLE
Тестировался: на 18.0 DLE
Шаблон: Не оригинал
Комплектация: шаблон, доп поля, инструкция ( Прочитайте инструкцию внимательно )
Всё страницы сайта были сделаны
Скрытое содержимое доступно для зарегистрированных пользователей!


Подробнее о шаблоне Bloxsy
Современный и минималистичный шаблон Bloxsy создаётся под актуальную версию DLE 17.3 и призван стать массовым продуктом для сайтов блоговой и новостной тематики. Шаблон написан с применением актуальных JS плагинов, html и scss. Удобный и читабельный код позволит с лёгкостью вносить изменения, а набор миксинов и отдельных компонентов подстраивать проект под любые задачи.

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

Шаблон имеет поддержку и обновления на год, на которые смогут влиять клиенты. Разработаны все страницы имеющиеся в DLE, а так же дополнительно имеется страница рейтинга статей. За счёт адаптации до 340px сайт будет хорошо отображаться на мобильных устройствах, сайдбар с информацией всегда находится на странице и не убирается на смартфонах, что позволяет разместить туда все необходимые блоки для сайтов. Имеется готовое место для рекламного блока.

Bloxsy разработан под последнюю версию DLE 17.3, но так же будет работать и на более ранних версиях с минимальными косметическими правками. При разработки использовался собственный код, без применения фреймворков. Файл стилей изначально сжат, что позволит ускорить загрузку страниц.

​

1.png4.png3.png7.png6.png5.png2.png

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
А я вчера его хотел купить)
 
картинки не появляютсяEkran görüntüsü 2025-04-29 181445.png
 
Последнее редактирование:
Что тут не понятно 1746150109490.png
 
Как я могу показать последние комментарии с дизайном, соответствующим теме, справа, спасибо?Ekran görüntüsü 2025-05-12 010715.png
 
Последнее редактирование:
king сказал(а):
Как я могу показать последние комментарии с дизайном, соответствующим теме, справа, спасибо?Посмотреть вложение 5565
Нажмите, чтобы раскрыть...
Можно например через панель разработчика браузера ( F12 - элементы ), посмотреть как это устроено там и скопировать HTML код и стили для него
 
А может и reletednews.tpl верстал ? его в шаблоне нету.
 
Вывод комментарий на главной и.т.д

1). custom-comms.tpl создаем файл, в него вставляем

HTML: 
<div class="main-comment" id="{comment-id}">
    <div class="main-comment__avatar">
        <img src="{foto}" alt="{login}" loading="lazy" draggable="false">
    </div>
    <div class="main-comment__body">
        <div class="comments__head">
            <span class="comment__head-login">[profile][fullname]{fullname}[/fullname][not-fullname]{login}[/not-fullname][/profile]</span>
            <span class="comment__head-date">{date=d F Y}</span>
        </div>
        
        <div class="comment__text">{comment}</div>
        
        <div class="comment__options">
            
           <div class="comment__news">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="15" height="15">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
            </svg>
            {news_title}
        </div>
            [rating-type-2]
            <div class="comment__like">
                [rating-plus]
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="15" height="15">
                    <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
                </svg>
                {likes}
                [/rating-plus]
            </div>
            [/rating-type-2]
        </div>
    </div>
</div>


2). В modules/sidebar.tpl в нужное место вставляем

HTML: 
<div class="sidebar__card">
        <h4 class="sidebar__card-title sidebar__card-title-2">Комментарий
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"></path>
                    </svg>
    </h4>
        <div class="sidebar__card-list">
             {customcomments template="custom-comms" limit="5" cache="yes"}
        </div>
    </div>


3). добавляем стили в /assets/css/main.min.css вниз

CSS: 
.main-comment {
    display: grid;
    grid-template-columns: 40px 1fr;
    grid-gap: 15px;
    margin-bottom: 5px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-gray);
}
.main-comment__body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.main-comment__avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}
 
Спасибо вышло красиво
 

Вложения

  • 2025-05-12_19-44-59.png
    2025-05-12_19-44-59.png
    56.3 КБ · Просмотры: 34
Еще бы две вещи доделать:
Поиск справа как на скрине и расширенный поиск его тоже нету в шаблоне (у меня про поиск по комментариям интересует, а он только в расширенном поиске)
 

Вложения

  • 1-3[1].webp
    1-3[1].webp
    37.6 КБ · Просмотры: 25
можно ешё в стилях добавить ,чтобы дата справа
CSS: 
.comment__head-date {
    float: right;
}

и получится так 1747072497667.png
 
Так же рекомендую добавить в стили оформление цитат:
Bloxsy/assets/css/main.min.css
.title_quote {
padding: .5rem .7rem;
border: 1px solid #FF9800;
color: #333;
background-color: #FFF3E0;
border-left-width: 5px;
font-weight: 700 !important;
border-bottom-color: #FF9800;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24)
}

blockquote, .quote {
padding: .5rem .7rem;
border: 1px solid #FF9800;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
color: #333;
background-color: #FFF3E0;
border-left-width: 5px;
margin: 0;
}
Нажмите, чтобы раскрыть...
 
Для ответа нужно войти/зарегистрироваться
Верх