头像 One
头像 One

更多功能请点顶栏「快捷菜单」

teek teek 2528 字 13 分钟 -- 次

51la统计

最后更新于:

51la统计

image-20250408073451295

目录

[[toc]]

[toc]

背景

来给自己的博客更换一个好看的鼠标样式哦。😊

版权

警告

本着开源共享、共同学习的精神：

本文是在 《Hyde Blog》博主的《配置鼠标样式》文章 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

次插件来源于：《vitepress-plugin-51la》

环境

2025.4.6(已解决)

警告

次配置适用于Teek@1.0.0-alpha.9-2025.4.6版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

简介

提示

为 VitePress 站点引入 51.la 的网站数据统计能力。

配置

（1）注册

  • 在 51.la 注册账号，并获取 siteId 和 siteKey。 注册地址：https://v6.51.la/

image-20250408073520360

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

（2）安装

1cd /d/vitepress-theme-teek-one-private
2pnpm add vitepress-plugin-51la -D

（3）使用

  • 在 docs\.vitepress\config.mts 中引入插件
 1import { defineConfig } from "vitepress";
 2import { La51Plugin } from "vitepress-plugin-51la";
 3
 4export default defineConfig({
 5  vite: {
 6    // ↓↓↓↓↓
 7    plugins: [
 8      La51Plugin({
 9        id: "your-id",
10        ck: "your-ck",
11      }),
12    ],
13    // ↑↑↑↑↑
14  },
15});

我的：

 1import { defineConfig } from "vitepress";
 2import { La51Plugin } from "vitepress-plugin-51la"; //引入51la统计
 3
 4export default defineConfig({
 5  vite: {
 6    // ↓↓↓↓↓
 7    plugins: [
 8      La51Plugin({
 9        id: "your-id",
10        ck: "your-ck",
11      }),
12    ],
13    // ↑↑↑↑↑
14  },
15});

（4）构建

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

1pnpm docs:dev

（5）观察

自己刷新下网站，等待一段时间，就可以在51la面板里看到自己网站的访问数据了：

image-20250408073245611

image-20250408073430873

image-20250408073451295

扩展：使用数据挂件

1<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=0&col=true&f=12&badge=icon_0&icon=center"></script>

v1

编辑docs\.vitepress\config.mts ：

 1  footerInfo: {
 2    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
 3    topMessage: ["初闻不知曲中意，再听已是曲中人"],
 4    theme: {
 5      name: `Theme By Teek@${version}-2025.4.10`,
 6    },
 7    copyright: {
 8      createYear: 2025,
 9      suffix: "Teek",
10    },
11    icpRecord: {
12      name: "陇ICP备2023002645号",
13      link: "http://beian.miit.gov.cn/",
14    },
15    // 网络安全备案信息配置
16    securityRecord: {
17      name: "甘公网安备62102702000211号",
18      link: "https://beian.mps.gov.cn/",
19    },    
20
21    // customHtml: `<p>小破站已运行了 <span id="footer-runtime"></span></p>`,    
22    customHtml: `<div style="display: flex; align-items: center; gap: 8px;">
23                <div>
24                  <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" 
25                    src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1">
26                  </script>
27                </div>
28              </div>
29              `,
30    bottomMessage: [`<p>小破站已运行了 <span id="footer-runtime"></span></p>`],
31
32  },

image-20250412164407579

  • 效果

image-20250412164426143

v2

改进后（存在问题，不是很理想）

 1  footerInfo: {
 2    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
 3    topMessage: ["初闻不知曲中意，再听已是曲中人"],
 4    theme: {
 5      name: `Theme By Teek@${version}-2025.4.10`,
 6    },
 7    copyright: {
 8      createYear: 2025,
 9      suffix: "Teek",
10    },
11    icpRecord: {
12      name: "陇ICP备2023002645号",
13      link: "http://beian.miit.gov.cn/",
14    },
15    // 网络安全备案信息配置
16    securityRecord: {
17      name: "甘公网安备62102702000211号",
18      link: "https://beian.mps.gov.cn/",
19    },    
20
21    // customHtml: `<p>小破站已运行了 <span id="footer-runtime"></span></p>`,    
22    customHtml: `<div style="display: flex; align-items: center; gap: 8px;">
23                <div>
24                  <script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" 
25                    src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1">
26                  </script>
27                </div>
28              </div>
29              `,
30    bottomMessage: [`<p>小破站已运行了 <span id="footer-runtime"></span></p>`],
31
32  },

