Usage app

The concept of django-amp-tools is render amp for your site from save view as desktop version.

This makes it possible to provide many possible designs instead of just differentiating between a full desktop experience and one AMP version.

After the correct version is somehow chosen by the middlewares, it’s assigned to the request.is_amp_detect attribute. You can use this in your views to provide separate logic.

    <title>My site {% if request.is_amp_detect %}(amp version){% endif %}</title>

You can create own AMP base.html.

My example base_amp.html

<!doctype html>{% load i18n amp_tags %}{% load static from staticfiles %}
<html amp lang="{{ LANGUAGE_CODE }}">
    <meta charset="utf-8">
    <script async src=""></script>
    {% block amp-link %}{% amp_canonical_link request %}{% endblock %}
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style amp-custom>
    {% block amp-custom %}
        {% include "amp/includes/style_amp_custom.css" %}
    {% endblock %}
    {% block amp-ld-json %}{% endblock %}
    <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>
    <link rel="stylesheet" href="">
    <header id="#top" class="amp-site-header">
            <a href="{% url 'home_page' %}">
                <amp-img src="{% static "images/v-2/logo.png" %}" width="145" height="35" class="amp-site-icon"></amp-img>
                {% trans 'Web site development' %}
    {% block content %}
    <h1>{% trans "Bergsoft+ company" %}</h1>
    {% endblock %}

    <footer class="amp-site-footer">
            <h2>{% trans 'Web Development' %}</h2>
                &copy;&nbsp;{% now "Y" %} {{ }}. {% trans "All rights reserved" %}.
            <a href="#top" class="back-to-top">{% trans "Back to top" %}</a>

In your app template folder (blog, for example) create folder amp

for blog detail page blog/tempplates/blog/post_detail.html create AMP version blog/tempplates/blog/amp/post_detail.html with content

{% extends "base_amp.html" %}
{% load i18n blog_tags %}
{% load thumbnail staticfiles %}

{% block content %}
<article class="amp-post-article">
    <header class="amp-post-article-header">
        <h1 class="amp-post-title">{{ object.title|safe }}</h1>
        <div class="amp-post-meta amp-post-byline">
            {% if %}
                <amp-img src="{{ }}" width="24" height="24" layout="fixed"></amp-img>
            {% endif %}
            <span class="amp-post-author author vcard"><i class="fa fa-user-o"></i>  {% trans "Posted by" %} {{ }}</span>

        <div class="amp-post-meta amp-post-posted-on">
            <i class="fa fa-calendar"></i> {{ post.published_at|date:"Y-m-d" }}
    {% if object.picture %}
    <figure class="amp-post-article-featured-image amp-caption">
        <amp-img src="{{ object.picture.url }}" width="738" height="430" alt="{{ object.title|striptags }}"></amp-img>
        {#<p class="amp-caption-text">{{ object.picture_caption|striptags }}</p>#}
    {% endif %}

    <div class="amp-post-article-content">
        {{ post.body_html|safe }}
    <footer class="amp-post-article-footer">
        <div class="amp-post-meta amp-post-tax-category">
            <i class="fa fa-folder-o"></i>
            <a href="{{ post.categories.all.0.get_absolute_url }}"> {{ post.categories.all.0 }}</a>
        {% if post.tags %}
        <div class="amp-wp-meta amp-wp-tax-tag">
            <i class="fa fa-tags"></i>
            {% for tag in post.tags %}
                <a href="{{ tag.get_absolute_url }}"> {{ tag }}</a>
            {% endfor %}
        {% endif %}

{% endblock %}

See result of this code here::


Here is a list of settings that are used by django-amp-tools and can be changed in your own


The name of GET parameter which check in AMPDetectionMiddleware.

Default: 'amp-content'


The value of GET parameter which check in AMPDetectionMiddleware. select AMP version.

Default: 'amp'


This string will be prefixed to the template names when searching for AMP templates. This is useful if you have many flavours and want to store them in a common subdirectory. Example:

from django.template.loader import render_to_string
from amp_tools import set_amp_detect

set_amp_detect(is_amp_detect=True, request=request)
render_to_string('index.html') # will render 'amp/index.html'

# now add this to

# and try again

set_amp_detect(is_amp_detect=True, request=request)
render_to_string('index.html') # will render 'amp-new/amp/index.html'

Default: '' (empty string)


django-mobile‘s template loader can load templates prefixed with the current flavour. Specify with this setting which loaders are used to load flavoured templates.

Default: same as TEMPLATE_LOADERS setting but without 'amp_tools.loader.Loader'.