Блок пользователя
Регистрация на нашем сайте позволит вам общаться на форумах и получить доступ к другому полезному функционалу
Вы вошли как Гость

Автор Сообщение
admin
Аватар

Администратор
Сообщения: 68

Верстка блога на базе коробочной Cotonti Siena
  • #1
  • 23.11.2023 18:36

Пробуем создать урок / описать последовательность шагов в формате форумного топика по сборке сайта-блога и верстке соответствующей темы. Дизайн используем минималистичный, а главный упор будет сделан на технические аспекты и реализацию задачи по созданию сайта исключительно с помощью "коробочных" плагинов.

Установка

Скачиваем дистрибутив Cotonti Siena и разворачиваем его на удаленном (или локальном) сервере. В нашем случае мы будем использовать тестовый домен dslr.by для создания прототипа нашего блога.

Установка стандартная. Используем следующие модули и плагины:

  1. Index
  2. Pages
  3. RSS
  4. Users
  5. Banlist
  6. Cleaner
  7. MCaptcha
  8. Search
  9. Tags
  10. Hits
  11. Sitemap
  12. URL Editor
  13. Recent Items
  14. CKEditor
  15. HTML Parser
  16. HTML Purifier
  17. Comments
  18. Whosonline
  19. User Images
  20. Contact
Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #2
  • 24.11.2023 14:25

Предварительные настройки

Первым делом настроим URL’ы и переадресацию. Для этого:

  1. Дублируем файл sef-urls.htaccess в .htaccess
  2. После строки RewriteEngine On добавляем:
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]
    
    RewriteCond %{SERVER_PORT} !^443
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ https://dslr.by%{REQUEST_URI} [R=301,L]
    
    RewriteCond %{HTTP:X-SSL-Emu} !on
    RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L] 
    
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} ^(.+)/$
    RewriteRule ^(.+)/$ https://dslr.by/$1 [R=301,L]
  3. В админке идем по цепочке Конфигурация -> URL Editor и выбираем пункт “Удобный”
  4. На хостинге устанавливаем для нашего домена SSL-сертификат, и в config.php для верности пропишем
    $cfg['force_https'] = true;

В результате этих несложных действий получим SE-friendly URLs и переадресацию с http на https и с www на “без www” со всеми возможными вариантами.

Теперь займемся основными настройками сайта. Откроем закладку “Конфигурация” в админке:

  1. В блоке “Локализация” я установил конфиг “Принудительная установка языка по умолчанию для всех пользователей” в положение “Да”, а часовой пояс по умолчанию в UTC+03:00 Европа/Минск
  2. В блоке “Темы” установил конфиги “Принудительная установка темы по умолчанию для всех пользователей” и “Ссылка на главную страницу в навигационной цепочке” в положение “Да”. Показ времени создания страницы, копирайта и SQL-статистики отключаем.
  3. В блоке “Заголовки и мета-теги” прописываем Meta Title и Meta Description (Название сайта и описание сайта соответственно). Основной заголовок указываем как {SUBTITLE}. При необходимости указываем Meta Title главной страницы (иначе оставим {MAINTITLE} по умолчанию). Заполнять поле Ключевые слова не нужно.
  4. Вернемся в закладку “Конфигурация” и откроем блок Pages. Здесь конфиг “Формат заголовка страницы” укажем как {TITLE}.
  5. В настройка плагина Tags переведем конфиг "Использовать CSS стили плагина" в положение "Нет".
Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #3
  • 25.11.2023 12:21

Productivity

В качестве модельной будем использовать тему Kudos. В папку productivity скопируем дистрибутивы Bootstrap и FontAwesome. CSS-верстка будет производиться с использованием препроцессора LESS без минифицирования итоговых CSS-файлов.

Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #4
  • 28.11.2023 13:45

Собираем шапку и подвал:


Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #5
  • 28.11.2023 13:50

Работаем с index.tpl:

<!-- BEGIN: MAIN -->
<main id="home" class="my-5">
  <div class="container">
    <div class="row">
      <div class="col">
        {RECENT_PAGES}
      </div>
    </div>
  </div>
