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

Swipe & Delete 照片整理 App 介紹,由眼緣來決定照片去留,解放你的儲存空間

Swipe & Delete 照片整理 App 介紹,由眼緣來決定照片去留,解放你的儲存空間

身為一個手機容量只有 64gb 的用戶,裝置的儲存空間彌足珍貴。我自己是有課金買 iCloud 儲存空間與家人共享,但因為家人不一定會有整理照片的習慣,所以變成自己還是要定期清理照片以免 iCloud 儲存空間爆炸,要再多付費升級。 刪除照片是一件枯燥乏味的事情,步驟就是 1. 打開照片 App 後隨意滑到某一天 2. 開始往後一張照片一張照片打開來看該張照片是否有值得留下來的價值 但這會有一個問題,下一次想到要來整理照片的時候會忘了自己哪些照片有判斷過要不要刪掉,哪些不用,於是又要從差不多的地方重來一遍。 Swipe & Delete 這個照片整理軟體徹底解決了這個問題! Swipe & Delete 介紹 Swipe & Delete 是一款完全免費的軟體,僅有「極少數」的廣告在介面裡,所以使用的體驗上十分好。 它會將你的照片按照月份做分類,並且去記錄每個月份你有多少張照片和影片。進到整理照片的介面的時候,它可以左滑、右滑去選擇要「保留」照片或是「刪除」這張照片,左下方也有提示你說下一張照片是什麼,

【贊助開箱】Allite 系列質感、效能兼具的 3C 配件|A1 65W 氮化鎵雙孔快充、WA1 2IN1 便攜型雙面充電器以及 Easy Cable 磁吸收納編織快充線

【贊助開箱】Allite 系列質感、效能兼具的 3C 配件|A1 65W 氮化鎵雙孔快充、WA1 2IN1 便攜型雙面充電器以及 Easy Cable 磁吸收納編織快充線

本篇文章由 OneMore 萬摩科技贊助。 「Allite」是由台灣科技公司OneMore 萬摩科技所創立的3C品牌,從有線充電系列的 20W 至 140W 的快充頭以及液態矽膠快充線、磁吸收納編織線材,再到無線充電系列的 WA1 2IN1 便攜型雙面充電器、WQ1 2+1 磁吸無線充電座等。Allite 全品項充電配件皆通過台灣經濟部標準檢驗局 BSMI 安全認證,並提供一年產品保固權益。 這次我體驗了「Allite A1 65W 氮化鎵雙孔快充」、「Allite WA1 2IN1 Apple Watch AirPods 便攜型雙面充電器」、「Allite Easy Cable 磁吸收納編織快充線」和「Allite 液態矽膠快充線」這四款商品,以下會分享自己使用這些商品的真實心得。 在進入開箱前先簡單的科普一下到底什麼是氮化鎵 氮化鎵是什麼?什麼是快充? 氮化鎵(