在上篇文章《Typecho 添加 AMP 支持》说了给博客加amp功能，但是我没说弊端233，这次说下优缺点。...优点： 1，amp确实很快捷 2，支持amp功能的搜索引擎（比如谷歌），会优先amp页面，也就是说对seo有利 缺点： 1，对于不支持amp的搜索引擎来说，amp页面内容与原文重复，属于重复文章，可能反而不利于...2，amp页面会被缓存到支持amp功能的搜索引擎上，也就是说文章被收录后，如果再次被修改amp页面可能反应迟钝。...(KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Google-AMPHTML) 百度的用来缓存amp...== false){ //此处为amp页的功能实现代码 } ?
代码将不再适用，如table, frame等。...，此页面也同时兼容桌面电脑（pc）上浏览，首页、分类、翻页等都没有相对应的AMP页面，我预计后续版本应该会增加更多的功能，如果你不想等，也可以直接改造这个插件加入导航、分类等功能。...里需要指明AMP页面的地址，即用amphtml标签指明AMP版本地址： <link rel="<em>amphtml</em>" href="//www.watch-life.net/wordpress/wordpress-google-<em>amp</em>.html...<em>我</em>想一个重要<em>的</em>原因是<em>AMP</em>使用<em>的</em>需要调用官网<em>的</em>JS库，用于控制资源加载、缓存等功能： </script...目前尚没有针对MIP<em>的</em>WordPress插件，如果采用WordPress采用MIP的话，目前只能靠换主题模版<em>的</em>方法，这种方法最麻烦<em>的</em>是需要单独为MIP<em>页面</em>启用一个二级域名，<em>我</em>还不打算跟进，觉得这种方法没有插件来<em>的</em>简单快捷
也有许多网站通过结合AMP和PWA形成了一种强大的使用模式，比如说BMW.com，他们通过在PWA里来加载定制全AMP的内容来实现无间隙和快速的用户体验。...您需要在每个AMP网页和非AMP网页的<head 中添加<link 标记，以表明哪些内容同属一体。 在非AMP网页example.com/news中：<link rel=”amphtml”?...如何实现AMP自动广告 针对您要展示AMP自动广告的每个网页，按以下步骤操作。您发布<amp-auto-ads 广告代码后，AMP自动广告将会在几分钟之内开始展示。 1.?...目前AMP自动广告仅支持文字广告和展示广告，并且只能在移动端上展示。-?AMP自动广告将根据您网页上的内容量展示适当数量的广告，同时会考虑到您已经拥有的任何硬编码<amp-ad 。...如何检查AMP是否实施成功 -?检查您网站的最高比率着陆页面的用户来源，是否有因AMP而提升-?检查谷歌分析工具，当用户浏览AMP页面的时候，用户的时长还有浏览页数是否有增加 -?
AMP页面是网页;页面及其元素的任何样式都是使用常见的CSS属性完成的。...amp-img { background-color: gray; border: 1px solid black; } 每个AMP页面只能有一个单一的嵌入样式表和内联样式...这是使AMP能够执行其元素大小调整规则的必要要求。 除了自定义字体不允许使用 验证器不允许使用含 i-amphtml- 标记的名称。...这些是AMP框架内部保留使用的。因此，用户的样式表不能引用带 i-amphtml- 类和标记的CSS选择器。 AMP在页面布局元素时遵循更严格的规则。...在普通的HTML页面上，几乎完全使用CSS来布局元素。但出于性能原因，AMP要求所有元素都有明确的大小设置从一开始。
AMP HTML 上，它只允许使用有限的标签，如body、article这些标签可直接使用，但如script、frame和frameset这样的标签是被限制或禁止使用的，MIP 中也如此。...而如 img 或 video 这样的标签不能直接使用，需要替换成别的标签才能使用，如在 AMP 中需要替换成amp-img，在mip中替换成mip-img。...例如： 新的AMP页面也要添加标签...解决方案一： 在网站域名不变的情况下，基于判断用户UA(User Agent)来实现 MIP 页面，同时也实现了网站移动端页面的建设。...www站源码头部要添加： amp站源码头部要添加： < link rel = “canonical
在某些情况下，您可能希望拥有同一页面的非AMP版本和AMP版本，例如，一篇新闻文章。思考一下:如果谷歌搜索发现该页面的非AMP版本，它如何知道有一个“配对”AMP版本的它?...使用链接页面 为了确定非AMP页面和AMP页面应该被“配对”在一起，我们在中添加标签的形式，在非amp页面上添加amp页面的信息，反之亦然。...（ytkah的理解：从seo角度来说，canonical标签可以确保url的唯一性，防止被搜索引擎判定为重复内容，进而降低整站的权重。） ...举个例子，我们有两个页面，内容相同，一个是非AMP页面https://www.example.com/url/to/full/document.html，另一个是AMP页面https://www.example.com.../url/to/amp/document.html，现在开始分别给他们加链接页面，注意是交叉匹配 在非AMP页面的中加入如下代码 <link rel="<em>amphtml</em>" href
一年前，我为我的博客 www.phodal.com 添加了 AMP 的支持。今天偶尔间在搜索结果页看到了 AMP 的标志，打开博客的速度几乎是秒级的。...今天在本来想测试一下，之前实现的 APP Indexing 功能是否正常工作——即我在网页上打开博客的链接时，会直接打开我的 APP。...结果，发现它已经不工作了，这真是一个悲伤的故事，但是看到了新的 AMP 标志。 ? 一年多以前实现的功能，终于 TM 上线了，好开心好开心——然而，你们还是在用百度。...<link rel="<em>amphtml</em>" href="https://www.phodal.com/<em>amp</em>/most-important-15-books-of-phodal-programmer-life...<em>AMP</em>模式下，所有的CSS都只能Inline，但是Inline到<em>页面</em>后，还是会有一个大小限制。出于这个原因，<em>我</em>把<em>AMP</em><em>页面</em>的CSS重写（Copy/Paste)了一遍。
利用这些自定义元素（称为 AMP HTML 组件）可以轻松高效地实现常见的模式。 例如，amp-img 标记可提供完整的 srcset 支持，即使在尚不支持该标记的浏览器中也是如此。...AMP JS 库 可实现所有 AMP 的最佳性能做法、管理资源加载，并为您提供上面提到的自定义标记，所有这些都是为了确保快速渲染您的网页。...使用 Google AMP Cache 时，文档，所有 JS 文件及所有图片都从使用 HTTP 2.0 的同一来源加载，从而可实现最高效率。...必须包含“”标签！...为成功接入AMP框架的网站页面添加： 为原来的网站页面添加： <link rel="<em>amphtml</em>
这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。 我在自己的博客页面我的小铺页面实践了一下用 CSS变量 和 @media查询 实现暗黑模式。 ?...CSS Dark Mode 我定义了变量以设置主题的颜色，我建议你也这样做，因为这样会使这个过程容易得多。...如果有人使用深色操作系统主题并访问您的网站，您的网站现在将自动切换到黑暗模式。 下面是我博客博客小码页面，效果，支持手动切换和自动切换两种。...现在页面应该变黑。 回到您的网站，主题应该已自动更新为黑暗模式。 如果您想要测试它是否切换回来，请将值更改为 0。 完成测试后，单击垃圾桶删除该选项。...我敢肯定，您的深夜访客或只喜欢深色主题网站的访客会感谢您。 关注公众号，第一时间接收最新文章。如果对你有一点点帮助，可以点喜欢点赞点收藏，还可以小额打赏作者，以鼓励作者写出更多更好的文章。
博客园中每篇文章的评论窗口最下面就带了一个Google的广告，当然我这个博客也不例外。不过这些广告我看着就不爽，于是就想办法把该死的广告去掉。...使用Mathon2打开博客园中的任何一篇文章，选定Google广告和周围区域，右键“查看选定区域代码”就可以看到原来是Google的JS文件在我的页面中生成了一个Iframe，具体代码为： <SCRIPT...CSS： iframe { display:none; } 这样就可以把Google的广告屏蔽了。...但是这里有一个问题就是这样做是把所有的Iframe都不显示了，如果页面中有其他的Iframe需要显示怎么办？...估计只有写JS来实现了。
首先在Google Adsense广告管理页面，点选 “我的广告” – “广告单元” – “新建广告单元” 按钮。 ? 2. 然后点击广告类型 “文字和多媒體廣告”（即文字和图文广告）。 ?...此为AMP网页内链接单元广告代码范例： ? 套用以后就能正常显示于AMP页面啰！ ? 二、放置匹配内容广告 接下来向大家展示如何在AMP页面放置匹配内容广告。 1....在Google Adsense广告管理页面，点选“我的广告” – “广告单元” – “新建广告单元” 按钮，并且选“相符内容”（即匹配内容）。 ?...备注：需要留意的是，AMP页面里的匹配内容广告刚开始运行时，网址尾串可能会不含/amp连结，通常过几天后，系统就会自动判别是否为amp页面，跳转正常情况，这部分大家无需担心。...一般广告语法粘贴在AMP页面后5-10分钟就能显示，若站长想用电脑浏览及检查，也可以在网址后方加上“amp”，就能检测广告能否显示，排版是否正确。 ?
本文接下来的内容，将介绍我在探索基于 Web Worker 实现 JavaScript 沙箱隔离方案过程中的一些资料收集、理解以及我的踩坑和思考的过程。...AMP WorkerDOM 在我开始纠结于如 react-worker-dom 这种思路实际落地开发的诸多「天堑」问题的同时，浏览过其他 DOM 框架因为同样具备插件机制偶然迸进了我的脑海，它是 Google...AMP 开源项目 中除了如 amphtml 这种通用的 Web 组件框架，还有很多其他工程采用了 Shadow DOM、Web Component 等新技术，在项目下简单刷了一眼后，我欣喜地看到了工程...它一方面完全可以作为上层框架的底层实现，来支持各种上层框架的二次封装迁移（如工程 amp-react-prototype），另一方面结合了当前主流 JavaScript 沙箱方案，通过模拟 window...当然，从我个人角度来看，AMP WorkerDOM 也有其当前在落地上一定的局限性。
据统计，40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的，同类型网站那么多，为什么不选择加载速度更快体验更好的呢。...AMP HTML 组件 自定义组件 AMP HTML 自定义5个组件： amp-ad、amp-embed、amp-img、amp-pixel、amp-video 组件直接以标签的形式进行使用，如页面中需要加载...amp-video amp-img 组件实际是使用HTML原生 标签来实现，所以在页面上的展示效果和原生HTML一致。...[1510652064889_5517_1510652135520.png] amp-ad、amp-embed 组件主要用于引入广告类信息，使用iframe的方式来实现。...3.避免扩展机制影响渲染 AMP支持一些扩展组件如：,,使用这些组件需要加载相应的JS文件，会增加额外的HTTP请求，但是这些请求不会阻塞页面的布局和渲染
一种是main区域全屏，即边栏消失，页面占据整个浏览器页面，是在弹出框的实现的。 另一种全屏是页面占据整个显示器屏幕，是在后面的导航菜单栏实现的。 本篇文章要讲的是第一种全屏方式的实现。...close-full-screen-on 第三个div（.close-full-screen-on），刚开始看代码的时候，我没明白这个div是干什么的，后来在自己实现这一块代码时，才恍然大悟这个div是用来增加...优化 当我取消全屏之后，会发现tab页的白色滑动块没了。后来我分析了一下原因，使用v-if来控制组件的隐藏，实际上会触发组件的销毁。...结语 至此，弹出框的设计和功能实现已经全部完成了，在BuildAdmin管理系统页面设计架构，只剩下导航菜单栏这部分还没有写。...后端接口的开发、前后端api交互模块的设计、菜单页面的开发都属于内容填充了。
然而现在媒体发行商们开始感到困惑：“这些用户究竟是我的，还是这个平台的呢？”...尽管AMP看起来对媒体发行商们是双赢的策略，它能保证更快的加载速度，还能占据SERP（ Search Engine Results Page，搜索引擎结果页面，译者注）顶部图片轮播的位置，但它还是有自己的缺陷...*一个在搜索引擎结果页面上展示使用了AMP的网站案例和相应的文章页面 另一个主要的担忧是，媒体发行商们觉得AMP平台缺乏能够嵌入页面的自定义设计元素。...许多媒体发行商发现自己的部分品牌会在AMP平台页面丢失。部分功能方面的问题，比如无法增加“阅读全篇”的按钮（该按钮是留住移动用户的好办法），是媒体发行商们另一个常见的抱怨。...因此，这个计划将会使得结合AMP服务的文章广告以最小化的HTML广告展现给用户。这会提高用户体验，甚至会鼓励用户更多与文章中的广告进行交互。
在此方向中，页面分发端、浏览器和移动网络是主要的影响因素，页面加载相关的技术解决方案，也是从这三个影响因素为出发点，来进行技术设计和实现的。...AMP在本月不仅进行了技术方面的优化，还计划在全球范围内进行推广，具体如下。 （1） AdWords 支持AMP化广告落地页：AdWords是广告提供商，使用AMP落地页能够快速加载，提高广告转化率。...AMP的表单，内容实时更新和统计支持，使AMP适用于广告落地页。...（2）CONDÉ NAST是如何使用AMP的： CONDÉ NAST拥有多个新闻业务，选择AMP不是因为原来页面慢，而是相信Google的服务和CDN； NAST公司将AMP和CMS结合使用，自动将新闻生成为...AMP页面。
从一开始，它就是由出版行业、广告行业、技术提供者和平台提供方一起携手开发的，除了 Google 以外，参与者还包括 Twitter、Linkedin 和 Pinterest 。...AMP 是一个跨平台、跨浏览器的类库，支持所有流行的移动浏览器和桌面浏览器的最新两个版本: ? AMP 可以运行的浏览器 4. AMP 限制了我的布局和设计 你肯定会被 AMP 能做的事情惊讶到。...严格来说，AMP 的目标是静态内容。但我们所说的静态内容同样可以包含具有艺术气息的动画、侧边栏、灯箱广告、手风琴导航、轮播等等。...我得在 AMP 和 PWA 中做出选择 AMP 和 PWA 是互补的技术，它们的使用场景完全不一样。...一小时内搭建一个全栈Web应用框架 干货：CSS 专业技巧 四步实现React页面过渡动画效果 让你分分钟理解 JavaScript 闭包 ---- ---- 小手一抖，资料全有。
借助该项目，用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精美网站和广告。AMP项目已于2016年2月24日启动，数以千计的开发者成为这个项目的积极参与者。...无数的网站现在都有AMP版本的页面，许多开发者正在学习使用AMP——在这里，我们和ytkah一起来学习使用WordPress来使用AMP。 谷歌非常重视，这也是他们搜索引擎排名的标准之一。...所有这些增强都对广告收入产生零效应。 如果您是一位经验丰富的开发人员，您可以通过全面的页面加载优化实现类似的增强。...对于那些已经为网站花费很多时间在SEO排名上的朋友，这只是增加更多的任务到他们的待办事项列表，当然，因为AMP页面也可以提高搜索引擎优化排名你的网站。这或许也是大企业采用AMP的主要原因。 ...AMP JS 库 可实现所有 AMP 的最佳性能做法、管理资源加载，并为您提供上面提到的自定义标记，所有这些都是为了确保快速渲染您的网页。
在 AMP4Email 利用 DOM Clobbering 我已经提到过，通过向元素添加我自己的 id 属性，AMP4Email 可能容易受到 DOM Clobbering 的攻击。...为了找到可利用的条件，我决定看一下 window 的属性（图6）。立即引起注意的是开头的 AMP。 ?...所以我准备了一个代码 看看会发生什么…… …然后我注意到控制台中有一个非常有趣的错误（图8）。 ? 图8....我能够想出的唯一一个合理的解释：AMP 尝试获取 AMP_MODE 的属性以将其放入URL。由于 DOM Clobbering，缺少了预期的属性，因此是 undefined。...CSP 的方法，但是在尝试绕过 CSP 时，我发现了一种绕过基于目录的 CSP的 有趣方法，并且我在推特上发表了 （后来发现在 2016年CTF中已经使用了相同的技巧）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
