Hexo Icarus 顯示瀏覽量(三):Hack Icarus 頁面,串接瀏覽量 API

上一講透過 Google Analytics 加上 AWS Lambda,我們完成了透過 Page Path 來取得 View Count 的 API,接下來便是將瀏覽量顯示在 Hexo Icarus 主題中的預覽及內文了。

由於 Icarus 本身提供的設定檔支援的是不蒜子,和我使用 Google Analytics 作為瀏覽量資料庫的方式不同,只能另尋他法。

在瀏覽一些其他的實作方法後,發現有些方式能夠透過修改 Icarus 的模板來加上自訂內容,然而在當下專案我所使用的 hexo 5.4 和 icarus 4.3 並沒有發現類似的模板可供修改,直接進入 node_modules 修改 Icarus 產出的頁面顯然會在重新安裝時被覆蓋,不是個太好的辦法。

因為我想加入的自訂內容僅僅是「瀏覽數」而已,所以在不變更 Hexo、Icarus 的版本前提下,我選擇了一個可能也不太「乾淨」的方法來達成目的,Hack Hexo Icarus 的頁面的 HTML 來插入內容。

繼續閱讀

Hexo Icarus 顯示瀏覽量(二):廉價的 Solution,Google Analytics + AWS Lambda

既然都選用 Hexo 作為部落格的框架了,除了因為全部皆為靜態網頁能達到的 High Performance 外,最大的優點想必就是價格了。

當然這是針對維護一個中小型部落格的「價格量級」來做比較的,實際上架設一座小型的 Word Press 部落格,可能最多也就每月幾百元新台幣的價格,和接下來要提到趨近免費的 Solution 來說,在成本上的差異主要就只是每個月能少噴幾百元,個人感受比較好罷了。

接下來便來聊聊這個 Solution:透過 Google Analytics 來儲存瀏覽量、AWS Lambda 提供 API 獲取瀏覽量。

繼續閱讀

JavaScript 的 Callback, promise, async 及 await

在做 Web App 時不可避免的就是要執行「非同步」的動作,英文稱之為 Asyncrhonous action。

所謂的「非同步」指的是一個動作被分成兩個時期,初始化和執行。例如設定鬧鐘 10 秒後響鈴,初始化就是設定鬧鐘,執行就是當時間到之後響鈴。

我們來看看 JavaScript 中的非同步是怎麼被實做的。

繼續閱讀

Moment.js 筆記

本篇為 Moment.js 的筆記。Moment.js 是一個 JavaScript 的套件,用來方便的處理任何和日期及時間相關的事,例如格式化日期,比對、運算時間等等。

繼續閱讀

RegExp 正規表達式 - JS 學習筆記

RegExp 為 Regular Expresssion 的縮寫,中文翻譯成「正規表達式」,又或是「正規表示法」、「正則表達式」等等。用來表達符合某個句法規則的字串。

例如你想在一份客戶的資料中,搜尋所有台灣手機號碼,你會怎麼做呢?

首先你知道手機號碼必定是數字,而且是「09」開頭的,總長度又是 10。
這時,正規表達式就派上用場了,你可以將剛剛描述台灣手機號碼的幾個規則用正規表達寫出來,用簡單一行程式碼就過濾出一篇文章中所有符合這個規則的手機號碼!

具體要怎麼做呢?

繼續閱讀

JavaScript 的兩個重要觀念:Execution Context, Lexical Environments - JS 學習筆記

若要深入學習 JavaScript,就需要認知到你寫的這段程式碼,是如何被翻譯給電腦執行的。以下三個名詞則是了解 JavaScript Engine 是如何運作的重要觀念:

  1. Lexical Environments - 詞彙環境
  2. Execution Context - 執行環境

如果你是剛接觸這門語言,甚至是剛接觸程式語言的人,或許會傻在這裡。我起初見到這幾個名詞的時候,也愣了很久,一愣就是兩三年,程式碼都寫了萬行了,還是沒有很了解其背後運作的原理。但,這幾個觀念對於想學好 JavaScript 的人來說,絕對是不得不弄懂的檻。

繼續閱讀