drupal的node.html.twig说明

Drupal 8 根据分类不同定义自己的节点模板建议：http://www.thinkindrupal.com/node/5986

 

 

*可用变量：
 * - node：具有有限访问对象属性和方法的节点实体。
 *只有以“get”，“has”或“is”开头的方法名称和一些常用的方法，如“id”，“label”和“bundle”可用。例如：
 * -node.getCreatedTime() 将返回节点创建时间戳。
 * - node.hasField('field_example')如果节点包包含field_example，则返回TRUE。 （这并不表示在此存在一个值
 *字段。）
 * -node.isPublished()将返回节点是否发布。
 *调用其他方法，如node.delete（）将导致异常。
 *请参阅\ Drupal \ node \ Entity \ Node获取节点对象的公共属性和方法的完整列表。
 * - label：节点的标题。
 * - content：所有节点项目。使用{{content}}将其全部打印出来，或打印一个子集，如{{content.field_example}}。
 *使用{{content | without（'field_example'）}}暂时禁止打印给定的子元素。
 * - author_picture：使用“compact”视图模式呈现的节点创作者用户实体。
 * - metadata：此节点的元数据。
 * - date：主题创建日期字段。
 * - author_name：主题作者姓名字段。
 * - url：当前节点的直接URL。
 * - display_submitted：是否显示提交信息。
 * - attributes：包含元素的HTML属性。
 * attributes.class元素可能包含一个或多个以下类：
   - node：当前的模板类型（也称为“主题钩子”）。
   -  node--type-[type]：当前节点类型。例如，如果节点是“文章”，则会导致“节点类型文章”。请注意，机器
 * 姓名通常以人类可读标签的简写形式出现。
 * - node--view-mode-[view_mode]：节点的视图模式;例如，一个传情会导致：“节点 - 视图 - 模式 - 传情”，和
 * full：“节点 - 视图 - 模式 - 完整”。
 * 以下内容通过节点发布选项进行控制。
 * - node--promoted：出现在提升到首页的节点上。
 * - node--sticky：在节点列表中的节点上出现在其他非粘性节点之上。
 * - node--unpublished：仅在站点管理员可见的未发布的节点上出现。
 * -  title_attributes：除了应用于模板中显示的主标题标记之外，与属性相同。
 * - content_attributes：与属性相同，除了应用于模板中显示的主内容标记。
 * - author_attributes：与属性相同，除了应用于模板中出现的节点标签的作者。
 * - title_prefix：由模块填充的其他输出，旨在显示在模板中显示的主标题标记的前面。
 * - title_suffix：由模块填充的其他输出，旨在显示在模板中显示的主标题标记之后。
 * - view_mode：查看模式;例如“teaser【摘要】”或“full【全部内容】”。
 * - teaser：标记摘要状态。如果view_mode是“teaser”，将返回true。
 * - page：标记整个页面状态。如果view_mode是'full'，将返回true。
 * - readmore：标记更多状态。如果节点的摘要内容不能包含主体内容，则为真。
 * - logged_in：用于认证用户状态的标志。当当前用户是登录成员时将是真实的。
 * - is_admin：用于管理员用户状态的标志。当前用户是管理员时将是真实的。

在twig中操作html属性：如 <div{{ attributes }}></div> 注意html于{}不应该有空格

attributes, title_attributes, 和content_attributes在所以模版中有效

添加类：

attributes.addClass('myclassname')

或者：

{%
  set classes = [
    'red',
    'green',
  ]
%}
<div{{ attributes.addClass(classes) }}></div>  输出：<div class="red green"></div>
移除类名：

attributes.removeClass('myclassname')

或者：

{% set classes = [ 'red', 'green', 'blue' ] %}

<div{{ attributes.addClass(classes).removeClass('green') }}></div>  输出：<div class="red blue"></div>
设置属性的值：

attributes.setAttribute($attribute, $value)    例：

<div{{ attributes.setAttribute('id', 'myID') }}>     输出：</div><div id="myID"></div>

