Как написать cms на файлах

Обновлено: 06.07.2024

Nickolay.info. PHP. Самая простая CMS или пишем элементарный "движок" на PHP

Заметка родилась как ответ на вопрос одного знакомого. Вопрос был примерно такой:

Мне не нужны сложные программы на PHP, но хочется иметь простейший способ подключения к сайту разных страниц, написанных на обычном HTML. Потому что с разметкой HTML я справлюсь, а вот программированием не владею. Ну и пригодились бы динамическая генерация меню сайта плюс вывод постоянных верха и низа страницы. Всё, что нашёл в Интернете - или огромные громоздкие CMS, которые ставить и настраивать запаришься, или голая теория, в которой без хорошего знания PHP и программирования не разберёшься.

Что ж, эта статья как раз описывает "самую простую в мире" CMS (систему управления динамическим сайтом). Наверное, можно ещё проще, но так как этот мини-"движок" я буду писать прямо сейчас вместе с текстом, то уж как получится.

На сайте уже есть статьи, где можно посмотреть как "заочно" заказать и оплатить хостинг и как закачивать файлы по ftp (там про Perl, но это совершенно неважно), так что на этих моментах я останавливаться не буду, будем считать, что у Вас есть домен и ссылка ftp, по которой Вы можете закачать файлы в корневую папку своего будущего сайта. Кстати, нам подойдут и многие современные бесплатные хостинги, достаточно поддержки PHP 4.3 и выше, а никакие базы данных MySQL для такой элементарной задачи не нужны.

Кроме того, папки на сайте хостера уже обычно настроены так, что "главный файл" index.php отображается автоматически, то есть,

означает абсолютно то же самое, что

Поэтому главный файл нашего движка тоже будет называться index.php

config.php - файл с настройками, которые Вы сможете поменять "под себя";
index.php - главный файл, который будет выводить и показывать страницы;
header.php - файл с верхом каждой страницы сайта;
footer.php - файл с низом каждой страницы сайта;
style.css - стилевой файл, который можно пополнить нужными стилевыми настройками отображения тегов (CSS);
p - вложенная папка, куда мы разместим файлы *.html с кодом страниц, картинки и прочее содержимое, уже не относящееся к "движку". В этом простом примере наш сайт будет одноуровневым, то есть, все страницы из папки p будут равноправны между собой и доступны из автоматически сформированного меню на любой из них. Это не так уж плохо для небольших по объёму сайтов.

