Nextra 安装百度统计分析代码

安装步骤

进入百度统计 (opens in a new tab) 完成注册并登录
首页点击 进入产品 按钮进入管理界面
进入菜单 使用设置 - 账户设置 - 网站列表
如上图点击①处按钮 新增网站
添加完成后点击②处操作按钮中的 获取代码 , 页面跳转后可以直接复制代码, 得到类似如下代码串

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?<百度为你的网站生成的id>";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

在 Nextra 项目中的 src 目录下新建目录和文件 components/statistics.js

export const BaiduStatistics = () => {
    return (
        <>
            <script dangerouslySetInnerHTML={getAnalyticsTag()} />
        </>
    )
};
 
const getAnalyticsTag = () => {
    return {
        __html: `
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?<!!!请替换此处id>";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();`,
    }
}

更新 theme.config.js 文件, 添加导入 import { BaiduStatistics } from './components/statistics' 以及 head: <BaiduStatistics/> 配置。

import { BaiduStatistics } from './components/statistics' // 添加此导入
 
export default {
    // ...其它配置
  head: <BaiduStatistics/>, // 添加此配置
    // ...其它配置
}

已接入完成，运行代码并检查是否正常。

检查

接入过程本地启动时可以参考百度分析手动检查方法 (opens in a new tab) 检查是否接入正常，部署上线之后可以直接在百度分析上面 代码安装检查 菜单一栏检查。

效果

nextra-baidu-statistics-1

如图，接入之后可以浏览网站 PV/UV 等统计指标，方便后续的服务容量分析和SEO优化。