RomeoGolf

Сб 16 Январь 2016

Pelican и основные настройки заготовки сайта

Настройки и тема

То, что вышло на предыдущем шаге, уже является веб-страницей. Заготовка отображается в браузере (не так, как хотелось бы, но именно так, как задано в ее коде), худо-бедно размечена и содержит гиперссылки. Однако гиперссылки между страницами сайта не работают, а внешний вид — именно, что «худо» и «бедно».

Настала пора заняться темой и конфигурацией.

О темах

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

В общем случае тема представляет собой папку, имя которой и будет названием темы. В ней лежат подпапки static и templates, кроме того, приличные люди, желающие выложить тему собственного производства для всеобщего пользования, кладут в корень папки файлы README (обычно README.md или README.rst, если написано на Markdown или reStructuredText соответственно) и screenshot.png, чтобы пояснить особенности установки и настройки и показать внешний вид. Особенности настройки могут потребовать установки дополнительных модулей Python или дополнительных плагинов Pelican.

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

Чаще всего помимо базового в теме есть шаблоны для статей (article.html), страниц (page.html), списков тегов, категорий и авторов (tags.html, categories.html, authors.html), списков статей, объединенных общим тегом, категорией или автором (tag.html, category.html, author,html), списка архивных статей (archives.html), и всякие рюшечки для добавления на страницу комментариев от Disqus (disqus.html), аналитики от Google (analytics.html) и кнопок соцсетей (например, twitter.html).

В папке static обязательно должны быть таблицы стилей. Чаще всего (особенно, если кроме стилей используется что-то еще) они лежат в подпапке css, основной файл может называться styles.css, main.css, local.css и вообще название ограничено только полетом фантазии автора. Чаще всего рядом лежит pygments.css, необходимый для корректной подсветки синтаксиса примеров кода на странице. При помощи этого файла можно менять стили отображения кода, например, светлый текст на темном фоне или наоборот, то есть, для подсветки кода есть свои темы, поэтому лучше придерживаться именно этого названия для css-файла, чтобы при замене темы кода надо было только заменить его, а не искать в разных местах, где переименовывать. Ведь дополнительный файл может быть как подключен в коде шаблона, так и импортирован в основном стилевом файле, как автор захотел.

Кроме подпапки css, в static могут быть подпапки fonts с используемыми нестандартными шрифтами, images или img с картинками (фонами и иконками) и js с используемыми скриптами JavaScript.

Где взять тему

У нашей заготовки темы нету никакой, а хочется хоть какую-нибудь. Но Pelican не так плох, чтобы не давать возможности поиграться с темой «из коробки». В комплекте поставки идет две темы: simple и notmyidea. Папки с соответствующими названиями лежат где-то в недрах Pelican, который, в свою очередь, расположен где-то внутри Python. В моем случае это C:\Python33\Lib\site-packages\pelican\themes. Однако лазить по внутренностям змеи и птицы — не наше дело. Для упрощения задачи нам любезно подкинули специальную утилиту pelican-themes. Команда (как обычно, в консоли, например, файлового менеджера FAR или в окне cmd.exe)

С:\python33\Scripts\pelican-themes.exe -l

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

С:\python33\Scripts\pelican-themes.exe -i D:\Download\subtle 

установит тему subtle, если она скачана и лежит в D:\Download, а

С:\python33\Scripts\pelican-themes.exe -r subtle 

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

Что касается поиска готовых, но более-менее интересных тем — больше всего их, наверное, на GitHub, например, в этом сборнике. Но пока разберемся с имеющейся.

Откроем файл конфигурации

В корне проекта после его создания и первой сборки сайта появилась папка pycache. Оставим ее в покое, она нужна питону, пусть пользуется. Файлы Makefile, fabfile.py и develop_server.sh можно спокойно удалить. Если они вдруг когда-нибудь понадобятся, их будет несложно получить снова. Файл publishconf.py оставим в покое, он нас пока не интересует, но может позже и пригодится. Откроем pelicanconf.py в текстовом редакторе. Не запустим его, а то Python попытается выполнить, а именно откроем для редактирования.

#!/usr/bin/env python
# -*- coding: utf-8 -*- #
from __future__ import unicode_literals

AUTHOR = 'Me'
SITENAME = 'Site'
SITEURL = ''

PATH = 'content'

TIMEZONE = 'Europe/Paris'

DEFAULT_LANG = 'ru'

# Feed generation is usually not desired when developing
FEED_ALL_ATOM = None
CATEGORY_FEED_ATOM = None
TRANSLATION_FEED_ATOM = None
AUTHOR_FEED_ATOM = None
AUTHOR_FEED_RSS = None