image-20250412164407579

  • 效果

image-20250412164426143

v3

2025.4.14

改进后（存在问题，不是很理想）。

  • 代码
 1  footerInfo: {
 2    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
 3    topMessage: ["初闻不知曲中意，再听已是曲中人"],
 4    bottomMessage: [
 5      `<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1"></script>`,`<a href="https://51.la/" target="_blank" style="display:flex;align-items:center;justify-content:center;">本网站由51.LA <img src="https://51.la/favicon.ico" style="width:16px;height:16px;" alt="51.LA"> 提供数据统计服务</a>`,"欲买桂花同载酒，终不似少年游",
 6    ],   
 7    theme: {
 8      name: `Theme By Teek@${version}-2025.4.10`,
 9    },
10    copyright: {
11      createYear: 2025,
12      suffix: "Teek",
13    },
14    icpRecord: {
15      name: "陇ICP备2023002645号",
16      link: "http://beian.miit.gov.cn/",
17    },
18    // 网络安全备案信息配置
19    securityRecord: {
20      name: "甘公网安备62102702000211号",
21      link: "https://beian.mps.gov.cn/",
22    },    
23
24    customHtml: `<p style="margin: 0; display: inline;">小破站已运行了 <span id="footer-runtime"></span></p>`,
25
26  },
  • 效果

image-20250414215443989

v4（最终版）

2025年4月16日修改。

  • 编辑docs\.vitepress\config.mts ：
 1  footerInfo: {
 2    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
 3    topMessage: ["初闻不知曲中意，再听已是曲中人"],
 4    bottomMessage: [
 5      `<span style="margin: 0; display: inline;">本站已在地球上苟活了 <span id="footer-runtime"></span></span>`,// 搭配 ./theme/helper/useFooterRuntime.ts
 6      `<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1"></script>`,
 7      `<a href="https://51.la/" target="_blank" style="display:flex;align-items:center;justify-content:center;">本网站由51.LA <img src="https://51.la/favicon.ico" style="width:16px;height:16px;" alt="51.LA"> 提供数据统计服务</a>`,
 8    ],   
 9    theme: {
10      name: `Theme By Teek@${version}-2025.4.10`,
11    },
12    copyright: {
13      createYear: 2025,
14      suffix: "Teek",
15    },
16    icpRecord: {
17      name: "陇ICP备2023002645号",
18      link: "http://beian.miit.gov.cn/",
19    },
20    // 网络安全备案信息配置
21    securityRecord: {
22      name: "甘公网安备62102702000211号",
23      link: "https://beian.mps.gov.cn/",
24    },    
25    // customHtml: `<p style="margin: 0; display: inline;">小破站已运行了 <span id="footer-runtime"></span></p>`,
26  },

image-20250416133428662

  • 效果

image-20250416133455011

更多用法

  • 构建开发都生效
1La51Plugin({
2  id: "your-id",
3  ck: "your-ck",
4  apply: "all",
5});
  • 异步引入
1La51Plugin({
2  id: "your-id",
3  ck: "your-ck",
4  importType: "async",
5});
  • 完整配置
 1export interface LA51PluginOptions {
 2  /**
 3   * 动态掩码，防止 SDK 被盗刷
 4   */
 5  id: string;
 6  /**
 7   * 一个网站多个统计 ID 的数据分离标识
 8   */
 9  ck: string;
10  /**
11   * 引入方式
12   * @default 'sync'
13   * @doc 'sync' 同步加载，'async' 异步加载，'old' 旧式安装
14   */
15  importMode?: "sync" | "async" | "old";
16  /**
17   * 生效阶段
18   * @default 'build'
19   * @doc 'build' 构建时生效，'serve' 开发时生效，'all' 所有阶段生效
20   */
21  apply?: "build" | "serve" | "all";
22  /**
23   * 开启事件分析功能
24   * @default false
25   */
26  autoTrack?: boolean;
27  /**
28   * 使用单页面应用统计，如使用了Vue / React等框架构建的单页面应用网站
29   * @default true
30   */
31  hashMode?: boolean;
32  /**
33   * 屏幕录制
34   * @default false
35   */
36  screenRecord?: boolean;
37  /**
38   * 统计分析 SDK 地址
39   * @default '//sdk.51.la/js-sdk-pro.min.js'
40   */
41  sdk?: string;
42  /**
43   * 事件分析 SDK Prefix
44   *
45   * 默认和SDK同域根目录
46   * 详细说明见 https://www.yuque.com/dvqnxr/ztsh8g/ysygdp#MK9RJ
47   */
48  prefix?: string;
49}