Drupal 8.3.x开始，有一个新的Twig函数create_attribute()来创建属性例：
<div{{ create_attribute({'class': ['region', 'region--header']}) }}>
  {{ content }}
</div>





移除属性：

removeAttribute($attribute)  例子：

<div{{ attributes.removeAttribute('id') }}></div>

检查是否有这个类名：

attributes.hasClass($class)       例：

{% if attributes.hasClass('myClass') %}
  {# do stuff #}
{% endif %}


这提供了一个新的空白Attribute对象来建立属性。

{% set my_attribute = create_attribute() %}
{%
  set my_classes = [
    'kittens',
    'llamas',
    'puppies',
  ]
%}
<div{{ my_attribute.addClass(my_classes).setAttribute('id', 'myUniqueId') }}>
  {{ content }}
</div>

.点符号的使用：
{% set classes = ['red', 'green', 'blue'] %}
{% set my_id = 'specific-id' %}
{% set image_src = 'https://www.drupal.org/files/powered-blue-135x42.png' %}

<img{{ attributes.addClass(classes).removeClass('green').setAttribute('id', my_id).setAttribute('src', image_src) }}>

输出 <img id="specific-id" class="red blue" src="https://www.drupal.org/files/powered-blue-135x42.png">

 
属性操作完整链接：https://www.drupal.org/docs/8/theming-drupal-8/using-attributes-in-templates
include包含模版文件：一般用来加载相同的header和footer看个人习惯：
1.创建要包含的文件：/THEME_NAME/includes/header.html.twig
2.在另外一些文件加载这个文件：{% include directory ~ '/includes/header.html.twig' %}
当然上面那个包含如果父于子主题一起用会报错的正确的方法是使用Twig命名空间来声明当前的主题“templates”目录 格式：“@ theme_name / includes /”      Twig命名空间是在安装主题时自动在Drupal 8中创建的
{% include '@theme_name/includes/header.html.twig' %}       则完整的地址为：your_site.com/themes/theme_name/templates/includes/header.html.twig
 
 

 

 

drupal api文档地址：https://api.drupal.org/api/drupal

http://drupalchina.cn/book/export/html/5515其他综合教程

theme.inc 是控制Drupal输出的主题系统，它允许用户主题定制几乎所有的Drupal系统输出。

函数及方法 Functions & methods

 7.x：

  1. drupal_find_theme_functions - 允许主题或主题引擎轻松重写主题函数.
  2. drupal_find_theme_templates - 允许主题或主题引擎轻松重写主题模板.
  3. drupal_theme_access - 确定是否可以使用该主题.
  4. drupal_theme_initialize - 初始化主题系统.
  5. drupal_theme_rebuild - 强制重建主题注册表; 使用在当增加了新的主题模块或主题钩子时.
  6. list_themes - 返回当前可用主题的列表.
  7. path_to_theme - 返回当前主题的路径.
  8. template_preprocess - Adds a default set of helper variables for variable processors and templates. This comes in before any other preprocess function which makes it possible to be used in default theme implementations (non-overridden theme functions).
  9. template_preprocess_html - html.tpl.php 的预处理变量
  10. template_preprocess_maintenance_page - 这里生成 template_preprocess_page() 的变量数组镜像. 这个预处理将运行于 theme_maintenance_page() 运行时.
  11. template_preprocess_page - page.tpl.php 的预处理变量
  12. template_preprocess_region - region.tpl.php 的预处理变量
  13. template_preprocess_username - theme_username(). 的预处理变量
  14. template_process - 一个默认的进程程序，用于尽可能晚的改变变量.
  15. template_process_html - html.tpl.php 的预处理变量
  16. template_process_maintenance_page - 这里生成 template_process_html() 的变量数组镜像. 这个预处理器将运行于 theme_maintenance_page() 运行时.
  17. template_process_page - page.tpl.php 的预处理变量
  18. template_process_username - theme_username(). 的预处理变量
  19. theme - 生成主题输出.
  20. theme_breadcrumb - 返回面包屑路径的HTML.
  21. theme_disable - Disable a given list of themes.
  22. theme_enable - Enable a given list of themes.
  23. theme_feed_icon - 返回一个订阅图标的HTML.
  24. theme_get_registry - 获取主题注册表.
  25. theme_get_setting - 从当前主题或指定主题获取设置.
  26. theme_get_suggestions - Generate an array of suggestions from path arguments.
  27. theme_html_tag - 返回某常用带有属性HTML标签的HTML.
  28. theme_image - 返回一幅图片的HTML.
  29. theme_indentation - Returns HTML for an indentation div; used for drag and drop tables.
  30. theme_item_list - Returns HTML for a list or nested list of items.
  31. theme_link - 返回一个链接的HTML.
  32. theme_links - 返回一系列链接的HTML.
  33. theme_mark - Returns HTML for a marker for new or updated content.
  34. theme_more_help_link - 返回"更多帮助"链接的HTML.
  35. theme_more_link - 返回“更多”链接的HTML, 象在区块中使用一样.
  36. theme_progress_bar - 返回一个进度条的HTML.
  37. theme_render_template - 使用一个本质上是PHP模板的系统默认模板.
  38. theme_status_messages - 按照状态或错误信息的所属类型分组返回HTML.
  39. theme_table - 返回某表格HTML.
  40. theme_tablesort_indicator - 返回某分类图标的HTML.
  41. theme_username - 返回某用户的HTML, 可能连接到用户页面.
  42. _drupal_theme_access - Helper function for determining access to a theme.
  43. _drupal_theme_initialize - Initialize the theme system given already loaded information. This function is useful to initialize a theme when no database is present.
  44. _template_preprocess_default_variables - Returns hook-independant variables to template_preprocess().
  45. _theme_build_registry - 重建主题注册表缓存.
  46. _theme_load_registry - 从数据库中获取主题注册表缓存，如果不存在，则建立它.
  47. _theme_process_registry - Process a single implementation of hook_theme().
  48. _theme_registry_callback - Set the callback that will be used by theme_get_registry() to fetch the registry.
  49. _theme_save_registry - 将主题注册表缓存写入到数据库.
  50. _theme_table_cell - 为 theme_table() 输出某表格单元的HTML.

常量 Constants

  1. MARK_NEW - Mark content as being new.
  2. MARK_READ - Mark content as read.
  3. MARK_UPDATED - Mark content as being updated.

 

8.x：
drupal_common_theme为.inc文件中的主题提供主题注册。

drupal_find_theme_functions允许主题和/或主题引擎发现重写的主题功能。

drupal_find_theme_templates允许主题和/或主题引擎轻松发现重写的模板。

drupal_theme_rebuild强制系统重建主题注册表。

template_preprocess为预处理器和模板添加一组默认的辅助变量。

template_preprocess_breadcrumb准备面包屑模板的变量。

template_preprocess_container准备容器模板的变量。

template_preprocess_datetime_form为datetime表单元素模板准备变量。

template_preprocess_datetime_wrapper为datetime表单包装器模板准备变量。

template_preprocess_field准备字段模板的变量。

template_preprocess_field_multiple_value_form为各个表单元素模板准备变量。

template_preprocess_html准备HTML文档模板的变量。

template_preprocess_image准备图像模板的变量。

template_preprocess_install_page准备安装页面模板的变量。

template_preprocess_item_list准备项目列表模板的变量。

template_preprocess_links准备链接模板的变量。

template_preprocess_maintenance_page准备维护页面模板的变量。

template_preprocess_maintenance_task_list准备维护任务列表模板的变量。

template_preprocess_page准备页面模板的变量。

template_preprocess_region准备区域模板的变量。

template_preprocess_table准备表格模板的变量。

template_preprocess_time准备时间模板的变量。

theme_get_registry获取主题注册表。

theme_get_setting检索当前主题或给定主题的设置。

theme_get_suggestions从路径参数生成一个建议数组。

theme_render_and_autoescape为主题功能转义和呈现变量。

theme_settings_convert_to_config将主题设置转换为配置。

_field_multiple_value_form_sort_helper回调usort（）内template_preprocess_field_multiple_value_form（）。

_system_default_theme_features返回默认主题功能的数组。

_template_preprocess_default_variables将与钩子无关的变量返回到template_preprocess（）。

 

jib附加到page：将库附加到页面

通过twig模板附加库       

{{ attach_library('fluffiness/cuddly-slider') }}

附加一个库到所有页面  在*.info.yml

name: Example
type: theme
core: 8.x
libraries:
  - fluffiness/cuddly-slider

将一个库附加到页面的一个子集

例如，如果你想把JavaScript附加到维护页面，那么“HOOK”部分就是“maintenance_page”，你的函数看起来像这样：
function fluffiness_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

主题Drupal 8

 
 

将样式表（CSS）和JavaScript（JS）添加到Drupal 8主题中

 
最后更新于 
2017年12月20日
 

这个文件是不完整的。添加更多信息。

 

在Drupal 8中，样式表（CSS）和JavaScript（JS）通过相同的系统加载模块（代码）和主题，适用于所有资源库。

Drupal使用高层原则：资产（CSS或JS）只有在你告诉Drupal的时候才加载它们。Drupal不会加载每个页面上的所有资源，因为它会降低前端性能。

与Drupal 7的区别

与Drupal 7相比，有四个重要的区别：

  1. 该   文件已经取代了    文件（具有相同的数据）。THEME.info.ymlTHEME.info
  2. 该stylesheets属性（用于添加CSS） 已被删除并替换为THEME.info*.libraries.yml. 
  3. 该scripts属性（用于添加JS） 已被删除，也被替换THEME.info*.libraries.yml.
  4. 只有CSS，需要在页面上的JS将被加载。例如JQuery  不再自动加载，  除非在中明确指定  。如果您的主题需要jQuery或其他资源，您要加载到所有页面上，添加它们 *.libraries.yml*.libraries.yml.

这个过程

加载CSS或JS资源：

  1. 使用适当的命名约定和文件结构将CSS或JS保存到文件中。
  2. 定义一个“库”，它可以同时包含CSS和JS文件。
  3. 将库连接到所有页面，特定的Twig模板或预处理函数中的渲染元素。

定义一个库

在主题文件夹的文件中定义所有的资产库  。如果您的主题是命名的，文件名应该是文件中的每个“库”是一个详细的CSS和JS文件（资产），如下所示：*.libraries.ymlfluffinessfluffiness.libraries.yml

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

在这个例子中，JavaScript：  位于 主题的  目录中。JS也可以来自外部URL或包含的CSS文件。有关连接外部库的详细信息，请参阅CDN /外部托管的库。cuddly-slider.jsjs

也可以将多个库添加到同一个 文件中，只在第一个文件的下面添加它，例如：*.libraries.yml

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}

