WinNote

一个轻量级MD文档收集博客，不保证阅读性
使用树莓派+hexo构建，定制化next主题，github部署
2023.9.8更新
使用eci容器构建，自制镜像，cdn加速

一些编辑的Tips:
首页文章预览至：

1

<!-- more -->

markdown paste粘图：

1

ctrl+art+a

本站加速域名：https://md.winotmk.com/
正式站：winotmk.com

最近搭了个memos笔记服务，但是这个小服务本身很精简不包含https相关设置，所以打算用NPM套一层实现SSL访问

Docker安装NPM(Nginx Proxy Manager)

先pull镜像：

1

docker pull jc21/nginx-proxy-manager:latest 

好了之后再run：

1

docker run -d -v ~/nginx-proxy/letsencrypt:/etc/letsencrypt -v ~/nginx-proxy/data:/data -p 80:80 -p 5081:81 -p 443:443 --name npm  jc21/nginx-proxy-manager:latest

要映射出来的主要就80和443端口，分别对应http和https服务，自己家用服务器别想了，电信联通基本不会给家用宽带这个端口的，我这个是阿里云99服务器上直接搭的。81端口是NPM的后台WebUI界面，我故意映射到了5081端口自用
另外就80和443端口很有可能被已有默认服务占用，如果提示占用可用lsof -i:443检查一下

登录NPM并配置

1. 通过 服务器IP:5081(刚才设置的端口),可以访问NPM后台管理平台

默认帐户：admin@example.com
默认密码：changeme

2. 申请SSL证书
   在 SSL Certificates页面里点Add SSL Certificate
   我选择使用DNS的认证方式，它自带有我买域名的服务商阿里云的相关设置，填入自己账号的key后即可签发*.winotmk.com证书
   选择DNS还有个好处就是即便NPM服务没用80/443端口也可以完成认证

3. 添加代理规则

选Proxy Hosts里的Add Proxy Hosts
在Details里：

第一行的Domain Names是最后要访问的域名
第二行红框里则是源网站的信息，因为自身不带https所以选http，这个域名本身是我家里的群晖DDNS域名，勾可全选
然后在SSL标签页选择刚才申请的证书，下面选项我全选

好了npm的设置就此结束啦

现在我们还需要将刚才代理的域名设置一下解析

设置dns解析

在买域名的地方设置一条A记录

记录值当然就是我这台ECS服务器的公网IP地址辣,等dns刷新后就能愉快地用上面代理的域名以SSL访问了

本文部分参考：
https://zhuanlan.zhihu.com/p/667156872

遇到的问题

在我准备rm -rf ./hugo_blog_temp 删除一个目录时候
他提示

1

rm: cannot remove './hugo_blog_temp/.git/objects/pack/.nfs0000000000019b0d00000004': Device or resource busy

显然是有进程占用了，那么如何定位是什么进程占用并kill这个进程呢？

使用 lsof 查找进程

1
2
3
4
5

# 定位正在使用该目录的进程
lsof +D ./hugo_blog_temp

# 或者直接指定被锁定的文件
lsof ./hugo_blog_temp/.git/objects/pack/.nfs0000000000019b0d00000004

然后就会得到类似：

1
2

COMMAND  PID USER   FD   TYPE DEVICE SIZE/OFF   NODE NAME
git     1234 user  cwd    DIR   0,46     4096 123456 /path/to/hugo_blog_temp

可以用来找占用的端口：

1

lsof -i:443

得到类似：

1
2
3

COMMAND     PID  USER   FD   TYPE    DEVICE SIZE/OFF NODE NAME
caddy   1103090 caddy    6u  IPv6 153681762      0t0  TCP *:https (LISTEN)
caddy   1103090 caddy    8u  IPv6 153681763      0t0  UDP *:https 

终止进程：

1

kill -9 1234  # 将 1234 替换为实际 PID

这样即可结束掉占用进程，这个时候就可以rm -rf ./hugo_blog_temp 了

其他方法

使用 fuser 查找进程

1
2
3
4
5

# 查看占用文件的进程 PID
fuser -v ./hugo_blog_temp/.git/objects/pack/.nfs0000000000019b0d00000004

# 终止所有占用该文件的进程
fuser -k ./hugo_blog_temp/.git/objects/pack/.nfs0000000000019b0d00000004

https://www.visioncortex.org/vtracer-docs
发现一个很好用的任意位图转SVG的工具，还是在线的，同时网站上还有别的可以在线转换的工具
转换工具的地址是：
https://www.visioncortex.org/vtracer/

我丢了一张图上去默认参数就很不错：

以下直接由SVG绘图：

我时常看到一些想看的视频、文章、电影，但是苦于时间安排冲突，只能先记下来有时间再看。一开始直接用微信给自己发消息，有空时候再扫一眼看给自己都发了些啥，但是如果想对发给自己的消息再分门别类整理那就不可能了，所以专门收集了一些速记类app

总结一下我有如下的需求：

• 小巧速记类，而不是云同步文档，最好有对速记加标签等分类整理功能
• 三端同步(windows,mac,ios)
• 好用，多端体验一定得好,能有类似Chrome插件就更好了
• 最好免费开源或者买断式付费，可以接受自托管（有现成的NAS和云服务可以折腾）

入围软件

这类软件应该叫稍后读，速记，剪藏类软件？介于todolist列表和Notion那种文档软件之间，大致找到了如下软件，每个都至少双端试用了一下：

Cubox

https://cubox.pro/
网站的小眼睛会跟着鼠标移动让人有想要复刻的想法

• 核心场景：稍后读、网页收藏、碎片信息归档
• 同步方式：自动实时同步，数据存储在云端
• 缺点补充：免费版无全文搜索，标签管理逻辑较复杂
  可以保存网站，也可以当卡片笔记用，Chrome插件体验不错，甚至有点过于热情了，网页选中一段就蹦出来
  

比较特色的功能有：

• Chrome等插件体验很好，更适合直接存网页摘要
• 归档，分类，标注功能完善

本来挺喜欢cubox的，但是隔一段时间没用，想起来记一些东西的时候总tm让我登录登录，我绑微信的还要去拿手机扫，得去隔壁屋拿个充电中的手机再过来扫，这么一下瞬间就没那么想记了，别说什么是为了数据安全，安全性有要求的东西我也不会放这里面，没做好安全保护反而让用户总是登录，这就是没设计好，一下子体验拉垮了

Flomo

https://flomoapp.com/
https://help.flomoapp.com/basic/app.html

• 核心场景：灵感速记、碎片化内容轻量化管理
• 同步方式：手动/自动同步，数据存储在云端
• 缺点补充：教你用软件，甚至直接断定你做笔记的方式是错误的，无处不在的强调自身理念，你有自己的使用想法？不好意思我没这么教过

flomo和cubox这俩真的很像，都是卡片式速记，通过标签和分类来管理，都是多端同步免费，但是一些高级功能要付费

flomo：界面十分友好现代，也有chrome插件（调API实现，需要会员），可以直接自己调用API（需要会员）
windows端还可以类似便利贴直接贴个小窗口出来，交互十分友好
如果这软件是可开源可自托管的那么这就很接近我的理想型了

比较特色的功能有：

• 每日随机蹦出来以前的笔记（帮助回味？）
• 微信输入，这个还是很不错的，绑定好微信后，直接给其公众号发消息，就会自动生成卡片到笔记库里
• API调用，感觉搭配现在AI做一些很轻量的程序来调用API可以做很多事情了，可惜调API要付费
• 卡片可以便利贴独立窗口
  