# Blogroll
LINKS = (('Pelican', 'http://getpelican.com/'),
         ('Python.org', 'http://python.org/'),
         ('Jinja2', 'http://jinja.pocoo.org/'),
         ('You can modify those links in your config file', '#'),)

# Social widget
SOCIAL = (('You can add links in your config file', '#'),
          ('Another social link', '#'),)

DEFAULT_PAGINATION = 10

# Uncomment following line if you want document-relative URLs when developing
#RELATIVE_URLS = True

Pelican собрал его на основе наших ответов при анкетировании после запуска утилиты pelican-quickstart. Разберем по полочкам. Начало (первые три строки) нужно питону, а не нам. Далее AUTHOR и SITENAME — можно поставить что-то более осмысленное, собственное имя (или партийный псевдоним) для AUTHOR и что-нибудь креативное для SITENAME.

SITEURL = ‘’ можно оставить и так, пока мы не лезем в интернеты, а балуемся на собственном домашнем компьютере.

PATH указывает на папку, в которой лежат заготовки статей, страниц и прочего контента, если прочее будет.

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

DEFAULT_LANG — имеет смысл сделать ‘ru’, хотя действительно важным этот параметр является для многоязычных сайтов.

Блок параметров под комментарием #Feed generation предназначен для настройки ленты Atom RSS, причем, генерация пока отключена.

LINKS, который под комментарием # Blogroll, содержит список ссылок. Эти ссылки будут отображаться в блоке Blogroll, место и внешний вид — в зависимости от шаблона. По умолчанию заданы ссылки на Pelican, Python.org, Jinja2 и дана заготовочка, которую можно поправить по своему желанию.

Аналогичное назначение у SOCIAL, что под комментарием # Social widget — ссылки на соцсети, пока только в виде заготовки. LINKS и SOCIAL можно пока что убрать совсем или закрыть комментарием при помощи символа # в начале каждой отключаемой строки

DEFAULT_PAGINATION — максимальное количество статей на страницу. Можно вместо числа поставить False, тогда будет неограничено.

#RELATIVE_URLS = True следует «раскомментировать», то есть, удалить символ # перед параметром. Параметр задает относительность при формировании URL. Для локального сайта, не использующего веб-сервер, это необходимо. После публикации имеет смысл закрыть обратно, но о необходимости и причинах этого лучше говорить не здесь. Может быть, позже…

В этом файле, можно в конце, необходимо дописать такие строки:

# подключаем предустановленную тему
THEME = 'notmyidea'

# перед генерацией стираем старый вариант сайта
DELETE_OUTPUT_DIRECTORY = True

Последняя строка нужна потому, что мы пока что экспериментируем. Будем добавлять и удалять элементы контента, а в выходной папке останутся следы уже ненужных страниц. Пусть Pelican сам подтирает их за нами.

Вот такая тема

А давайте еще создадим в папке content подпапку pages рядом с articles. А туда положим файл about.md такого содержания:

Title: О сайте

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

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

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

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

Запускаем сборку сайта:

c:\python33\Scripts\pelican.exe content

Теперь из папки output можно запустить index.html и посмотреть результат.

Теперь мы имеем серенький фончик, шапку в виде названия сайта крупными буквами и горизонтального меню с категориями («Разное» и «Рыба») и страницами («О сайте»). Меню, контент и футер на белом фоне со скругленными уголками. На первой странице последняя статья полностью и список остальных статей (в котором пока одна — первая). В статье добавлен справа плавающий блок с метаданными — категория, автор, теги и дата публикации. Сайдбаров нет. В футере ссылки, встроенные в шаблон и не убираемые при помощи файла конфигурации. Заголовок в шапке является ссылкой на корень папки output, что логично — будь это корнем для сервера, тот подставил бы index.html, а нам придется делать это вручную. Верстка фиксированная. Ссылки — что приятно — теперь рабочие.

В общем, бери, да радуйся. Можно пользоваться и так. Но, несмотря на то, что результат разительно отличается от «бестемного», хочется улучшений. Да не просто хочется, а мы все-таки надеемся, что это творение будут смотреть люди. И читать эти люди будут, скорее всего, по-русски, а у нас метаданные отмечены на английском. Да и ссылки в футере… Нет, я тоже благодарен авторам Python, Pelican и этой темы, но не до такой степени, чтобы на каждой странице давать ссылки на них. А еще хочется добавить рюшечек-финтифлюшечек, типа карты сайта, облака тегов, отсортировать меню иначе…

Короче говоря, надо бы взять тему за основу и поправить ее по своим надобностям. А может, вообще свою с нуля написать, а?


Теги: