drupal

drupal 图书教程

由 hrs, 29 七月, 2019

配置AddToAny

标签
drupal

所述AddToAny的模块提供为Drupal共享按钮，包括AddToAny的通用共享按钮，Facebook，微博，Pinterest的，WhatsApp的，书签交易，Google +和许多更多。

配置展示位置

默认情况下，共享按钮放置在文章和页面上的可调整字段中。

要配置展示位置，请使用每种内容类型的“管理显示”表单，例如“  结构” >“ 内容类型” >“ 文章” >“ 管理显示”。

您可以在AddToAny的配置页面的“实体”部分中切换AddToAny可用的内容实体。

配置AddToAny

要配置AddToAny选项，请转至管理 > 配置 > Web服务 > AddToAny。

配置共享按钮

您可以通过编辑“服务按钮HTML代码”框来自定义启用的共享按钮。有关详细信息，请参阅AddToAny服务按钮文档。

配置其他选项

AddToAny的Drupal模块文档

有关 其他AddToAny功能示例，请参阅AddToAny的Drupal文档，例如：

AddToAny的一般网站文档

您还可以浏览AddToAny的一般文档，了解可能还没有Drupal特定文档的功能，例如：

对于这些AddToAny功能，您可以将示例HTML插入自定义块。使用一般网站示例时请注意：

无需再次加载page.js

AddToAny模块已经有效加载，因此您不需要通用示例中的以下行：page.js

<script async src="https://static.addtoany.com/menu/page.js"></script>

在“附加JavaScript”框中避免使用HTML标记

请务必仅在配置 > Web服务 > AddToAny > 其他选项的 “其他JavaScript”框中放置JavaScript代码（而非HTML代码）。使用常规网站示例时，请勿插入  或标记。<script></script>

避免在附加CSS框中使用HTML标记

这同样适用于CSS代码示例和“附加CSS”框。使用常规网站示例时，请勿插入或标记。<style></style>

评论

由 hrs, 28 七月, 2019

将主要主题转换为AMPHtml

标签
drupal

如果您希望AMP页面看起来像常规页面，则需要将“普通”主题转换为AMP主题。8.3分支中的一个新功能是AMP主题不必是AMPTheme的子主题，它可以是主要主题的子主题。

有效的AMP需要删除所有非AMP javascript，这意味着您无法使用基于javascript的主题（如Bootstrap）执行此操作。这仅适用于您拥有依赖CSS而非javascript进行页面增强的主题。Flex框和CSS网格是AMP主题的重要基础。

通过子类化常规主题并仅在AMP子主题中进行更改，您可以最大限度地减少使用普通主题的页面与AMP页面之间的差异。AMPTheme模块包括一个这样的例子，Bartik AMP，它是核心Bartik主题的子主题。

在阅读本指南时请参阅Bartik AMP主题，该指南介绍了创建它所涉及的步骤。然后，您可以复制这些步骤以创建自己主题的自定义子主题。

信息文件：bartik_amp.info.yml

创建一个新的空主题，将其命名为bartik_amp，并使其成为主要主题的子主题。

对bartik_amp.info.yml进行以下添加，以确保主题在每个页面上加载AMP运行时javascript。任何不扩展另一个主题的AMP主题都需要此步骤。

libraries: - amp/runtime

使用libraries-override来删除AMP主题中我们不想要的东西，所有javascript库以及尽可能多的css文件以减少css的整体大小。在Bartik AMP主题中，您将看到一个非常长的已删除库和css列表。

一些javascript库包括javascript和css。由于css与不存在的javascript有关，因此删除整个库应该是安全的。

当您不想删除整个库时，删除css会更困难。在这种情况下，您可以通过在添加它们的库的名称下列出要删除的各个css文件，并在文件名后面添加。 : false

识别要删除的css文件的一种方便方法是使用AMP页面的调试功能。转到任何AMP页面并附加到网址。这将显示已聚合到页面中的css列表，其中包含每个文件的大小以及总css文件大小。目标是删除AMP页面上不需要的任何css，以使总大小减少到50,000字节或更少。好的候选者是与删除的javascript相关的css文件，以及每个页面上不需要的css，并且不会在AMP页面上使用。&debug#development=1

检查Bartik AMP主题中的bartik_amp.info文件以获取最新代码，但是看起来像这样：