总之初识很抱有好感的一个软件，但是无处不在的强调自身甚至质疑用户的做法以及年费付费才能用得舒服还是让人要小犹豫一下
后面甚至发现其默认快捷键绑架了Ctrl+N，当你想新开窗口和创建文件夹的时候弹出来的都是速记，真离谱

Logseq

https://github.com/logseq/logseq
https://docs.logseq.com/#/page/contents
https://logseq.com/

• 核心场景：个人知识库、深度知识管理
• 同步方式：通过插件支持Git/WebDAV同步，本地文件优先
• 缺点补充：移动端功能有限

比较特色的功能有：

• 白板功能类似ipad上的几何画板
• 图谱视角类似Obsidian，文档多了以后貌似可以看出相关性
• 界面和UI现代，似乎也有WEB端直接网页用
• 开源！免费！
• 桌面端插件意外丰富，看来还是有一批用户的，当然都是开源的

自身基本不含云同步的功能，存本地目录的，借由icloud和同步文件夹来实现同步，IOS端看起来也挺不错，但是功能有些适应不了，更适合拿来记笔记而不是类似上面的速记软件
总结更像个轻量开源版的Obsidian笔记软件

Joplin

https://github.com/laurent22/joplin

• 核心场景：隐私优先的跨平台笔记、Markdown写作
• 同步方式：需自建WebDAV/Nextcloud/Dropbox等同步服务
• 缺点补充：初始配置复杂，无官方云同步（需自行解决）

朴实无华的多端MD文档实现的小笔记软件，自带一个和VScode的MD插件很像的md文档编辑和预览工具。。只能说这界面，这预览，让人梦回10年前

比较特色的功能有：

• 质朴甚至有些简陋的不现代的UI风格，或许也是种优点
• 支持多种多端同步的方式可自由设置
• 居然也有chrome和火狐插件
• 有ios和安卓APP，设置好后多端体验尚可
• 开源！免费！可折腾！

可以说如果能接受这个老掉牙的UI和交互，剩下的优点就很多了

iphone端上的这个列表实在是太丑了，还不能切换为别的样式，就像个还没加任何样式的demo…

Raindrop.io

https://raindrop.io/

• 核心场景：书签管理、链接收藏与共享
• 同步方式：自动实时同步，数据存储在云端
• 缺点补充：免费版功能较基础，稍后读体验一般
  简而言之这就是个大号的浏览器收藏夹，想要自己写点随笔/插入个图片似乎也不行。并不很符合我现在的需求，看了眼就先放一边了

Memos

https://github.com/usememos/memos
https://www.usememos.com/docs

• 核心场景：web端极简速记，碎片化内容轻量化管理
• 同步方式：web端服务
• 缺点补充：需要自部署折腾一点

这个是最后补充的，就在我有些失望发现没有特别满足我需求的项目时，Memos出现了！简直太棒辣，而且这界面怎么这么像Flomo，你俩谁参考谁的啊。。这个日期。。这个标签，这个卡片，这个webhook调用的功能。。。真是太像Open Flomo了
已经准备用Memos自搭服务了，反正Nas一直开着跑svn和文件服务，多一个小memos根本不算什么，在我有些犹豫IOS端怎么解决时，居然发现了有人做了IOS客户端，这是何其妙啊
https://github.com/mudkipme/MoeMemos

Notion和Evernote还有Obsidian这里就不考虑了，感觉更偏向文档管理，功能过于多了一点，有时我真的只是想拿起就记一下某个想看的电影

评测表格对比

以下是从特色功能、多端同步方式、免费/收费模式、优缺点等维度对 Cubox、Flomo、Logseq、Joplin、Raindrop.io 的详细评测对比，并附总结表格：

总结推荐

• 如果追求数据自主和免费，优先选择 Logseq 或 Joplin（需接受一定学习成本）。
• 如果希望开箱即用+美观体验，选择 Cubox 或 Flomo（免费版可满足基础需求）。

其他同类软件

Craft

https://www.craft.do/

