Un blog principalmente necesita contenido, pero eso no significa que su blog estará en la parte superior de la búsqueda de Google. Para ello, necesitará velocidad, seguridad, base de usuarios y, en primer lugar, los motores de búsqueda deben saber que su blog existe. Agregaremos AMP para la velocidad. Este artículo es una continuación de Blog CMS Project en Django. Echa un vistazo a esto aquí: Creación de blog CMS (Sistema de gestión de contenido) con Django
AMPERIO
AMP (Páginas móviles aceleradas) es un marco HTML de código abierto desarrollado por el Proyecto de código abierto AMP. Originalmente fue creado por Google como un competidor de Facebook Instant Articles y Apple News. AMP está optimizado para la navegación web móvil y está destinado a ayudar a que las páginas web se carguen más rápido. Están limitados en JavaScript.
Creando plantilla AMP –
Crearemos una plantilla de aplicación en nuestra carpeta de plantillas de blog y la guardaremos con la extensión .amp.html
HTML
{% load ampimg %}
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>{{ object.title }}</title>
<meta name="description" content="{{ object.metades}}" />
<meta property="og:title" content="{{ object.title }}">
<meta property="og:site_name" content="GeeksForGeeks">
<meta property="og:url" content="{% url 'post_detail_amp' object.slug %}">
<meta property="og:description" content="{{ object.metades }}">
<meta property="og:type" content="article">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style amp-custom>
body { font-family: 'Raleway', sans-serif; }
footer { text-align: center;
height: 29px;
font-size: 1.2em;
}
#banner {
font-size: 1em;
width: 100%;
text-align: center; }
button {
font-size: 17px;
text-decoration: none;
border: none;
border-radius: 29px;}
#amp_page { font-size: 18px; }
.headerbar {
height: 70px;
top: 0;
width: 100%;
display: flex;
align-items: center;
}
.site-name {
font-size:20px;
font-family: monospace;
margin: auto;
}
#banner {
margin-top: 70px;
text-align: center;
}
.hamburger {
padding-left: 25px;
}
.sidebar {
font-size: 29px;
padding: 60px;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar li a {
text-decoration: none;
font-family: sans-serif;
}
.close-sidebar {
font-size: 1.8em;
padding-left: 25px;
}
#storycontent {text-align: center; }
.storyimages { min-width: 100%;
margin: 0 auto; }
</style>
<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="canonical" href="{% url 'post_detail' object.slug %}">
<link rel="manifest" href="/manifest.json">
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Article",
"headline": "{{ object.title }}",
"description": "{{ object.metades }}",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "{% url 'post_detail' object.slug %}"
},
"author": {
"@type": "Person",
"name": "{{ object.author.first_name }} {{ object.author.last_name }}"
},
"publisher": {
"@type": "Organization",
"name": "GeeksForGeeks",
},
"datePublished": "{{ object.created_on }}",
"dateModified": "{{ object.created_on }}",
"mentions": "{{ object.source }}"
}
</script>
</head>
<body>
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name">GeeksForGeeks</div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="{% url 'posts' %}">Posts</a></li>
<li><a href="{% url 'feed' %}">RSS</a></li>
</ul></amp-sidebar>
<div class="container text-center" id="banner"><h1>{{ object.title }}</h1></div>
<div class="container"><h3 style="text-align: center;">{{ object.author.first_name }} {{ object.author.last_name }} | {{ object.created_on }}</h3>
<p id="amp_page">For Dark mode and better view on desktop, Go to our <span><a href="{% url 'post_detail' object.slug %}"><button class="btn btn-outline-primary">Desktop page</button></a></span></p>
<p id="storycontent">{{ object.content | ampimg | safe }}</p>
</div>
<footer>© GeeksForGeeks</footer>
</body>
</html>
Manejo de imágenes en AMP –
Como AMP está limitado incluso con imágenes y usamos las mismas imágenes para las páginas amp y no amp para superarlas, crearemos otro archivo que nos ayudará a modificar las imágenes para amp cuando sea necesario. Vaya al directorio de la aplicación del blog y cree un directorio de etiquetas de plantilla. En el directorio templatetags, cree un archivo __init__.py vacío. Pegue el siguiente código en el archivo ampimg.py y hemos terminado.
Python3
import re
from django import template
register = template.Library()
@register.filter(name ="ampimg")
def ampimg(content):
img_pattern = r'(<img [^>]+>)'
img_tags = re.findall(img_pattern, content)
img_src_pattern = r'src ="([^"]+)"'
for img in img_tags:
try:
img_src = re.findall(img_src_pattern, img)[0]
except Exception as NoImgSrc:
img_src = None
if img_src:
amp_img = "<amp-img class =\"storyimages\" src =\"{0}\" width =\"360\" height =\"320\" layout =\"responsive\" alt =\"storyimage\">".format(img_src)
content = content.replace(img, amp_img)
return content
Creación de vistas para AMP –
Ahora ve al archivo views.py de tu aplicación y agrega la siguiente plantilla
Python3
# importing models and libraries from django.shortcuts import render from .models import posts from django.views import generic from django.views.decorators.http import require_GET from django.http import HttpResponse # class based view for each post in amp template class postdetailamp(generic.DetailView): model = posts template_name = "page.amp.html"
Agregar rutas para amplificador
Ahora enrutaremos nuestra página AMP para que sea accesible, vaya al archivo urls.py de su aplicación y agregue la ruta
Python3
urlpatterns = [
.....
# amp route
path('amp/<slug:slug>/', views.postdetailamp.as_view(), name ='post_detail_amp'),
.....
]
Ejemplo de página de publicación de AMP
Página de publicación de muestra
Un menú extensible
Un menú lateral extensible
Ejemplo de página móvil
Página móvil de muestra
Publicación traducida automáticamente
Artículo escrito por kushwanthreddy y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA