В подборке из 23 видео (10-25 минут каждое) в которых автор создает новую тему... мне понравился ролик, в котором автор настраивает Drupal - подключает девелоперский файл настроек development.services.yml, в котором собраны все нужные настройки: отмена кэширования, ... подключение twig дебаггера (вывод сообщений в ferebug браузера).
Это те настройки, которые надо обязательно производить... каждый раз. Здесь же и список других видео... (Drush, css, gulp, import wp theme...). Английский белорусский, так что все понятно...
Через неделю я прочитал документацию и две статьи с Lilabout и добавил все ссылки сюда.
This is a repository for Drupal 8 Theming video tutorial series. You can check out the series here.
Convert any website layout or template into a Drupal theme - easily! ...Theming for Drupal is not actually as hard as you may think.
CSS architecture (for Drupal 8)
Drupal 8 Theming Fundamentals, Part 2
Drupal 8 Theming Fundamentals, Part 2
Controlling CSS Classes with the Classy Theme in Drupal 8
Generate themes in 2 minutes #bootstrap #free #opensource #modern #colorable #easy-to-use #zero-coding #drupal-8
CSS file organization (for Drupal 8)Drupal 8 follows a SMACSS-style categorization of its CSS rules:
Base CSS reset/normalize plus HTML element styling.
Layout macro arrangement of a web page, including any grid systems.
Component discrete, reusable UI elements.
State styles that deal with client-side changes to components.
Theme purely visual styling (look-and-feel) for a component.
Starter Themes This is a list of themes that currently identify themselves as starter themes. At time of writing some of these projects were in early alpha release or still in development. You will need to check the releases for each project.
Radixis a base theme for Drupal. It has Bootstrap, Sass, Gulp, BrowserSync and Font Awesome built-in.
Open Academy It is built on top of the Panopoly base distribution - a cleanly extendable Drupal 7 installation profile with a Features-based, Kit-compliant functionality. Open Academy is developed and supported by SystemSeed
Panopoly Panopoly is powerful base distribution of Drupal powered by lots of Chaos Tools and Panels magic.
Prius is a Drupal 8 only theme which is packed with the following :
SASS because writing plain CSS is just a pain.
SMACS to better organise your stylesheet and make their maintenance easier.
SystemSeed Drupal Architecture. Drupal Development. Drupal Support. The SystemSeed team includes some of the most active contributors to the Drupal community who are passionate about technology and understand the open source CMS landscape.
Sass techniques and tools Compass is often used with Sass -- and suggested below -- because it can automatically compile your Sass using the compass watch command. For more information, see the Compass documentation.
SASS Frameworks and Resources Why Use SASS:Advantages Over Regular CSS
Live_css with .less support This module, once installed, adds a tab to the right side of your monitor. When you click on the tab a css development section opens with a drop down list of all the css files available to use. You can then select the one that you need to use and start playing with your theme. The major advantage of this module is that the results of your styling occur as you are typing. This allows very quick theming and with extreme ease you can try a bunch of different style options for elements.
102 Themes match your searchBootstrap This base theme bridges the gap between Drupal and the Bootstrap Framework.
Foundation Coding Resources Tons of resources to help you build faster. We love our creative, resourceful, active Foundation community
Bourbon Neat Examples
How to Convert an HTML Template to a Drupal 8 Theme
Drupal 8 Theming: A Crash Course Published on Oct 28, 2015 With Drupal 8 right around the corner, learn everything you need to know to make the switch. We'll be going over all of the moving parts of the theme layer, best practices, and the little gotchas.
DrupalCon Barcelona 2015: Drupal 8 theming Published on Sep 22, 2015 Full disclosure: this session was given at DrupalCon in LA, the session will be updated & modified to match the state of Drupal8 in Barcelona (RC1 i hope) - slides are added from LA as well to give the track chair an idea of the session
Drupal 8 Theming - Part 17 - Regions and Blocks from Views Published on Dec 5, 2015 In this episode of Drupal 8 Theming we are going to go more in depth with regions, and we are also going to learn how to make custom blocks from Views.
Спустя неделю прочитал две части "Drupal 8"¶
А про видео даже забыл, поскольу пришлось сначала юзать virtualBox с Vagrant. Так что про видео даже забыл. Зато изучение статей с Lillabot оказалось простым и интересным... подозреваю, что имено потому, что предвадрительно посмотрел видео.
Потом я просмотрел незакрытые страницы в браузере и обнаружил еще штук пять обзорных видео с разных "Друпалконов"... Так что здесь отличная подборка ссылок для дальнейшей работы.
Конспектируем видео¶
Папка sites поддерживается для обратной совместимости, а использовать теперь надо themes (подробности в readme файлах в папках)
Добавлять css js файлы в хидер и в подвал html-страниц теперь просто. Надо использовать yml файлы.
Друпал по умолчанию все css склеивает в сборные файлы. Загружать каждый файл отдельно можно, если в настройках отменить склейку на странице /admin/config/development/performance (там же и кэш очищается вручную). В хидере будут выводиться вот такие сборники:
<style media="all">
@import url("/core/assets/vendor/normalize-css/normalize.css?0");
@import url("/core/themes/stable/css/system/components/ajax-progress.module.css?0");
@import url("/core/themes/stable/css/system/components/align.module.css?0");
...
...
</style>
Для того, чтобы создать страницу, автор скопипастил в папку themes/custom вот эту страницу (глубоко и непонятно закопанную... в модули ???)
# %load C:\\Users\\alter_000\\Sites\\drupalvm\\drupal\\core\\modules\\system\\templates\\page.html.twig
{#
/**
* @file
* Default theme implementation to display a single page.
*
* The doctype, html, head and body tags are not in this template. Instead they
* can be found in the html.html.twig template in this directory.
*
* Available variables:
*
* General utility variables:
* - base_path: The base URL path of the Drupal installation. Will usually be
* "/" unless you have installed Drupal in a sub-directory.
* - is_front: A flag indicating if the current page is the front page.
* - logged_in: A flag indicating if the user is registered and signed in.
* - is_admin: A flag indicating if the user has permission to access
* administration pages.
*
* Site identity:
* - front_page: The URL of the front page. Use this instead of base_path when
* linking to the front page. This includes the language domain or prefix.
*
* Page content (in order of occurrence in the default page.html.twig):
* - messages: Status and error messages. Should be displayed prominently.
* - node: Fully loaded node, if there is an automatically-loaded node
* associated with the page and the node ID is the second argument in the
* page's path (e.g. node/12345 and node/12345/revisions, but not
* comment/reply/12345).
*
* Regions:
* - page.header: Items for the header region.
* - page.primary_menu: Items for the primary menu region.
* - page.secondary_menu: Items for the secondary menu region.
* - page.highlighted: Items for the highlighted content region.
* - page.help: Dynamic help text, mostly for admin pages.
* - page.content: The main content of the current page.
* - page.sidebar_first: Items for the first sidebar.
* - page.sidebar_second: Items for the second sidebar.
* - page.footer: Items for the footer region.
* - page.breadcrumb: Items for the breadcrumb region.
*
* @see template_preprocess_page()
* @see html.html.twig
*
* @ingroup themeable
*/
#}
<div class="layout-container">
<header role="banner">
{{ page.header }}
</header>
{{ page.primary_menu }}
{{ page.secondary_menu }}
{{ page.breadcrumb }}
{{ page.highlighted }}
{{ page.help }}
<main role="main">
<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
<div class="layout-content">
{{ page.content }}
</div>{# /.layout-content #}
{% if page.sidebar_first %}
<aside class="layout-sidebar-first" role="complementary">
{{ page.sidebar_first }}
</aside>
{% endif %}
{% if page.sidebar_second %}
<aside class="layout-sidebar-second" role="complementary">
{{ page.sidebar_second }}
</aside>
{% endif %}
</main>
{% if page.footer %}
<footer role="contentinfo">
{{ page.footer }}
</footer>
{% endif %}
</div>{# /.layout-container #}
На 5-ой минуте видео начал искать рецепт отключения кэша (помню, что раньше кэш был не один...), автор предложил обратить внимание на содержимое папки
C:\Users\alter_000>dir "C:\Users\alter_000\Sites\drupalvm\drupal\sites"
Том в устройстве C имеет метку Packard Bell
Серийный номер тома: F634-F7A8
Содержимое папки C:\Users\alter_000\Sites\drupalvm\drupal\sites
04.04.2016 20:44 <DIR> .
04.04.2016 20:44 <DIR> ..
04.04.2016 20:56 <DIR> default
04.04.2016 20:44 249 development.services.yml
04.04.2016 20:44 3 755 example.settings.local.php
04.04.2016 20:44 2 337 example.sites.php
04.04.2016 20:44 515 README.txt
4 файлов 6 856 байт
3 папок 387 327 963 136 байт свободно
# %load "C:\\Users\\alter_000\\Sites\\drupalvm\\drupal\\sites\\example.settings.local.php"
<?php
/**
* @file
* Local development override configuration feature.
*
* To activate this feature, copy and rename it such that its path plus
* filename is 'sites/default/settings.local.php'. Then, go to the bottom of
* 'sites/default/settings.php' and uncomment the commented lines that mention
* 'settings.local.php'.
*
* If you are using a site name in the path, such as 'sites/example.com', copy
* this file to 'sites/example.com/settings.local.php', and uncomment the lines
* at the bottom of 'sites/example.com/settings.php'.
*/
/**
* Assertions.
*
* The Drupal project primarily uses runtime assertions to enforce the
* expectations of the API by failing when incorrect calls are made by code
* under development.
*
* @see http://php.net/assert
* @see https://www.drupal.org/node/2492225
*
* If you are using PHP 7.0 it is strongly recommended that you set
* zend.assertions=1 in the PHP.ini file (It cannot be changed from .htaccess
* or runtime) on development machines and to 0 in production.
*
* @see https://wiki.php.net/rfc/expectations
*/
assert_options(ASSERT_ACTIVE, TRUE);
\Drupal\Component\Assertion\Handle::register();
/**
* Enable local development services.
*/
$settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml';
/**
* Show all error messages, with backtrace information.
*
* In case the error level could not be fetched from the database, as for
* example the database connection failed, we rely only on this value.
*/
$config['system.logging']['error_level'] = 'verbose';
/**
* Disable CSS and JS aggregation.
*/
$config['system.performance']['css']['preprocess'] = FALSE;
$config['system.performance']['js']['preprocess'] = FALSE;
/**
* Disable the render cache (this includes the page cache).
*
* Note: you should test with the render cache enabled, to ensure the correct
* cacheability metadata is present. However, in the early stages of
* development, you may want to disable it.
*
* This setting disables the render cache by using the Null cache back-end
* defined by the development.services.yml file above.
*
* Do not use this setting until after the site is installed.
*/
# $settings['cache']['bins']['render'] = 'cache.backend.null';
/**
* Disable Dynamic Page Cache.
*
* Note: you should test with Dynamic Page Cache enabled, to ensure the correct
* cacheability metadata is present (and hence the expected behavior). However,
* in the early stages of development, you may want to disable it.
*/
# $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';
/**
* Allow test modules and themes to be installed.
*
* Drupal ignores test modules and themes by default for performance reasons.
* During development it can be useful to install test extensions for debugging
* purposes.
*/
$settings['extension_discovery_scan_tests'] = TRUE;
/**
* Enable access to rebuild.php.
*
* This setting can be enabled to allow Drupal's php and database cached
* storage to be cleared via the rebuild.php page. Access to this page can also
* be gained by generating a query string from rebuild_token_calculator.sh and
* using these parameters in a request to rebuild.php.
*/
$settings['rebuild_access'] = TRUE;
/**
* Skip file system permissions hardening.
*
* The system module will periodically check the permissions of your site's
* site directory to ensure that it is not writable by the website user. For
* sites that are managed with a version control system, this can cause problems
* when files in that directory such as settings.php are updated, because the
* user pulling in the changes won't have permissions to modify files in the
* directory.
*/
$settings['skip_permissions_hardening'] = TRUE;
Далее выполняем, то что написано в первом абзаце этого файла. Копируем его и переименовываем в settings.local.php
# Вот в эту папку
# C:\Users\alter_000\Sites\drupalvm\drupal\sites\default
Потом еще надо будет отредактировать settings.php (как написано во втором абзаце)
uncomment the lines
* at the bottom of 'sites/example.com/settings.php'
Таким образом, php скрипты теперь должны собираться с этим новым файлом, но, полагаю, что и здесь в Друпале что-то кэшируется, ...но это моя версия причины последующей ошибки. На 10-ой минуте видео выскочила ошибка, чтобы ее исправить, автор просто запустил в браузере /ribuild.php
Из этого файл скопировать фрагменты в в sites\development.services.yml¶
А после этого twig.debug выводит сообщения перед html тегом в firefox (!!!)... 13-минута видео
# %load "C:\\Users\\alter_000\\Sites\\drupalvm\\drupal\\sites\\default\\default.services.yml"
parameters:
session.storage.options:
# Default ini options for sessions.
#
# Some distributions of Linux (most notably Debian) ship their PHP
# installations with garbage collection (gc) disabled. Since Drupal depends
# on PHP's garbage collection for clearing sessions, ensure that garbage
# collection occurs by using the most common settings.
# @default 1
gc_probability: 1
# @default 100
gc_divisor: 100
#
# Set session lifetime (in seconds), i.e. the time from the user's last
# visit to the active session may be deleted by the session garbage
# collector. When a session is deleted, authenticated users are logged out,
# and the contents of the user's $_SESSION variable is discarded.
# @default 200000
gc_maxlifetime: 200000
#
# Set session cookie lifetime (in seconds), i.e. the time from the session
# is created to the cookie expires, i.e. when the browser is expected to
# discard the cookie. The value 0 means "until the browser is closed".
# @default 2000000
cookie_lifetime: 2000000
#
# Drupal automatically generates a unique session cookie name based on the
# full domain name used to access the site. This mechanism is sufficient
# for most use-cases, including multi-site deployments. However, if it is
# desired that a session can be reused across different subdomains, the
# cookie domain needs to be set to the shared base domain. Doing so assures
# that users remain logged in as they cross between various subdomains.
# To maximize compatibility and normalize the behavior across user agents,
# the cookie domain should start with a dot.
#
# @default none
# cookie_domain: '.example.com'
#
twig.config:
# Twig debugging:
#
# When debugging is enabled:
# - The markup of each Twig template is surrounded by HTML comments that
# contain theming information, such as template file name suggestions.
# - Note that this debugging markup will cause automated tests that directly
# check rendered HTML to fail. When running automated tests, 'debug'
# should be set to FALSE.
# - The dump() function can be used in Twig templates to output information
# about template variables.
# - Twig templates are automatically recompiled whenever the source code
# changes (see auto_reload below).
#
# For more information about debugging Twig templates, see
# https://www.drupal.org/node/1906392.
#
# Not recommended in production environments
# @default false
debug: false
# Twig auto-reload:
#
# Automatically recompile Twig templates whenever the source code changes.
# If you don't provide a value for auto_reload, it will be determined
# based on the value of debug.
#
# Not recommended in production environments
# @default null
auto_reload: null
# Twig cache:
#
# By default, Twig templates will be compiled and stored in the filesystem
# to increase performance. Disabling the Twig cache will recompile the
# templates from source each time they are used. In most cases the
# auto_reload setting above should be enabled rather than disabling the
# Twig cache.
#
# Not recommended in production environments
# @default true
cache: true
renderer.config:
# Renderer required cache contexts:
#
# The Renderer will automatically associate these cache contexts with every
# render array, hence varying every render array by these cache contexts.
#
# @default ['languages:language_interface', 'theme', 'user.permissions']
required_cache_contexts: ['languages:language_interface', 'theme', 'user.permissions']
# Renderer automatic placeholdering conditions:
#
# Drupal allows portions of the page to be automatically deferred when
# rendering to improve cache performance. That is especially helpful for
# cache contexts that vary widely, such as the active user. On some sites
# those may be different, however, such as sites with only a handful of
# users. If you know what the high-cardinality cache contexts are for your
# site, specify those here. If you're not sure, the defaults are fairly safe
# in general.
#
# For more information about rendering optimizations see
# https://www.drupal.org/developing/api/8/render/arrays/cacheability#optimizing
auto_placeholder_conditions:
# Max-age at or below which caching is not considered worthwhile.
#
# Disable by setting to -1.
#
# @default 0
max-age: 0
# Cache contexts with a high cardinality.
#
# Disable by setting to [].
#
# @default ['session', 'user']
contexts: ['session', 'user']
# Tags with a high invalidation frequency.
#
# Disable by setting to [].
#
# @default []
tags: []
# Cacheability debugging:
#
# Responses with cacheability metadata (CacheableResponseInterface instances)
# get X-Drupal-Cache-Tags and X-Drupal-Cache-Contexts headers.
#
# For more information about debugging cacheable responses, see
# https://www.drupal.org/developing/api/8/response/cacheable-response-interface
#
# Not recommended in production environments
# @default false
http.response.debug_cacheability_headers: false
factory.keyvalue:
{}
# Default key/value storage service to use.
# @default keyvalue.database
# default: keyvalue.database
# Collection-specific overrides.
# state: keyvalue.database
factory.keyvalue.expirable:
{}
# Default key/value expirable storage service to use.
# @default keyvalue.database.expirable
# default: keyvalue.database.expirable
# Allowed protocols for URL generation.
filter_protocols:
- http
- https
- ftp
- news
- nntp
- tel
- telnet
- mailto
- irc
- ssh
- sftp
- webcal
- rtsp
Посты чуть ниже также могут вас заинтересовать
Комментариев нет:
Отправить комментарий