MoeCounterRe

井水玉藻

📦 开箱即用的 MoeCounterRe

MoeCounterRe 是一款基于 PHP 开发的轻量级、高度可定制的萌系访问计数器。它支持多种显示模式和输出格式，能够轻松集成到个人博客、GitHub 项目或其他网页中。

🚀 项目介绍

轻量高效：使用 SQLite 数据库，无需配置繁琐的 MySQL，开箱即用。
多主题支持：支持通过图片前缀切换不同的数字主题。
三种输出模式：
xml (SVG)：最推荐模式，将图片转为 Base64 嵌入 SVG，可直接在 GitHub <img> 标签中使用。
string：直接输出纯文本数字，方便 API 调用。
html：输出标准的 HTML <img> 标签组。
性能优化：内置单例模式连接数据库，并支持 ETag 浏览器缓存控制。

🛠️ 使用方法

1. 部署

将代码上传至服务器，确保 PHP 环境已开启 pdo_sqlite 和 sqlite3 扩展。
确保目录具有写权限，以便生成 Counter.db 数据库文件。

2. 参数说明

通过 URL Query 参数进行配置：

name: 计数器名称（如：index, github_profile），默认为 default。
theme: 主题前缀（需对应 img/ 目录下的文件名），默认为 rule34_。
min_len: 最小显示位数，不足则补 0。
out_mode: 输出格式，可选 xml, string, html。

3. 调用示例

在 GitHub Readme 中使用 (推荐)

![Moe-counter](https://love4z.cn/moec/?name=github&theme=rule34_&min_len=7)

直接作为接口获取数字

curl "https://love4z.cn/moec/?name=github&out_mode=string"

📂 文件结构

index.php: 程序入口，负责业务逻辑与配置。
lib.php: 核心库，包含数据库操作、安全过滤及渲染逻辑。
img/: 图片目录，存放不同主题的数字图片（命名规则：前缀{0-9}.gif）。
Counter.db: 自动生成的 SQLite 数据库文件。

⚠️ 安全说明

项目已内置 safeInput 函数，通过正则表达式 /[^a-zA-Z0-9_\-]/ 强制过滤所有输入参数，有效防止 路径穿越 和 SQL 注入 风险。

📄 开源协议

本项目遵循 MIT 协议。欢迎自由使用与二次开发。

项目地址：https://github.com/Raven777777/MoeCounterRe
原始来源：https://github.com/ApliNi/Moe-counter-PHP
工具使用：Gemini ChatGpt GLM

井水玉藻

Flarum 使用

在自定义页脚添加：

<script>
((n, c) => {
  // 1. 注入 CSS：优化了过渡属性(transition: all .3s) 和 动画帧(仅保留 to 帧)
  document.head.insertAdjacentHTML('beforeend', `
    <style>
      #app { display: flex!important; flex-direction: column!important; min-height: 100vh!important; padding-bottom: 0!important }
      .m-f { margin-top: auto; display: flex; flex-direction: column; align-items: center; padding: 20px 0; gap: 8px; opacity: 0; transform: translateY(333px); animation: fU var(--anim-duration,4s) var(--anim-easing,cubic-bezier(.25,1,.5,1)) forwards }
      @keyframes fU { to { opacity: 1; transform: translateY(0) } }
      .m-f.svg { opacity: 1; transform: translateY(0); animation: none }
      .m-f svg { display: flex; justify-content: center; width: 100%; transition: all .3s; filter: drop-shadow(0 8px 12px rgba(0,0,0,.1)); cursor: pointer }
      .m-f svg:hover { transform: scale(1.05); filter: drop-shadow(0 12px 16px rgba(0,0,0,.15)) }
      .m-f img { width: min(400px,85%) }
    </style>
  `);
  
  const r = () => {
    const a = document.getElementById('app');
    // 如果存在 #app 且还没注入过 .m-f 容器
    if (a && !a.querySelector('.m-f')) {
      // 2. 注入 HTML，将冗余的 span 合并
      a.insertAdjacentHTML('beforeend', `<div class="m-f"><a href="https://love4z.cn/moec/" target="_blank"></a><span style="font-size:12px;letter-spacing:1px;color:${c};font-weight:bold">MoeCounter</span></div>`);
      
      // 3. 直接通过子节点引用提高效率，替代 querySelector
      const m = a.lastChild; 
      const e = m.firstChild; 
      
      // 添加类名状态 (用 true 的等价物 1 替代)
      m.addEventListener('animationend', () => m.classList.add('a'), { once: 1 });
      
      // 4. Promise 链式短路请求替代 try/catch，更加清爽
      fetch(`https://love4z.cn/moec/?name=${n}`)
        .then(t => t.ok && t.text())
        .then(t => t && (e.innerHTML = t))
        .catch(t => console.error('L 404', t));
    }
  };
  
  new MutationObserver(r).observe(document.body, { childList: 1, subtree: 1 });
  r();
})('', '#ffb6c1');
</script>

最末端的是自定义计数器名称，请自行替换
也可以替换成自己部署的
https://love4z.cn/moec
顺便解决了NT Firefox Nightly Gif动画静止的问题
https://discuss.flarum.org/d/39268-moecounterre

井水玉藻

NodeBB 使用

在自定义脚本添加：

!function(){let e=document,t=e.documentElement,s=e.body;t.style.height='100%',Object.assign(s.style,{minHeight:'100%',display:'flex',flexDirection:'column',margin:'0'});let o=e.createElement('div');o.style.cssText='display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0;width:100%;gap:10px;margin-top:auto;',o.innerHTML='<a href="https://love4z.cn/moec/" target="_blank" style="display:block;transition:transform .3s;line-height:0" onmouseover="this.style.transform=\'scale(1.1)\'" onmouseout="this.style.transform=\'scale(1)\'"><img src="https://love4z.cn/moec/?name=clouldon&out_mode=xml" style="display:block;max-width:200px;height:auto;filter:drop-shadow(0 8px 12px rgba(0,0,0,.1))"></a><span style="font-size:12px;color:#ffb6c1;font-weight:700;letter-spacing:1px">MoeCounter</span>';let n=()=>{(e.querySelector('footer')||s).appendChild(o)};'loading'===e.readyState?e.addEventListener('DOMContentLoaded',n):n()}();

火狐你崛起吧！