果味很浓的文档类软件，似乎有些强联网，上来就要登录，离线只是顺带支持的功能，免费用户只能存10篇文档，不知道有什么无可替代性让它自诩为Craft the best docs in the world

让人觉得有些奇特的是用起来却很象：
https://payloadcms.com/
Payload无头式CMS，拖拽式编辑MD文档嘛~

Eagle

顺嘴提一下这个主要针对图片和资产收集的软件，这个在桌面端用得就非常的舒服，买断制付费我欣然接受，云同步也可以借由NAS的目录同步方案解决，是很理想的图片收集方案

Pocket

https://support.mozilla.org/zh-CN/products/pocket

看起来也像是个大号的网页收藏夹，似乎和mozilla火狐浏览器生态贴合比较紧密

Trilium 知识库

https://github.com/zadam/trilium?tab=readme-ov-file
是一款层级的笔记应用程序，专注于构建大型个人知识库

Tiddlywiki 知识库

https://tiddlywiki.com/
https://github.com/TiddlyWiki/TiddlyWiki5
Node.js实现的卡片式笔记 Wiki，个人网络笔记本，web端即可用

用ssh密钥连接到github仓库

生成 SSH

生成 SSH 密钥（如果还没有）：

1

ssh-keygen -t ed25519 -C "you_email@email.com"

将公钥添加到平台

• 复制公钥内容：cat ~/.ssh/id_ed25519.pub
• 添加到 GitHub: Settings → SSH and GPG keys → New SSH key

我们想git clone一个自己的仓库，然后发现说没有权限

可是我明明已经生成了密钥呀
这就好比有了钥匙，但是没把钥匙加入到开锁的钥匙串里，你不知道你有这把钥匙（弱智

列出所有SSH密钥文件

1

ls -al ~/.ssh

按回车接受默认路径，设置密码（可选）

添加密钥到 SSH 代理：

1
2

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_ed25519

解释：

1. eval "$(ssh-agent -s)"

• 作用：启动 ssh-agent 后台服务，并自动设置所需的环境变量（SSH_AUTH_SOCK 和 SSH_AGENT_PID）。
  • ssh-agent 是一个管理 SSH 密钥的守护进程，它会记住你添加的密钥，避免每次使用密钥时重复输入密码。
  • eval 会解析 ssh-agent -s 的输出（环境变量设置命令），并直接在当前 Shell 中生效。

2. ssh-add ~/.ssh/id_ed25519

• 作用：将指定的 SSH 私钥（id_ed25519）添加到 ssh-agent 中管理。
  • 如果私钥有密码保护，执行时会提示输入密码（只需输入一次，之后由 ssh-agent 自动管理）。
  • ~/.ssh/id_ed25519 是私钥文件的默认路径（根据你生成密钥时的设置）。

并且这样应该也适用于保管好密钥文件后，在别的PC上使用该密钥登录

原有本地目录简介

这个本地目录几经辗转，更新目录可见
https://md.winotmk.com/posts/winnote/
最早是在一块树莓派3B的TF卡上，然后试图使用阿里云eci容器+自制docker镜像构建，到现在基本稳定在文件存在阿里云NAS上，然后挂载给ECS服务器打包，今天或许是它最终的归宿了，直接塞进github仓库，使用action触发部署

准备工作

• 源码仓库：存放Hexo源文件（如文章、主题、配置等）。
• 目标仓库：GitHub Pages仓库（格式为 <username>.github.io），用于存放生成的静态文件。
  
• 生成SSH密钥对：

  1	ssh-keygen -t ed25519 -C "github-actions@example.com"

  • 将公钥（如 id_ed25519.pub）添加到目标仓库的 Deploy Keys（需勾选允许写入权限）。
  • 将私钥（id_ed25519）保存到源码仓库的 Secrets 中，命名为 ACTIONS_DEPLOY_KEY。
    ACTIONS_DEPLOY_KEY存在这里：
    

