Moe-counter: 给网站装上多种风格可选的萌萌计数器

封面来源：花時 | カントク #pixiv https://www.pixiv.net/artworks/97988399

如题可见，Moe-counter 是一款多种风格可选的萌萌计数器。Moe-counter 每被刷新一次，显示的数字便会 +1，借此达到计数的目的。敝站页脚就安装了 Moe-counter，阁下自可尝试 F5 刷新网页查看具体效果。

直接使用

Moe-counter 和很多优秀的项目一样，是开源的，不仅如此，Moe-counter 的数据是能被任何人访问的，因而就有直接白嫖作者 journey-ad 大佬本人的服务来用的条件。

通过 Moe-counter 的 Github 仓库地址，能够轻易寻得其 Demo 页的链接。打开 Demo 页，在 Tool 一栏中便可以看到一串链接，凭借这串链接便可以直接使用 Moe-counter 了。

链接的格式为 https://count.getloli.com/get/@:name?theme=asoul ，其中 :name 是计数器的 ID，使用不同的 name 就可以生成不同的计数器。后面的 asoul 则是计数器的主题外观，Moe-counter 拥有多种风格可选，点击 asoul 便出现选择框可以选择其他主题外观，点击 Get 即可查看预览效果。

Moe-counter 提供了多种链接使用，在 Demo 页的 How to use 中均有展示。最后，使用自己定制过后的链接，并挑选合适的链接格式放入相应网页即可。

自行部署

虽然直接使用作者本人的后端服务的方法比较简单，但是也难免会出现一些问题，比如说在下有时就碰到过计数器国内加载不畅。与其坐等作者修复，不如自己动手来得方便一些。

Moe-counter 仓库页的部署介绍写的比较简略，在下在这里再做些补充，考虑到操作的便利性，大部分操作是基于宝塔面板完成的。

Moe-counter 的后端部署需要 Node.js 环境，可以事先在宝塔面板软件中心安装 PM2 管理器解决。接着，放行服务器的 3000 端口以供 Moe-counter 使用。

部署环境搞定之后，使用 ssh 工具连接服务器，克隆 Moe-counter 仓库并安装依赖：

1
2
3

git clone https://github.com/journey-ad/Moe-counter.git
cd Moe-counter
yarn install

如若执行 yarn install 命令时出现 yarn: command not found 报错则说明服务器尚未安装 yarn 服务，执行 npm install --global yarn 命令安装之。

Moe-counter 可以使用 MongoDB 和 SQLite 两种方式储存数据，默认是 MongoDB，但方便起见在下这里使用 SQLite。进入 Moe-counter 的路径，找到 config.yml 这个配置文件，编辑为如下形态：

app:
  port: 3000

db:
  type: sqlite # sqlite or mongodb

一切完成之后，执行 yarn start 命令启动服务。

启动成功后便可以试着用浏览器访问 http://YOUR_SERVER_IP:3000/get/@自拟ID?theme=相应主题 来查看后端是否部署成功了，假如计数器正常显示且刷新过后数字能随即 +1，则大功告成。

测试成功后，还需要将 Moe-counter 添加到 PM2 管理器的运行项目中才能让其一直保持运作。打开 PM2 管理器的控制面板，添加一个新项目，选择 Moe-counter 路径下 index.js 作为启动文件，点击确认即可。

最后，如若想让自己的链接以域名显示，则需要创建一个反向代理。在宝塔网站管理中创建一个新网站，填入已经事先做好解析的域名，并配置好 SSL 证书。之后在网站设置当中选择反向代理，在目标 URL 填入 http://127.0.0.1:3000 ，站点就配置完成。

随后，便可以使用 https://YOUR_DOMAIN/get/@自拟ID?theme=相应主题 来使用 Moe-counter 了。