Skip to content

Instantly share code, notes, and snippets.

Визуальный редактор

  1. Установим плагин Wysiwyg Editors

  2. В настройках включаем CKEditor, указываем Места использования

  3. В файле настроек plugins/anandpatel/wysiwygeditors/formwidgets/editor/assets/ckeditor/config.js

  4. Прописываем путь до файла стилей

    CKEDITOR.editorConfig = function( config ) { CKEDITOR.config.extraPlugins = 'ocmediamanager,ocpagelink,ocmedialink,ocmediavideo,ocmediaaudio'; CKEDITOR.config.contentsCss = ["/themes/prolog/assets/css/style.min.css"];

Меню на сайте

Меню в October CMS созданно похожим образом с WP сначало нужно создать меню, добавить в него нужные пункты, потом выводить отдельное меню в нужном месте.

  1. Устанавливаем StaticPage
  2. Создаём страницы
  3. Создаём менюшки
  4. Выводим

Static Pages - Меню, хлебные крошки (аналог pdoTools)

  1. Каждому шаблону добавляем компонент StaticPage

SEO на October CMS

Устанавливаем плагин SEO Extensions

Видео: https://www.youtube.com/watch?v=5nzwbLUhFZE

  1. Добавляем компонент в тэг <head>{% component 'SeoCmsPage' %}</head> вместо мета тегов
  2. Добавляем компонент в наш шаблон
  3. Подключаем компонент к страницам и постам а так же код из документации

Редактор фронтенда на сайте

Видео: https://youtu.be/php0qRCdBYU

Устанавливаем плагин Content Editor by Samuell

Переходим в админки CMS->Страницы->Выбираем страницу -> Компоненты -> Добовляем компонент Content Editor

Редактируемые блоки выносим в отдельные файлы в папку conent

{% set posts = blogPosts.posts %}
{% for post in posts %}
<div class="col-md-4">
<div class="card newsItem">
<a href="{{ post.url }}">
{% for image in post.featured_images|slice(0, 1) %}
<img class="card-img-top" src="{{ image.path | resize(520, 370) }}" alt="{{ post.title }}">
{% endfor %}
</a>
<div class="card-data">

Плагины

  • blog - вывод статей списком
  • Image Resizer - Ресайзер изображений

Параметры и настройки в October CMS

Русская дата

Чтоб установить язык для сайта нужно в файле

/config/app.php 78 для параметра 'locale' установить значение 'ru'

'locale' => 'ru',

Разрешение экранов и меди точки

Принцип данного подхода.

Дизайнер предоставляет дизайн ширеной 1440px, ширина контейнера в районе 1140px Все размеры задаются в EM 1em = 10px В мобильной версии размеры и шрифты корректируются.

Стандартный дизайн ширена окна 1440px контейнер 1140px

Тип | Разрешение | Media | Max-width | % | Font-size | 1rem | ?

October CMS

Установка

  1. Скачиваем инсталятор: https://octobercms.com/download
  2. Создаём базу и хост, устанавливаем October CMS, используем только Chrome
  3. Бэкенд http://prolog.oc/backend
  4. Переключаем на русский: Значёк пользователя в углу -> Setting backend

Тема

  1. Настройка -> Фронтенд темы -> Создать новый бланк темы