将我本地目录的所有内容，push到源码仓库里保存，因为我换了图床，所有图片均不必在博客目录里保存，删了所有的图片的目录体积小了很多

创建GitHub Actions工作流

在源码仓库的 .github/workflows/deploy.yml 文件中添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

name: Deploy Hexo Site

on:
  push:
    branches:
      - main  # 触发分支，根据实际情况修改

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # 步骤1：检出源码仓库
      - name: Checkout Source
        uses: actions/checkout@v4

      - name: pwd & ls
        run: pwd & ls

      # 步骤2：设置Node.js环境
      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20.5'  # 根据你的需求调整版本

      # 步骤3：缓存Node.js依赖，加速构建
      - name: Cache Node Modules
        uses: actions/cache@v3
        env:
          cache-name: node-modules
        with:
          path: node_modules
          key: ${{ runner.os }}-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}

      # 步骤4：安装Hexo及依赖
      - name: Install dependencies
        run: npm install
      
      - name: Install Dependencies
        run: npm install -g hexo-cli  # 全局安装Hexo命令行工具

      # 步骤5：生成静态文件
      - name: Generate Site
        run: hexo generate  # 生成静态文件到public目录

      # 步骤6：部署到目标仓库
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}  # 使用私钥认证
          external_repository: winotmk/winotmk.github.io  # 目标仓库名称
          publish_dir: ./public  # Hexo生成的静态文件目录
          publish_branch: hexo-new-deploy  # 目标仓库的分支
          user_name: winotmk  # 提交者信息（可选）
          user_email: 5500330147@qq.com  # 提交者邮箱（可选）

踩过的坑

node_modules目录问题：

本地目录push到源码仓库里的时候，发现自动排除了node_modules目录和public目录，和deepseek确认加排查了.gitignore文件确认它们确实被排除了，这node_modules目录里的东西讲道理会在package.json里有所定义，并在上面的action里重新下载设置，所以是没必要传的（而且较大文件居多又碎），但无奈我的hexo-theme-next主题也在其中，并且我自己后来还修改过，还是试着上传一下node_modules目录到github库里吧，然而上传后启用action，到了步骤5总是报错：

估么着是因为在action里装了一遍npm install -g hexo-cli然后仓库里还有一份node_modules，出了些冲突？
总之最后还是删除了库里的node_modules目录，就能正常action了

排序出错

我可能是修改过node_modules包里的hexo-generator-index，现在每次构建重新拉肯定就不对了，所以在package.json里的这里

改为

1

"hexo-generator-index": "^4.0.0",

https://www.npmjs.com/package/hexo-generator-index
然后再需要置顶的文章头FM里加入sticky: 100即可实现置顶

参考出处：
https://blog.51cto.com/u_15477117/4919708
但没采用，因为发现更新版本的hexo-generator-index已经支持置顶

发现和本文思路类似的action，也是两个仓库+使用peaceiris/actions-gh-pages这个action部署生成好的静态页面
https://hackergavin.com/2024/01/11/hexo-automate-deploy/

之前已经配置好了disqusjs评论
https://md.winotmk.com/posts/250310-%E9%9D%99%E6%80%81%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0disqusjs%E8%AF%84%E8%AE%BA/
但是梯内环境还是不够稳定，所有换成了waline，稍微麻烦一些，其服务需要部署，所配套的数据库也需要部署，好在这俩都有完全免费的方案，自己博客用一用足够了

创建TiDB数据库

创建TiDB数据表

据说快速上手部分推荐用的LeanCloud已经不太好用的了，所以数据库部分我选择了TiDB
https://waline.js.org/guide/deploy/tidb.html
实际搭建的时候发现比教程图示的TiDB稍微改版了一点
点右上角的Create Cluster来创建一个实例，免费版已有每月50M请求和5GB永久空间，足够用了

