Hexo優化:新增圖片圖床、更換文章閱讀計數器服務

架設 Hexo 約莫半年了,目前用起來還算滿意,網站的讀取速度很快,用 Markdown 來寫文章對我來講也很方便,但還是有遇到一些小問題。

  1. 1個月前NexT主題宣布他們要移除「full-image tag」,這讓我要重新改寫圖片的引用方式。
  2. 文章閱讀計數器服務 LeanCloud 宣布使用中國版如果不綁定自己的域名的話服務將會被禁用,必須要將域名提交給中國政府審查。

這篇文章主要是記錄我自己是怎麼解決這兩個問題。

圖床服務 Cloudinary

市面上的圖床服務蠻多的,像台灣人比較熟知的應該是 imgur ,而我個人是上網查詢到別人推薦的 Cloudinary,因為他除了影片外還支持影片上傳。

Cloudinary 的免費版本會給你 25 GB 的空間以及 25 GB 的頻寬,所以說如果你的圖片平均只有 200 KB(對網頁來講已經很大了)的話可以放 12,500 張圖片以及顯示 12,500 次圖片,我自己是覺得這樣對我來說已經蠻夠用了,如果會超出這個頻寬範圍的話代表我應該經營的還算有起色,可以直接付費了?XD

當然 Cloudinary 跟 Dropbox 一樣有方法可以獲得額外的空間和頻寬,如果以下都做完的話最多可以免費得到額外的 148 GB 空間,有沒有覺得其實超夠用了!

  1. 將你的「推廣網址」推到 Twitter 或是分享到 Facebook 上,可以得到 6 GB 空間。
  2. 追蹤 Cloudinary 的 Twitter 帳號和成為他們的 Facebook 粉絲,即可得到 2 GB 空間。
  3. 當有人透過你的「推廣網址」註冊成為免費用戶即可得到 3 GB 空間,成為付費用戶可以得到 7 GB 空間(上限 20 名)。

Cloudinary 推廣取得空間說明

此外,Cloudinary 還有提供分析工具,讓你知道哪一張圖片、影片顯示最多次,可以幫助你分析哪張圖片表現較好。

替 Hexo 更換文章閱讀計數器服務

NexT 主題官方支援兩個文章閱讀計數器服務,一個是使用中國的 LeanCloud,另一個是 Google 的 firestore。

原本我的部落格是使用比較簡易設置的 LeanCloud,但就像前述所說的,中國那邊越管越嚴格,加上我試著轉去 LeanCloud 的國際版但帳號一直無法驗證成功,我只好改投往 firestore 的懷抱了,缺點是轉移過去後要手動進 firebase 的專案後台一篇篇文章更改閱讀次數,不然就要重新開始了。

現在就來一步步教學大家怎麼使用 firestore 來幫部落格紀錄文章閱讀次數吧!

  1. 首先到 Firebase 網站按新增專案,並輸入你想要的專案名稱,如果你本身有在用 Google Analytics 的人在建立 Google Analytics 的時候可以先跳過,等等再進去專案內把原本使用的整合進去。
    Google Firbase 建立專案
  2. 點選新增網頁應用程式,然後一樣輸入你的應用程式名稱,不用勾選代管服務,然後按註冊應用程式。
    輸入應用程式名稱
  3. 接下來到左側的 database,按建立資料庫,選擇下方的「以測試模式啟動」,然後選擇 Cloud Firestore 的儲存位置。
    建立新的資料庫
    選擇以測試名稱啟動
  4. 更改資料庫的讀取和寫入規則,讓 hexo 可以紀錄你的文章閱讀次數。
    資料庫內的規則改寫

更改代碼如下

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 true;
    }
  }
}
  1. 至 Firebase 的專案設定找到 API KEY 和 Project ID 並更改 NexT 主題內的 _config.yml 設定文件。
    API KEY 以及 Project ID

更改_config.yml代碼如下

1
2
3
4
5
firestore:
  enable: true
  collection: articles # Required, a string collection name to access firestore database
  apiKey: AIzaSyA9Anvm5yaugqbcIb-zAs50yYr_spOayJ0
  projectId: hexo-teaching

上述作業都完成後應該就可以順利的紀錄部落格內文章的閱讀次數了,現在就執行 hexo ghexo s先去試試看吧!如果沒問題的話就可以用hexo d推送到正式端囉!

備註:文章標題中不能含有 ’/‘ 斜槓符號,不然 js 會報錯無法在文章外層正確顯示閱讀次數。

總結

希望以上兩點能夠幫助到也有在用 Hexo 的你們,如果有問題的話歡迎在下方留言一起討論。

參考資料

Read more

使用 DALLE 3 AI 繪圖產生

2024 過年雜談

今年過年在除夕當天回家,一直待到初四中午返回北部。這段期間只有在初三中午出門跟朋友聚會,其他時間都是陪伴著家人,算是近幾年除了 Covid 居家隔離時待在家中時間最久的一次。 去年下半年換了工作後,在 Q4 開始一直被業績追著跑,就連假日也不太能放鬆,很難有一個好好休息的時間。這次的年假,在返家後真的有一個比較完整的休息時間,一整個下午躺在沙發上看漫畫、跟朋友約電動都毫無壓力,可能是因為大家(包含消費者)都在休息,所以自己在休息也比較順理成章。 過年期間的休閒娛樂 這個年假我的休閒娛樂主要有兩個,一是用 XBOX Series S 跟美國的朋友連了好幾場「榮耀戰魂(For Honor)」,沒想到這個老 Game 跟朋友玩竟然是如此有趣,比起自己上網找玩家被虐好多了;此外還看了「葬送的芙莉蓮」單行本 1 到 12 集,超前了動畫進度許多,目前的進度很好看,希望不要像咒術迴戰一樣中途崩掉,不然花錢買漫畫會覺得很可惜。 這個過年跟著爸媽往外跑的時間也變多了,初一跟爸媽去鹿港天后宮拜拜,雖然就真的只是拜拜沒有逛其他的東西,但也算是感受到了過年期間的人潮;

Apple Watch Ultra 2 心得,健康無價、升級有感

Apple Watch Ultra 2 心得,健康無價、升級有感

我跟 Apple Watch 系列有過三次的淵源,第一次是在當兵的時候,我嘗試買了 Apple Watch 第一代,那時後只戴了一週左右便因為手錶的通知功能加深了我當時的訊息焦慮,所以我把手錶退掉了。 過了幾年後,我在 2017 年入手了 Apple Watch Series 3,他一路陪伴了我 6 年多的時間一直到 2023 年,除了在 App 運行上會比較卡一些之外,其實跟最新的 Apple Watch 系列沒什麼兩樣,一天還是要充一次電。所以從 S6 就喊說想換手錶的我一直沒辦法狠下心來真正把我的 S3 換掉。 直到了 2023 年,因為 S3 只能升級到 WatchOS 8 而已,但我入手的一些應用程式如 Gentler, Grow, Lumy

基隆西岸.市區|白米甕砲台半日遊

基隆西岸.市區|白米甕砲台半日遊

行程安排 張家餛飩麵店 - 遠東賴家水煎包 - 球子山燈塔 - 仙洞巖(佛手洞)- 白米甕砲台遊客中心 - 白米甕砲台導覽 01 張家餛飩麵店 📍 價格實惠,小乾麵和豆干包湯都只要 $30。 乾麵十分好吃,不像大部分的乾麵會有些許肉湯汁,他的乾麵就真的是「乾」麵,搭配老闆自己做的豬油和油蔥,味道嚐起來十分好。 02 遠東賴家水煎包 📍 一個水煎包 $12 元,排隊排很長但因為裝袋速度快不用等太久,可以買著當點心吃,十分推薦每個口味都來一顆。 03 球子山燈塔 📍 入口看起來沒有整理過,但可以放心的走進去。燈塔上方有一個小山是位處於基隆市區制高點,往外可以看到基隆嶼、基隆港口,往內可以看到基隆市景。無遮蔽物幾乎可以環 360 度眺望美景。 04 仙洞巖📍 由於通風不佳,室內香氣(插香的煙)瀰漫,