cuddly-slider2:
  version: 1.x
  css:
    theme:
      css/cuddly-slider2.css: {}
  js:
    js/cuddly-slider2.js: {}

请记住，默认情况下，Drupal 8不再在所有页面上加载jQuery，因此，例如，如果需要JQuery，您必须  在包含jQuery的核心库（Drupal核心提供jQuery，而不是模块或主题）上声明依赖项。在这种情况下，用一个扩展名后跟一个斜杠来声明依赖项，然后是库名。如果另一个库需要  声明：，主题名称，后面是库名称。您不能将单个文件声明为依赖项，而只能是一个库。cuddly-slidercore/jquerycuddly-sliderfluffiness/cuddly-slider

所以，为了使jQuery可用，我们将上面的代码更新为：cuddly-slider

cuddly-slider:
  version: 1.x
  css:
    theme:
      css/cuddly-slider.css: {}
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery

大多数主题将使用资源库，样式表（CSS文件）需要在主题处于活动状态的每个页面上加载。global-styling

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

正如你上面所看到的， 现在可以将媒体属性定义为CSS资产声明结尾的值（与Drupal 7中媒体属性是属性的子项不同）。 media: printstylesheets

资产加载顺序

正如您所期望的那样，列出文件的顺序是它们将加载的顺序。默认情况下，所有JS资源现在加载在页脚中。关键UI元素的JS，除非他们相应的JS已经运行，否则不能被显示，如果需要的话可以加载到标题中，如下所示：

