标签: amp-html

django中加速移动页面？

是否有任何Django开发人员正在构建AMP-HTML页面？

如果我理解正确,AMP-HTML的工作方式是,您为每个页面创建2个单独的文件.普通的HTML结果,以及新的AMP-HTML文件.AMP-HTML文件是普通HTML页面的精简版本,Google使用它来返回加速移动页面(因此称为"加速移动页面").然后,这些文件中的每一个都在头部的标签中相互引用,这告诉Google将AMP文件用于移动结果.

在Django框架中,我想知道如何基于同一组内容创建2个单独的文件.

怎么可能使用可以传递给两个HTML结果的单个上下文？一个结果是普通的HTML页面,另一个是AMP-HTML页面.

在Django中,必须为要返回的每个页面创建一个URL.如何为每个现有URL自动生成第二个URL？此外,如何为每个URL调用单个上下文？

是否可以在视图中完成？例如,返回一个.html扩展名,即AMP页面,然后还为URL呈现模板？

关于如何解决这个问题,我还没有任何答案.寻找反馈和建议.看来这是第一个在Django和AMP-HTML上发布到stackoverflow的问题.它可能不是最后一个.

django amp-html accelerated-mobile-page

Ren*_*kai

2018 03-06

11
推荐指数

1
解决办法

3307
查看次数

目前,我使用Google Maps API生成带有标记(给定一组纬度/长坐标)到指定位置的地图.在AMP HTML中,目前使用amp-iframe扩展程序https://github.com/ampproject/amphtml/tree/master/extensions的方法似乎如此.问题是除非您使用"查看"地图,否则您无法使用带有坐标的Google地图嵌入代码.我没有地方ID,所以我无法使用地方模式.我无法使用"查看"模式,因为它没有标记.我在https://developers.google.com/maps/documentation/embed/guide#overview上看得很高

在包含标记的AMP HTML页面上包含Google地图的正确方法是什么？我在论坛或Github问题上没有看到任何关于此的问题,所以我很好奇是否有其他人遇到过同样的情况.

google-maps amp-html

Du3*_*Du3

lucky-day

10
推荐指数

2
解决办法

7942
查看次数

wordpress:添加<noscript>标签使<head>标签自动关闭

美好的一天.我使用WordPress的网站"AMP"发生器,这个插件的行动之一就是之前刚刚添加biolerplate标签</head>和<noscript>具有降效标签.谷歌搜索控制台不断警告我一个特定的错误:"样板的强制标签'noscript外壳'缺失或不正确."

所以我开始调查.我发现,"东西"是</head><body>在<noscript>开始标记之前注入,如果我改变了放置noscript标签的位置,其他两个也被移动了.

这是呈现的代码:

<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>
</head><body><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

Run Code Online (Sandbox Code Playgroud)

我做了很多测试,似乎<noscript>标签是这个错误的重点.我还读了一些其他的答案,说文档不应该是严格的xhtml 1.1,事实并非如此,事实上这些是在页面上呈现的第一件事:

<!DOCTYPE html>
<html amp lang="it-IT"><head><meta charset="utf-8"><link rel="dns-prefetch" href="https://cdn.ampproject.org">

Run Code Online (Sandbox Code Playgroud)

我试图弄清楚我可以做些什么来解决许多网站上存在的错误,包括不同的插件和主题(以及wordpress版本).

更新: 我试图<noscript>在代码中手动添加一个标签,每次我在<head>部分中添加它,部分都会关闭,<body>部分打开,没有任何类(所以它看起来像一个bug).如果你想看到这个bug,只需到这里查找代码:

https://www.assistenzamalasanita.com/2015/07/errori-medici-durante-il-parto-come-si-valutano/amp/

更新2 禁用所有插件并切换到默认主题对此没有影响.此外,我已经将整个站点复制到另一台服务器上,其中问题不存在,WP站点是相同的,并且serer配置也应该是,但是在工作的站点上我可以看到HTTP请求有一个关于php版本(7.0.2)的属性,其他网站没有.

这可能会影响页面的渲染吗？看到有效的网站:https: //www.doors.it/iride/2017/10/risarcimento-malasanita/amp

更新3 这是插件的一部分,实际上是编写样板的代码(头部和身体错误的标签).

add_action( 'amp_post_template_head', 'amp_post_template_add_boilerplate_css' ); …

Run Code Online (Sandbox Code Playgroud)

html wordpress noscript amp-html accelerated-mobile-page

Mat*_*yr'

2018 09-25

10
推荐指数

1
解决办法

664
查看次数