v2配置（推荐）

以上配置方法适用于老版本模板，次v2版本适用于作者开源库后的配置：

2025年6月8日13:54:44 更新

这个版本终于把之前51la不显示的问题解决了。😜

（1）填写自己的id ck信息

docs\.vitepress\config.ts文件：

image-20250608135035353

（2）继续配置

配置footerino部分：

docs\.vitepress\config.ts文件：

 1  footerInfo: {
 2    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
 3    topMessage: [
 4      `<span><img alt="VitePress" src="https://liuyuyang.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanimals.65eaf6e3.avif&w=750&q=75"><span/>`,
 5  
 6      `<a target="_blank" href="https://vitepress.dev/" title="本站框架基于 VitePress_v1.6.3" ><img alt="VitePress" src="https://img.shields.io/badge/Frame-VitePress-4868C2?logo=vitepress&amp;logoColor=fff" ></a>
 7      <a target="_blank" href="https://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></a>
 8  
 9      <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="本站内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"><img alt="Copyright" src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?logo=coursera&amp;logoColor=fff"></a>
10      <a target="_blank" href="https://www.algolia.com/" title="本站搜索服务使用 Algolia"><img alt="Algolia" src="https://img.shields.io/badge/Search-Algolia-3095FA?logo=Algolia"></a>
11  
12      <a target="_blank" href="https://www.aliyun.com/" title="本站部署服务使用 Aliyun"><img alt="Aliyun" src="https://img.shields.io/badge/Alibaba-Cloud?logo=alibabacloud&label=Server&color=%23FF6A00"></a>
13      <a target="_blank" href="https://umami.is/" title="本站统计服务使用 Umami"><img alt="Umami" src="https://img.shields.io/badge/umami-000000?logo=umami&label=Count&color=%23000000"></a>
14      <a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx"><img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy"></a>`,
15    ],    
16    theme: {
17      name: `Theme By Teek@${version}-2025.6.4`,
18    },
19    // topMessage: ["初闻不知曲中意，再听已是曲中人"],
20    bottomMessage: [
21      `<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1"></script>`,
22      `<span style="margin: 0; display: inline;"> <span id="runtime"></span></span>`,// 搭配 ./theme/helper/useFooterRuntime.ts
23      `<a href="https://51.la/" target="_blank" style="display:flex;align-items:center;justify-content:center;">本网站由51.LA <img src="https://51.la/favicon.ico" style="width:16px;height:16px;" alt="51.LA"> 提供数据统计服务</a>`,
24      "初闻不知曲中意，再听已是曲中人",
25    ],   
26
27    copyright: {
28      createYear: 2025,
29      suffix: "Teek",
30    },
31    icpRecord: {
32      name: "陇ICP备2023002645号",
33      link: "http://beian.miit.gov.cn/",
34    },
35    // 网络安全备案信息配置
36    securityRecord: {
37      name: "甘公网安备62102702000211号",
38      link: "https://beian.mps.gov.cn/",
39    },    
40    // customHtml: `<span id="runtime"></span>`, // 搭配 .vitepress/theme/helper/useRuntime.ts 使用
41  },

image-20250608135153653

（3）取消如下注释

docs\.vitepress\theme\config\teekConfig.ts文件

image-20250608135255440

（4）创建docs\.vitepress\theme\styles\var.scss文件

 1/* 页脚微章居中 */
 2.tk-footer-info p {
 3    display: flex;
 4    justify-content: center;
 5  }
 6  
 7  /* 移动端页脚微章布局 */
 8  @media (max-width: 768px) {
 9    .tk-footer-info p {
10      display: flex;
11      justify-content: center;
12      align-items: center;
13      flex-wrap: wrap;
14      font-weight: 500;
15    }
16    
17    .tk-footer-info p a {
18      display: flex;
19      justify-content: center;
20      align-items: center;
21      margin: 0.2rem;
22    }
23  }
24  
25  /* 页脚微章图片 */
26  .tk-footer-info p img {
27    margin-left: 10px;
28  }

image-20250608135343981

(5)打包，推送后，观察现象（完美）

image-20250608135421042

📡
👤 作者: One
🔗 链接: https://onedayxyy.cn/topics/kkphs
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 One Blog！
最新文章

文档导航