昨天在Hugo w3 simple模板裏用簡單的代碼實現了基於歐盟cookie法律的瀏覽條提示。

這個cookie law已經存在好幾年了，具體解釋google第一條結果就有一個網站cookielaw.org

其網站是英文的，簡單翻譯來說：

現在所有的網站如果采用了google analytics分析係統或者Google Adsense廣告等，都會使用到cookie

可見cookie的應用是非常廣泛的。本來覺得這項歐盟法令對我這種身在南半球，網站架設在美帝的服務器上的人群是無所謂的。

但一年多前Google Adsense操作界麵專門提了一頁，針對訪問網站的歐盟用戶若不設置提醒的話，將不再提供利用cookie的優化廣告技術。

此項技術可根據用戶的瀏覽曆史和喜好投放廣告，我個人十分喜歡廣告，認為廣告是有利於全球信息流通的，（多年前曾下了不少功夫學習英文sales page的寫作，故對影響力這類心理書籍也極熟悉。但因為文化底蘊沒有辦法跟英語母語者相比，sales page達不到一定的高度。)所以對這項技術持歡迎態度。

但不是所有人都無所謂自己的瀏覽曆史隱私，故此此項立法也就應運而生。

以前的IT水平是業餘0.1級水平，故此隻會在網站上加一個別人做好的模塊，比如以前我都是用的insites的cookie consent代碼，為什麼用它，原因很簡單，它是google搜索cookie consent的第一名。

為什麼現在不想用了，原因也很簡單，因為我看不懂它的代碼而且它比較大。

現在的IT水平通過對hugo w3 simple的玩耍，提升到業餘0.5級了。應付這種解決方案就沒有問題了。

Cookie提示條的實現

用w3 css框架弄一個提示條就很容易了。跟前麵我寫的固定瀏覽條類似。

<div id="cookiebar" class="w3-bar w3-top w3-black w3-border   " >
    <span class="w3-bar-item w3-small">Our website uses cookies to improve your user experience. If you continue browsing, we assume that you consent to our use of cookies. More information can be found in our <a href="/privacy/">privacy policy</a></span>
    <span onclick="gotitcookiebar()"
    class="w3-button w3-small w3-green w3-right">Got it</span>
</div>

給這個cookibar做一個css

#cookiebar
{
display:none;
}
#cookiebar a
{
color: white;
text-decoration: underline;
}

這樣在頁麵頂上就有一個黑色提示條了。我們需要將整體頁麵下移提示條的高度，這樣就不會擋住頁麵內容，這叫push down效果，然後顯示一次就可以了。如果用戶點擊Got it按鈕或者繼續瀏覽，比如滑屏20px以上，表明用戶接受了本站有cookie，就可以將這個提示條取消了。

同時需要檢查用戶是不是首次訪問網站，如果是則顯示這個提示條，並設置cookie，下次再訪問時就不會再出現這個提示條了。

由此設計javascript如下：

<script>
function gotitcookiebar() {
    var x =document.getElementById("cookiebar");
    x.style.display = "none";
    var x = document.getElementsByTagName("BODY")[0];
    x.style.paddingTop = "0px";
}

function checkCookie() {
    var user=getCookie("cookiebardisplayed");
    if (user == "") {
        var x =document.getElementById("cookiebar");
        x.style.display = "block";
        var h = document.getElementById('cookiebar').clientHeight;
        var x = document.getElementsByTagName("BODY")[0];
        x.style.paddingTop = h+"px";
        setCookie("cookiebardisplayed","1",365);
    } 
}

function setCookie(cname,cvalue,exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    var x =document.getElementById("cookiebar");
    x.style.display = "none";
    var x = document.getElementsByTagName("BODY")[0];
    x.style.paddingTop = "0px";
} 
}

document.addEventListener('DOMContentLoaded', function() {
    checkCookie();
}, false);
</script>

好了，以前用大幾十kb的第三方解決方案就這麼多行代碼就實現了。網頁文件小了，網速就會又快上幾分。而且還多一個滑屏即消失的功能。

通關文之患難關

易曰：“困而不失其所，亨。其惟君子乎？”
中庸曰：“素患難，行乎患難。”
長春真人曰：“病即教他病，死即教他死。至死一著，抱道而亡。”
此皆言其不可因患難而變其初誌也。
夫道者，包羅天地，竊奪造化，出死入生，超凡入聖，作佛作仙。
非有大勇大力，頂天立地之鐵漢，脫塵超俗之金剛，知不的，載不起，拿不動。
如何是大勇大力？
富貴不能淫，貧賤不能移，威武不能屈，是大力；恩愛不能牽，名利不能誘，是大力；憂愁恐懼，一些不起，是大力；喜怒哀樂，截然放下，是大力。
困苦危難，不動不搖，是大勇；疾病災厄，順其自然，是大勇；饑寒凍餓，至死不變，是大勇；羞恥淩辱，不識不知，是大勇。
故釋迦佛遇歌利王，割身而不知；純陽翁遇正陽祖，十試而無弊；紫清喝罵而教去而弗嗔 ；三豐衣破鞋穿而不悔；長真受人拳打而不爭；長春折肋三次而不顧。
以上聖賢，皆遇患難磨煉，受盡無限苦楚，所以終能聞大法，明大道，超凡入聖，成其希有之大事也。
世間糊塗學人，不知患難是修真大藥，是成道爐鎚。
而反怕患難，避患難。
或受些饑寒便生別法；或遇些疾病即起妄念；或逢些危險即思退步；或遭人淩辱即便爭論。
殊不知真金要在大火裏煉出，荷花須從汙泥中長成。
非火不見金之明，非泥不見荷之淨。
患難何病？
患難然後見人之身份高低；患難然後驗人之誌氣真假。
吾勸真心學道者，速將患難關口打通。
認定性命二字。生也是這個，死也是這個。
一切大災大難、大困大厄、大危大險，付之於天，皆以無心處之。
日久自然化凶為吉，變禍為福。
否則，遇患難而怕患難，心神不定，誌念遷移，無患難而自致患難，小患難而變為大患難，妄想明道，難矣。

此關言說又想起西遊記之悟空向菩提祖師問道，談到靜字門中之道。

祖師道：“教你’靜’字門中之道，如何？"
悟空道：“靜字門中，是甚正果？"
祖師道：“此是休糧守穀，清靜無為，參禪打坐，戒語持齋，或睡功，或立功，並入定坐關之類。"
悟空道：“這般也能長生麼？"
祖師道：“也似’窯頭土坯’。"
悟空笑道：“師父果有些滴㳠。一行說我不會打市語。怎麼謂之’窯頭土坯’？"
祖師道：“就如那窯頭上，造成磚瓦之坯，雖已成形，尚未經水火煆煉，一朝大雨滂沱，他必濫矣。"
悟空道：“也不長遠。不學！不學！”

故此不可一味頑空守靜，還是從紅塵中學來。

煩惱即菩提，患難亦是修真大藥，是成道爐鎚。

不過也無需自尋患難，靈寶定觀經早已明講：

人世經曆如夢如幻如泡如影如露如電，自然而然，遍曆遍行而已。

相关文章:

• 2018/11/24   共享條自適應設計以及冷熱關
• 2018/11/23   滑屏進度條實現以及誇揚關
• 2018/10/30   擁抱Bootstrap 4 –先整一個固定瀏覽條以及輕慢關
• 2018/11/28   Nginx下安裝isso開源評論係統用於Hugo以及幻景關
• 2018/11/28   由比特幣鬱金香化說到運交華蓋意何如，再談到耳順以及速效關