One

主题

One2025-04-07
2504
12.6m
Get...

51la统计 ​

51la统计 ​

image-20250408073451295

目录 ​

[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）注册

image-20250408073520360

bash
<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>

（2）安装

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

（3）使用

  • 在 docs\.vitepress\config.mts 中引入插件
ts
import { defineConfig } from "vitepress";
import { La51Plugin } from "vitepress-plugin-51la";

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

我的：

ts
import { defineConfig } from "vitepress";
import { La51Plugin } from "vitepress-plugin-51la"; //引入51la统计

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

（4）构建

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

sh
pnpm docs:dev

（5）观察

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

image-20250408073245611

image-20250408073430873

image-20250408073451295

扩展：使用数据挂件 ​

bash
<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 ：

ts
  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: ["初闻不知曲中意，再听已是曲中人"],
    theme: {
      name: `Theme By Teek@${version}-2025.4.10`,
    },
    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    

    // customHtml: `<p>小破站已运行了 <span id="footer-runtime"></span></p>`,    
    customHtml: `<div style="display: flex; align-items: center; gap: 8px;">
                <div>
                  <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>
                </div>
              </div>
              `,
    bottomMessage: [`<p>小破站已运行了 <span id="footer-runtime"></span></p>`],

  },

image-20250412164407579

  • 效果

image-20250412164426143

v2 ​

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

ts
  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: ["初闻不知曲中意，再听已是曲中人"],
    theme: {
      name: `Theme By Teek@${version}-2025.4.10`,
    },
    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    

    // customHtml: `<p>小破站已运行了 <span id="footer-runtime"></span></p>`,    
    customHtml: `<div style="display: flex; align-items: center; gap: 8px;">
                <div>
                  <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>
                </div>
              </div>
              `,
    bottomMessage: [`<p>小破站已运行了 <span id="footer-runtime"></span></p>`],

  },

image-20250412164407579

  • 效果

image-20250412164426143

v3 ​

2025.4.14

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

  • 代码
ts
  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: ["初闻不知曲中意，再听已是曲中人"],
    bottomMessage: [
      `<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>`,"欲买桂花同载酒，终不似少年游",
    ],   
    theme: {
      name: `Theme By Teek@${version}-2025.4.10`,
    },
    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    

    customHtml: `<p style="margin: 0; display: inline;">小破站已运行了 <span id="footer-runtime"></span></p>`,

  },
  • 效果

image-20250414215443989

v4（最终版） ​

2025年4月16日修改。

  • 编辑docs\.vitepress\config.mts ：
ts
  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: ["初闻不知曲中意，再听已是曲中人"],
    bottomMessage: [
      `<span style="margin: 0; display: inline;">本站已在地球上苟活了 <span id="footer-runtime"></span></span>`,// 搭配 ./theme/helper/useFooterRuntime.ts
      `<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>`,
    ],   
    theme: {
      name: `Theme By Teek@${version}-2025.4.10`,
    },
    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    
    // customHtml: `<p style="margin: 0; display: inline;">小破站已运行了 <span id="footer-runtime"></span></p>`,
  },

image-20250416133428662

  • 效果

image-20250416133455011

更多用法 ​

  • 构建开发都生效
ts
La51Plugin({
  id: "your-id",
  ck: "your-ck",
  apply: "all",
});
  • 异步引入
ts
La51Plugin({
  id: "your-id",
  ck: "your-ck",
  importType: "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;
}

v2配置（推荐） ​

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

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

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

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

docs\.vitepress\config.ts文件：

image-20250608135035353

（2）继续配置

配置footerino部分：

docs\.vitepress\config.ts文件：

ts
  footerInfo: {
    // bottomMessage: ["初闻不知曲中意，再听已是曲中人"],
    topMessage: [
      `<span><img alt="VitePress" src="https://liuyuyang.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanimals.65eaf6e3.webp&w=750&q=75"><span/>`,
  
      `<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>
      <a target="_blank" href="https://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></a>
  
      <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>
      <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>
  
      <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>
      <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>
      <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>`,
    ],    
    theme: {
      name: `Theme By Teek@${version}-2025.6.4`,
    },
    // topMessage: ["初闻不知曲中意，再听已是曲中人"],
    bottomMessage: [
      `<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>`,
      `<span style="margin: 0; display: inline;"> <span id="runtime"></span></span>`,// 搭配 ./theme/helper/useFooterRuntime.ts
      `<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>`,
      "初闻不知曲中意，再听已是曲中人",
    ],   

    copyright: {
      createYear: 2025,
      suffix: "Teek",
    },
    icpRecord: {
      name: "陇ICP备2023002645号",
      link: "http://beian.miit.gov.cn/",
    },
    // 网络安全备案信息配置
    securityRecord: {
      name: "甘公网安备62102702000211号",
      link: "https://beian.mps.gov.cn/",
    },    
    // customHtml: `<span id="runtime"></span>`, // 搭配 .vitepress/theme/helper/useRuntime.ts 使用
  },

image-20250608135153653

（3）取消如下注释

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

image-20250608135255440

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

css
/* 页脚微章居中 */
.tk-footer-info p {
    display: flex;
    justify-content: center;
  }
  
  /* 移动端页脚微章布局 */
  @media (max-width: 768px) {
    .tk-footer-info p {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      font-weight: 500;
    }
    
    .tk-footer-info p a {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0.2rem;
    }
  }
  
  /* 页脚微章图片 */
  .tk-footer-info p img {
    margin-left: 10px;
  }

image-20250608135343981

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

image-20250608135421042

最近更新