Vosao CMS представляет собой систему управления контентом, предназначенную для развертывания на платформе Google App Engine for Java.
Vosao CMS включает в себя следующие опции:
Интернационализацию
ЧПУ (Friendly URL)
Одобрить и поделиться контентом
Комментирование с модерацией
Версии контента
Формы ввода
CAPTCHA
Google Analytics
Alias URLs
Дополнительные плагины
Управление безопасностью и группами пользователей
Иерархическая структура страниц
Встроенные и программируемые шаблоны
Импорт-экспорт сайта
Управление ресурсами
Различные режимы редактирования
Начало работы с Vosao CMS
В качестве первого шага скачаем по адресу http://www.eclipse.org/downloads/ последнюю версию среды Eclipse IDE for Java EE Developers, обеспечивающую все необходимые инструменты разработки Java Web-приложений. При этом предполагается, что набор JDK платформы Java уже установлен на компьютере (http://www.oracle.com/technetwork/java/javase/downloads/index.html).
После распаковки скачанного дистрибутива запустим среду Eclipse, закроем страницу приветствия Welcome кнопкой Workbench и в меню Help выберем команду Install New Software – в результате откроется окно мастера инсталляции Eclipse-плагинов.
Нажмем кнопку Add и в поле Name: введем Google, а в поле Location: введем адрес установки Google-модуля, для Eclipse Indigo http://dl.google.com/eclipse/plugin/3.7.
Нажмем кнопку OK и, после поиска в Интернете, в окне мастера отобразится набор плагинов Google-модуля.
Отметим флажки Google Plugin for Eclipse и Google App Engine Java SDK, нажмем кнопку Next мастера и, следуя инструкциям, установим выбранные плагины с перезапуском среды Eclipse.
По умолчанию среда Eclipse использует не набор JDK, а среду выполнения JRE, поэтому после установки плагинов GPE и GAE Java SDK, перед созданием GAE-проекта, в меню Windows среды Eclipse выберем команду Preferences, в диалоговом окне которой откроем раздел Java | Installed JREs и кнопкой Add добавим предварительно инсталлированный набор JDK (http://www.oracle.com/technetwork/java/javase/downloads/index.html).
В настоящее время GAE-платформа поддерживает версии Java 5 и 6, поэтому необходимо проверить, чтобы уровень компиляции, установленный в разделе Java | Compiler диалогового окна команды Preferences, а также версия Java раздела Project Facets диалогового окна свойств GAE-проекта соответствовали версии Java 5 или 6 раздела Java | Installed JREs.
В меню File среды Eclipse выберем команду New | Other | Google | Web Application Project и нажмем кнопку Next. В окне мастера создания проекта, в поле Project name: введем имя проекта VosaoCMS, в поле Package: введем имя пакета проекта, отметим флажок Use Google App Engine, уберем флажок Generate project sample code и нажмем кнопку Finish.
Скачаем файл vosaocms-0.9.14.war (http://code.google.com/p/vosao/downloads/list) и распакуем его.
Сделаем слияние содержимого каталога war проекта VosaoCMS с содержимым файла vosaocms-0.9.14.war.
Для развертывания проекта на платформе GAE, его необходимо предварительно зарегистрировать. Для регистрации проекта откроем Web-браузер и попробуем войти в консоль администрирования по адресу https://appengine.google.com/. Однако сервис консоли администрирования является защищенным сервисом и его аутентификацию-авторизацию проходят лишь пользователи, имеющие свой Google-аккаунт. Поэтому предварительно откроется страница, приглашающая ввести логин-пароль Google-аккаунта или зарегистрировать его.
После ввода логина-пароля и нажатия кнопки Войти откроется страница консоли администрирования.
Кнопка Create Application консоли администрирования позволяет зарегистрировать новое приложение. Страница, открывающаяся при нажатии кнопки Create Application отображает уведомление об оставшемся количестве приложений, которые можно еще зарегистрировать на данный Google-аккаунт – максимальное число 10. Поле Application Identifier: предлагает ввести идентификатор приложения, при этом кнопка Check Availability позволяет проверить его уникальность. Поле Application Title: предлагает ввести отображаемый при аутентификации заголовок приложения.
Нажатие кнопки Create Application страницы регистрации GAE-приложения завершает регистрацию приложения.
Теперь при входе в консоль администрирования https://appengine.google.com/ ее страница будет содержать ссылку на зарегистрированное приложение, при нажатии на которой откроется страница администрирования приложением.
После регистрации проекта для его загрузки в App Engine в среде Eclipse откроем в редакторе файл appengine-web.xml папки war/WEB-INF проекта и в тэг <application> вставим зарегистрированный идентификатор приложения. Сохранив сделанные изменения, с помощью кнопки Sign in to Google пройдем аутентификацию-авторизацию для доступа к Google-сервисам, в окне Project Explorer щелкнем правой кнопкой мышки на узле проекта и в контекстном меню выберем команду Google | Deploy to App Engine, в диалоговом окне мастера нажмем кнопку Deploy – в результате проект будет развернут на GAE-платформе.
В Web-браузере откроем консоль администрирования https://appengine.google.com/ GAE-платформы, в разделе Application которой, нажатием ссылки приложения откроем станицу администрирования приложения. В разделе Application Settings | Application Default Version URL: станицы администрирования приложением будет указан URL-адрес запроса к приложению, открывающий его страницу приветствия.
Откроем ссылку CMS Configuration.
Введем логин admin@test.com и пароль admin и нажмем кнопку Войти.
Откроем ссылку Конфигурация и меню Пользователи. Кнопкой Добавить добавим нового администратора сайта.
С помощью меню Выйти выйдем из консоли управления сайтом.
Зайдем в консоль управления сайтом .appspot.com/cms/#index в качестве нового администратора сайта.
Откроем ссылку Конфигурация и меню Пользователи. Кнопкой Удалить удалим старого администратора сайта.
Теперь логин admin@test.com и пароль admin действовать не будут, а для входа в консоль управления сайтом .appspot.com/cms/#index нужно будет вводить логин и пароль нового администратора сайта.
Меню Профиль консоли управления сайтом позволяет изменить пароль администратора, а меню Язык – локализацию консоли управления сайтом.
Шаблон сайта
Откроем меню Vosao CMS 0.9.14 консоли управления сайтом и ссылку Шаблоны веб дизайна.
Шаблон сайта устанавливает общий внешний вид для всех страниц сайта, определяя содержимое шапки страницы, ее подвала и боковой панели.
Шаблон сайта состоит из страницы с разметкой шапки, подвала и боковой панели, а также блока для включения содержимого остальных страниц сайта, файлов CSS-стилей и файлов изображений шаблона.
Кроме того, шаблон сайта может содержать команды для генерации динамических страниц и специальных эффектов.
Каждая страница сайта может иметь свой шаблон или все страницы сайта могут иметь общий шаблон.
Шаблон назначается для страницы сайта следующим образом:
Открываем меню Контент консоли.
Выбираем страницу и открываем Редактировать свойства страницы.
Открываем список шаблонов и выбираем шаблон.
Нажимаем кнопку Сохранить.
Vosao-шаблоны обрабатываются движком Apache Velocity Engine.
Перечень некоторых Velocity-команд:
(PageEntity) $service.findPage(path) – возвращает последнюю опубликованную версию страницы по ее ЧПУ. Объект PageEntity, возвращаемый командой, представляет страницу и имеет такие свойства как title, friendlyURL, content и comments.
(List) $service.findPageChildren(path, [count]), (List) $service.findPageChildren(path, [publishDate]), (List) $service.findPageChildrenOrdered(path, [count]) – возвращают список последних опубликованных версий дочерних страниц.
(List) $service.getCommentsByPage(path) – возвращает список объектов CommentEntity страницы. Объект CommentEntity представляет комментарий и имеет свойства content, publishDate, pageID и disabled.
(Text) $service.findContent(path, [language]) – возвращает содержимое страницы.
(List) $service.findChildrenContent(path, [language]) – возвращает содержимое дочерних страниц.
(UserEntity) $service.findUser(email) – возвращает объект UserEntity по адресу электронной почты. Объект UserEntity представляет пользователя и имеет свойства name, email, password (зашифрованный) и role.
(Text) $page.title – возвращает заголовок страницы.
(Text) $page.content – возвращает содержимое страницы.
(Text) $page.friendlyURL – возвращает локальный адрес страницы.
(PageEntity) $page.parent – возвращает родительскую страницу.
(Text) $page.template – возвращает шаблон страницы.
(Date) $page.publishDate> - возвращает дату публикации страницы.
(Text) $page.comments – возвращает комментарии страницы.
(Text) $config.commentsEmail – возвращает адрес уведомления комментариев.
(Text) $config.commentsTemplate – возвращает шаблон комментариев.
(Text) $config.siteDomain – возвращает домен сайта.
(Text) $config.siteEmail – возвращает адрес электронной почты сайта.
(Text) $config.formTemplate – возвращает шаблон форм.
Изменение шаблона сайта
Для простого изменения шаблона сайта откроем шаблон coolblue10.
И изменим:
Заголовок шаблона – тэг <title>.
Язык шаблона – атрибуты xml:lang="en" lang="en".
Мета тэги автора, описания, ключевых слов.
Логотип и слоган сайта – тэги <h1 id="logo-text"> и <p id="slogan">.
Меню сайта – блок <div id="nav">.
Для включения элемента RSS необходимо инсталлировать плагин RSS and Atom Feeds. Для этого скачаем плагин rssatom-0.9.1.war (http://code.google.com/p/vosao/downloads/list), откроем меню Расширения | Конфигурация Расширений, нажмем кнопку Установка или Обновление и загрузим WAR-файл плагина.
Уберем лишнее из подвала и изменим информацию о контактах.
Открыв вкладку Ресурсы | Подпапки шаблона можно увидеть две папки images и css.
Папка images во вкладке Файлы покажет файлы изображений шаблона, посмотреть которые можно с помощью открытия ссылок и заменить которые можно с помощью кнопки Загрузить файл.
Папка css во вкладке Файлы покажет файлы CSS-стилей шаблона, изменить которые можно открыв ссылку и вкладку Контент.
Основные стили шаблона coolblue10 находятся в файле coolblue.css, в частности изменить шрифт шаблона можно в селекторе body раздела G E N E R A L.
Боковая панель
Помимо шаблона общий вид страниц сайта определяет боковая панель.
Для изменения содержимого боковой панели откроем меню Контент консоли, раскроем узел Include и откроем страницу Sidebar для редактирования.
Открыв вкладку Контент, во встроенном редакторе можно наполнить боковую панель своим содержимым.
Ресурсы
Меню Ресурсы консоли управления сайтом показывает все статические ресурсы сайта – изображения, CSS-файлы, JavaScript-файлы, XML-файлы, PDF-файлы, Excel-файлы, Word-файлы, аудио, видео и др.
Для хранения изображений сайта можно использовать Google-сервис фотохостинга Picasa.
Для включения использования Picasa в меню Конфигурация, во вкладке Настройки сайта отметим флажок Разрешить использование Picasa, зарегистрировать Google-аккаунт для использования сервиса Picasa https://picasaweb.google.com/home, в полях Picasa Адрес эл.почты пользователя и Picasa Пароль ввести логин и пароль Google-аккунта.
Теперь в меню Ресурсы, во вкладке Picasa можно создать альбом и добавить в него изображения для хранения в сервисе Picasa.
Блог
Для добавления статьи в блок откроем меню Контент консоли управления сайтом и в узле Blog выберем Добавить потомка.
Введем заголовок статьи, ЧПУ-адрес статьи и нажмем кнопку Сохранить.
В результате статья добавится в дерево блога.
В узле статьи выберем Редактировать свойства страницы и откроется консоль управления контентом.
В закладке Страница в списке Шаблон можно назначить шаблон сайта для страницы, в поле Дата публикации – переопределить дату публикации статьи, флажок Разрешить комментарии позволяет отменить комментарии для статьи.
В поле Структура будет указано Blog article. Чтобы понять что это такое вернемся в меню Контент и выберем вкладку Структуры. Откроем Blog article и вкладку Шаблоны структур. Там будут два шаблона Article и Article overview.
Таким образом статья делится на две части – аннотацию и продолжение статьи. Аннотация с заголовком статьи отображается на домашней странице сайта с кнопкой continue reading, при нажатии на которую открывается аннотация с заголовком и продолжение статьи.
Изменить кнопку continue reading можно, открыв шаблон Article overview и изменив тэг:
<p><a class="more" href="$page.friendlyURL">continue reading »</a></p>
Изменить содержимое левой панели, представляющее информацию о статье, можно, отредактировав список, правда, при этом его также нужно отредактировать и в шаблоне Article:
<h4>Post Info</h4>
<ul>
<li class="user"><a href="#">$service.findUser($page.modUserEmail).name</a></li>
<li class="time"><a href="#">$date.format('medium_time', $page.modDate)</a></li>
<li class="comment"><a href="$page.friendlyURL#comments">Comments</a></li>
<li class="permalink"><a href="$page.friendlyURL">Permalink</a></li>
</ul>
Вернемся к редактированию свойств статьи.
Ссылка Добавить тэг позволяет определить тэги для статьи, при этом если на странице облака тэгов (Tag cloud) выбрать соответствующий тэг, то там отобразится наша статья.
Для добавления тэгов откроем меню Конфигурация и вкладку Тэги, в узле blog выберем Добавить потомка.
Введем заголовок тэга и имя тэга, после чего нажмем кнопку Сохранить.
В результате новый тэг появится в списке выбора для статьи.
После редактирования общих свойств статьи отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить – откроется вкладка Контент новой статьи.
Для создания заголовка статьи в поле Заголовок введем заголовок статьи, для создания аннотации статьи в первом редакторе выделим Place article overview here. и нажмем правую кнопку мышки. Выберем Вставить – в результате откроется диалоговое окно вставки контента.
Вставим контент и нажмем кнопку OK.
Точно также поступим с продолжением статьи во втором редакторе.
Отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить и продолжить.
Для создания статьи на русском языке в первую очередь необходимо добавить в сайт русскую локализацию. Для этого откроем меню Конфигурация и вкладку Языки. Нажмем кнопку Добавить и выберем из списка русский язык, после чего нажмем кнопку Сохранить.
Назначить локализацию всего сайта можно в меню Конфигурация, во вкладке Настройки сайта, в списке Выберите язык контента.
После добавления русского языка во вкладке Контент статьи в списке Выберите язык контента выберем русский язык, в редакторах добавим содержимое аннотации и продолжения статьи на русском языке, отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить и продолжить.
Подключение сервиса reCAPTCHA
reCAPTCHA – это бесплатный Google-сервис, предотвращающий использование сайта автоботами для генерации спама.
Для использования сервиса reCAPTCHA откроем страницу по адресу https://www.google.com/recaptcha/admin/create, введем адрес домена и нажмем кнопку Create Key.
В результате получим публичный и приватный ключи сервиса.
В консоли управления сайтом откроем меню Конфигурация, вкладку Настройки сайта и отметим флажок Разрешить использование reCaptcha на сайте. В открывшихся полях введем публичный и приватный ключи сервиса reCAPTCHA и нажмем кнопку Сохранить.
Теперь в форме ввода комментариев появится форма reCAPTCHA.
Добавление файлов sitemap.xml, robots.txt, файлов Google и Yandex
Для автоматического заполнения карты сайта скачаем плагин Instant Sitemap по адресу http://code.google.com/p/vosao/downloads/list - файл sitemap-0.9.war и установим его с помощью меню Расширения | Конфигурация расширений.
После установки, открыв ссылку плагина, можно определить глубину карты и исключить из нее URL-адреса.
Для создания файла sitemap.xml откроем меню Шаблоны и добавим шаблон с заголовком sitemap.xml, URL-именем sitemap.xml и содержимым в виде строки:
$plugin.sitemap.renderXML()
Откроем меню Контент и добавим потомка к домашней странице с URL-адресом /sitemap.xml. Назначим в качестве шаблона страницы шаблон sitemap.xml и отметим флажок Пропустить пост обработку, после чего отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить.
Для создания файла robots.txt откроем меню Шаблоны и добавим шаблон с заголовком robots.txt, URL-именем robots.txt и содержимым в виде строки:
Sitemap: http://.../sitemap.xml
Откроем меню Контент и добавим потомка к домашней странице с URL-адресом /robots.txt. Назначим в качестве шаблона страницы шаблон robots.txt и отметим флажок Пропустить пост обработку, после чего отметим флажок Подтвердить при сохранении и нажмем кнопку Сохранить.
Для добавления сайта в поисковые системы Google и Yandex получим код файлов подтверждения прав на сайт (https://www.google.com/webmasters/tools/home?hl=ru и http://webmaster.yandex.ru/site/?wizard=add.site) и создадим соответствующие HTML-файлы аналогично файлам sitemap.xml и robots.txt.
Изменение формы ввода комментариев
Для изменения формы ввода комментариев откроем меню Конфигурация, вкладку Комментарии.
Для изменения заголовка формы изменим тэг:
<div class="comments-label">Show comments
Для изменения меток полей формы изменим тэги:
<div><label>Name</label><input type="text" name="name"/></div>
<div><label>Comment</label>
Для изменения надписи кнопки сохранения комментариев изменим тэг:
<input type="button" onclick="onAddComment()" value="Add comment"/>
