Search

㊟ 站長 Laird 目前國軍 Online 中,網站預計於 2018 年 3 月之後恢復穩定的教學文章產出,還請多加包涵 (๑´ㅂ`๑ ) ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ C# 以及 Unity 基礎教學籌備中,敬請期待! ☏ 對網站有任何問題或建議,都非常歡迎使用留言板或至 Facebook 粉絲團發訊息,讓我們知道您的想法 (੭ु´ ᐜ `)੭ु

2017年10月20日 星期五

[ Blogger ] [ 教學 ] 如何為 Blogger 文章加上密碼鎖(with JavaScript Encryption and Decryption 2.0)

標籤: , , , , , ,


網誌平台 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 TextHTML 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 文章加上密碼鎖的教學就到這邊~

我們下次見~



TOP