如果您希望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。
评论