跳转到主要内容
你行网

Main navigation

  • 首页
  • Drupal
  • 编程与开发
  • 数据库
  • 操作系统与应用
  • 服务器与运维
  • 社区
User account menu
  • 登录

面包屑

  1. 首页

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文档,例如:

  • 分享事件处理和修改
  • 模板和端点参数
  • 链接跟踪和URL缩短器
  • 自定义颜色按钮
  • 图像共享按钮
  • 分享柜台
  • 分享计数恢复

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, 29 七月, 2019

AddToAny共享按钮

标签
drupal

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

配置AddToAny

如何配置共享按钮,放置和其他AddToAny功能。

相关项目

AddToAny分享按钮 8.x.

评论

由 hrs, 29 七月, 2019

访问NASA API

标签
drupal

1.安装它。

1.5。如果您没有,请从NASA获取API密钥。 https://api.nasa.gov/index.html#apply-for-an-api-key

2.转到/ admin / config / services / nasa并使用您的API填写该字段。

3.要显示APOD(当天的天文图片),请转到结构>块布局(/ admin / structure / block)>放置块并选择“NASA APOD”

相关项目

访问NASA API 8.x.

评论

由 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,所以你必须密切关注它,因为你可能仍然需要手动排除某些样式或库。

更多信息

  • 详细了解如何将常规主题转换为AMP
  • 读取样式表的AMP规则

评论

由 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文章模块。然后配置文章内容类型以显示文章元数据。

  • 将您的JSON与文章指南进行比较。
  • 如果没有可供Google阅读的公开页面,您只需将脚本标记复制到结构化数据测试工具中  即可验证所有信息是否符合要求。

模块架构概述

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主题
  • AMP PHP库
  • Schema.org Metatag
  • PHP版本5.5。+

介绍

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配置结构化数据

  • 安装并遵循Schema.org Metatag模块的说明。
  • 当您在该节点上查看源时,您应该在HTML的head部分中看到JSON。
  • 将JSON与https://developers.google.com/search/docs/data-types/articles上提供的指南进行比较。
  • 您可以将脚本元素复制到结构化数据测试工具中,以验证所有信息是否符合要求:https://search.google.com/structured-data/testing-tool。

模块架构概述

该  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-IMG
  • AMP-视频
  • 安培分析
  • 放大器的iframe

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

如何禁用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验证工具进行验证。

评论

分页

  • 首页
  • 前一页
  • …
  • Page 6
  • Page 7
  • Page 8
  • Page 9
  • 当前页 10
  • Page 11
  • Page 12
  • Page 13
  • Page 14
  • …
  • 下一页
  • 末页
drupal
RSS源

友情链接 网站地图 版权信息 联系我们 网址导航 社区

Copyright © 2019 - 2021 你行网 版权所有  粤ICP备19072650号