js-header:
  header: true
  js:
    header.js: {}

js-footer:
  js:
    footer.js: {}

将该header属性设置  为true，表示该资产库中的JavaScript资源处于“关键路径”中，并应从标题中加载。以这种方式声明的库的任何直接或间接依赖项也将自动从头中加载，不需要单独声明它们以使其可用。这就是“关键路径”一词的含义，一旦资产被声明在标题中，那么资源及其所有依赖就会首先加载。

CSS属性

以下属性是可选的，并按CSS资源应用。

浏览器

基于浏览器有条件地加载资产。

 
{ IE: 'lte IE 9', '!IE': false }
组

资产按组进行汇总。
默认值：放置资产的SMACS组。

 很少使用
媒体

媒体类型。

 
{ media: print }
缩小的

资产是否已经缩小。
默认：false

 
{ type: external, minified: true }
预处理 资产是否应该汇总。
默认值：true		 
{ preprocess: false }
类型 资产的来源。
默认：文件		 
{ type: external, minified: true }
重量

调整相对于其他资产的订单（在同一SMACS组内）。
默认值：0.使用-50到+50之间的数字。

 
{ weight: 1 }

JS属性

以下属性是可选的，并且适用于每个JS资源。

属性

 其他脚本属性。 
{ type: external, attributes: { async: true } }
浏览器 基于浏览器有条件地加载资产。 
{ IE: 'lte IE 9', '!IE': false }
预处理 资产是否应该汇总。
默认值：true		 
{ preprocess: false }
类型 资产的来源。
默认：文件		 
{ type: external, minified: true }
重量 调整相对于同一组内其他资产的顺序
（设置，库，默认，主题）。		 
{ weight: 1 }

