PunBB + PE

artoodetoo · #1

Это инструкция для начинающих вебмастеров.

Предположим, Вы имеете простой сайт из нескольких страничек: Главная, Мои фотки, Обо мне и т.д. Наша цель добавить на сайт форум PunBB|FluxBB так, чтобы форум стал одной из составляющих сайта и при этом повторялись единые элементы разметки: шапка, подвал и боковая колонка с навигацией и баннерами.

Урок 1. Есть сайт, добавляем форум

Для иллюстрации я создал сайт "Вася в сети". У Васи есть дизайн — копия авторитетного сайта simplebits.com. Содержание страничек для нас значения не имеет, поэтому там будет вздор и мусор, как впрочем на большинстве персональных страничек.
С другой стороны верстка страниц заслуживает уважения. У студии simplebits есть чему поучиться! Я не стал выдумывать что-то свое, а предпочел показать их разметку как пример грамотной и хорошо читаемой работы.
Большая часть ссылок на страничках "сайта" ведут на сайт авторов, тексты большей частью адаптация их текстов. Действительно внутренними ссылками являются только пункты главного меню и один из них это наш будущий форум.

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

Цель первого урока — изучить разметку и определиться как и куда мы засунем форум. Все необходимые файлы находятся во вложениях к этой статье. Файл vasya-1-site.zip. Странички это статичный html + css. Ссылки абсолютные, подразумевают, что архив распакован в корень сайта.

1. Создайте на тестовый виртуальный сервер и распакуйте архив. Главная страничка будет выглядеть так:

2. Папка forum пока пустая, туда мы установим стандартный форум FluxBB 1.2.18 без модов. Скачать его можно с официального сайта http://fluxbb.org/ Распакуйте дистрибутив форума в папку forum. Откройте в браузере тестовый сайт и перейдите в пункт главного меню "форум". Должно появиться стандартное приглашение к установке

The file 'config.php' doesn't exist or is corrupt. Please run install.php to install FluxBB first.

Описывать саму установку смысла нет, сделайте все, что надо и убедитесь, что форум работает.

Итак, мы имеем сайт, а по ссылке "форум" открывается форум, который внешне никак не связан с самим сайтом. Мо-ло-дцы!
Пора заняться делом: открываем в браузере главную страницу сайта и ее же в текстовом редакторе чтобы видеть структуру. Я использую PHP Expert Editor, вы можете взять любой другой, понимающий utf-8 и подсвечивающий синтаксис. Мой редактор позволяет сворачивать блоки, что бывает очень полезно при изучении структуры. На рисунке я свернул секцию <head>...</head>:

Так я выяснил где какой блок. Вот мои разведданные - очень упрощенно общая схема (кликните для увеличения):

Красным, зеленым и синим помечены основные области #header, #wrap и #footer — с этим наверное все понятно.
Секция #wrap состоит из одного или нескольких div, каждый из которых может состоять из левой и правой колонки: class="main" и class="secondary".

3. Наша цель — повторить эту схему с заголовком и подвалом и засунуть форум в левый широкий столбец, то есть в <div class="main">. Для этого понадобится отредактировать главный шаблон форума и немного поправить файлы стиля. Я пока не буду трогать основные php-файлы, в этом нет необходимости.

Я скопировал файлы Oxygen в новый тиль SB и в профиле пользователя и общих опциях указал исользование нового стиля. В новом шаблоне шапка, подвал и правая колонка подставляются через конструкцию <pun_include>. Подключаемые файлы я сложил в папке include/user/ : sbheader.htm, sbfooter.htm и sbsidebar.htm

Шаблон main.tpl полностью:

Код:

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

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <title>SimpleBits ~ Forum</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen, projection" href="../style/screen.css" />
    <link rel="stylesheet" type="text/css" media="print" href="../style/print.css" />
    <link rel="stylesheet" type="text/css" href="style/SB.css" />
</head>

<body id="forum-index">

<div id="simplebits" class="group">

<pun_include "sbheader.htm">

<hr />

<div id="wrap"><div id="wrap-inner">

<div class="group">
<div class="main pun">

<div id="brdheader" class="block">
    <div class="box">
        <div id="brdtitle" class="inbox">
            <pun_title>
            <pun_desc>
        </div>
        <pun_navlinks>
        <pun_status>
    </div>
</div>

<pun_announcement>

<pun_main>

<pun_footer>

</div>

<pun_include "sbsidebar.htm">

</div>

</div></div> <!-- /wrap -->

<hr />

<pun_include "sbfooter.htm">

</div> <!-- #simplebits -->

</body>
</html>

Все изменения я сохранил в архив vasya-2-forum.zip. Вам надо распаковать его поверх ваших файлов, затем мой выбрать стиль SB.
Вы можете самостоятельно сравнить мой шаблон include/template/main.tpl с оригинальным, а также файлы стиля SB с файлами Oxygen. Я бы воспользовался для этого утилитой WinMerge. Вкратце: я пометил блок-контейнер двумя классами сразу

Код:

<div class="main pun">

Класс main из стилей сайта заставляет форум гдездиться в заданных пределах, а класс pun из стилей форума служит префиксом для описания многих форумных элементов. Из стилей форума я убрал описание "обертки" #punwrap — она здесь не используется больше.

Вот как форум выглядит сейчас:

Итоги

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

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

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

За кадром остался русский язык для форума и работа с UTF-8, т.к. для данного урока это неважно.

Продолжние следует ...

Вложения

vasya-1-site.zip
vasya-2-forum.zip

PunBB + PE

09.10.2007 22:42:59 #1: artoodetoo ↓

Сайт + форум. Часть 1
как добавить форум в сайт так, чтобы он вписался в общий дизайн

Код:

Код:

Board footer

PunBB + PE

09.10.2007 22:42:59 #1: artoodetoo ↓

Сайт + форум. Часть 1как добавить форум в сайт так, чтобы он вписался в общий дизайн

Код:

Код:

Board footer

Сайт + форум. Часть 1
как добавить форум в сайт так, чтобы он вписался в общий дизайн