</main>
<!-- END: MAIN -->

В папку plugins/recentitems нашей темы копируем шаблон recentitems.pages.index.tpl и верстаем его:


Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #6
  • 02.12.2023 09:28

Из текущих (мелких) проблем пока только следующие:

  1. Только одна страница для тестирования в "коробочной" базе
  2. Отсутствие поддержки плагина тегов в плагине Recent Items
  3. Отсутствие коробочного плагина загрузки файлов
  4. Функция cot_breadcrumbs() в качестве анкора первого элемента использует не слово "Главная", а название сайта. Это можно исправить через ресурсные строки, но дефолтным поведением оно быть не должно. Планируется к исправлению в предстоящем релизе.
  5. Та же функция в качестве последнего элемента (в отличие от нашего плагина Crumbs) выводит название страницы или раздела. Это не совсем правильно и не совсем красиво (дублируется h1 и само название может оказаться слишком длинным для "крошек"). Возможное решение будет обсуждаться

Все это в принципе и решабельно и не критично для front-end темы, которую все равно необходимо кастомизировать под свои нужны. RI все равно будет заменен на Pagelist, в котором есть вывод тегов для страниц. Менеджер загрузок также у каждого свой.

Что касается модельных страниц, их несложно создать и заполнить "рыбой". Возможно, в тему будет включен дамп для их быстрой выгрузки в прототип. Картинки пока подтягиваются по id страницы из папки темы. Так что все вопросы so far локализованы.

Отредактировано: admin (02.12.2023 10:42, 5 месяцев назад)
Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #7
  • 02.12.2023 11:43

В свойства разделов добавляем описания и верстаем page.list.tpl. Все стандартно, за исключением использования слегка экзотической функции cot_page_enum() для создания виджета лучших страниц. Кстати, шаблон для нее сохраняем в папку темы modules/page.


Отредактировано: admin (03.12.2023 00:01, 5 месяцев назад)
Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #8
  • 02.12.2023 23:59

Копируем в папку plugins нашей темы шаблон contacts.tpl и собираем страницу контактов:


Поблагодарили
admin
Аватар

Администратор
Сообщения: 68

Re: Верстка блога на базе коробочной Cotonti Siena
  • #9
  • 15.12.2023 15:50

Добавим шаблоны для авторизации, регистрации и восстановления пароля. В них мы используем следующие переменные настроек:

  • {PHP.cfg.users.disablereg}
  • {PHP.cfg.maintenancereason}

Для администраторов в шаблоне login.tpl добавим ссылку в "админку".

Поскольку нашу темы верстаем с использованием Bootstrap, необходимо добавить необходимиые классы в элементы форм. Плагины мы не используем, так что подключим внешний файл fixforms.js со следущим содержанием:

$(document).ready(function() {

/* Page Add/Edit Forms */

  $('form[name=pageform] input[type=text], form[name=profile] input[type=text]').addClass('form-control');
  $('form[name=pageform] textarea:not(.editor), form[name=profile] textarea:not(.editor), form[name=useredit] textarea:not(.editor)').addClass('form-control');
  $('form[name=pageform] select, form[name=profile] select, form[name=useredit] select').addClass('form-control').css({
    'width': 'auto',
    'display': 'inline-block'
  });

/* User Auth/Register/Profile & Feedback Forms */

  $('input[name^=ruser]:not([type=radio]):not([type=checkbox])').addClass('form-control');

  $('input[name=rpassword]').addClass('form-control');
  $('input[name=rpassword1]').addClass('form-control');
  $('input[name=rpassword2]').addClass('form-control');

  $('input[name=ruseremail]').addClass('form-control');

  $('input[name=rverify]').addClass('form-control');

  $('input[name=roldpass]').addClass('form-control');
  $('input[name=rnewpass1]').addClass('form-control');
  $('input[name=rnewpass2]').addClass('form-control');

  $('input[name=rname]').addClass('form-control');
  $('input[name=remail]').addClass('form-control');

});
Поблагодарили
Тема заблокирована, новые сообщения запрещены
Теги:

Теги: , ,