【酷哥報報】用美安的網路中心架設網站遇到404時的解決方法~不懂404的小夥伴勿進

客戶問如果網站遇到404的時候該如何轉址?酷哥很好奇,一個做的好的網站,如果內部連結設定都很正確,為什麼還要404的轉址?事出必有因,原來是因為搜尋引擎中舊網站已經有排名,而舊的Domain name轉到新的虛擬伺服器後因為檔案名稱不一樣了,所以搜尋引擎搜到的連結連到網站後就會遇到404的問題。而網路中心預設的404頁面又不是客戶想要的所以客戶就問酷哥該如何轉址。 

酷哥請客戶打給客服,客服回覆目前網路中心設置的404頁面都是統一的格式,無法修改。網路中心看起來沒錯,已經有提供404的頁面了我們也不能說什麼,但是客戶很堅持的想要換掉404的頁面讓網站顯得更專業,感覺起來也對。所以就讓酷哥動手寫了一個小小的script來解決這個問題。(說在前面:酷哥不是一個專業的程式設計師,酷哥只是分享一個解決方法,不一定是專業的,但是是可以解決問題的方法。酷哥接受小夥伴的指教,但是不接受小夥伴的扯笑。)

癈話說太多了,懶得看文章的直接按照下列步驟操作:

  1. 做一個小夥伴喜歡的404的網頁,這邊酷哥將網頁命名為404.html(如圖一小夥伴自己取一個名字)。

2019103111.JPG

(圖一 做一個自己喜歡的404網頁並且命名)

  1. 在內容網站區域中的最後(一定要在最後,不然就選在頁尾區域的頭但是頁尾區域的頭酷哥沒有去試不知道會不會有問題)而且要確定是在”網站整體屬性中”加一個程式碼。如圖二酷哥是在”網站區域 – 06”的”添加元素(後)…”加一個程式碼。 

2019103112.JPG

(圖二 在指定的位置添加一個程式碼)

  1. 如圖三程式碼中加入下面的Script,如果直接複製的小夥伴請確認所有的符號都是半型,酷哥常常被全型的符號搞到瘋掉,尤其是雙引號。

 

     <!-- 遇到404的時候轉址程式碼開始-->

        <script>

            var y = document.getElementsByClassName("msg_404");

            if (y.length > 0) {

            document.location.href="404.html";

            }

        </script>

     <!-- 遇到404的時候轉址程式碼結束-->

 

2019103113.JPG

(圖三 要轉址的程式碼)

最後小夥伴只要存檔後發佈,再到你的網站中(前面輸入你的完整的網域名稱)隨便給輸入一個不存在的網頁,你就會發現閃一下預設的404頁面後就會自動轉址到你做的新的404頁面。

如果有興趣了解script中寫什麼的小夥伴可以接下去看,讓酷哥為你做個不專業的解說。

首先酷哥先研究網路中心所提供預設的404網頁有沒有什麼獨特之處,找到獨特之處之後才有辦法單獨對這個404網頁進行換臉行動,用什麼方法去檢查網頁這個以後再來討論。 

酷哥在預設的404網頁中發現有一個classname是其他網頁沒有在用的,這個classname的名字叫做msg_404,這樣就太好了,這代表說只要遇到這一頁有msg_404的,我就要把它的臉換掉。所以就有了以下的程式。

var y = document.getElementsByClassName("msg_404");

上面這一行是要找到網頁中classname含有msg_404的元素並且存到變數y中

if (y.length > 0) {

document.location.href="404.html";

上面這一堆是判斷找到幾個classname含有msg_404的元素,其實酷哥根本就不管它有幾個,反正就是沒有跟有兩種狀況,如果連結的網頁在你的網站中是存在的,那就不會有msg_404這個元素;如果連結的網頁在你的網站中是不存在的,那就是有msg_404這個元素。所以判斷y.length>0若是真的,就代表有msg_404也代表目前在網路中心預設的404頁面,那就趕快轉址到小夥伴設定的404網頁囉。

好啦,今天酷哥就分享到這,下次有新奇好玩的發現再跟小夥伴們分享囉。

酷哥的想像天地FACEBOOK粉絲專頁

    酷哥的想像天地 發表在 痞客邦 留言(1) 人氣()