实战经验分享:怎么在自己的网站里面调用第三方网站的页面内容

yumo6666个月前 (04-26)技术文章52

今日,站长在线(olzz.com)的首页右侧边栏里面,有一个是【mip验证】的工具入口,其实我在其他网站也放了这个入口,但是不同的是,以前的页面入口是直接链接到百度mip官方的页面检测地址的,而今天,我这个网站的页面地址改成自己的网站地址,为:https://www.olzz.com/mip/

使用这样做的方法显著的好处就是,可以把网站的流量放在自己的网站里面,知道使用这个工具的人有多少,一样的使用效果,却给自己带来更多的浏览量,何乐不为呢?



接下来,站长在线的站长就开始,对代码进行尝试添加了:

1、确立MIP标准。因为站长在线的主站是mip技术的,所以我想在这个新建的内页也使用mip技术,所以首先制作一个index.html的静态的MIP单页面,然后把mip技术的标准页面的空白文件制作出来,代码我就是不一一解释怎么来了,直接上代码了:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>网页标题</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="当前mip页面地址">
<meta name="Author" Content="作者">
<meta name="Keywords" Content="关键词">
<meta name="Description" Content="页面描述">

</head>
<body>
 正文内容
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

空白文件制作好了,就开始填充内容,最后本页面里面,还要添加cnzz统计和百度统计。

1、添加百度mip检测的页面调用代码,并且让他居中显示:

<div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>

2、添加cnzz统计、百度统计的代码。

<mip-stats-cnzz token="1278700007"></mip-stats-cnzz><!--cnzz统计ID-->
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu><!--百度统计ID-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->

3、合并所有代码,完整的代码如下:

<!DOCTYPE html>
<html mip>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>MIP页面检测,查看是否符合百度mip页面标准</title>
<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v2/mip.css">
<link rel="canonical" href="https://www.olzz.com/mip/">
<meta name="Author" Content="杨泽业">
<meta name="Keywords" Content="mip,mip检测,MIP页面检测">
<meta name="Description" Content="这是由站长在线站长杨泽业手工开发的mip页面检测网页,通过本页面的检测,可以让你知道你的网站,是否符合mip页面的技术标准">
</head>
<body>
 <div align="center">
<mip-iframe src="https://www.mipengine.org/validator/preview" width="1025" height="900"></mip-iframe>
</div>
<mip-stats-cnzz token="1278700007"></mip-stats-cnzz>
<mip-stats-baidu token="8abf056d431538bd6c9c1166901389ac"></mip-stats-baidu>
<script src="https://c.mipcdn.com/static/v2/mip-stats-cnzz/mip-stats-cnzz.js"></script><!--cnzz统计-->
<script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script><!--百度统计-->
<script src="https://c.mipcdn.com/static/v2/mip.js"></script><!--mip-->
</body>
</html>

总结:通过本内容的学习,可以让你知道,怎么在自己的网站里面调用第三方网站的页面内容,新手朋友们自己亲自实践一下,举一反三,让自己的建站水平稳步提升。

欢迎关注站长快递头条号,一起学习建站知识,一起成长!

相关文章

videojs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&#...

广州蓝景分享—实用的CSS技巧,助你成为更好的前端开发者

Hello~~各位小伙伴,相信在前端开发项目中,CSS实现如修改输入占位符样式,多行文本溢出,隐藏滚动条,修改光标颜色,水平和垂直居中等等,这些都是我们非常熟悉的开发场景!前端开发者几乎每天都会和它们...

Angular 自定义指令 Tooltip

#头条创作挑战赛#本文同步本人掘金平台的文章:https://juejin.cn/post/7082241253819023397一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第...

Canvas学习笔记 | 文本操作

#头条创作挑战赛#简介在Canvas中,文本操作的常用方法有:方法说明fillText()绘制实心文本strokeText()绘制空心文本measureText()获取文本长度在Canvas中,文本操...

如何使用CSS实现旋转地球动画效果

旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示:设计思路与核心技术旋转地球效果实现主要借助于animatio...

CSS Viewport 单位,很多人还不知道使用它来快速布局

**CSS Viewport units(视口单位)**在过去几年已经出现了,随着时间的推移,越来越多的开发人员开始使用它们。它们的好处在于为我们提供了一种不需要使用J avaScript 就能以动态...