📌  相关文章
📜  如何将 AMP 添加到 Django 项目？

📅  最后修改于: 2022-05-13 01:54:46.354000             🧑  作者: Mango

如何将 AMP 添加到 Django 项目？

博客主要需要内容，但这并不意味着您的博客将位于 Google 搜索之上。为此，您需要速度、安全性、用户群，首先搜索引擎需要知道您的博客存在。我们将添加 AMP 以提高速度。这篇文章是 Django 博客 CMS 项目的延续。在这里查看 – 使用 Django 构建博客 CMS（内容管理系统）

放大器

AMP（Accelerated Mobile Pages）是由 AMP 开源项目开发的开源 HTML 框架。它最初由谷歌创建，作为 Facebook Instant Articles 和 Apple News 的竞争对手。 AMP 针对移动网络浏览进行了优化，旨在帮助加快网页加载速度。它们在 JavaScript 中受到限制。

创建 AMP 模板 –

我们将在我们的博客模板文件夹中创建一个应用模板，并使用 .amp.html 扩展名保存它

HTML
{% load ampimg %}


  
    
    {{ object.title }}
    
    




    
    
    
    
    
    
    
    
    
    
    
  
  


  
☰

  
GeeksForGeeks




  
✕

  
    
       
  • Posts
    • 
       
  • RSS
    • 
       



{{ object.author.first_name }} {{ object.author.last_name }} | {{ object.created_on }}


For Dark mode and better view on desktop, Go to our 

 
        
{{ object.content | ampimg | safe }}

 
       

    
© GeeksForGeeks

  

Python3
import re
from django import template
 
register = template.Library()
 
@register.filter(name ="ampimg")
def ampimg(content):
    img_pattern = r'(]+>)'
    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 = "".format(img_src)
            content = content.replace(img, amp_img)
    return content

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"

Python3
urlpatterns = [
  .....
# amp route
    path('amp//', views.postdetailamp.as_view(), name ='post_detail_amp'),
  .....
]

在 AMP 中处理图像 –

由于 AMP 即使使用图像也受到限制，我们为放大器和非放大器页面使用相同的图像来克服这些问题，我们将创建另一个文件，以帮助我们在需要时更改放大器的图像。转到博客应用程序目录并创建 templatetags 目录。在 templatetags 目录中创建一个空的 __init__.py 文件。将下面的代码粘贴到 ampimg.py 文件中，我们就完成了

蟒蛇3 

import re
from django import template
 
register = template.Library()
 
@register.filter(name ="ampimg")
def ampimg(content):
    img_pattern = r'(]+>)'
    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 = "".format(img_src)
            content = content.replace(img, amp_img)
    return content

为 AMP 创建视图 –

现在转到您的应用程序 views.py 文件并添加以下模板

蟒蛇3 

# 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"

为放大器添加路由

现在我们将路由我们的 AMP 页面以便它可以访问，转到您的应用程序的 urls.py 文件并添加路由

蟒蛇3 

urlpatterns = [
  .....
# amp route
    path('amp//', views.postdetailamp.as_view(), name ='post_detail_amp'),
  .....
]

示例 AMP 帖子页面

示例帖子页面

可扩展的菜单

可扩展的侧边菜单

示例移动页面

示例移动页面