Quantcast
Channel: Drupal.Practice.Development.Training - гіпертекст
Viewing all articles
Browse latest Browse all 8

Інтеграція Друпал в шаблон HTML

$
0
0

Довго зрів на дану тему...

Та й стаття в неопублікованих дописується не один місяць, бо для того потрібно було зробити деяке підгрунтя в вигляді кількох статтей на цьому блозі про друпал і не тільки.

Отже... З чого все починалось і починається?

З вибору теми(шаблону, template).Все добре, якщо шаблон такий наявний і Ви його знайшли.
Але в більшості випадків - це складно, - знайти те, що сподобається з першого разу. І якщо знайдеться, то буде воно або не для Вашої улюбленої cms, або просто в вигляді безкоштовного шаблону CSS із банальним index.html та style.css файлами для демонстрації даного стилю.

Загалом - цього достатньо для перетворення шаблону в власну тему для друпал. Щоправда потрібно знати кілька азів phptemplate API, на основі якого працює друпал.

Для того, щоб трошки спростити розуміння "вшивання"в готовий дизайн, я, для даного прикладу, використаю Yahoo CSS Grid Builder, з допомогою якого можна дуже просто створити чистий шаблон з кількох div блоків для подальшого використання в якості шаблону майбутнього сайта.

Yahoo Grid Builder


Вище на фото можна побачити наскільки "складний"варіант структури блоків я побудував а також переглянути цей варіант наживо в вигляді HTML заготовки.

Заготовка зроблена - тепер потрібно її перетворити в тему для друпала.
  1. Створюєм файл .info
    В нашому випадку файл може бути щось на зразок

    name=Example theme 1
    description=Drupal example 1 theme from http://my.ukrweb.info/node/452
    version=1.0
    core=6.x
    engine=phptemplate
    regions[left] = Second Block
    regions[right] = Third Block
    regions[content] = First Block
    regions[content2] = Fourth Block
    regions[header] = Header
    regions[footer] = Footer
    stylesheets[all][] = mystyle.css

    Невеличкі пояснення по розділам info файлу
    • core - Це версія гілки друпала, для якого формується шаблон теми
    • regions - це точки виводу інформації в шаблон, їх можна нагенерувати скільки душа забажає, з одним маленьким вийнятком щодо left, right, content, header, footer, які Вам в принципі необхідні і вимагаються документацією Друпал, хоча хто орієнтується - можна і без них.
    • stylesheets - вказування ядру друпала щодо використання темою файлу стиля для всіх(all) режимів з назвою файла - mystyle.css
  2. Наступний крок - саме вшивання регіонів в наш HTML шаблон.
    Для системи Друпал головним файлом теми є page.tpl.php, в якому дизайнер розкладає всі необхідні для HTML сторінки елементизасобами друпал.
    Перейменовуєм example.htmlв page.tpl.phpі формуєм сторінку шаблона




    <?php print $head_title ???> | <?php print $language-??>language ?><?php print $head ???><?php print $styles ???><?php print $header;???>



    <?php print $site_name ???>

    <?php print $title ???>


    <?php print $breadcrumb ???>
    <?php print $tabs ???>


    <?php print $help ???><?php print $messages; ???><?php print $content;???>

    <?php print $left ???>

    <?php print $right ???>

    <?php print $content2 ???>



    <?php print $footer ???><?php print $feed_icons; ???><?php print $footer_message ???>

    <?php print $closure ???><?php print $scripts ???>

      Пояснюю що роблять вставки PHP коду
    • Даним кодом <?php print $language-??>language ?>виводиться тег мови, яка встановлена в параметрах вебсайту - для Української мови це буде ukабо uk-ua
    • Тут <?php print $head_title ???>виводиться Заголовок Сторінки
    • Цей код <?php print $head ???><?php print $styles ???><?php print $scripts ???>виводить всі стрічки з активованих модулів, які вносять в розділ head HTML розмітки метаінформацію щодо стилів, скриптів, та інших атрибутів
    • А ось ці елементи коду
      <?php print $header;???><?php print $content;???><?php print $left ???><?php print $right ???><?php print $content2 ???><?php print $footer ???>
      виводять відповідно до вищенаписаного файлу info вмістиме блоків(regions), що будуть керуватись через адмінку друпала.
    • Дана стрічка <?php print $breadcrumb ???>виводить строку, що в собі несе деревовидні посилання, що дозволяють рухатись ієрархією сторінок в друпалі
    • Додатково виводимо <?php print $tabs ???><?php print $help ???><?php print $messages; ???>закладки, допоміжну інформацію та системні повідомлення відповідно
    • І наостанок <?php print $closure ???>перед закриттям блоку

Viewing all articles
Browse latest Browse all 8