重写和扩展库

你必须去覆盖定义库中它们可以是重写或使用扩展  或  。您添加的覆盖将被子主题继承。*.info.yml*.libraries.ymllibraries-overridelibraries-extend*.info.yml

stylesheets-remove 在文件中使用  的  属性已被弃用，并将在Drupal 9.0.x中被删除。该物业已被删除。*.info.yml stylesheets-override

libraries-override

创建覆盖时需要使用的逻辑是：

  1. 使用原始模块（或核心）名称空间作为库名称。
  2. 使用最近覆盖的路径作为键。
  3. 该路径应该是文件的完整路径。

例如：

libraries-override:
  contextual/drupal.contextual-links:
    css:
      component:
        /core/themes/stable/css/contextual/contextual.module.css: false

这 是核心库的命名空间，是该库  最近覆盖的完整路径。在这种情况下，该文件已被覆盖contextual/drupal.contextual-links/core/themes/stable/css/contextual/contextual.module.css:false.

这里需要注意的是，只有最后一部分是实际的文件系统路径，其他部分是指名称空间。的  和线反映库的结构正被重写。css:component:

使用这个时请记住，依赖于文件系统路径意味着如果您的站点的文件结构发生更改，则可能会破坏此路径。出于这个原因，通过使用流包装来消除对完整路径的依赖是个问题。

下面是一些其他的方法来  删除或替换您的主题从模块或主题继承的CSS或Javascript资源或整个库。libraries-override

libraries-override:
  # Replace an entire library.
  core/drupal.collapse: mytheme/collapse
  
  # Replace an asset with another.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css

  # Replace an override asset from stable:
  contextual/drupal.contextual-toolbar:
    css:
      component:
        /core/themes/stable/css/contextual/contextual.toolbar.css: css/contextual.toolbar.css

  # Replace a core module JavaScript asset.
  toolbar/toolbar:
    js:
      js/views/BodyVisualView.js: js/views/BodyVisualView.js

  # Remove an asset.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
  
  # Remove an entire library.
  core/modernizr: false

