惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

The Cloudflare Blog
L
LangChain Blog
WordPress大学
WordPress大学
V
V2EX
M
MIT News - Artificial intelligence
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Stack Overflow Blog
Stack Overflow Blog
J
Java Code Geeks
F
Fortinet All Blogs
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
腾讯CDC
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
D
Docker
Recent Announcements
Recent Announcements
GbyAI
GbyAI
博客园 - 叶小钗
小众软件
小众软件
Hugging Face - Blog
Hugging Face - Blog
T
The Blog of Author Tim Ferriss
人人都是产品经理
人人都是产品经理
Engineering at Meta
Engineering at Meta
Y
Y Combinator Blog
雷峰网
雷峰网
The GitHub Blog
The GitHub Blog

Hyde Blog

Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog Hyde Blog
Hyde Blog
Hyde · 2025-10-05 · via Hyde Blog

51.la统计 原创

简介 ​

注册 ​

版权 ​

安装 ​

pnpmnpmyarn

sh

pnpm add vitepress-plugin-51la

sh

npm add vitepress-plugin-51la

sh

yarn add vitepress-plugin-51la

使用 ​

  • docs\.vitepress\config.mts 中引入插件

    提示

    id 和 ck 为必填项,路径在 51.la 后台-配置-参数配置-统计代码-获取 SDK 追踪代码-同步安装(推荐)

    ts

    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"你的id",ck:"你的ck"})</script>

ts

import { defineConfig } from "vitepress";
import { La51Plugin } from "vitepress-plugin-51la";

export default defineConfig({
  vite: {
    // ↓↓↓↓↓
    plugins: [
      La51Plugin({
        id: "your-id",
        ck: "your-ck",
      }),
    ],
    // ↑↑↑↑↑
  },
});

构建 ​

构建后即可生效,自动向页面中注入51.la统计代码

验证 ​

自己配置 ​

提示

vite 插件配置和 head 配置任选其一即可

vite插件配置head配置

ts

vite: {
    // ↓↓↓↓↓
    plugins: [
      La51Plugin({
        id: "your-id", //动态掩码,防止 SDK 被盗刷
        ck: "your-ck", //一个网站多个统计 ID 的数据分离标识
        autoTrack: true, //开启事件分析功能,用于定义和追踪用户在产品(网站/APP等)上的各类行为,如点击、浏览、停留等。默认为false
        hashMode: true, // 开启单页面应用模式,如使用了Vue / React等框架构建的单页面应用网站,默认为true
        screenRecord: true, //开启屏幕录制功能,默认为false
        apply: "build", //'build' 构建时生效,'serve' 开发时生效,'all' 所有阶段生效
        importMode: "sync", //sync' 同步加载,'async' 异步加载,'old' 旧式安装
      }),
    ],
    // ↑↑↑↑↑
  },

ts

head: [
  // 添加 51.la 统计脚本
  [
    "script",
    {
      charset: "UTF-8",
      id: "LA_COLLECT",
      src: "//sdk.51.la/js-sdk-pro.min.js",
    },
  ],
  // 初始化统计脚本
  [
    "script",
    {},
    `
        // 等待页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', () => {
          if (typeof LA !== 'undefined') {
            LA.init({
              id: 'xxxxxxxxx', // 您应用的统计掩码
              ck: 'xxxxxxxxxxxxx', // 您应用的固定key值
              autoTrack: true, //开启事件分析功能
              hashMode: true, // 开启单页面应用模式
              screenRecord: true, //开启屏幕录制功能,默认为false
            });
          }
        });
      `,
  ],
];

更多用法 ​

  • 构建开发都生效

ts

La51Plugin({
  id: "your-id",
  ck: "your-ck",
  apply: "all",
});
  • 异步引入

ts

La51Plugin({
  id: "your-id",
  ck: "your-ck",
  importMode: "async",
});
  • 完整配置

ts

export interface LA51PluginOptions {
  /**
   * 动态掩码,防止 SDK 被盗刷
   */
  id: string;
  /**
   * 一个网站多个统计 ID 的数据分离标识
   */
  ck: string;
  /**
   * 引入方式
   * @default 'sync'
   * @doc 'sync' 同步加载,'async' 异步加载,'old' 旧式安装
   */
  importMode?: "sync" | "async" | "old";
  /**
   * 生效阶段
   * @default 'build'
   * @doc 'build' 构建时生效,'serve' 开发时生效,'all' 所有阶段生效
   */
  apply?: "build" | "serve" | "all";
  /**
   * 开启事件分析功能
   * @default false
   */
  autoTrack?: boolean;
  /**
   * 使用单页面应用统计,如使用了Vue / React等框架构建的单页面应用网站
   * @default true
   */
  hashMode?: boolean;
  /**
   * 屏幕录制
   * @default false
   */
  screenRecord?: boolean;
  /**
   * 统计分析 SDK 地址
   * @default '//sdk.51.la/js-sdk-pro.min.js'
   */
  sdk?: string;
  /**
   * 事件分析 SDK Prefix
   *
   * 默认和SDK同域根目录
   * 详细说明见 https://www.yuque.com/dvqnxr/ztsh8g/ysygdp#MK9RJ
   */
  prefix?: string;
}

常见问题 ​

1.网站底部数据挂件没有显示数据?

  • docs\.vitepress\theme\components\TeekLayoutProvider.vue注册入口使用#layout-top插槽注册组件,保证 js 加载顺序
  • 请检查 idck 是否正确
  • 需在 body 标签内
  • 是否开启了域名强制匹配,可在51.la参数设置-基本信息统计域名域名强匹配检查

更多常见问题请阅读 文档