Сначала напишем config.php , это единственный файл "движка", куда Вам может понадобиться внести свои настройки. Вот он с комментариями (всё, что после символов // до конца строки - это комментарии, они не обрабатываются интерпретаторами PHP), выделенное красным можно менять, естественно, можно добавлять/удалять любое количество записей о файлах сайта в указанном виде.

Все апострофы ' имеют значение! Если вдруг Вам понадобился апостроф внутри названия страницы:

Кроме того, здесь мы уже сказали, что файл с заголовком Mike's cool site сохранён под именем index.html . В какой папке? В папке p , где будут и все остальные файлы!

Какие хитрости есть в именовании файлов и самих страниц не только для этого скрипта, но и для любого другого?

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

Вашей Windows всё равно, БОЛЬШИЕ или маленькие буквы Вы использовали в названии файла, но почти любому реальному серверу это небезразлично! Осваивайте файловый менеджер Far Manager, там клавишей F11 вызывается меню внешних модулей, где есть команда "преобразование регистра" - она позволяет моментально решить данную проблему.

Во-вторых, русскоязычное имя Вашей страницы будет показано в верхней строке браузера и станет именем закладки на страницу, если кто-то таковую сделает. Поэтому не нужно использовать в титуле страницы всяких сомнительных знаков, вроде < , > , + , ? , ! , ' , " и т.п. (а вот точку, запятую, дефис - можно), лучше всего, если титулом будет естественный текст вроде "Главная страница" или "Мои программы".

Кроме того, перед названием конкретной страницы удобно дописывать название всего сайта, чтобы в строке заголовка браузера или вкладки получилось что-то вроде "Мой сайт - Главная страница". Эту возможность мы "зашьём" в движок автоматически, а если Вам этого не надо - просто очистите название всего сайта в настройках config.php .

Из этих имён страниц будет составляться меню - и не исключено, что при неудачном стечении обстоятельств название " Главная страница " будет браузером разорвано - слово " Главная " окажется на одной строке экрана, а " страница " - на другой. Чтобы такого не произошло, ставьте в названиях страницы вместо пробелов символы   - это так называемый "жёсткий пробел". Я так и сделал.

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

Сам "движок" займёт совсем немного места, причём, большая часть кода уйдёт на всякие проверки корректности и исключения лишнего. Теперь пишем этот движок, то есть, файл index.php :

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

Обратим внимание на строчки вывода очередного пункта меню -

- здесь название пункта, в котором мы заменили пробелы на  , обрамляется квадратными скобками [ . ] и заключается в тег <nobr> , который хоть и нестандартен, но во всех популярных браузерах благополучно запрещает разрывать своё содержимое. Разумеется, Вы можете оформить пункты меню иначе, изменив этот код.

Кроме того, такой "сложный" оператор понадобился, чтобы не создавать ссылки на ту страницу, которая сейчас открывается. Если бы мы выводили в меню все подряд ссылки, хватило бы и такого оператора echo :

просто пытаются с помощью регулярного выражения PHP извлечь из подключённого файла HTML содержимое тега <body> , то есть, Вы можете кидать в папку p и обычные странички, не заботясь о том, чтобы удалить из них "лишние" теги оформления html-файла. Кстати, для этого действия есть готовый метод tidy_get_body , но он появился только в PHP 5. Ну а если содержимого тега <body> найти не удалось, файл со страничкой подключается директивой include .

Написать файлы header.php и footer.php , то есть, "шапку" и "подвал" всех страниц, можно как обычные HTML, я ограничусь простейшим вариантом. Единственный нюанс, который нужно учесть - подключить в файле header.php из тега <title> вывод сформированного нами динамически заголовка окна:

Так что получаем вот такой header.php

и простейший footer.php вида

Добавьте по своему вкусу всё, что угодно в шапке и подвале - и получите "дизайн".

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

Вы также можете полностью переписать этот файл style.css по своему вкусу.

Разумеется, все файлы "движка" нужно скинуть в одну папку - предполагается, что это и есть корневая папка сайта, а в ней создана папка p , в прикреплённом ниже архиве она содержит 3 простейших странички. Я старался не использовать никакого кода, зависящего от настроек или версии PHP, так что, скорее всего, всё заработает - по крайней мере, у меня произошло именно так.

Вот и всё, простейший "движок" на PHP написан, а изучив хотя бы в основах этот замечательный язык, Вы сможете сделать намного больше.

P.S. Конечно же, ничто не мешает переделать по своему вкусу оформление вывода в файле index.php , например, если вам не нравится горизонтальное меню, а хочется вертикального. Вот всё, что изменится:

В левую колонку будет выведено меню, а в правую - содержимое. Детали оформления можно поменять, если сделать другую разметку тегами HTML.

Рынок CMS длительное время оставался местом, где Wordpress, Joomla, Drupal — тройка абсолютных лидеров. Эти прекрасные времена уже постепенно проходят, хотя WP, сбавляя в динамике появления новых сайтов, все ещё сохраняет лидерство. Не мудрено: активное сообщество, огромное количество плагинов. Но, эта статья вовсе не будет посвящена “восходящим звёздам” рынка систем управления контентом (привет, решениям на базе Laravel). Скорее даже, объектом нашего внимания будет “черная материя”, которая находится несколько в стороне. А именно — барабанная дробь…

Статические сайты

Кому нужна статика в 2k20?

Рациональный вопрос! Казалось бы, времена телефонного интернета и Windows95 уже прошли, но спрос на статическую генерацию html кода вновь начинает набирать обороты. И всему виной корпорация добра, разумеется. Google PageSpeed — тот самый великий и могучий Урфи… В общем, именно этот измеритель производительности веб-страниц стал и двигателем прогресса мирового интернета, и головной болью всех веб-разработчиков, а уж тем более фрилансеров. Результаты измерений сего инструмента базируются на стандартах Google, а далече известно, что оные положено в основу ранжирования. Да и объективно, загрузка страницы более трёх секунд увеличивает количество отказов автоматически. Таким образом, статика становится одним из альтернативных решений на смену или в дополнение к динамической сборке страниц силой любой CMS, фреймворка либо самописных вариантов.

Хьюстон, у нас проблемы или мой случай

По долгу службы я занимаюсь обслуживанием множества проектов, среди которых есть парсеры, но и решения в сфере e-commerce. На жизнь не жалуюсь, но возникла задачка не из разряда “2 класс, начальная школа”. Я, как разработчик, и менеджер (а управление своим маленьким делом, как известно, требует навыков и из этой сферы), как это на польском “dostałem się do martwego kąta” (попал в глухой угол, одним словом). Условие следующее: нужно написать в течение нескольких дней решение, которое должно просто устанавливаться и обслуживать любое количество статических страниц. Более того, администратор должен иметь возможность быстро удалять и добавлять такое решение на любой проект через FTP/SFTP соединение или даже если у него нет доступа к FTP/SFTP. С другой же стороны условием было то, что минимальная версия — это PHP 5.6 и она должна поддерживаться довольно прекрасно, как и каждый более современный вариант.

Администратор должен

удалять/добавлять/изменять страницы при помощи админки;
глобально и быстро искать в контенте страниц (учитывая разные кодировки, языки;
искать по названиям файлов;
удалять/вставлять/изменять на всех страницах нужные элементы одним кликом из админки;
решение должно быть простым как в установке, так и в удалении.

Дополнительным обязательством была бы возможность использовать админ панель и все ее функции через API. Грубо говоря, при наличии таких админок на 50+ доменах, должен быть доступ к ним удалённо путем возможности делать запросы.

Чехия, вечер, лето, кофе

Крайне спокойные вечера в Крконошах только способствуют лени. Но, как говорит старая пословица, кто не работает…

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

И да, чёрт возьми, я решил перенести в один файл уже устоявшийся подход в большинстве фреймворков — ООП и MVC концепцию.

С точки зрения быстродействия процедурщина, быть может, была бы наиболее лучшим вариантом, но:

не забудем об аспекте роста потребностей клиента и параллельной надобности добавлять новые возможности к интерфейсам нашего веб-приложения;
проблемы с ментальным состоянием программиста — хоть я и был согласен мириться с тем, что всё будущее этого проекта будет возложено исключительно на мои могучие плечи, но вряд ли я бы морально перенёс бесконечное усложнение процедурного решения и отсутствие внятной бизнес логики;
потребность возможной публикации проекта для всенародных масс — такая надобность к моменту публикации сего опуса становится актуальной, поэтому лучше когда “руки развязаны” и будущую документацию можно оснастить вполне понятными даже не функциями, а структурами объектно-ориентированного мышления и разделения зон ответственности приложения на ярко выраженный фронт-энд, бэк-энд.

Структурирование

Исходя из того, что у нас один файл и есть главное правило — добавляться должен только один файл и после сразу можно работать и обслуживать директорию, в которую добавили, ясное дело, что даже классы не спасут от “чёрт ногу сломит”.

Каково же решение?

Интуитивно: файл разбиваем на структурные части вида: базовые системные классы в самом верху, контроллеры пониже, виды еще ниже, но и весь балет закрывают роуты. Каждая часть получила шапку из комментов с объяснением, дабы через время не забыть что здесь:

Нейминг согласно функциональному предназначению — методы классов получили имена согласно camelCase практике и соответствуют функциональной роли, к примеру “checkAdminCredentials” — это более чем понятная формулировка для метода.

Попытка описать всё что можно — не скажу, что соответствовал этому намерению до самого конца разработки, в конце концов, я лавировал между быстротой и читабельностью кода, но ± ключевые решения мне удалось сопроводить комментариями вида //to get static html.

Как сделан роутинг?

Надобность более-менее понятного разделения интерфейсов была мною сразу же принята в качестве ключевой потребности. Этот компонент, если не должным образом реализовать, может стать “точкой пика роста” приложения из-за запутанности в том, какой роут какой контроллер вызывает.

Исходя из упомянутой выше проблемы, я сделал класс для роутинга достаточно примитивным, но функциональным. Роутинг работает при помощи GET запросов — конечно, не совсем эстетично, но сиюминутную потребность в быстрой реализации решает на 100%. Роутер стал единственной точкой входа для веб-приложения (т.е. для админ. панели), что, как по мне, идеальное решение для простоты разработки. В этом классе происходит сборка фронт-энда и бэк-энда веб-аппликации и вывод return-ом сформированного HTML.

Вопрос: написал ли я велосипед?

Я склонен к подозрению, что подобные решения уже написаны в прошлом, но на момент июля 2020 ни английский, ни польский, ни чешский, ни русский с украинским не помогли мне найти что-то стоящее и применительное к моему случаю. Поэтому во мне “включился” создатель, и я от всей души проектировал решение актуальных задач бизнеса. Ведь, если есть проблема — её нужно решить максимально быстро и экономно, да ещё и про качество не позабыть.

Наглядный пример производительности

Одна крайне известная CMS, имя которой не принято называть:

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

What You'll Be Creating

Наметилась тенденция (* сравнительно устойчивое направление развития определенного явления, процесса или идеи. Здесь и далее примеч. пер.) использования CMS (* content management system – система управления содержимым; ПО для организации совместных работ по созданию документов и другого контента), на серверной части которых используется база данных в виде плоского файла (* файл, состоящий из однородных записей, не связанных между собой какими-л. отношениями). Это понятие описывает CMS, информация которой не хранится в базе данных. Вместо этого вся информация хранится в чисто текстовых файлах. Поскольку множество VPS (* virtual private server – виртуальный выделенный сервер; виртуальный сервер, который пользователь воспринимает как выделенный сервер, однако который в действительности установлен на компьютере, на котором работают несколько веб-сайтов. На одном компьютере может быть несколько виртуальных выделенных серверов, у каждого из которых имеется собственная операционная система, на которой запущено серверное программное обеспечение для отдельного пользователя) сегодня используют жесткий диски, работающие на основе ОЗУ (* оперативное запоминающее устройство; полупроводниковая память, предназначенная для временного хранения программ и данных) (* виртуальный привод, который использует RAM вашей системы в качестве дисковода), то веб-сайты, работающие на основе этого подхода, обладают большей производительностью и немного более безопасны.

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

Основная структура каталогов

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

В папке themes необходимо создать папки layouts и styling. В папке layouts будут располагаться шаблоны с разметкой различных веб-страниц. За счет разделения информации о разметке и стилевом оформлении темы становятся намного гибче. Пока что у нас будет единственный макет в папке под названием SingleCol.

Для создания всего стилевого оформления и макетов страниц я использую Sass, Compass и Susy (* Susy является движком для создания разметки web-страницы. Это набор инструментов, с помощью которых можно создать произвольную CSS-сетку (grid), которая отвечает потребностям дизайна конкретной web-страницы). Sass (* Syntactically awesome style sheets – синтаксически великолепные таблицы стилей) – скриптовый язык для создания пользовательских таблиц стилей. За счет нее у вас имеется более надежный способ создания таблиц стилей CSS для ваших веб-страниц. Compass – расширение Sass. Sassy-buttons – расширение Sass для создания привлекательных кнопок для веб-сайта. Susy – также расширение для создания системы сеток для разметки страниц вашего сайта.

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

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

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

Макеты

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

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

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

При помощи этого шаблона создается стандартная веб-страница сайта: На каждой странице имеется заголовок, навигационная панель, единственное боковое поле, область для размещения контента и подвал страницы (* здесь обычно располагается имя автора, дата документа, контактная и правовая информация). В последнюю очередь загружаются необходимые для сайта файлы JavaScript.

В каждом разделе имеется макрос (* от греческого makros - большой, длинный; последовательность команд и/или нажатий клавиш, записанная макрорегистратором под уникальным именем. Эта последовательность затем может быть исполнена путtм указания данного имени) Handlebar (*система для создания шаблонов, их комбинирования с данными модели и получения конечных документов; шаблонизатор). На сервере перед отправкой пользователю макрос заменяется набором инструкций.

В папке sass создайте файл под названием base.scss и добавьте в него следующий код:

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

Навигационная панель, реализуемая при помощи CSS, идет после описаний размеров элементов страницы. Скрытые списки опций для меню становятся видимыми за счет правил, применяемых к элементам при перемещении мыши поверх них. За счет этого система меню реализуется только благодаря CSS.

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

Таблицы стилей

Переходим к папке styling; создайте папку под названием Basic. Инициализируем информацию sass так же, как и для папки layouts/SingleCol. В этой папке выполните следующую команду:

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

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

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

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

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

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

Далее создайте файл header.html с этим содержимым:

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

Далее создайте файл footer.html с этим содержимым:

Далее создайте файл sidebar.html с этим содержимым:

Опять-таки, это просто заполнители (* текстовый или графический элемент электронного шаблона страницы, заменяемый реальным элементом). Все эти файлы копируются в папку site/parts и изменяются в зависимости от нужд сайта. Они располагаются там, чтобы серверу было что отослать с этими именами в случае, если пользователь забывает их создать.

Структура сайта

Теперь, когда мы разобрались с макетами и стилевым оформлением, пришло время создать базовый контент и структуру для собственно сайта. В папке site создайте папки parts, pages, posts, images, css и js.

Фрагменты кода

В папке parts будут содержаться небольшие кусочки кода html/css/javascript, из которых будет формироваться одиночный фрагмент, помещенный во многих местах веб-сайта. Эти фрагменты подгружаются на сервер и комбинируются с контентом страниц по необходимости. Для нашей демоверсии сайта создайте следующие части:

footer.html со следующим кодом:

head.html с этим кодом:

header.html со следующим содержимым:

navbar.html со следующим кодом:

sidebar.html с этим кодом:

socialmedia.html со следующим кодом:

Сервер загружает эти фрагменты, используя имена без разрешений, в шаблон Handlebar для их раскрытия. Например, везде, где необходимо добавить фрагмент socialmedia.html, вы помещаете макрос >> . Также эти фрагменты могут быть в формате Markdown (* упрощенный язык разметки, в котором для форматирования используется чистый текст) или любом другом, поддерживаемом сервером. В сервере, который будем создавать, поддерживаемые типы форматов следующие: HTML, Jade/Amber (* шаблонизатор для языка программирования Go) и Markdown. Я буду рассматривать эти подробности в руководстве, посвященном созданию собственно серверной части.

Все страницы для сайта будут располагаться в папке pages. Пока что создайте следующие файлы с их одержимым:

Это демоверсии страниц для сайта. Единственная необходимая из них – main.html, поскольку сервер будет загружать контент этой страницы в память и отправлять оттуда. За счет этого ускоряется загрузка домашней страницы веб-сайта. Остальные две страницы имеют расширение md, поскольку они созданы в формате Markdown. Сервер преобразует контент в HTML - формат перед встраиванием в макет страницы.

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

По характеру страницы могут формировать иерархическую структуру за счет создания каталогов и подкаталогов со страницами. На основе имен этих папок создаются адреса для страниц папки pages.

Посты

В папке posts/blogs/flatcms создайте следующие файлы:

index.amber со следующим содержимым:

flatcms.md со следующим содержимым:

Файл index.amber – шаблон Jade для создания различных постов блога. Благодаря шаблонизатору Jade добавление нового контента с необходимым форматированием значительно упрощается. За счет передаваемых в макрос (* здесь mixin article()) параметров создаются различные посты. Вы можете получить больше информации о Jade на Tuts+.

Здесь используется расширение amber, поскольку эквивалентом Jade для языка Go является Amber. Это так, поскольку код для серверной части изначально создавался на Go. Если вы хотите изменить расширение, то помните, что его необходимо изменить и в соответствующем месте кода для серверной части сайта.

В папке posts/news/flatcms создайте следующие файлы:

index.amber со следующим содержимым:

flatcms.md со следующим содержимым:

Изображения

На всех веб-сайтах имеются изображения. В этой версии сайта все изображения располагаются в папке site/images. Для рассматриваемого тут сайта в этой папке будут находится только иконки социальных сетей. Вы можете получить файлы изображений из файла с кодом для этого руководства, доступного для скачивания.

CSS-файлы для сайта

Несмотря на то, что уже имеются файлы CSS в папках styling и layouts, возникнут моменты, когда вам необходимо будет добавить дополнительные правила CSS. В папке site/css содержатся все CSS-файлы, за счет которых вносятся те самые финальные штрихи для стилевого оформления сайта. Все CSS-файлы из папок layouts, styling и site/css будут скомпилированы вместе в один CSS-файл. Поэтому создайте папку site/css/final для размещения этого скомпилированного файла. Теперь создайте файл site/css/site.css со следующим содержимым:

Совсем немного кода тут пока – просто определение класса clear . Вы можете добавить все, что хотите, однако это должно быть нечто, что не относится к категории файлов, располагающихся в папках layouts или styling.

Скрипты для сайта

В папке site/js содержатся все дополнительные необходимые для сайта файлы JavaScript. Они будут скомпилированы вместе и минимизированы для более быстрой загрузки сайта. Пока что создайте папку site/js/final для скомпилированного скрипта и файл site/js/01-site.js со следующим содержимым:

Пока что кода тут немного. Однако, когда вам понадобится добавить код JavaScript для сайта, его можно разместить там.

Поскольку скрипты будут скомпилированы вместе, я нумерую их в порядке, необходимом для загрузки. Подпрограмма для компилирования скриптов вместе загрузит их в числовом порядке.

Автоматизация при помощи gulp (* инструментарий для автоматизации рутинных или трудоемких задач, возникающих в процессе разработки)

Мой выбор исполнителей скриптов для автоматизации сборки пал на gulp. gulp работает на Node.js. Поэтому, пожалуйста, перейдите на веб-сайт Node.js и скачайте ее для вашей системы. После того, как у вас установлена Node.js, вы можете установить gulp при помощи следующих команд:

За счет них будет установлен gulp и все модули для gulp, которые я использую в скрипте для выполнения сборки. Теперь в корневом каталоге проекта создайте файл gulpfile.js со следующим содержимым:

Благодаря этому коду все файлы CSS и JavaScript будут скомпилированы в один: CSS – в site/css/final/final.css и JavaScript – в site/js/final/final.js. Также будут добавлены правила с префиксами браузеров в CSS-файл. Просто выполните в корневом каталоге команду:

gulp скомпилирует все наши файлы и разместит результат в указанных директориях. Каждая задача, определенная в gulpfile.js, может быть выполнена по отдельности за счет указания имени задачи после команды gulp . Вы можете узнать больше о gulp на Tuts+.

Конфигурационный файл (* файл с данными о предыдущей, текущей или будущей конфигурации системы или приложения) сервера

Для всех серверов необходима информация о конфигурации. Поэтому в корневом каталоге создайте файл server.json со следующей информацией:

В json-файле содержится информация о макете и стилевом оформлении, которые необходимо использовать, адресе и порте, по которому сервер должен прослушивать запросы, главном названии сайта и подзаголовке, необходимости кэширования на случай проведения отладки (* процесс поиска и удаления логических ошибок в программе или HTML-текстах), расположении различных директорий, используемых для сайта. За счет предоставления этой информации серверу в json-файле он может стать гибким в настройке и содержать меньше жестко запрограммированной (* характеристика программы, не предусматривающей внесения изменений, настройки и т. п) информации.

Закачиваем сайт на веб-сервер

Большинство людей используют FTP-клиент (* программа, установленная на сетевой рабочей станции, которая использует протокол FTP для соединения c FTP-сервером и передачи файлов) для копирования их файлов на сервера. Это делается легко, однако процедура сильно отличается в зависимости от используемых систем и программ. Однако имеются некоторые альтернативные варианты.

Вы можете установить демон (* сетевая программа, работающая в фоновом режиме) Dropbox (* файловый хостинг, предоставляемый компанией Dropbox) для загрузки вашего сайта с вашего аккаунта в Dropbox. На Dropbox Wiki имеются детальные инструкции по его установке. Единственная проблема – то, что файлы автоматически закачиваются на сервер при внесении вами любых изменений. Иногда вам нужно будет внести изменения без их последующего добавления на сервер. На этот случай все файлы вашего сайта должны располагаться как на Dropbox, так и в ином месте. Когда справитесь с этим, создайте задание в вашем файле gulp для копирования новых файлов сайта на Dropbox.

Настройка Dropzone 3 для закачивания CMS

Я предпочитаю использовать Dropzone 3 (* drop zone – зона сброса; область рабочего пространства, в которую может быть отбуксирован объект, перемещаемый с использованием операции drag-and-drop). Вы можете запрограммировать Dropzone 3 при помощи Ruby или Python на выполнение любых действий с файлом, который перетаскивается в нее. Также в Dropzone 3 есть множество встроенного функционала. Имеется встроенная возможность закачки файла на FTP/FTP-сервер. Я создал по одному месту назначения в Dropzone 3 для каждой из основных папок моего сайта. Затем, когда мне необходимо внести изменения в файл или добавить новый, я просто перетаскиваю его в соответствующую папку зоны сброса. Вы можете узнать подробнее о Dropzone 3 в моем руководстве «Writing Dropzone 3 Actions».

Заключение

За счет этих основных файлов будет создан веб-сайт, который выглядит следующим образом:

Демоверсия сайта в браузере

Ruxe Engine - Понятная CMS для людей

Ruxe Engine (далее RE) — это лёгкая, быстрая и бесплатная Open Source система управления сайтом (CMS) на PHP. Она не использует базы данных (такие как, например, MySQL), работает на файлах. Но заострять внимание на этом факте не стоит, ибо это просто способ хранения данных. Для небольших порталов, блогов и сайтов компаний, использование баз данных не оправдывает себя — это просто тяжёлый балласт, замедляющий генерацию страниц.

Суть RE в особом подходе к управлению сайтом. Его можно назвать классическим, продвинутым. Главная идея RE — это гибкость. Нынче мода упрощать до безобразия CMS: установка в один клик, настройка из 5 переключателей и т.п. В итоге, чтобы что-то изменить под себя, приходится или копаться в исходнике, или пытаться это реализовать с помощью редактирования десятков tpl файлов, составляющих шаблон оформления. Порой даже узнать кто присутствует на сайте в данный момент нельзя. Такие CMS предназначены для создания однотипных сайтов за 2 минуты.

RE же предоставляет глубокую настройку вплоть до мельчайших деталей. С его помощью можно сделать непохожий на другие небольшой портал, сайт-визитку, блог и др. С дизайном возиться долго не потребуется — основа шаблонизации лишь один файл. Плюс ещё 6 файлов для тонкой настройки. Для вызова той или иной функции RE используются специальные слова-команды в шаблонах и страницах. В шаблонах не запрещается использовать PHP-код, как и в страницах.

2. Требования к серверу

4. Применение своего дизайна

1. Файловая структура темы оформления

Тема оформления должна иметь следующую файловую структуру:

Рассмотрим каждый элемент по отдельности.

А в list.dat файле прописываются имена пользовательских файлов, находящихся в папке темы, которые будут отображены в правой части раздела "Оформление" Админ-центра, в конце списка, и будут доступны для редактирования встроенным редактором. Каждый новый файл - на новой строке. Синтаксис файла следующий:

В файлах с расширением .php допускается применять любые языки вёрстки (например, HTML) и веб-программирования, включая серверные (например, PHP). А в файлах с расширением .html - только клиентские языки веб-программирования (например, JavaScript, VisualBasic) и вёрстки. В указанных типах файлов используются HTML-теги и специальные команды движка.

2. Пример оформления простейшего шаблона страницы в файле index.php

5. Что такое «команды» в Ruxe Engine

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

Команды делятся на те, которые употребляются только на страницах и в главном шаблоне – index.php (Имеется ввиду index.php, находящийся в /themes/название_темы/. Здесь и далее не путать с index.php, расположенным в корне сайта), и те, которые присутствуют в других шаблонах темы оформления.

Пример 1. На страничке сайта нужно вывести форму авторизации на сайте. Для этого в основном шаблоне страницы (админ-центр, раздел «Оформление») в нужном месте вставляем команду и сохраняем изменения.

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

Существуют также обязательные команды: если их не будет в основном шаблоне сайта, то движок, либо некоторые его функции работать не будут. К ним относятся (выводит meta-тег с переадресацией в промежуточных страницах, размещать её нужно сразу после закрывающего тега ) и (выводит текст "Powered by Ruxe Engine" со ссылкой на официальный сайт движка, она может быть расположена в любом месте страницы в пределах тегов, начиная с версии 1.72 команда не является обязательной, но мы надеемся, что вы будете её использовать).

Список стандартных команд движка может быть расширен благодаря установленным дополнениям.

6. Список большинства «команд»

Команды страниц, а также шаблона index.php

Употребляются в исходном коде страниц, использующих Ruxe Engine, и в шаблоне index.php для активации тех или иных функций при последующем просмотре страниц в браузере.

Выводит заголовок страницы для тега title.

Подставляются ключевые слова страницы, указанные при её создании, для тега meta name="keywords".

Подставляется описание страницы, указанное при её создании, для тега meta name="description".

Обязательная команда. Выводит meta-тег с переадресацией в промежуточных страницах. В иных случаях - оставляет на месте себя только перенос строки. Целесообразно размещать её сразу после закрытия тега /title.

Возвращает имя активной страницы сайта. Если активна самая главная страница сайта, то функция возвращает "index.php".

Выводит полный правильный путь до RSS ленты с учётом опции ЧПУ.

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

Выводит записи из определённого новостного раздела, где ID - его идентификатор, указанный в параметрах.

Время генерации страницы в секундах.

Выводит недавние комментарии.

Случайная пара вопрос-ответ из модуля F.A.Q.

Выводит Облако меток из Новостного раздела, где ID - его идентификатор, указанный в параметрах.

Выводит список используемых категорий в Новостном разделе, где ID - его идентификатор, указанный в параметрах.

Форма входа, либо пользовательское меню.

Количество посетителей за сутки (без ботов).

Количество посетителей за вчерашний день (без ботов).

Количество ботов за сутки.

Количество посетителей (без ботов) за всё время.

Выводит форму Обратной связи.

Показывает количество загрузок файла из модуля Каталога файлов по идентификатору.

Выводит зафиксированный рекорд посетителей, одновременно находившихся на сайте за определенный промежуток времени (по умолчанию, 5 минут).

Форма вопроса для F.A.Q.

Список наиболее скачиваемых файлов модуля Каталога файлов.

Посетители, находящиеся на сайте.

Выводит одиночный раздел комментирования, где ID - его идентификатор, указанный в параметрах.

Команды для остальных шаблонов

Полный адрес до каталога выбранной темы оформления, без / на конце.

Шаблон формы ввода комментариев. Далее только самые главные команды.

Путь до обрабатывающего форму скрипта.

Скрытые поля (input type="hidden". ) с необходимой системной информацией.

Код, заключённый между этими тегами будет использован только если пользователь или администратор вошёл под своим аккаунтом.

Адрес сайта без / на конце.

Если пользователь не вошёл под своим аккаунтом, заменяется на value="имя, указанное в GET name", если GET name существует. В противном случае автоматически удаляется. Если же пользователь вошёл под своим аккаунтом, то команда вернёт имя пользователя.

Код, заключённый между этими тегами, будет использован только в том случае, если пользователь не вошёл под своим аккаунтом (т.е. он - гость).

Если выводится список пользователей (для ЛС), то используется код, заключённый между этими тегами.

Если список пользователей при написании ЛС не выводится, то используется код, заключённый между этими тегами.

Код, заключённый между этими тегами, используется только если форма ввода комментария выводится для написания нового ЛС.

Если разрешено использовать смайлы и BB-код, то используется код, заключённый между этими тегами.

Заменяется на value="e-mail, указанное в GET mail", если GET mail существует. В противном случае автоматически удаляется.

Добавляет теги option value. с темами Обратной связи.

Полный адрес до каталога выбранной темы оформления, без / на конце.

Заменяется на комментарий, указанный в GET message, если GET message существует. В противном случае автоматически удаляется.

Читайте также: