網站導航欄防止插入Adsense自動廣告

Google Adsense 自動廣告雖省心，但有時候它會把廣告放在不合適的位置上，嚴重影響用戶訪問。比如我的這個站點，會莫名其妙地把廣告插入導航欄的上邊或下邊(藍框裏面)，這智能算法也是醉人。

以前我採取的解決方法是：後臺設置直接排除對應區塊。這樣有可能會減少廣告投放，影響搞錢，凡是和賺錢作對的事情都要弄得少少的。

後來我在“廣告設置預覽”中打開瀏覽器調試工具，發現 Google 是在<header></header> 中插入了和 nav 並列的廣告代碼。

先看 header.html 部分的代碼

google 的算法貌似是優先往 header 裏面插入廣告塊，nav 上下各一個廣告位，畢竟黃金位置。

自動廣告算法不是萬能的，我用的這個皮膚，header 和 nav 是強關聯的，nav 的部分樣式從 header 繼承。如果不做改動，結果是導航欄的藍條框內都會被插入廣告，奇醜無比，忍無可忍。

胳膊擰不過大腿，我的解決辦法如下：

1. 把 header 的樣式放到 nav 去

這樣 header 樣式爲空，隨便 Google 怎麼玩，nav 是獨立的，只要不蠢到往 <nav></nav> 裏面放廣告，導航條還在、功能顯示、樣式正常，就不影響用戶使用。

順帶也把頁面改了下，方便寬屏展示"側邊欄廣告"，從別人那裏學到的（畢竟維護網站也有費用，域名、主機、付出時間等都還遠遠沒有回本）。

2. 再讓 nav 能始終顯示出來

 1.nav
 2  color: $haze
 3  display: flex
 4  justify-content: space-between
 5  background-color: $bg
 6  padding: 0 1.5rem
 7  position: relative
 8  width: 100%
 9  z-index: 999999
10  left: 0

核心屬性爲：position: relative 和 z-index: 999999，結果是讓 nav 始終在佔有一席之地，導航被擋或者弄錯亂，會嚴重影響用戶訪問網站，信息入口要牢牢把控。

3. 查看結果

最終在廣告預覽裏面顯示廣告模塊，確認不會擠入 nav 中了，要不在上面，要不在下面，不影響導航。

如下圖所示：

每個人的網站皮膚不一樣，碰到類似情況，讀者可以看看源碼，再看看 Google Adsense 是自動往哪些區塊插入，根據情況因對處理。