Статьи

Построение CMS: структура и стиль

Конечный продукт
Что вы будете создавать

Наблюдается тенденция веб-серверов «плоский дизайн CMS». Это просто относится к Системе управления контентом (CMS), которая не хранит свою информацию в базе данных. Вместо этого вся информация хранится в текстовых файлах. Поскольку многие виртуальные частные серверы (VPS) в настоящее время используют жесткие диски на основе ОЗУ, этот подход является более быстрым и немного более безопасным.

В этой серии уроков я покажу вам, как создать собственную CMS с плоской файловой системой, используя некоторые стандартные веб-технологии. Эти системы не так полнофункциональны, как другие, но имеют основы с хорошим временем отклика.

Со всей информацией на жестком диске, организация файлов становится большой проблемой. Учитывая это, информация о сайте будет находиться в другом каталоге, чем информация о стилях и макете. Кроме того, каждый тип страницы имеет свой собственный каталог в папке сайта с каталогом частей для небольших частей CMS. Это держит все на своем месте и делает систему гибкой.

В каталоге, в котором вы собираетесь построить проект, создайте следующие каталоги: src , site и themes . Каталог src будет содержать код сервера, каталог сайта для всей информации о сайте, а каталог тем для информации о макете и темах.

В каталоге тем вам нужно создать макеты и каталог стилей . Каталог раскладок будет содержать разные макеты веб-страниц. Отделяя информацию о макете от информации о стиле, темы становятся намного более гибкими. На данный момент будет один макет под названием SingleCol .

Для всех стилей и макетов я использую Sass , Compass и Susy . Sass — это язык обработки пользовательских таблиц стилей. Это дает более надежный способ создания таблиц стилей CSS для вашего сайта. Компас является продолжением Sass. Sassy-buttons — это расширение Sass для создания красивых кнопок на веб-сайте. Susy также является расширением для создания системы разметки сетки для вашего сайта.

Поскольку Ruby предустановлен на всех компьютерах Mac, вам не нужно его устанавливать. Чтобы получить Ruby в системе Windows, вам необходимо скачать установщик Windows для Ruby . В Linux вам нужно использовать менеджер пакетов вашей системы для установки Ruby.

Как только Ruby появится в вашей системе, вы можете установить Sass, Compass, Sassy-button и Susy с помощью следующих командных строк:

bash gem install sass gem install sassy-buttons gem install compass gem install susy

Для этого урока я использую Sass 3.4.16, кнопки Sassy 0.2.6, Compass 1.0.3 и Susy 2.2.5. В зависимости от конфигурации вашей системы, вам может потребоваться выполнить эти команды с sudo перед ними.

Чтобы начать создавать макеты, выполните следующие команды в каталоге SingleCol :

bash compass init

Это создаст каталоги sass и stylesheets , а также файл с именем config.rb . Поскольку мне нравится использовать css для каталога таблиц стилей, переименуйте каталог стилей в css . Кроме того, создайте каталог js для любых необходимых файлов JavaScript для макета. Откройте файл config.rb и сделайте так, чтобы он выглядел так:

ruby require 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"

Теперь, чтобы создать базовый макет веб-сайта, создайте файл в каталоге макетов с именем template.html . В этом файле добавьте этот код:

« `html <! DOCTYPE html PUBLIC« — // W3C // DTD XHTML 1.0 Strict // EN »« http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd »>

{{{заглавие}}} {{{голова}}}

{{{Содержание}}}

« `

Этот шаблон создает стандартную веб-страницу для сайта. Каждая страница имеет заголовок с панелью навигации, одну боковую панель, область содержимого и область нижнего колонтитула. Последнее, что загружается, это javascripts, необходимые для сайта.

Каждый раздел представлен макросом Handlebar . Сервер расширяет макросы перед тем, как передать их пользователю.

В каталоге sass создайте файл с именем base.scss и поместите этот код:

« `css @import ‘compass / reset’; @import ‘susy’;

$ susy: (поток: ltr, математика: жидкость, вывод: float, позиция желоба: после, контейнер: авто, позиция контейнера: центр, столбцы: 16, желоба: .25, ширина столбца: false, глобальная коробка -sizing: content-box, last-flow: to, debug: (image: hide, color: rgba (# 66f, .25), вывод: background, toggle: top right,), use-custom: (background-image : true, background-options: false, box-size: true, clearfix: false, rem: true,));

тело {}

заворачивать {

контейнер @include (16); ширина: 1024 пикселей; дисплей: блок; }

headerwrap {

@include span (16 из 16); нижнее поле: 20 пикселей; }

header {

margin-top: 20px; поле слева: авто; поле справа: авто; ширина: 95%; }

содержание {

.col1 {@include span (5 из 10); }

.col2 {@include span (последние 5 из 10); }

нижний колонтитул .col2 {

.box {@include span (4 из 10); }

боковая панель {

@include span (последние 4 из 16); }

нижний колонтитул {

@include span (16 из 16); }

/ ** CSS выпадающее меню ** /

навигация {

margin-top: 20px; поле слева: авто; поле справа: авто; ширина: 95%; }

menuh-container {

верх: 1em; слева: 1em; дисплей: встроенный; ширина: 100%; }

меню {

на полях: 1em; дисплей: встроенный; ширина: 100%; }

Меню Уль Ли {

дисплей: встроенный блок; ширина: fit-content; }

меню

{text-align: center; отображения: блок; бело-пространство: Nowrap; Маржа: 0; обивка: 5px; текстовое оформление: нет; }

Меню Ул

{стиль списка: нет; поле: 0px 20px 0px 20px; отступы: 0px; }

меню ли

{позиция: относительная; минимальная высота: 1px; выравнивание по вертикали: снизу; ширина: fit-content; }

Меню Ул Ул

{позиция: абсолютная; z-индекс: 500; верх: 50 пикселей; слева: 20 пикселей; дисплей: нет; набивка: 0.5em; поле: -1em 0 0 -1em; }

# menuh ul ul li {ширина: 100%; }

меню уль ул ли {

Менух уль ул уль

{слева: 90 пикселей; }

div # menuh li: hover {курсор: указатель; Z-индекс: 100; }

div # menu li: hover ul ul, div # menu li li: hover ul ul, div # menuh li li: hover ul ul, div # menuh li li li: hover ul ul {дисплей: нет;}

div # menuh li: hover ul, div # menu li li: hover ul, div # menuh li li: hover ul, div # menuh li li li: hover ul {отображение: блок;}

/ * Завершение выпадающего меню CSS * / « `