在AMP页面中与"html⚡"有什么关系？

我正在挖掘AMP html,这条线立刻引起了我的注意.

AMP HTML文档必须:

包含顶级<html ?>标记(<html amp>也被接受).

所以我的第一个问题是 - <html ?>有效的HTML？它的意思是,它似乎有用 - 但我看起来很奇怪.有人能指出unicode作为HTML属性的具体规则吗？

我的另一个问题是,它用于什么.在文档中指出,这是有效的AMP文档所必需的.

但丢弃它不会导致AMP验证错误.AMP本身的JS来源似乎也并不关心它.

这真的是爬行器和机器人将文档标记为AMP的标志吗？

提前致谢.:)

amp-html

ste*_*dis

2016 06-15

9
推荐指数

2
解决办法

3007
查看次数

AMP可以用作移动版和桌面版吗？

我没有在任何地方找到一个直接的答案,因为它在名称(AMP)本身也清楚地说,它用于静态移动网页.

我发现,amp标签上使用桌面版一样,例如ampproject.org有

所以我现在还不清楚AMP是否可以(有利于)在桌面版上使用？

amp-html

Dom*_*lak

2016 08-24

9
推荐指数

2
解决办法

1万
查看次数

带有 Laravel 的 Google AMP

我最近推出了一个基于 laravel 的电子商务网站。现在我真的认为实施 AMP 是个好主意，因为它现在支持电子商务（甚至 shopify 和 ebay 也在实施它）

所以我的问题是我们如何在 Laravel 上实现 AMP？有没有办法在桌面版上使用 desktopMainTempalte.blade.php 并在移动版上切换到 mobileMainTemplate.blade.php？我只是不想为移动设备创建一个不同的域作为 m.domain.com。我想要一些有创意的东西，但我不确定我是否朝着正确的方向前进。

如果你在我的鞋子里，你们会做什么？

laravel amp-html laravel-blade

Gen*_*ble

2019 08-25

9
推荐指数

1
解决办法

1万
查看次数

在AMP页面中添加Javascript

请帮助我了解如何在AMP(加速移动页面)中添加javascript.我的要求是我在URL中获取ID.例如localhost:8080/home？id = 1.我想在我的html文件中访问该id.

或者请让我知道如何添加任何JavaScript文件.

谢谢.

javascript amp-html

Cha*_*n R

lucky-day

9
推荐指数

2
解决办法

2万
查看次数

打字稿和谷歌AMP？类型“JSX.IntrinsicElements”上不存在属性“amp-img”

我有一个运行快速服务器的节点项目，当在 url 中查询带有 /amp 的新闻文章时，会返回该文章的 amp 版本。

由于客户的要求，这些 amp 文章是使用 React 组件构建的，这些组件最终呈现为静态标记。这是其中一个组件：

import * as React from 'react';
import { Article_modulesByArticleId_edges_node } from '../../data/__generated__/Article';

// GraphQL auto generated type for the data that is sent to this component 
type Props = {
	module: Article_modulesByArticleId_edges_node;
};

export default (props: Props) => {
	const image = props.module.image;
	if (!image || !image.url || !image.title || !image.copyright) {
		return "";
	}

	return <amp-img alt={image.title} src={image.url} ... />
};

Run Code Online (Sandbox Code Playgroud)

问题？该项目还使用了我不太熟悉的打字稿。

当我尝试使用自定义 AMP-HTML 元素时，打字稿会抛出以下错误消息：

[ts] Property …

Run Code Online (Sandbox Code Playgroud)

javascript typescript reactjs amp-html

tan*_*aum

lucky-day

9
推荐指数

1
解决办法

6068
查看次数

amp 应用程序横幅未显示在 android 和 IOS 设备中工作正常

我正在使用下面的代码，它没有显示 AMP 应用程序横幅。

这是示例。

<script async custom-element="amp-app-banner" src="https://cdn.ampproject.org/v0/amp-app-banner-0.1.js"></script>
<meta name="apple-itunes-app" content="app-id=828256236, app-argument=medium://p/9ea61abf530f">
<link rel="manifest" href="/amp-app-banner-manifest.json">

Run Code Online (Sandbox Code Playgroud)

{
  "prefer_related_applications": true,
  "related_applications": [
    {
      "platform": "play",
      "id": "com.medium.reader",
      "url": "android-app://com.medium.reader/https/medium.com/p/cb7f223fad86"
    }
  ]
}

Run Code Online (Sandbox Code Playgroud)

html javascript jquery android amp-html

Tus*_*wat

2020 03-07

9
推荐指数

1
解决办法

401
查看次数