drupal的theming主题笔记

github
ivandoric/d8theming
release source code

libraries:
stylesheets-removed:
  -
#css and js configuration

/core/modules/system/templates
/core/modules/system/templates/page.html.twig
#php files by default 

settings.local.php去掉67行#$settings['cache']的注释
settings.php去掉763行# if (file exists的注释
127.0.0.1:80/rebuild.php
default.services.yml里的debug, auto_reload, cache
#修改在development.services.yml中修改，不在源文件改
development.services.yml加上
parameters:
  twig.config:
    debug: true
    auto-reload: true
    cache: false

将default.services.yml改为services.yml
settings.php底部引用了services.yml

Gulp.js, Sass, LiveReload
github ivandoric/olympos
olympos-master copy gulpfile.js, package.json into sites/"example".com/vendor
copy images, js, lib, sass into themes/custom/"example"
sass/style.scss

gulpfile.js 14行 return gulp.src('themes/custom/"example"/images/*')
and replace all file path like '/theme/olympic'
replace 30行 gulp.task('sass')  .pipe(gulp.dest('./themes/custom/"example"/css'))
#save into css
gulp.task('uglify')
#uglify, minify the javascript into js file
replace 36行 .pipe(uglify('main.js'))
replace 45行 gulp.watch()里的'css/style.css'和'**/*.twig', remove '*.php'

#历史系使用的是Gruntfile.js

区块布局
演示块区域
在.info.yml中加入
regions:
  content: 'Main Content'
  header: 'Header'
  footer: 'Footer'
  sidebar: 'Sidebar'
#drupal has default regions, 在手动设过regions以后，default not exist anymore

remove page.html.twig中的{{page.breadcrumb}}和其他没有设置的region

自定义区块
放置区块

drupal version update

rename page.html.twig by page--front.html.twig

/core/themes/stable/templates/block/block--system-branding-block.html.twig

copy all the /templates folder into /themes/custom/'example'
region default css在sass/_globals.scss里
_header.scss里加上.main-header{}

#'put logo.svg into root of the theme i.e. /templates/'
Appearance settings Settings Global Settings Logo Image Settings

在{% if site_logo %}和{% endif %}之间加上<h1 class = ""></h1>

_header.scss加上 
.logo{
@include span(2);
img{
max-width: 100%;
}
}

区块配置

Add Content Basic Page 加新页面

Menus Main Navigation
Add Link

Movies (1) #(1) id of the node

Structure Block Layout

'''create new regions'''
.info.yml
regions:
main_navigation: 'Main Navigation'
page--front.html.twig
{{page.header}}下加上
<div class = "main-navigation">
{{page.main_navigation}}
</div>

/sass/_header.scss加上
.main_navigation{
@include span(5, last);
a{}
$:hover{text-decoration:underline}
li{}
margin-top{}
}

#page.html.twig所有basic page的regions位置，而page--front.html.twig是主页面的regions位置
#'''change the header at least in two places: page.html.twig, page--front.html.twig'''

cut the page--front.html.twig <header class = "main-header" role = "banner"></header> 
into new file /partials/, parallel with /templates below the /themes/
save as header.html.twig

在page--front.html.twig原来剪切的位置加上
{% include directory ~ '/partials/header.html.twig' %}
之后在page.html.twig进行同样的操作

如果分页面不加main_navigation，在page.html.twig remove {{page.main_navigation}}

www.drupal.org/project/devel
extend install new module

Configuration Generate content
generate content not in page--front.html.twig, in views
Structure views FrontPage

Filter Criteria Add Filter Type Content Type is one of Article

Views Frontpage Format Show: Content改为 Fields
Add Fields Title Style Settings Customize field HTML HTML element H3 
Add Fields Body Formatter Trimmed
Add Fields Link

修改Fields在_header.scss里对{{page.content}}的class下的h3进行css修改

Structure Content type Movies
Movie poster machine name 复制
在node--movies.html.twig中加入
<div class = 'movie-poster'>
{{content."machine name"}}
</div>

Structure Content Type Movies Manage display Field Movie Poster 设置
Image style, Link image to
Configuration Image Style Add new style 
Add effect Scale
Add Crop effect
Content Type Movies Field Movie poster 设为hidden
Structure Views Fields Add Fields Movie Poster

/templates/fields/fields.html.twig

/templates/layout/page.html.twig
#'''content of the node is displayed right here'''

/templates/content/node.html.twig
#still got the title, title is displayed in the page.html.twig, not in the node.html.twig

structure>content type>movies add fields

新建node--movies.html.twig 加入
<div class = "director">
{{content."field_name"}}
</div>

/field/field.html.twig
加入<strong>{{label}}</strong>
#no strong in scss
在_global.scss里加入
.director strong{}

field--field-director.html.twig

Kint, Arrays, Twig, Foreach, if

'''Kint debug'''
在node--movies.html.twig加入
{{kint(content)}}
'''all the field'''

{{kint(content.field_director['#items'].getValue())}}

'''print out'''
加入{{content.field_actors['#items']|first.getValue}}
print out内容在/templates/field/field.html.twig中{% for item in items %}循环

node--movies.html.twig加入
{% for actor in content.field_actors['#items'].getValue() %}
{{actor.value}}<br>
{% endfor %}
#if have the attributes right here, can do the same to the attributes

先在structure movies加入field show poster? on和off，选择boolean属性
{% if content.field_show_poster_['#items'].getValue()|first.value == '1' %}
<div class = "movie-poster">
{{content.field_movie_poster}}
</div>
{% else %}
 <h3>I don't want you to see the movie poster</h3>
{% endif %}

从www.drupal.org下载extend扩展包，解压缩放在/branches/modules/contrib下，再在扩展里下载相关模块

machine name field_premeires
<div class = "premeires">
{{content.field_premeires}}
</div>
field premeires Format Field Collection Items
Structure Manage field collections Field premeires manage display

Add field Content
Reference Type content types Actors

Add new views
Add new page

Add field Filtered By Content Type Movies

<div class = "">
{{content.field_actors}}
#machine name
</div>
#automatically linked to the actors page

下载foundation的css framework，放在/sass/，重命名_foundation.scss
style.css里加上@import "foundation"
add class to ul 
<ul{{attributes.addclass('menu')}}>
add class to a tag 
{{link(item.title, item.url, item.attributes.addclass('a-link button'))}}
#button comes from foundation
#menu comes from foundation

2个menu，创建新文件menu--account.html.twig

add class 'menu vertical'
<ul{{attributes.addclass('menu vertical')}}>
#add class always add to the attributes

structure views Frontpage Content: 
link to Content Style Settings Customized field HTML CSS class
#applied to the <span> tag wrapping surround the <a> tag
#"style settings" do not work
Rewrite Results 
Output this field as a custom link
Link class 'button'

.info.yml
regions:
  content: 'Main Content'
machine name is "page.content", human readable name is "Main Content"