libraries-extend

libraries-extend提供了一种主题方式，通过在附加库时添加附加的主题依赖库资源来更改库的资源。是通过扩展具有任意数量的其他库的库来指定的。
libraries-extend

这对于在主题中对某些组件进行不同的设计是完美的，同时在全局CSS中不会这样做。即定制组件的外观，而无需在每个页面上加载CSS 。

# Extend drupal.user: add assets from classy's user libraries.
libraries-extend:
  core/drupal.user: 
    - classy/user1
    - classy/user2

将库附加到页面

您加载的某些库可能并不是所有页面都需要的。为了获得更快的性能，请不要在没有使用库的地方加载它们。以下是如何选择性加载库的示例。

通过树枝模板附加库

您可以使用 任何文件中的函数将资源库附加到Twig模板，如下所示：attach_library()*.html.twig

{{ attach_library('fluffiness/cuddly-slider') }}
<div>Some fluffy markup {{ message }}</div>

附加一个库到所有页面

要将库附加到使用主题的所有页面，请在主题文件中的关键字下方声明：*.info.ymllibraries

name: Example
type: theme
core: 8.x
libraries:
  - fluffiness/cuddly-slider

列出尽可能多的图书馆，所有这些都将被加载到每一页上。

编辑后 或 文件，记得要  清除缓存，以便新信息被加载到Drupal的。*.info.yml*.libraries.yml

将一个库附加到页面的一个子集

在某些情况下，您并不需要您的图书馆对所有网页都有效，而只是网页的一部分。例如，只有在显示某个块时，或者正在显示某个节点类型时，才可能需要使用库。

主题可以通过在文件中实现一个函数来实现，使用主题的机器名替换“THEME”，用主题钩的机器名替换“HOOK”。THEME_preprocess_HOOK().theme

例如，如果你想把JavaScript附加到维护页面，那么“HOOK”部分就是“maintenance_page”，你的函数看起来像这样：

function fluffiness_preprocess_maintenance_page(&$variables) {
  $variables['#attached']['library'][] = 'fluffiness/cuddly-slider';
}

你可以为其他主题钩子做类似的事情，当然你的函数也可以有逻辑，例如检测在“block”钩子中预处理哪个块，“node”钩子是哪个节点类型等等。

重要的提示！在这种情况下，您需要指定与您的条件相对应的缓存性元数据！上面的例子无条件地工作，所以不需要缓存性元数据。最常见的用例可能是基于当前路由附加某个资产库的地方：

function fluffiness_preprocess_page(&$variables) {
  $variables['page']['#cache']['contexts'][] = 'route';
  $route = "entity.node.preview";
  if (\Drupal::routeMatch()->getRouteName() === $route) {
    $variables['#attached']['library'][] = 'fluffiness/node-preview';
  }
}

附加可配置的JavaScript

在某些情况下，您可能希望将JavaScript添加到依赖某些计算​​的PHP信息的页面。

在这种情况下，创建一个JavaScript文件，像以前一样定义和附加一个库，但是也要附加JavaScript设置，并通过drupalSettings（Drupal 7的后续版本）让JavaScript文件读取这些设置。但是，为了使我们的JavaScript文件可用，我们必须完成与使jQuery可用一样的工作：我们必须声明它的依赖关系。Drupal.settingsdrupalSettings

那么那就变成：

cuddly-slider:
  version: 1.x
  js:
    js/cuddly-slider.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

和

