使用 Django 轻松构建规范 AMP 页面的模板标签和中间件。
项目描述
django-canonical-amp
一小部分工具旨在让使用Django构建规范的AMP页面变得更容易一些。
安装
要启用此包的功能，您需要将其添加到项目设置的各个键（默认为 settings.py），就像其他 Django 应用程序一样。
INSTALLED_APPS
django-canonical-amp 需要添加到您安装的应用程序中。
INSTALLED_APPS = [
# ...
'amp',
]
模板
此外，您需要更新模板设置以使用 django-canonical-amp 后端，它只是 Django 默认后端的包装器。
TEMPLATES = [
{
'BACKEND': 'amp.template.backends.amp.AmpTemplates',
# ...
},
]
中间件
此步骤是可选的，但如果您想直接从您的 Django 应用程序提供服务器端渲染的 AMP，您可以将转换器中间件添加到您的堆栈中。
重要提示：这是实验性的。通过使用从amppackager的 Go 实现构建的共享库来进行转换。该软件包附带linux/amd64和darwin/amd64操作系统的编译版本。
如果您想使用此中间件，您还需要确保您的生产系统能够执行对https://cdn.ampproject.org/rtv/metadata的请求，以便转换器能够获取当前运行时版本。
MIDDLEWARE = [
# ...
'amp.middleware.AmpOptimizerMiddleware',
]
这个中间件需要在 Django 之前执行，django.middleware.gzip.GZipMiddleware以便转换器能够改变响应。
如果您使用此中间件，您可以AMP_REWRITE_URLS在设置中另外设置False. 通过这样做，您可以指示转换器保留您的 URL，并且不要将它们重写为 AMP 缓存 URL - 这有利有弊：尽管不能保证您的内容（和资产）是缓存的，但交付时间可能会更好已经从缓存中获得。此设置默认为not DEBUG不重写所有非生产环境的 URL。
依赖于您的应用程序提供的 API 端点的 AMP 组件需要根据AMP 的 CORS 规范来提供它们。django-canonical-amp 附带另一个添加所需标头的中间件。要使其正常工作，请确保您的服务器能够访问https://cdn.ampproject.org/caches.json。然后将中间件添加到您的堆栈中：
MIDDLEWARE = [
# ...
'amp.middleware.AmpCorsMiddleware',
]
用法
包的基本功能是安装后可用的两个模板标签。它们使其能够动态定义使用的AMP 组件。为了让他们在<head>您的 HTML 中添加标签，请确保您添加{% amp.components %}标签，如下所示：
{% load amp %}
<!DOCTYPE html>
<html ⚡ lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="{{ description }}">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
{% amp.components %}
<!-- This will expand to a list of <script> tags:
<script async custom-element="amp-..." src="https://cdn.ampproject.org/v0/amp-...-0.1.js"></script>
-->
<style amp-custom>
{% block style %}
{% endblock %}
</style>
然后，您可以在模板中的其他位置通过调用来定义依赖项，{% amp.require_component "<component>" "<version>" %}如下例所示：
{% if youtube_id %}
{% amp.require_component "amp-youtube" %}
<amp-youtube
data-videoid="{{ youtube_id }}"
layout="responsive"
width="480" height="270"></amp-youtube>
{% endif %}
如果在上面的示例中youtube_id评估为，则不会将扩展程序注入您的页面，并且它将保持 AMP 有效。Falseamp-youtube
版本可以省略。然后它将默认为 0.1。
