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

yumo6662个月前 (04-26)技术文章12

今日,站长在线(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>

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

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

相关文章

CSS 元素分类与水平居中

元素分类在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素、内联元素(又叫行内元素)和内联块状元素。常用的内联元素有:<a>...

html实现原生table并设置表格边框的两种方式

在 HTML 中实现原生表格并设置表格边框的详尽教程 在 HTML 中,表格是展示结构化数据的重要工具。为了使表格更加清晰、美观,设置表格边框是常见的需求。本文将深入探讨 两种原生方式 来实现表格边框...

网页设计HTML零基础入门

一、Html概述Html是Hyper Text Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标...

前端兼容性问题总结

1.如何在IE6及更早浏览器中定义小高度的容器? IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。 解决:#test{overflow:hidden;height:1px;fon...

deepseek制作&quot;网页端学生签到系统&quot;

网页端学生签到系统制作经验分享 在日常教学管理中,高效准确的签到统计工作至关重要。为了提升签到管理的效率,我着手开发了一个网页端学生签到系统,它能够实现名单导入、签到状态记录与修改以及结果导出等功能,...