前言

我们个人搭建的网站如果想提高知名度或者实现营收都是要以丰富内容为前提,同时还要有更多的人来访问我们的站点才能做到。但是在国内大家使用更多的搜索引擎还是百度,这样让那些站长每天都发愁,百度的SEO该如何去做等等的问题。其实呢,我们在网站接入百度统计的api后,网站所产生的访问数据都会被记录,我们可以前往百度资源平台或者百度统计网站进行访问数据的查看等等操作。但是这样去别的网站查看有时登录验证过期又要重新登录,这样就显得很麻烦。如何在自己的网站接入百度统计提供的api实现网站内查看实时数据呢。本篇文章就围绕这个问题展开。本篇教程适用于handsome主题模版。但其实大多数网站模板都适用。

预览图

访客来源地图

博客访问统计图

博客访问来源统计图

引入echarts.js和china.js

  1. 引入echarts.js和china.js

注意:

  • handsome本地引入需要在网站根目录/usr/themes/handsome/assets/js/....下放入相应的文件。其实放在其他位置一样,只要确保引入路径正确即可,我选择放在这是因为静态资源存放路径规范。
  • 外链引入的话需要在handsome后台设置中的设置外观然后选择开发者设置然后在自定义输出head 头部的HTML代码中填入外链即可。本人在这里选择的是外链引入,cdn加速减少服务器的压力。

此处内容需要评论回复后(审核通过)方可阅读。

获取网站数据的关键参数

2.确认网站已经接入统计服务,如果没有需要绑定这里要使用百度统计首先先要在网站放入统计代码,先打开百度统计之后,登录网站,
百度统计

登录之后可以看到我们绑定过的域名,点击域名之后可以在基础报告查看。如果没有绑定网站需要先绑定网站。绑定方法:在 管理页面--账户管理--网站列表 添加博客网址

绑定网站

数据导出

3.在百度统计平台找到数据导出服务
首先在调取百度统计api之前需要先点击管理,进入管理页面后在左边侧边栏找到数据导出服务
数据导出

获取API Key

4.创建工程,获取API Key
登录百度开发者中心控制台选择创建工程,应用名称最好取得有标识性。避免长时间后忘记。

创建工程

然后点击刚刚创建得工程,获取api key

获取API Key

获取授权码

5.获取授权码
复制api key之后通过下面得链接访问去获取授权码

http://openapi.baidu.com/oauth/2.0/authorize?response_type=code&client_id={CLIENT_ID}&redirect_uri={REDIRECT_URI}&scope=basic&display=popup
!上述链接中各个参数说明
// 填刚才创建工程时获取到的API Key
{CLIENT_ID}: API Key;
//回调地址填写oob;
{REDIRECT_URI}:oob;

将之前获取到的参数替换上面链接的花括号内容即可。下面教程同理。

获取授权码

获取ACCESS_TOKEN

6.获取ACCESS_TOKEN

http://openapi.baidu.com/oauth/2.0/token?grant_type=authorization_code&code={CODE}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}&redirect_uri={REDIRECT_URI}
!上述链接中各个参数说明
//上一步获取到的授权码
{CODE}:Auth Code;
//之前获取的API Key
{CLIENT_ID}:API Key;
//创建工程时有的Secret Key
{CLIENT_SECRET}:Secret Key;
//可以填写 oob。
{REDIRECT_URI}:回调 URI;

<code>获取ACCESS_TOKEN</code>

从上述步骤得到的数据中包含 ACCESS_TOKEN 和 REFRESH_TOKEN 两个值,其中 ACCESS_TOKEN 的有效期为一个月,REFRESH_TOKEN 的有效期为十年。REFRESH_TOKEN 的作用就是刷新获取新的 ACCESS_TOKEN 和 REFRESH_TOKEN , 如此反复操作来实现 ACCESS_TOKEN 有效期永久的机制。

一旦 ACCESS_TOKEN 过期,可根据以下请求更换新的 ACCESS_TOKEN 和 REFRESH_TOKEN:
http://openapi.baidu.com/oauth/2.0/token?grant_type=refresh_token&refresh_token={REFRESH_TOKEN}&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}
API Key:{CLIENT_ID}
Secret Key:{CLIENT_SECRET}
Refresh Token:{REFRESH_TOKEN}

至此,已经得到了调取api所需要的必须参数。

自建 Vercel API

7.自建Vercel API

自建api本人这里参考的AkilarAkilar の糖果屋和小冰老师的部署于vercel的api的教程。

此处内容需要评论回复后(审核通过)方可阅读。

新建绘制地图的js文件

8.创建地图绘制的js文件

此处内容需要评论回复后(审核通过)方可阅读。

实时调取API

9.更改请求地址,实时调取api

vercel部署的api成功后,将获取到的链接替换

- var dataUrl = 'https://baidu-tongji-api.vercel.app/api?access_token=' + access_token + '&site_id=' + site_id
+ var dataUrl = 'https://API域名/api?access_token=' + access_token + '&site_id=' + site_id
//同时access_token和site_id改成你自己获取的。
var access_token = 121.b448dc22****************** // accessToken 
var site_id = 1*******'** // 网址id

选择地图输出位置

10.选择自己想要让地图显示的位置

然后选择在网站哪个位置放统计地图

此处内容需要评论回复后(审核通过)方可阅读。

handsome用户最好将js文件放在assets/js路径下,路径跟着改就行。

博主个性化(望君采纳)

主页顶部导航栏

本人选择了在主页顶部输出统计图

遇到的问题

路径问题

如果按照普通的路径引入js文件的话,那么只有在主页请求js文件才能正常请求回来,在文章内及其他页面请求就是请求失败,根据群友的方法在script标签src属性引入时 <script src="//你的域名/你的js文件路径.js">这样就可以解决问题,
另外本人想到了另一种解决方式,首先前往自己的github,创建新的仓库,然后添加js文件,记住自己的用户名、仓库名、文件名。然后按照下面的格式替换为jsd CDN链接直接访问。这样似乎好处更多。

https://cdn.jsdelivr.net/gh/用户名/仓库名/文件名.js

其他报错

如果出现:Uncaught ReferenceError: echarts is not defined

那么handsome用户可在开发者设置里在头部插入echarts文件。

目前已知问题

偶尔会有跨域问题

特别鸣谢

参考Eurkon的教程。
感谢Akilar の糖果屋提供的帮助。

最后修改:2021 年 08 月 16 日 09 : 48 AM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。