Поиск по этому блогу

четверг, 21 апреля 2016 г.

Сравниваем темы drupal-bootstrap и zurb foundation и практикуем Vagrant ssh в git bash и гордо настрамиваем Twig Debugging

Обе темы я уже установил под windows, начал было сравнивать, но Друпал работал медленно, потому пришлось искать альтернативные варианты (делать все в virtualBox). Теперь есть виртуальная Убунта (в десктопном варианте) и там залит Друпал с хорошо документированной темой Prius.
Решил сегодня сравнить возможности тем, посмотреть на интерфейсы... и поупражняться с grant, drush... Этот пост - практикумы по материалам, собраным ранее в "Drupal 8 theming -...читаем документацию и примеры Starter Themes"

Drupal 8 theming - смотрим разные видео, читаем документацию и примеры Starter Themes
Defining a theme with an .info.yml file
Theme folder structure
Debugging Twig templates
Debugging compiled Twig templates
Classy themes css selectors


Clearing or rebuilding Drupal's cache drush cache-rebuild
The goal of the theming guide is to provide you with a complete overview of the front-end changes made in Drupal 8 and to get you started with creating a custom Drupal 8 theme.

Поднимаем Vagrant

Нетакой уж он и медленный (

In [ ]:
alter_000@pb MINGW64 /x/_virtualBox/drupal/drupal-vm (master)
$ vagrant up
Bringing machine 'drupalvm' up with 'virtualbox' provider...
==> drupalvm: Checking if box 'geerlingguy/ubuntu1404' is up to date...
==> drupalvm: Clearing any previously set forwarded ports...
==> drupalvm: Clearing any previously set network interfaces...
==> drupalvm: Preparing network interfaces based on configuration...
    drupalvm: Adapter 1: nat
    drupalvm: Adapter 2: hostonly
==> drupalvm: Forwarding ports...
    drupalvm: 22 (guest) => 2222 (host) (adapter 1)
==> drupalvm: Running 'pre-boot' VM customizations...
==> drupalvm: Booting VM...
==> drupalvm: Waiting for machine to boot. This may take a few minutes...
    drupalvm: SSH address: 127.0.0.1:2222
    drupalvm: SSH username: vagrant
    drupalvm: SSH auth method: private key
==> drupalvm: Machine booted and ready!
==> drupalvm: Checking for guest additions in VM...
==> drupalvm: Setting hostname...
==> drupalvm: Configuring and enabling network interfaces...
==> drupalvm: Mounting shared folders...
    drupalvm: /vagrant => X:/_virtualBox/drupal/drupal-vm
    drupalvm: /var/www/drupalvm => C:/Users/alter_000/Sites/drupalvm
==> drupalvm: Machine already provisioned. Run `vagrant provision` or use the `--provision`
==> drupalvm: flag to force provisioning. Provisioners marked to run always will still run.

alter_000@pb MINGW64 /x/_virtualBox/drupal/drupal-vm (master)
In [ ]:
$ vagrant ssh
Welcome to Ubuntu 14.04.4 LTS (GNU/Linux 4.2.0-27-generic x86_64)

 * Documentation:  https://help.ubuntu.com/
Last login: Mon Apr 11 11:06:11 2016
In [ ]:
vagrant@drupalvm:~$ drush --version
 Drush Version   :  9.0-dev

vagrant@drupalvm:~$

Далее представляем, что мы работаем с удаленным сервером..., поначалу ищем, что синхронизируется с папкой windows , сначала посмотрим в настройках VirualBox (Shared folders)

In [ ]:
\\?\X:\_virtualBox\drupal\drupal-vm
vagrant
In [ ]:
\\?\C:\Users\alter_000\Sites\drupalvm
var_www_drupalvm

Имее две группы расшаренных папок (созданы вагрантом). Первая - это папка из которой зипускается vagrant, а вторая - сайт... Проверим:

In [ ]:
vagrant@drupalvm:~$ pwd
/home/vagrant
vagrant@drupalvm:~$ ls
distribute-0.6.14.tar.gz
vagrant@drupalvm:~$ cd /var/www
vagrant@drupalvm:/var/www$ ls
dashboard  drupalvm  html
vagrant@drupalvm:/var/www$
In [ ]:
vagrant@drupalvm:/var/www/drupalvm/drupal$ ls
autoload.php   core               modules     robots.txt  update.php
composer.json  example.gitignore  profiles    sites       vendor
composer.lock  index.php          README.txt  themes      web.config
vagrant@drupalvm:/var/www/drupalvm/drupal$
In [ ]:
vagrant@drupalvm:/var/www/drupalvm/drupal$ ls /vagrant
config.yml       example.config.yml       LICENSE       README.md
docs             example.drupal.make.yml  mkdocs.yml    tests
drupal.make.yml  examples                 provisioning  Vagrantfile
vagrant@drupalvm:/var/www/drupalvm/drupal$

пока не ясно, почему путь к папке drupal прописывается в настройках VirtualBox так var_www_drupalvm

In [ ]:
####Структура папок
In [ ]:
#The (partial) structure of your Drupal installation could look as follows:
|-core
  |  |-modules
  |  |-themes
  |  |  |-bartik
  |  |  |-seven
  ..
  ..
  |-modules
  |-themes
  |  |-contrib
  |  |  |-zen
  |  |  |-basic
  |  |  |-bluemarine
  |  |-custom
  |  |  |-fluffiness

Theme folder structure

Все пояснения в документации (ссылка выше)

In [ ]:
|-fluffiness.breakpoints.yml
  |-fluffiness.info.yml
  |-fluffiness.libraries.yml
  |-fluffiness.theme
  |-config
  |  |-install
  |  |  |-fluffiness.settings.yml
  |  |-schema
  |  |  |-fluffiness.schema.yml
  |-css
  |  |-style.css
  |-js
  |  |-fluffiness.js
  |-images
  |  |-buttons.png
  |-logo.png
  |-screenshot.png
  |-templates
  |  |-maintenance-page.html.twig
  |  |-node.html.twig

Debugging Twig templates

You enable Twig Debugging in sites/default/services.yml (If services.yml does not yet exist; copy default.services.yml and rename it to services.yml.)

Set the debug variable to true:

In [ ]:
parameters:
  twig.config:
    debug: true

Twig - это всего лишь язык-обертка, файлы нужно дин раз прочитать, перевести в .php и записать (в кэш). Я пытался этот кэш стереть при помощи

In [ ]:
drush cc
In [ ]:
vagrant@drupalvm:/var/www/drupalvm/drupal$ drush cc
Enter a number to choose which cache to clear.
 [0]  :  Cancel
 [1]  :  drush
 [2]  :  theme-registry
 [3]  :  router
 [4]  :  css-js
 [5]  :  module-list
 [6]  :  theme-list
 [7]  :  render
 [8]  :  views
8
'views' cache was cleared.                                                                                    [success]
vagrant@drupalvm:/var/www/drupalvm/drupal$

Но ничего не получилось, пришлось нажать на кнопку:
Go to Configuration -> Performance and then click the Clear all caches button
Подробности здесь Debugging compiled Twig templates

Вот пример вывода дебаггера (точнее: twig-debugger`a)

In [ ]:
...
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/html.html.twig' -->
...
In [ ]:
<header class="navbar navbar-default container" id="navbar" role="banner">
      <div class="navbar-header">
        

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   * region--navigation.html.twig
   x region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->
  <div class="region region-navigation">
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--bootstrap-branding.html.twig
   x block--system-branding-block.html.twig
   * block--system.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/block/block--system-branding-block.html.twig' -->
      <a class="logo navbar-btn pull-left" href="/" title="Home" rel="home">
      <img src="/themes/bootstrap/logo.svg" alt="Home">
    </a>
        <a class="name navbar-brand" href="/" title="Home" rel="home">Drupal</a>
    
<!-- END OUTPUT from 'themes/bootstrap/templates/block/block--system-branding-block.html.twig' -->


  </div>

<!-- END OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->


                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
              </div>

                    <div class="navbar-collapse collapse">
          

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'region' -->
<!-- FILE NAME SUGGESTIONS:
   * region--navigation-collapsible.html.twig
   x region.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->
  <div class="region region-navigation-collapsible">
    

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--bootstrap-main-menu.html.twig
   x block--system-menu-block--main.html.twig
   * block--system-menu-block.html.twig
   * block--system.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/block/block--system-menu-block--main.html.twig' -->
<nav role="navigation" aria-labelledby="block-bootstrap-main-menu-menu" id="block-bootstrap-main-menu" class="contextual-region">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__main' -->
<!-- FILE NAME SUGGESTIONS:
   x menu--main.html.twig
   x menu--main.html.twig
   * menu.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/menu/menu--main.html.twig' -->

              <ul class="menu nav navbar-nav">
                      <li>
        <a href="/" data-drupal-link-system-path="<front>" class="is-active">Home</a>
                  </li>
        </ul>
  


<!-- END OUTPUT from 'themes/bootstrap/templates/menu/menu--main.html.twig' -->


  </nav>

<!-- END OUTPUT from 'themes/bootstrap/templates/block/block--system-menu-block--main.html.twig' -->



<!-- THEME DEBUG -->
<!-- THEME HOOK: 'block' -->
<!-- FILE NAME SUGGESTIONS:
   * block--bootstrap-account-menu.html.twig
   x block--system-menu-block--account.html.twig
   * block--system-menu-block.html.twig
   * block--system.html.twig
   * block.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/block/block--system-menu-block--account.html.twig' -->
<nav role="navigation" aria-labelledby="block-bootstrap-account-menu-menu" id="block-bootstrap-account-menu" class="contextual-region">
      

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'menu__account' -->
<!-- FILE NAME SUGGESTIONS:
   x menu--account.html.twig
   x menu--account.html.twig
   * menu.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/bootstrap/templates/menu/menu--account.html.twig' -->

              <ul class="menu nav navbar-nav navbar-right">
                      <li>
        <a href="/user" data-drupal-link-system-path="user">My account</a>
                  </li>
                  <li>
        <a href="/user/logout" data-drupal-link-system-path="user/logout">Log out</a>
                  </li>
        </ul>
  


<!-- END OUTPUT from 'themes/bootstrap/templates/menu/menu--account.html.twig' -->


  </nav>

<!-- END OUTPUT from 'themes/bootstrap/templates/block/block--system-menu-block--account.html.twig' -->


  </div>

<!-- END OUTPUT from 'themes/bootstrap/templates/system/region.html.twig' -->


        </div>
          </header>

Дебаггер этот ой, как нужен. Вот папка twig-шаблонов из темы bootstrap

In [ ]:
C:\Users\alter_000\Sites\drupalvm\drupal\themes\bootstrap\templates>tree /f
Структура папок тома Packard Bell
Серийный номер тома: F634-F7A8
C:.
├───block
│       block--bare.html.twig
│       block--local-actions-block.html.twig
│       block--local-tasks-block.html.twig
│       block--page-title-block.html.twig
│       block--search.html.twig
│       block--system-branding-block.html.twig
│       block--system-menu-block--account.html.twig
│       block--system-menu-block--main.html.twig
│       block--system.html.twig
│       block-list.html.twig
│       block.html.twig
│
├───bootstrap
│       bootstrap-carousel.html.twig
│       bootstrap-dropdown.html.twig
│       bootstrap-modal.html.twig
│       bootstrap-panel.html.twig
│       item-list--bootstrap-carousel-indicators.html.twig
│       item-list--dropdown.html.twig
│
├───field
│       field--node--field-image--article.html.twig
│       field-multiple-value-form.html.twig
│       field.html.twig
│
├───file
│       file-link.html.twig
│       file-upload-help.html.twig
│       image-widget.html.twig
│
├───filter
│       filter-tips.html.twig
│
├───input
│       datetime-form.html.twig
│       datetime-wrapper.html.twig
│       form-element-label.html.twig
│       form-element.html.twig
│       input--button--dropdown.html.twig
│       input--button--split.html.twig
│       input--button.html.twig
│       input--form-control.html.twig
│       input.html.twig
│       select.html.twig
│       textarea.html.twig
│
├───menu
│       menu--account.html.twig
│       menu--main.html.twig
│       menu-local-task.html.twig
│       menu-local-tasks.html.twig
│       menu.html.twig
│
├───node
│       node.html.twig
│
├───system
│       breadcrumb.html.twig
│       container.html.twig
│       html.html.twig
│       image.html.twig
│       links.html.twig
│       page-title.html.twig
│       page.html.twig
│       pager.html.twig
│       progress-bar.html.twig
│       region--no-wrapper.html.twig
│       region.html.twig
│       status-messages.html.twig
│       system-themes-page.html.twig
│       table.html.twig
│
└───views
        views-exposed-form.html.twig
        views-mini-pager.html.twig
        views-view-table.html.twig
        views-view.html.twig


C:\Users\alter_000\Sites\drupalvm\drupal\themes\bootstrap\templates>


Посты чуть ниже также могут вас заинтересовать
Автор: на
Ярлыки: , , , , ,

Комментариев нет:

Отправить комментарий

Подписаться на: Комментарии к сообщению (Atom)