配置51la统计

配置51la统计

目录

• 配置51la统计
• 目录
• 背景
• 版权
• 环境
• 简介
• 配置
• 扩展：使用数据挂件
  • v1
  • v2
  • v3
  • v4（最终版）
• 更多用法

[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:<script>LA.init({id:"你的id",ck:"你的ck"})</script>

（2）安装

cd/d/vitepress-theme-teek-one-privatepnpmaddvitepress-plugin-51la-D

（3）使用

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

import{defineConfig } from"vitepress";import{La51Plugin } from"vitepress-plugin-51la";exportdefaultdefineConfig({vite:{plugins:[La51Plugin({id:"your-id",ck:"your-ck",}),],},});

我的：

import{defineConfig } from"vitepress";import{La51Plugin } from"vitepress-plugin-51la";exportdefaultdefineConfig({vite:{plugins:[La51Plugin({id:"your-id",ck:"your-ck",}),],},});

（4）构建

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

pnpmdocs:dev

（5）观察

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

扩展：使用数据挂件

<script id="LA-DATA-WIDGET"crossorigin="anonymous"charset="UTF-8"src="https:topMessage:["初闻不知曲中意，再听已是曲中人"],theme:{name:`Theme By Teek@${version}-2025.4.10`,},copyright:{createYear:2025,suffix:"Teek",},icpRecord:{name:"陇ICP备2023002645号",link:"http:},securityRecord:{name:"甘公网安备62102702000211号",link:"https:},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>`],},

• 效果

v2

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

footerInfo:{topMessage:["初闻不知曲中意，再听已是曲中人"],theme:{name:`Theme By Teek@${version}-2025.4.10`,},copyright:{createYear:2025,suffix:"Teek",},icpRecord:{name:"陇ICP备2023002645号",link:"http:},securityRecord:{name:"甘公网安备62102702000211号",link:"https:},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>`],},

• 效果

v3

2025.4.14

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

• 代码

footerInfo:{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:},securityRecord:{name:"甘公网安备62102702000211号",link:"https:},customHtml:`<p style="margin: 0; display: inline;">小破站已运行了 <span id="footer-runtime"></span></p>`,},

• 效果

v4（最终版）

2025年4月16日修改。

• 编辑docs\.vitepress\config.mts：

footerInfo:{topMessage:["初闻不知曲中意，再听已是曲中人"],bottomMessage:[`<span style="margin: 0; display: inline;">本站已在地球上苟活了 <span id="footer-runtime"></span></span>`,`<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:},securityRecord:{name:"甘公网安备62102702000211号",link:"https:},},

• 效果

更多用法

• 构建开发都生效

La51Plugin({id:"your-id",ck:"your-ck",apply:"all",});

• 异步引入

La51Plugin({id:"your-id",ck:"your-ck",importType:"async",});

• 完整配置

exportinterfaceLA51PluginOptions{id:string;ck:string;importMode?:"sync"|"async"|"old";apply?:"build"|"serve"|"all";autoTrack?:boolean;hashMode?:boolean;screenRecord?:boolean;sdk?:string;prefix?:string;}