惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

P
Proofpoint News Feed
云风的 BLOG
云风的 BLOG
Apple Machine Learning Research
Apple Machine Learning Research
Hugging Face - Blog
Hugging Face - Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Google DeepMind News
Google DeepMind News
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
雷峰网
雷峰网
B
Blog
月光博客
月光博客
博客园 - 【当耐特】
WordPress大学
WordPress大学
Microsoft Azure Blog
Microsoft Azure Blog
I
InfoQ
The GitHub Blog
The GitHub Blog
Engineering at Meta
Engineering at Meta
Jina AI
Jina AI
博客园 - Franky
MyScale Blog
MyScale Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
Last Week in AI
Last Week in AI
B
Blog RSS Feed
H
Help Net Security

澄沨的漫游茶记

《向山进发》巡礼·富士山吉田线 - 澄沨的漫游茶记 こんにちは、Astro - 澄沨的漫游茶记 岁暮杂记 在 KOReader 上显示直排文本 虎落平阳:TNO 美国罗伯特·F·肯尼迪线·前篇 烟火·乙巳 蜀都行纪 实习日 事故小记 烟火·甲辰 藏地行纪 元旦杂记 浴火重生:TNO 东方红西北国防阵线党权线·后篇 太阳旗之下:TNO 东方红西北国防阵线党权线·前篇 尚在人间:TNO 乌克兰-苏维埃社会主义共和国线 上海电信 SDN 网关全局域网皆可收看 IPTV 的实现 论 AList 的滥用:多平台串联搭建个人影音-番剧流媒体服务 俄罗斯已逝:TNO 俄罗斯科米-神俄线·后篇 紫日高悬:TNO 俄罗斯科米-神俄线·前篇 The Pure WINDOWS Project: 使用 Windows Sandbox 隔离腾讯系软件的笔记 廣東手艺人:TNO 广东国索尼-长江实业线 使用 PaaS 服务部署 umami 统计工具的笔记 柏林春晓:TNO 德国施佩尔左线 闲话 COMICUP 与敝站 解决小米手机在 fastboot 模式下不被 Windows 识别的问题 贺正·癸卯 MIUI 下观看 Netflix 等流媒体时 Widevine DRM L1 认证失效之解决 崇明骑行纪事·合 磊哥小传
Moe-counter: 给网站装上多种风格可选的萌萌计数器
澄沨 · 2022-05-09 · via 澄沨的漫游茶记

如题可见,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 这个配置文件,编辑为如下形态:

1
2
3
4
5
app:
port: 3000

db:
type: sqlite

一切完成之后,执行 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 了。