# Remove unnecessary css files to reduce css size. Css must be <= 50kb. # Also remove css and js libraries added by contrib modules. libraries-override: # Remove some Bartik css. bartik/global-styling: css: component: css/components/form.css: false css/components/ui.widget.css: false css/components/ui.dialog.css: false css/components/ui-dialog.css: false css/components/forum.css: false # Remove some Classy css. classy/base: css: component: css/components/form.css: false css/components/tabledrag.css: false css/components/tablesort.css: false css/components/tableselect.css: false css/components/ui-dialog.css: false # Remove some system css. system/base: css: component: /core/themes/stable/css/system/components/autocomplete-loading.module.css: false /core/themes/stable/css/system/components/tabledrag.module.css: false /core/themes/stable/css/system/components/tablesort.module.css: false /core/themes/stable/css/toolbar/toolbar.module.css: false; # Remove all the core libraries that add javascript. core/backbone: false core/classList: false core/ckeditor: false core/domready: false core/drupal: false tracker/history: false user/drupal.user: false user/drupal.user.permissions: false views/views.ajax: false views_ui/views_ui.admin: false views_ui/views_ui.listing: false ...

HTML标记：html.html.twig

将主题的原始html.html.twig复制到新主题中，并进行以下更改：

在模板的头部，将放大器添加到html标签：变为<html{{ html_attributes }}><html amp{{ html_attributes }}>

从页脚中删除，将不允许任何页脚JavaScript。<js-bottom-placeholder token="{{ placeholder_token }}">

将以下样板代码添加到模板的head部分：

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

主题文件：bartik_amp.theme

创建bartik_amp.theme，并根据需要添加钩子：

我们清理了info文件中的大多数库，但是有一个javascript文件很晚才添加，不会被删除。修复它在主题中。如果你有任何其他顽固的javascript或css文件，你可以这样删除它们。