Этот код sass загружается в стилях сброса компаса, чтобы нейтрализовать настройки браузера по умолчанию. Затем он загружает и настраивает susy для создания правильной разметки сетки для всех элементов веб-страницы.

Система навигации css находится после определения страницы. Скрытые раскрывающиеся списки для меню становятся видимыми с определениями при наведении мыши. Это дает систему меню только css .

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

Для каталога стилей создайте каталог с именем Basic . Инициализируйте информацию sass, как это сделано для каталога layouts / SingleCol . В этом каталоге запустите следующую командную строку:

bash compass init

Это создаст каталоги sass и stylesheets , а также файл с именем config.rb . Поскольку мне нравится использовать css для каталога таблиц стилей, переименуйте каталог стилей в css . Также создайте каталог js для любого JavaScript для создания темы. Откройте файл config.rb и сделайте так, чтобы он выглядел так:

ruby require 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"

Для стилей кнопок на сайте я люблю использовать sassy-кнопки . Поэтому сначала требуется, а затем структура каталогов.

В каталоге Basic / sass создайте файл Basic.scss со следующей информацией:

« `css // Добро пожаловать в Компас. // В этом файле вы должны написать свои основные стили. (или централизовать импорт) // Импортировать этот файл, используя следующий HTML или эквивалент: // // @import ‘compass / css3’; @import ‘sassy-buttons’;

$ style-color1: rgb (247, 237, 222); $ style-color2: # ffedd1; $ style-color3: rgb (245, 213, 166); $ style-color4: # f0d5ad;

// // Очистить Fix // .clearfix: after {content: ‘.’; дисплей: блок; ясно: оба; видимость: скрытая; высота строки: 0; высота: 0; }

.clearfix {display: inline-block; }

html [xmlns] .clearfix {display: block; }

  • html .clearfix {height: 1%; }

// // Основной стиль для дерева. // @mixin standardize {padding-top: 10px; отступ слева: 15 пикселей; размер шрифта: 19 пикселей; высота линии: 1,25em; }

body {background-color: $ style-color2;

// CSS выпадающее меню #navigation {text-align: left; рамка: 2px solid $ style-color3; background-color: $ style-color2; @include border-radius (15px); }

меню {

МЕНЮ УЛЬ {

Меню Ул Уль {

меню {

Меню: ссылка, # меню: посещено, # меню: активно {

menuh: hover {

// Завершение выпадающего меню CSS // Разные классы .picture {border: 3px solid $ style-color3; @include border-radius (8px); плыть налево; поле: 5px 15px 15px 15px; }

a: ссылка, a: посещения {цвет: темнее ($ style-color1, 50); текстовое оформление: нет; }

сильный {font-weight: bold; }

table {margin: 20px; граница: 3px solid; @include border-radius (10px); цвет рамки: светлый ($ style-color2, 6); th {text-align: center; вес шрифта: жирный; отступы: 10px 0 10px 0; } tbody {td {padding: 10px; } tr: nth-child (2n + 1) {background-color: darken ($ style-color2, 5); } tr: nth-child (even) {background-color: lighten ($ style-color2, 2.5); }}}

commentSpacer {

.tutorial_excerpt {margin-left: 20px; }

.tutorial_thumbnail {float: left; поле справа: 20 пикселей; поле слева: 20 пикселей; нижнее поле: 20 пикселей; }

.tutorial_wrap {margin-bottom: 50px; плыть налево; }

img.wp-post-image {-moz-border-radius: 15px; радиус границы: 15 пикселей; тень от коробки: 10px 10px 5px серый; }

.showcode {margin: 20px auto 20px 30px; -moz-border-radius: 15px; радиус границы: 15 пикселей; граница: $ style-color4 3px; стиль границы: твердый; фон: белый; }

социальные сети {

socialbuttons {

socialbuttons a {

socialbuttons a: hover {

socialbuttons a {

socialbuttons a.twitter {

socialbuttons a.facebook {

socialbuttons a.googleplus {

dl {margin-left: 20px; margin-top: 20px; нижнее поле: 20 пикселей; размер шрифта: 19 пикселей; высота линии: 1,25em; }

dt {margin-left: 20px; нижнее поле: 20 пикселей; вес шрифта: жирный; }

dd {margin-left: 40px; нижнее поле: 20 пикселей; } « `

Этот код определяет, как будет выглядеть сайт. Он определяет фон, цвета, шрифты и т. Д., Которые составляют стиль для типичного веб-сайта.

Каталог styling / Basic содержит файлы, необходимые для внешнего вида страницы 404, заголовка, нижнего колонтитула и боковой панели веб-сайта. Поэтому создайте файл с именем 404.html и поместите этот код:

« « HTML

Извините, мы не смогли найти страницу.

« `

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

Затем создайте файл header.html со следующим содержимым:

« « HTML

Тестовый сайт

« `

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

Затем создайте файл footer.html со следующим содержимым:

« « HTML