创建好后默认的实例名会叫Cluster0，点进去在左边找到SQLEditor的TAB，打开GettingStarted
然后将这里所有的内容粘贴进来
https://github.com/walinejs/waline/blob/main/assets/waline.tidb
粘好后会是下图这样的，这告诉了TiDB如何建立数据表

之后每行字段都要分别点一些右上角的RUN按钮运行，要注意的是实际上有5行字段，所以要选中然后再点击一共5次

1
2
3
4
5

CREATE DATABASE `waline`;
USE waline;
CREATE TABLE `wl_Comment` (...)
CREATE TABLE `wl_Counter` (...)
CREATE TABLE `wl_Users` (...)

之后你将应该得到类似这样的数据库Schemas表

恭喜到就已经创建好了

获取数据库连接信息

直接点击左侧的OverviewTAB，右上角会有个Connect按钮

这里选一下Database为waline（就是刚才创建的那张表），第一次需要创建一下密码，自己记录好,ConnectWith选项倒是无所谓，因为我们要自己记录下数据给Vercel部署部署时环境变量用,从这里我们就获得了：
TIDB_DB，TIDB_USER，TIDB_PASSWORD，TIDB_HOST的所有信息

Vercel部署

https://waline.js.org/guide/deploy/vercel.html
选GitHub然后照着一步步新建就行

稍微踩了坑的地方在于环境变量配置
点击顶部的 Settings - Environment Variables 进入环境变量配置页

这么多环境变量其实就实现两件事，一件是连同TiDB数据库，一件是连SMTP邮件服务，让有新评论时给我发邮件

连通TiDB数据库

https://waline.js.org/reference/server/env.html#%E6%95%B0%E6%8D%AE%E5%BA%93
官方文档的数据库变量部分写到了TiDB相关的变量

这里实际上需要的就是TIDB_DB，TIDB_USER，TIDB_PASSWORD，TIDB_HOST，我们上面已经获得到了

SMTP服务

https://waline.js.org/guide/features/notification.html#%E9%82%AE%E4%BB%B6%E9%80%9A%E7%9F%A5
邮件相关文档在这里

我使用阿里云的邮件服务（其实QQ邮箱新浪什么的都可以）
https://dm.console.aliyun.com/
开通阿里云的STMP服务得有自己的域名，按照指示设置好自己域名的各种TXT解析就好，这里主要需要得到SMTP_PORT，SMTP_HOST，SMTP_PASS，SMTP_USER，对于阿里云的邮件服务：
SMTP_HOST是smtpdm.aliyun.com
SMTP_PORT是465
SMTP_PASS是自己设置的密码
SMTP_USER是自己绑定好的发信域名
还有个AUTHOR_EMAIL是自己常用的email地址，用来接受博客发给自己的消息

改完环境变量以后点击保存会问你要不要redeploy重新部署，环境变量重部署后才会生效

添加自己的域名

DomainsTAB里点Add添加，

这里的Redirect to就选No Redirect就好了，不然还会跳转域名
然后要在自己的域名提供商那里加TXT解析，验证通过就能用了
waline.winotmk.com
这就是我在Vercel上部署完成后的自有waline链接啦~~
服务上线后立即域名+/ui,比如我的是
https://waline.winotmk.com/ui
来注册第一个账号，会自动成为管理员账号

将waline加入进博客

hugo的stack主题设置waline很简单，在根目录的设置文件hugo.yaml的params.comments.waline里填入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

waline:
    serverURL: https://waline.winotmk.com/
    lang: zh-CN
    emoji:
        - https://unpkg.com/@waline/emojis@1.1.0/weibo
        - https://unpkg.com/@waline/emojis@1.1.0/bilibili
    requiredMeta:
        - name
        - email
        - url
    locale:
        admin: Admin
        placeholder:
    reaction: true
    #搜索标签不好用，关闭
    search: false
    #浏览量统计
    pageview: true