function fluffiness_page_attachments_alter(&$page) {
  $page['#attached']['library'][] = 'fluffiness/cuddly-slider';
  $page['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar';
}

'bar'计算值在哪里？（请注意，缓存性元数据在这里也是必要的！）

然后将能够访问（将会）：cuddly-slider.jsdrupalSettings.fluffiness.cuddlySlider.foo=== 'bar'

(function ($, Drupal, drupalSettings) {

  'use strict';

  Drupal.behaviors.mybehavior = {
    attach: function (context, settings) {
      
      console.log(drupalSettings.fluffiness.cuddlySlider.foo);
      
    }
  };

})(jQuery, Drupal, drupalSettings);
又如：

为一个子集的页面附加库

function aegan_preprocess_page(&$vars) {

    $vars['#attached']['library'][] = "theme/custom-styling";
    //附加可设置的JS
    //在某些情况下，你可能希望根据一些PHP的计算信息来附加JS到页面上。 文档请看：http://drupalchina.cn/node/5548
    $vars['#attached']['drupalSettings']['aegan']['flexslider']['animation'] = theme_get_setting('slideshow_animation', 'aegan');
    $vars['#attached']['drupalSettings']['aegan']['flexslider']['slide_speed'] = theme_get_setting('slideshow_slide_speed', 'aegan');
    $vars['#attached']['drupalSettings']['aegan']['flexslider']['animation_speed'] = theme_get_setting('slideshow_animation_speed', 'aegan');

}

然后在js文件中就可以拿到他的值：

jQuery(document).ready(function() {
    var animation = drupalSettings.aegan.flexslider.animation;
    var slideSpeed = drupalSettings.aegan.flexslider.slide_speed;
    var animationSpeed = drupalSettings.aegan.flexslider.animation_speed;

}







 

关于js的：https://www.drupal.org/docs/8/theming-drupal-8/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme#configurable-javascript

 

每个主题在Drupal的管理后台都有自己的设置页，路径是admin/appearance/settings/THEMENAME。设置页上一般都有表单，带有诸如Logo图像和Favicon图标等标准的设置。

在Drupal 8里，通过在“THEMENAME.theme” 文件或在“theme-settings.php”文件里添加THEMENAME_form_system_theme_settings_alter(&$form, $form_state)钩子函数，可更改主题设置表单。详细用法可参考“Drupal 8的Form API”、“表单和渲染表单元素”一览表、hook_form_FORM_ID_alter() 等文档。

举个例子：有个“foo”主题，要在它里面添加一个单行文本字段，其默认值是“blue bikeshed”。则可在foo/foo.theme文件或foo/theme-settings.php文件里添加如下代码：

function foo_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface &$form_state, $form_id = NULL) {
  // 一个变通方法，为了解决核心的一个影响到管理主体的bug，详见 issue #943212.
  if (isset($form_id)) {
    return;
  }

  $form['foo_example'] = array(
    '#type'          => 'textfield',
    '#title'         => t('Widget'),
    '#default_value' => theme_get_setting('foo_example'),
    '#description'   => t("Place this text in the widget spot on your site."),
  );
}

为了给添加的表单元素设置默认值，需要创建一个文件config/install/THEME.settings.yml文件，只需要在里面添加一行：SETTING_NAME: DEFAULT_VALUE。对于例子中的foo主题，需要编辑foo/config/install/foo.settings.yml文件并添加这行：

foo_example: blue bikeshed

在主题里的任意PHP文件里，都可以像这样取到用户设置的值：

$foo_example = theme_get_setting('foo_example');

注意：主题作者可以使用高级Form API来创建复杂、动态化的表单（如：自动完成、可折叠的fieldset）。

在主题文件中获取设置值

在THEMENAME.theme文件里添加preprocess函数可在Twig文件中添加新的自定义变量。

$variables['varname'] = theme_get_setting('varname')

例如：欲在node.html.twig文件里添加foo_example设置，先要在foo.theme文件里添加：

<?php
function foo_preprocess_node(&$variables) {
$variables['foo_example'] = theme_get_setting('foo_example');
}

然后在node.html.twig文件里就可以像访问任何普通的Twig变量一样来访问foo_example：

{{ foo_example }}
posted @ 2017-12-22 10:58  虚无缥缈的云  阅读(672)  评论(0)  编辑  收藏  举报