/** * Implements hook_library_info_alter(). */ function bartik_amp_library_info_alter(&$libraries, $extension) { // This library persists even if listed in libraries-override. // This code will pull it out for good. if ($extension == 'core' && isset($libraries['html5shiv'])) { unset($libraries['html5shiv']); } }

如果您使用核心工具栏模块，则还应启用AMP工具栏模块。这会将工具栏移动到放大器侧边栏并垂直显示。核心模块向页面添加类，假设工具栏是水平的，因此您可以在主题中调整这些类：

/** * Implements hook_preprocess_html(). * * Reset toolbar classes and add sidebar toggle button to the header. */ function bartik_amp_preprocess_html(&$variables) { // AMP Toolbar wrapped the toolbar in amp-sidebar, which is always // vertical. Change the page classes to reflect that. // @see toolbar.html.twig. if (!empty($variables['page_top']['toolbar'])) { if (!empty($variables['attributes']) && $variables['attributes'] instanceof Attribute) { $variables['attributes']->removeClass('toolbar-horizontal'); $variables['attributes']->addClass('toolbar-vertical'); } else { $variables['attributes'] = new Attribute($variables['attributes']); $variables['attributes']->addClass(['toolbar-tray-open', 'toolbar-vertical', 'toolbar-fixed', 'toolbar-loading']); } } }

模板

您需要覆盖几个核心树枝模板。最重要的是image.html.twig，因为它会将所有图像转换为使用<amp-image> </ amp-image>。将AMPTheme或Bartik AMP中的模板复制到您的自定义主题中。如果您的主题包含任何其他具有无效标记的模板，请创建副本并修复标记。

如果您的主题有附加javascript的twig文件，请创建一个离开javascript的模板副本。

系统品牌块

所有AMP主题都适用此步骤。有一个特殊的系统品牌块应该在AMP页面上使用。为AMP主题配置块时，请务必省略标准系统品牌块，而是使用特殊的AMP系统品牌块。AMP块需要您识别徽标图像的宽度和高度。请注意，AMP徽标图像不应超过600像素，不得高于60像素。标准系统标记块会创建无效的AMP标记，在您将其切换之前，您将看到验证错误。

验证标记

在Chrome中启用新主题，并使用Chrome开发者工具检查inspect> console。您应该看到Powered by AMP⚡HTML。这意味着Google现在知道这是一个AMP页面。这并不意味着它是有效的AMP。

如果您的页面无效，您将在控制台中看到一系列警告，描述需要修复的问题。页面上可能仍然存在javascript，或者css可能太大，或者页面可能包含无效元素，因为您没有使用AMP格式化程序。你必须逐步解决问题并修复它们，直到你获得有效的AMP。

评论

由 hrs, 28 七月, 2019

AMP格式化程序和块

标签
drupal

在可能包含AMP无效内容的字段上使用AMP格式化程序非常重要，例如图像或iframe，或者可能包含无效标记的正文文本。 

早期版本的AMP提供了特殊的AMP格式化程序，但它们在普通页面上无法使用。8.3有许多新的格式化程序和块，它们完全自给自足。它们可以在任何地方使用，而不仅仅是AMP页面 因此，如果您愿意，可以使用AMP社交帖子格式化程序作为显示社交帖子的主要方法。同样适用于新的AMP社交分享区块。

这样可以更轻松地减少AMP和非AMP页面之间的差异，并且可以创建一个仅限AMP的站点，主要主题创建AMP有效标记。

许多这些格式化程序和块共享相似的设置。通常有“布局”设置以及“宽度”和“高度”设置。设置这些选项的表单通常包含指向该组件的AMP文档的链接，以便于理解选项的内容以及应选择的设置。

例如，布局设置具有针对每个选择有效的宽度和高度选项的规则。如果选择“响应”布局，则还必须提供宽度和高度。您无法以百分比形式提供它们，但可以提供纵横比而不是像素，例如width = 16和height = 9。其他布局选项具有不同的宽度和高度设置规则，格式化程序尝试提供一些指导以及文档链接。

格式化程序和块的部分列表包括以下内容：

  • AMP文本格式化程序 - 用于可能包含无效标记的正文字段和其他文本字段。
  • AMP图像格式化程序 - 用于任何图像字段。
  • AMP iFrame格式化程序 - 用于包含iframe嵌入代码的任何文本字段。
  • AMP视频格式化程序 - 用于包含视频文件的任何文件字段。
  • AMP Carousel格式化程序 - 用于多值图像字段以在旋转木马中显示图像。
  • AMP社交帖子格式化程序 - 适用于任何文本或链接字段，假定文本字段包含嵌入代码或链接包含指向社交帖子的链接。
  • AMP系统品牌块 - 核心系统品牌块的替代品，以AMP有效的方式显示您的徽标。
  • AMP社交共享块 - 提供您可以放置​​在任何地区的社交共享块。

评论

由 hrs, 28 七月, 2019

AMP CSS

标签
drupal

AMP要求所有css在页面的头部内联呈现。Drupal默认链接或导入css。这需要AMP主题以非标准方式提供css，忽略核心和贡献模块提供的所有css，并要求用户在他们的主题中复制他们所需的任何css。

8.3分支有一个服务装饰器，按摩所有Drupal的CSS。这意味着AMP主题现在可以正常处理css，其方式与任何其他主题相同。使用Drupal的库系统添加的任何CSS都将自动最小化并按照AMP的要求内联呈现。

AMP还要求内联css不大于50KB。这意味着必须排除一些核心和贡献的CSS。

Drupal的主题系统有一种删除css的方法，包括库排除。8.3分支为该过程提供了一些帮助。将'＆debug＃development = 1'添加到任何AMP网址，您将看到系统创建的内联css大小的摘要，以及聚合到其中的所有css文件及其大小的列表。这样可以更容易地找到可能减少或删除的大型css文件，以保持在所需的css大小限制内。目标是删除AMP页面上不需要的任何css，以使总大小减少到50,000字节或更少。好的候选者是与删除的javascript相关的css文件，以及每个页面上不需要的css，并且不会在AMP页面上使用。

您还可以启用AMP CSS Tree Shaking模块。该模块不需要配置，只需启用它即可。它将自动“摇动”每个AMP页面上的css并删除页面上未使用的任何CSS。它还会缩小页面上的所有标记。使用此模块，您不必将包含的css严格降低到50KB，您可以依靠该模块来执行此操作。如果你有很多css，即使在摇晃之后你也可能超过50KB，所以你必须密切关注它，因为你可能仍然需要手动排除某些样式或库。

更多信息

评论

由 hrs, 28 七月, 2019

AMP8.3中有什么不同

标签
drupal

AMP的8.3分支与早期版本有一些显着差异。您可以在路线图中看到一些计划，但这里列出了一些主要变化。

Schema.org JSON-LD

AMP要求在AMP页面的头部呈现有效的Schema.org JSON-LD。该元数据也在非AMP页面中使用且有用。Schema.org包含大量可能的对象和参数。最初的AMP模块只提供了几个简单的Schema.org参数，并且无法扩展以包含所有这些参数。所述Schema.org元标记模块被设计成容纳Schema.org元数据的爆炸列表。我们现在假设您将使用该模块来配置AMP所需的JSON-LD。

CSS渲染和工具

AMP要求所有css在页面的头部内联呈现。Drupal默认链接或导入css。8.3分支有一个服务装饰器，按摩所有Drupal的css以最小化它并按照AMP的要求将其呈现为内联。这意味着AMP主题通常以与任何其他主题相同的方式处理css。

AMP还要求内联css不大于50KB。8.3分支为该过程提供了一些帮助。将'＆debug＃development = 1'添加到任何AMP网址，您将看到系统创建的内联css大小的摘要，以及聚合到其中的所有css文件及其大小的列表。 

阅读有关在8.3中管理CSS的方式的更多信息。

AMP Javascript

自该模块首次开发以来，已经创建了许多新的AMP javascript库。由于AMP将javascript列入白名单，因此所有这些都必须包含在AMP库文件中，否则将不允许使用。此文件已扩展为包含所有新库和组件。

早期版本的AMP删除了挂钩中所有库的大小，有时会删除不需要删除的内容。新主题使用主题系统中的库覆盖单独删除库。

详细了解如何将常规主题转换为AMP。

AMP组件

AMP组件列表已大大扩展。大多数都以块或字段格式化器的形式提供。这些块和格式化程序完全可以自我依赖，实际上可以在任何地方使用，甚至可以在非AMP页面上使用，以实现AMP和非AMP页面显示之间的一致性。他们每个人都使用Drupal的标准主题系统添加自己的javascript作为附件。 

阅读有关AMP格式化程序和块的更多信息。

评论

由 hrs, 28 七月, 2019

入门

标签
drupal

要求

该AMP PHP库

建议

  • AMP主题  - 提供可以使用的主题或AMP主题的子类。如果您的自定义主题不需要它，则不需要，您知道它与AMP兼容。
  • Schema.org元数据  - AMP模块不需要运行，但是必须创建有效的AMP标记。
  • AMP CSS Tree Shaking - 不是必需的，但可以减少页面上CSS的大小。
  • 如果您启用了核心工具栏模块，还可以启用AMP工具栏模块。
  • 如果启用了核心RDF模块，则还要启用AMP RDF模块。

介绍

AMP模块旨在将Drupal页面转换为符合AMP标准的页面。此时，仅转换节点页面。

安装AMP模块后，可以为任何节点类型启用AMP。此时，AMP内容可用于URL，例如`node / 1？amp`或`node / article-title？amp`。还有用于输出适当AMP组件的文本，图像和视频字段的特殊格式化程序。

安装Drup for Drupal

您应该使用Composer来管理Drupal站点依赖项。

使用Composer，将AMP工具添加到站点项目就像使用Composer添加其他模块或主题一样。在命令行上，在项目根目录中输入以下命令：

composer require drupal/amp

如果要创建自定义AMP主题，请将该主题添加到/ themes目录。

启用AMP

  • 启用AMP模块。
  • 安装至少一个AMP主题，可以是amptheme中包含的ExAMPle子主题或您创建的自定义AMP主题。
  • 要通过用户界面安装AMP子主题，请转到`/ admin / appearance`。
  • 安装AMP主题，但不要将其设为默认主题。AMP主题将仅在AMP页面上自动使用。
  • 转到主题设置页面，`/ admin / appearance / settings / {AMP-SUBTHEME-NAME}`。取消选中此框以使用主题的默认徽标并上传AMP子主题的徽标，然后保存该更改。AMP徽标不应大于60px高和600px宽，因此您可能需要与主要主题不同的徽标。

提供初始AMP配置

转到`/ admin / config / services / amp`并选择您的AMP配置选项：

主题

  • 选择AMP页面的主题。您在上一步中安装的子主题应作为选项显示，这是您应该选择的选项。
  • 选择并保存选项。

内容类型

  • 在“AMP配置”页面顶部找到您的内容类型列表。
  • 单击“启用”链接。
  • 打开“自定义显示设置”字段集，选中AMP，单击“保存”按钮（这会返回AMP配置表单）。
  • 点击该内容类型的“配置”，即可返回AMP查看模式字段设置页面。
  • 在AMP视图模式下，您可以控制每个内容类型在AMP页面上显示的字段。例如，您可能只想在该视图模式下使用标题，图像和正文。
  • 文本，图像和iframe字段有特殊的格式化程序，以便输出AMP组件，因此请务必在AMP视图模式下使用它们。如果正文有可能包含无效元素（如图像或Facebook帖子），请务必使用AMP Text格式化程序作为正文字段。
  • 单击“保存”按钮（这会返回AMP配置表单）。
  • 要在以后更改这些内容，请转到`/ admin / structure / types / manage / {CONTENT-TYPE} / display / amp`并设置每种内容类型的AMP版本的字段。

设置AMP页面的块

转到`/ admin / structure / block / list / {AMP-SUBTHEME-NAME}`并设置AMP页面的块。

重要！ 请务必从AMP主题中删除核心系统品牌块，而不是使用AMP系统品牌块。

删除可能影响AMP页面验证的所有块，例如搜索块。关于在AMP中支持表单存在一个问题，但在此之前，页面上的任何表单都会阻止它进行验证。页面上可能还有其他元素会产生问题，您需要检查任何验证错误消息。

配置AMP的结构化数据

AMP页面要求将Schema.org元数据作为JSON-LD提供在页面的头部。这可以使用Schema.org元数据模块完成。请参阅其项目页面上的文档链接和其他说明。

该模块包含许多子模块，可用于显示各种内容的Schema.org元数据。至少，启用Schema.org Metatag基础模块和Schema.org文章模块。然后配置文章内容类型以显示文章元数据。

模块架构概述

AMP主题

该主题旨在生成AMP标准所需的非常具体的标记。在“放大器”路径上传送的任何节点都会触发AMP主题。与任何Drupal主题一样，AMP主题可以使用子主题进行扩展，从而允许发布者尽可能灵活地自定义AMP页面的显示方式。您可能希望使用自己的样式创建自己的自定义AMP子主题。

AMP 8.3中的一项新功能是能够将AMP主题创建为主要主题的子主题，而不是使用基本AMPTheme。一个例子包含在AMP主题的AMP主题中，它是Bartik的次主题，而不是AMPTheme。您的子主题应该仔细遵循该主题中的示例，以确保它仍然有效。

AMP PHP库

该库将用户输入的HTML分析为富文本字段，并报告可能使HTML不符合AMP标准的问题。该库尽可能地对HTML进行更正，并自动将图像和iframe转换为AMP等效项。PHP库是CMS不可知的，旨在使Drupal模块的Drupal 8和Drupal 7版本以及非Drupal PHP项目都可以使用它。只要在命令中附加`--with-dependencies`，Composer安装就会在添加AMP模块时添加此库。

AMP模块

该模块负责提供Drupal页面的AMP版本的基本功能，包括以下任务：

  • 提供AMP视图模式，因此用户可以决定哪些字段应在页面的AMP版本上以哪种顺序显示。
  • 提供AMP路径，在AMP路径上显示AMP视图模式（即`node / 1？amp = 1`）。
  • 提供常用字段的格式化程序，如文本，图像，视频和iframe，可在AMP视图模式下使用，以显示这些字段的AMP组件。
  • 提供AMP配置页面，用户可以在其中识别哪个主题是AMP主题。
  • 提供AMP视图模式，用户可以识别哪些内容类型应提供AMP页面。
  • 确保不应用作AMP页面的路径生成404而不是损坏的页面。
  • 确保别名路径正常工作，因此如果`node / 1`的别名是`my-page`，`node / 1？amp = 1`的别名为'my-page？amp = 1`。
  • 创建一个系统，以便用户可以预览AMP页面。

body字段存在一个特殊问题，因为它可能包含大量无效标记，尤其是嵌入的图像，视频，推文和iframe。没有简单的方法可以将带有无效标记的blob文本转换为AMP标记。与此同时，这是其他项目将遇到的常见问题。我们的解决方案是一个独立的，独立的AMP PHP库，可以尽可能地将标记从不兼容的HTML转换为AMP。正文的AMP文本字段格式化程序将使用该库在AMP视图模式下呈现正文

如何禁用AMP

如果您选择在您的网站上为一种或所有内容类型禁用AMP，您可以通过位于`/ admin / config / services / amp`的AMP配置页面执行此操作。

  • 查看启用AMP的内容类型列表。
  • 对于您要禁用的每个启用AMP的内容类型，请单击“启用/禁用”链接。
  • 打开“自定义显示设置”字段集，取消选中AMP，然后单击“保存”按钮（这会返回AMP配置表单）。

禁用AMP视图模式后，当“？amp = 1”附加到该内容的URL时，该内容类型将不再显示AMP格式的页面。

评论

由 hrs, 28 七月, 2019

AMP版本8.3

标签
drupal

AMP模块的8.3分支是为加速移动页面（AMP）开发实验性新功能的地方。

  • 可以创建一个AMP主题，它是普通主题的子主题，因此AMP页面看起来更像页面的其他部分。
  • 添加更多AMP组件，如轮播，侧边栏，社交媒体共享等。
  • 可以拥有一个仅限AMP的站点，其中AMP页面是规范页面而不是备用页面。

使用AMP和AMPTheme的8.3版本，它们旨在协同工作。

该站点提供了新分支的文档。AMP设置配置页面和AMP格式化程序和块的设置表单中提供了其他Drupal文档。

入门

下载，安装和配置AMP

8.3中有什么不同

AMP的8.3分支与早期版本有一些显着差异。请在此处查看主要差异列表。

AMP CSS

AMP页面上的css有一些非常具体的规则。这是你需要知道的。

AMP格式化程序和块

8.3有许多新的格式化程序和块，它们可以在任何地方使用，而不仅仅是在AMP页面上。

将主要主题转换为AMPHtml

创建AMP主题作为普通主题的子主题的详细说明。

相关项目

加速移动页面（AMP） 8.x-3.0 +

AMP主题 8.x-3.0

评论

由 hrs, 28 七月, 2019

AMP版本8.2

标签
drupal

AMP模块旨在将Drupal页面转换为符合AMP标准的页面。最初只转换节点页面。其他类型的页面将在以后启用。

安装AMP模块后，可以为任何节点类型启用AMP。此时，AMP内容在诸如或之类的URL上可用。还有用于文本，图像和视频字段的特殊AMP格式化程序。node/1?ampnode/article-title?amp

该AMP主题设计制作的AMP HTML标准要求非常具体的标记。针对?amp路径上传递的任何节点触发AMP主题。与任何Drupal主题一样，AMP主题可以使用子主题进行扩展，从而允许发布者尽可能灵活地自定义AMP页面的显示方式。这也可以使用Drupal的块系统在AMP页面上放置AMP广告块。

该AMP PHP库分析用户输入到富文本字段，并报告有关的问题，这可能使HTML不符合的AMP标准的HTML。尽可能对库进行更正，以使其更符合AMP HTML标准。它还自动转换图像，iframe，推文嵌入HTML，Instagram嵌入HTML和youtube嵌入HTML到他们的AMP HTML等价物。PHP库是CMS不可知的，旨在使Drupal模块的Drupal 8和Drupal 7版本以及非Drupal PHP项目都可以使用它。

要了解有关此模块的更多信息，请参阅官方AMP博客上的这篇文章：“ AMPing up Drupal ”。

要求

介绍

AMP模块旨在将Drupal页面转换为符合AMP标准的页面。此时，仅转换节点页面。

安装AMP模块后，可以为任何节点类型启用AMP。此时，AMP内容在诸如 或之类的  URL上可用  。还有用于输出适当AMP组件的文本，图像和视频字段的特殊格式化程序。node/1?amp=1node/article-title?amp=1

如何为Drupal安装AMP

您应该  使用Composer来管理Drupal站点依赖项。

使用Composer，将AMP工具添加到站点项目就像使用Composer添加其他模块或主题一样：

在命令行上，在项目根目录中输入以下命令：

  • 下载AMP模块及其依赖项，包括AMP库  。composer require drupal/amp
  • 下载AMP主题  。composer require drupal/amptheme

AMP主题提供AMP Base主题和ExAMPle子主题。您可以使用附带的ExAMPle子主题或创建基于AMP Base主题的自定义子主题。如果要创建自定义AMP子主题，请将该子主题添加到/ themes目录。

如何启用AMP

  • 安装至少一个AMP子主题，可以是amptheme中包含的ExAMPle子主题或您创建的自定义AMP主题。AMP子主题应将AMP Base设置为其基本主题; 因此，您无需手动启用AMP Base。
    • 要通过用户界面安装AMP子主题，请转至/ admin / appearance。
    • 要通过Drush的命令行安装AMP子主题，请输入命令  drush en ampsubtheme_example 或  。drush en YOUR_SUBTHEME_NAME
    • 不要将任何AMP主题作为默认主题。AMP主题仅用于AMP页面。
    • 转到主题设置页面  。取消选中此框以使用主题的默认徽标并上传AMP子主题的徽标，然后保存该更改。/admin/appearance/settings/{AMP-SUBTHEME-NAME}
  • 启用AMP模块。请注意，这应该在安装AMP主题后完成。

提供初始AMP配置

  • 转到   并选择AMP配置选项：/admin/config/content/amp

主题

  • 选择AMP页面的主题。不要选择AMP Base主题。您在上一步中安装的子主题应作为选项显示，这是您应该选择的选项。
  • 选择并保存选项。

内容类型

  • 在“AMP配置”页面顶部找到您的内容类型列表。
  • 单击“在自定义显示设置中启用AMP”链接。
  • 打开“自定义显示设置”字段集，选中AMP，单击“保存”按钮（这会返回AMP配置表单）。
  • 单击“配置AMP视图模式”。
  • 在AMP视图模式下，您可以控制每个内容类型在AMP页面上显示的字段。您可能只需要标题，图像和正文。
  • 文本，图像和iframe字段有特殊的格式化程序，以便输出AMP组件，因此请务必在AMP视图模式下使用它们。确保将AMP Text格式化程序用于正文字段。
  • 单击“保存”按钮（这会返回AMP配置表单）。
  • 要稍后更改这些内容，请转到  并设置每种内容类型的AMP版本的字段。/admin/structure/types/manage/{CONTENT-TYPE}/display/amp

分析（可选）

  • 输入您的Google Analytics网络媒体资源ID，然后点击保存。
  • 这将自动添加到您的网页的AMP版本中。

Adsense（可选）

  • 输入您的Google AdSense发布商ID，然后点击保存。
  • 访问   以添加和配置Adsense块到您的布局。/admin/structure/block
  • 每个块都需要宽度，高度和数据槽。

DoubleClick（可选）

  • 输入您的Google DoubleClick for Publishers网络ID，然后点击保存。
  • 访问   以添加和配置将DoubleClick块添加到您的布局。/admin/structure/block
  • 每个块都需要宽度，高度和数据槽。

AMP Pixel（可选）

  • 选中“启用放大器像素”复选框。
  • 填写域名和查询路径框。
  • 点击保存。

设置AMP页面的块

  • 转到  并设置AMP页面的块。 /admin/structure/block/list/{AMP-SUBTHEME-NAME}
    • AMP页面是一个简单的页面，包含标题，内容区域和页脚。您应该从此主题中删除大多数块。我们建议只在页面上显示品牌，标题和内容。如果需要，可以稍后开始并添加更多元素。
    • 如果您希望AMP页面上有广告，请根据需要添加AMP Ad块。广告将使用您的AMP配置中提供的ID。

如何为AMP配置结构化数据

模块架构概述

该  AMP主题  设计制作的AMP标准要求非常具体的标记。针对 路径上传递的任何节点触发AMP主题  。与任何Drupal主题一样，AMP主题可以使用子主题进行扩展，从而允许发布者尽可能灵活地自定义AMP页面的显示方式。这也可以使用Drupal的块系统在AMP页面上放置AMP广告块。?amp=1

AMP Base主题负责将页面的一些较大部分转换为AMP。恰当命名的ExAMPle主题演示了如何使用自定义样式自定义AMP页面的外观。您可能希望使用自己的样式创建自己的自定义AMP子主题。

该  AMP PHP库  分析用户输入到富文本字段，并报告有关的问题，这可能使HTML不符合的AMP标准的HTML。该库尽可能地对HTML进行更正，并自动将图像和iframe转换为AMP等效项。将来可能会提供更多自动转换功能。PHP库是CMS不可知的，旨在使Drupal模块的Drupal 8和Drupal 7版本以及非Drupal PHP项目都可以使用它。添加AMP模块时，Composer安装将负责添加此库。

该模块负责提供Drupal页面的AMP版本的基本功能，包括以下任务：

  • 创建AMP视图模式，以便用户可以决定哪些字段应在页面的AMP版本上以哪种顺序显示。
  • 创建一个AMP路径，它将在AMP路径上显示AMP视图模式（即  ）。node/1?amp=1
  • 为常用字段创建格式化程序，例如可在AMP视图模式下使用的文本，图像，视频和iframe，以显示这些字段的AMP组件。
  • 创建可由主题放置的AMP广告块。
  • 主题可以根据配置选项在适当的位置将AMP像素项放置在页面标记中。
  • 创建一个AMP配置页面，用户可以在其中识别要使用的广告和分析系统，并确定哪个主题是AMP主题。
  • 为用户创建一种方法来识别哪些内容类型应该提供AMP页面，以及一种覆盖单个节点以防止它们显示为AMP页面的方法（用于不能正确转换的奇数页面）。
  • 创建AMP元数据配置页面，用户可以在其中提供AMP页面在Google Top Stories轮播中显示所需的结构化数据。
  • 确保不应用作AMP页面的路径生成404而不是损坏的页面。
  • 确保别名路径正常工作，因此如果  别名为别名  ，   则别名为  。node/1my-pagenode/1?amp=1my-page?amp=1
  • 创建一个系统，以便用户可以预览AMP页面。

body字段存在一个特殊问题，因为它可能包含大量无效标记，尤其是嵌入的图像，视频，推文和iframe。没有简单的方法可以将带有无效标记的blob文本转换为AMP标记。与此同时，这是其他项目将遇到的常见问题。我们的解决方案是一个独立的，独立的  AMP PHP库  ，可以尽可能地将标记从不兼容的HTML转换为AMP。正文的AMP文本字段格式化程序将使用该库在AMP视图模式下呈现正文。

我们已尽最大努力使此解决方案尽可能成为交钥匙，但未来可以在此模块中添加更多解决方案。此时，只有节点页面可以转换为AMP。初始模块支持AMP标记，如  ，  ，  ，  ，  ，和  。将来可能会添加对其他扩展组件的支持。目前，该模块支持Google Analytics，AdSense和DoubleClick for Publisher广告网络。可以在路上添加额外的网络支持。amp-adamp-pixelamp-imgamp-videoamp-analyticsamp-iframe

支持的AMP组件

 可以在路上添加对其他扩展组件的支持  。

如何禁用AMP

如果您选择在网站上为一种或所有内容类型禁用AMP，则可以通过AMP配置页面执行此操作  。/admin/config/content/amp

  • 查看启用AMP的内容类型列表。
  • 对于您要禁用的每种启用AMP的内容类型，请单击“在自定义显示设置中禁用AMP”链接。
  • 打开“自定义显示设置”字段集，取消选中AMP，然后单击“保存”按钮（这会返回AMP配置表单）。

禁用AMP视图模式后，当该内容类型 附加到该内容的URL 时，该内容类型将不再显示AMP格式的页面  。?amp=1

如何在AMP转换时修改UI格式

回顾一下，当 在URL的末尾查看页面时  （或者当   添加到现有查询字符串时），并且该页面具有启用了AMP查看模式的内容类型时，将显示该页面的AMP版本。?amp=1&amp=1

页面AMP版本的总体格式由为站点选择的AMP子主题确定。子主题区域的布局以及为这些区域选择的块决定了AMP页面的整体结构。

通过在AMP视图模式中为该内容类型选择的字段来控制单个AMP页面的内容。这些字段的AMP特定格式化程序提供了自定义AMP元素标记的选项。

特别是，具有大量文本的字段（包括正文字段）可以使用AMP文本格式化程序来利用AMP PHP库。这样可以自动将标记转换为AMP友好标记，这对于视频和图像等嵌入式内容尤为重要。

最终结果应该是有效的AMP标记，可以通过AMP配置页面提供的AMP验证工具进行验证。

评论

drupal