pageview是配合文章点击数统计的，可以看这篇
https://md.winotmk.com/posts/250312-%E5%A2%9E%E5%8A%A0%E9%98%85%E8%AF%BB%E6%95%B0%E7%BB%9F%E8%AE%A1/

serverURL就是上面部署好的Vercel服务地址
然后重新部署hugo就能看到评论啦

如果一切都照做但是却没有反应也别慌，博主去吃了饭回来刷新就好了…可能是服务上线后各路dns解析有个延迟

可以改进的地方

默认waline的评论上传图片大小限制只有128kb，这基本不可用了，可以参照这篇来为其自定义一个图床
https://blog.csdn.net/qq_40673755/article/details/140539730

新站用了hugo框架的stack主题，还是比较养眼的，但是居然没有文章点击数字的统计，好在自己加一个倒是很简单，相对来说研究加在什么位置是让我比较花时间地方

stack主题加阅读数的位置

stack主题的模板大致如上图，其位于themes\hugo-theme-stack\layouts内，我是用github子模块的方式直接挂载的hugo-theme-stack所以可以复制一份layouts目录到根目录下再进行修改，其优先级会高于themes目录内的模板文件

经过一些测试发现其文章开头部分的标题，标签，时间和阅读时长之类的信息都在layouts\partials\article\components\details.html文件中，但是这个details.html模板在主页文章列表也会加载：

如果将依靠链接来获取阅读数据的相关代码直接放进details.html来会出问题，所以将其添加进紧随其后的content.html模板中，作为实质上所有正文部分的开头会稍微好一点

方案一：busuanzi阅读计数统计

写在前面：发现了ios设备下的缺陷，遂改用第二种方案

busuanzi文档：
https://busuanzi.ibruce.info/
按照安装指南，只需要引入js脚本，以及再加入一行<span>即可

1
2
3

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

引入<script>

layouts\_default\baseof.html的<head>内加入

1

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在合适的位置添加<span>

文章计数

所以我们在content.html里添加<span>部分，原因如开头所说，放这里比较保险一点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!--250227页面访问数统计-->
{{ if ne .Section "page" }}
    <div class="article-details" style="padding-top: 15px;padding-bottom: 0px;">
        <footer class="article-time">
            <div>
                {{ partial "helper/icon" "eye" }}
                <span title="阅读次数" id="busuanzi_container_page_pv" style="display: inline;font-size: 1.4rem;">阅读次数: <span class="article-time--reading" id="busuanzi_value_page_pv"></span>次
                </span>
            </div>
        </footer>
    </div>
{{ end }}

<!--以下为content.html原内容未有修改-->
<section class="article-content">
    <!-- Refer to https://discourse.gohugo.io/t/responsive-tables-in-markdown/10639/5 -->
    {{ $wrappedTable := printf "<div class=\"table-wrapper\">${1}</div>" }}
    {{ .Content | replaceRE "(<table>(?:.|\n)+?</table>)" $wrappedTable | safeHTML }}
</section>

外面套的<footer>和<div>都只是css样式需要
{{ if ne .Section "page" }}是我不希望他在文章页面以外的地方显示（主要是针对page目录下的links页面)
.Section释义可见：
https://gohugo.io/methods/page/section/

整站点击数

layouts\partials\footer\footer.html在其内的<footer>添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="article-time">
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: inline;">
        {{ partial "helper/icon" "users" }}
        <span class="site-uv" title="总访客量">
        &nbsp;<span id="busuanzi_value_site_uv"></span>
        </span>
    </span>
    <span>|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: inline;">
        {{ partial "helper/icon" "eye" }}
        <span class="site-pv" title="总访问量">
        &nbsp;<span id="busuanzi_value_site_pv"></span>
        </span>
    </span>
</div>

即可在博客页面底部实现：

