網誌平台 Blogger 的文章預設沒有密碼保護的功能,因此如果想要鎖碼的話,可以使用「隱藏 JavaScript 」的方式,巧妙的達到類似「文章密碼鎖」的效果,來看看要怎麼做吧~
本篇 Blogger 文章密碼鎖教學使用的是 JavaScript Encryption and Decryption 2.0 ,請先前往網站:
JavaScript Encryption and Decryption 2.0
http://www.vincentcheung.ca/jsencryption/
本教學將以 3 個部分做解說,請各取所需!
1. 加密文章:
首先來到你想要鎖碼的文章編輯畫面,預設是所見即所得的「撰寫」模式。
請把它切換為 " HTML " ,將想要隱藏的部分或是全篇內容複製下來。
來到 JavaScript Encryption and Decryption 2.0 網頁,首先 Key 的部分就是解鎖文章要輸入的密碼,網頁還提供 " Random " 功能讓你能隨機產生亂碼,密碼必須牢記或寫下來。
Plain Text 就是將你剛剛複製的文章 HTML 全部貼進去,按下 " Encrypt " 按鈕就會馬上加密文章,非常快速!
之後會產生 Cipher Text 與 HTML Code ,請將 HTML Code 全部複製下來。
將 Blogger 文章編輯器裡的內容全部刪除,也可以留下部分內容,然後將剛剛複製的 HTML Code 貼進來。
接著到 Blogger 後台 -> 主題 -> " 編輯 HTML "
在編輯器中點一下滑鼠左鍵,然後按下 Ctrl + F ( Mac 為 Command + F ),搜尋
標籤,在它之前貼上以下程式碼,完成後按下 " 儲存主題 "
<script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>
此時回到剛才要鎖碼的文章,按下 " 發佈 " 之後,進入你的網站就會發現此篇文章已經被密碼保護起來了(嚴格來說是隱藏而已)。
2. 程式碼細節:
而程式碼當中的 Show encrypted text 文字說明都可以任意更改,例如萊德將其改成了 Enter the password 。
呈現效果如下,按下文字連結就會跳出輸入密碼的視窗,只要輸入正確密碼就能顯示文章內容。
如果不喜歡密碼輸入框出現的方式,你可以將
decryptText('j3ayXEsG')
這段程式碼換成
decryptText('j3ayXEsG', null, true)
密碼輸入時就會顯示瀏覽器的對話框。
瀏覽器的對話框呈現效果如下。
瀏覽器對話框的文字也同樣可以修改!
將 null 改成 '你想要輸入的文字即可'
如下圖,萊德將 null 改成 'Enter the password'
decryptText('j3ayXEsG', 'Enter the password', true)
修改文字後的瀏覽器的對話框呈現效果如下。
3. 解密文章:
如果有特需情況需要解密已經加密的文章,就會需要剛才於 JavaScript Encryption and Decryption 2.0 產生的 Cipher Text 當中的亂碼內才能進行解密。
而此內容也剛好與產生的 HTML Code 當中的 title 相同,因此並不需要特別備份這些亂碼,只要到鎖密碼的文章當中查看 HTML 即可。
比那段亂碼更重要的其實是密碼,如果忘記了密碼,不但無法瀏覽已經加密的文章,連解密原始的文章 HTML 都不可能囉!
解密文章原始的 HTML 並不難,只要將密碼與 Cipher Text 都輸入網頁後,按下 " Decrypt " 就能順利解密獲得原始的文章 HTML 囉!
如何為 Blogger 文章加上密碼鎖的教學就到這邊~
我們下次見~