Hexo NexT 主題的閱讀次數統計 | maple 的廢文集中區

Hexo NexT 主題的閱讀次數統計

這是一個在 Next 主題上的小功能可以在文章及首頁顯示文章的閱讀次數使用了 firestore 作為資料庫
之前發的 PR

需要 Next v5.1.4 以上的版本

預覽圖

使用教學

取得 firestore 資料庫

firebase 網站 創建一個專案
專案名稱之類的都可以自己選
創建專案

接下來創建完成之後在左側選擇 Database 會出現選擇資料庫的頁面在這個步驟請選擇右側的 Cloud Firestore
選擇資料庫
然後選擇 以測試模式啟動 (之後會再設定安全性)
選擇模式

設定 _config.yml

在上面的步驟建立完成 firestore 資料庫之後按照下面的圖片裡的 1,2 點擊然後會看到圖片中的資訊,projectid 和 apikey 是待會在設定檔裡面要用到的
取得apikey

接下來開啟主題的_config.yml (themes/next/_config.yml) 並且找到 firestore的部分預設值:

1
2
3
4
5
6
7
8
9
# Another tool to show number of visitors to each article.
# visit https://console.firebase.google.com/u/0/ to get apiKey and projectId
# visit https://firebase.google.com/docs/firestore/ to get more information about firestore
firestore:
enable: false
collection: articles #required, a string collection name to access firestore database
apiKey: #required
projectId: #required
bluebird: false #enable this if you want to include bluebird 3.5.1(core version) Promise polyfill

enable設定成true
然後把前面得到的apikeyprojectId填入對應的欄位中
collection改不改都行,不知道這是什麼的話請別更改

collection 的值會影響閱讀次數的數值儲存在哪裡

如果需要支援一些老舊的瀏覽器請把bluebird設定成true

Bluebird 為了支援 Promise ,詳細的相容性可以到 MDN 上看

改完的 _config.yml:

1
2
3
4
5
6
firestore:
enable: true
collection: articles
apiKey: AIzaSyDcPXjPoq3kEL245f4P4SDPop7uAD-XZXc #required
projectId: hexo-next-firestore-example #required
bluebird: true

測試

接下來執行hexo s啟動測試伺服器應該要在首頁的每篇文章的標題下面看到閱讀次數

然後點進任何一篇文章也要在標題下面看到閱讀次數
預覽圖

firestore 安全設定

這個步驟可做可不做

接下來在 firebase 裡面回到 Database 頁面,然後選擇上面的規則
firestore規則

把裡面的值改成下面的來限制只有articles這個 collection 可以被修改如果在前面的設定裡的collection的值不是articles的話下面也要修改

1
2
3
4
5
6
7
8
service cloud.firestore {
match /databases/{database}/documents {
match /articles/{any} {
allow read: if true;
allow write: if request.resource.data.count==resource.data.count+1;
}
}
}

後記

會弄出這個功能的原因是不想使用原本就有的 LeanCloud 統計功能 (這個的設定方法比較簡單)
所以就自己用 javascript 來簡單的實作了一個統計次數的功能然後發 PR 給主題