好了，本来用得好好的，忽然发现在ios设备上的文章页面内的阅读数字不太对，所有文章（包括刚发布的）都是1000多，在windows下的chrome和eagle就没有这样的问题
据说可能和ios浏览器的cross-site tracking相关：
https://github.com/jdhao/jdhao.github.io/issues/46

好在，我已经实装了waline评论系统，而它也带一个文章访问记数的功能，用的还是自己数据库内的数据

而整站底部的总浏览量数据busuanzi又没问题，所以保留吧..

方案二：waline的浏览量统计

waline文档参考：
https://waline.js.org/guide/features/pageview.html

waline是一个适用于静态博客的评论系统，本博客 md.winotmk.com 实装的即是，而它也支持持浏览量统计。
用stack主题的话，只需要在主题设置文件hugo.yaml内的params.comments.waline部分设置开启pageview: true即可

在合适的位置添加<span>

和第一种方案同样，依然是在layouts\partials\article\components\content.html内添加

1
2
3
4
5
6
7
8
9
10

{{ if ne .Section "page" }}
    <div class="article-details" style="padding-top: 15px;padding-bottom: 0px;">
        <footer class="article-time">
            <div>
                {{ partial "helper/icon" "eye" }}
                <span title="阅读次数" style="display: inline;font-size: 1.4rem;">阅读次数: <span class="waline-pageview-count" data-path="{{ .RelPermalink }}" /></span>
            </div>
        </footer>
    </div>
{{ end }}

因为waline文档的解释如下：

1

阅读量: <span class="waline-pageview-count" data-path="<Your/Path/Name>" />

而对于hugo来说"<Your/Path/Name>"即是当前文章的链接"{{ .RelPermalink }}"

至此每篇文章的点击数在ios端也正常了！

注册disqus评论

获取api

https://disqus.com/api/applications/
在这里点新建一个 application，然后要绑定你的博客域名才会给公钥，记录下公钥Public Key

获取shortname

https://disqus.com/admin/
如果你点开上面页面跳转了，则说明需要新建一个shortname

我这里建完后是这样的，winNote即是我的短名，有一些个性化设置可以改

设置到静态博客

我用的是hugo stack主题，已经内置了disqusjs，只需要在根目录的hugo.yaml设置里填入对应的即可

这里的ApiUrl是个什么呢？是我自己设置的反向代理

设置反向代理

可参考：
https://blog.ichr.me/post/use-disqus-conveniently/
原因是我发现作者提供的默认地址https://disqus.skk.moe/disqus/
似乎已经有点不好用了
简单搭建一下倒是很快

Cloudflare Workers 反代

在 Cloudflare 中新建一个 Worker，将下述代码替换原有代码。
https://workers.cloudflare.com/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

addEventListener('fetch', event => {
    event.respondWith(proxy(event));
});

async function proxy(event) {
    const getReqHeader = (key) => event.request.headers.get(key);

    let url = new URL(event.request.url);
    url.hostname = "disqus.com";

    let parameter = {
        headers: {
            'Host': 'disqus.com',
            'User-Agent': getReqHeader("User-Agent"),
            'Accept': getReqHeader("Accept"),
            'Accept-Language': getReqHeader("Accept-Language"),
            'Accept-Encoding': getReqHeader("Accept-Encoding"),
            'Connection': 'keep-alive',
            'Cache-Control': 'max-age=0'
        }
    };

    if (event.request.headers.has("Referer")) {
        parameter.headers.Referer = getReqHeader("Referer");
    }

    if (event.request.headers.has("Origin")) {
        parameter.headers.Origin = getReqHeader("Origin");
    }

    return fetch(new Request(url, event.request), parameter);
}

例如这里是我的：

https://winotmk-di-xxxxxx.winotmk.workers.dev/api/即是我的代理地址了

后续

然而即便设置了这些以后，我的博客依然经常在无梯网络环境中出现类似：

评论加载很慢或者干脆加载不了的情况，正在考虑换成自架waline