假設您有一個網站構建在一個擅長設計的平台上,並且可以在示例中獲得。但是該平台在博客方面缺乏。因此,您對自己想:“如果我可以使用其他博客平台並在example.com/blog上提供它怎麼辦?”
大多數人會告訴您,這與DNS和網站應該如何工作和使用子域相反。但是,將您的內容放在我們根本無法使用子域的根域上有好處。
有一種方法可以在同一URL上提供兩個不同的平台。我將向您展示秘密醬汁,以便在本文結尾處,我們將成為blog.example.com作為example.com/blog。
因為您在這裡,您可能已經知道為什麼這是追求的途徑。但是,我想確保您在這裡是為了這樣做的主要原因:SEO。查看這14個案例研究,這些案例研究表明,當人們將子域移到子目錄中時,結果表明了積極的結果。您希望您的博客和域共享SEO值。將其放在子域上會有些斷開兩者的連接。
這就是我的理由,並結束了兩個平台,主要領域在WordPress上,子域則在Drupal上。但是本教程是平台不可知的 - 它幾乎可以與任何平台一起使用。
也就是說,除非您支付Cloudflare的企業計劃,否則我們在本教程中涵蓋的Cloudflare方法與Shopify不相容。那是因為Shopify還使用Cloudflare,不允許我們在免費定價層上代理流量。
在跳入之前,我想解釋將要發生的事情的高水平。簡而言之,我們將有兩個網站:我們的主要網站(example.com)和子域(blog.example.com)。我以“博客”為例,但是就我而言,我需要使用不同類型的內容進行Drupal。但是博客是典型的用例。
這種方法依賴於將CloudFlare用於DNS,並提供一些提供魔術的額外內容。我們要告訴Cloudflare,當某人訪問example.com/blog時,應該:
好吧,讓我們更詳細地研究它!
同樣,我們將Cloudflare用於DNS。指向您的域DNS是開始的第一步。
CloudFlare的原因是,它允許我們創建能夠在某人訪問某些URL時能夠運行一些代碼的工人(稱為路由,我們將在步驟3中創建)。該代碼將負責切換幕後網站。
Cloudflare有一個出色的指南入門。目的是將您的域(無論何處註冊)指向CloudFlare的名稱服務器,並確認CloudFlare是否在您的Cloudflare帳戶中連接。
該代碼將負責切換幕後網站。前往工人,然後單擊創建服務。
命名您的服務,然後選擇“ HTTP處理程序”:
單擊創建服務,然後快速編輯。
將以下代碼粘貼,然後在第16行中替換域名:
//聆聽每個請求,並響應我們的功能。 //注意,這僅在CloudFlare配置的路由上運行。 AddEventListener('fetch',function(event){ event.respondwith(handleRequest(event.request)) })) //我們處理響應的功能。 異步函數handlequest(請求){ //只能通過此代理使用請求。 if(request.method!=='get') 返回methodnotallowed(請求); //請求的URL。 const url = new URL(request.url); //請求“ Origin URL”又稱真實博客,而不是請求的內容。 //這將切換出絕對URL,使相對路徑保持不變。 const Originurl = url.tostring().replace('https://example.com','https://blog.example.com'); //原始頁面的內容。 const OriginPage =等待提取(OriginUrl); //給出我們的原始頁面。 const newResponse = new響應(OriginPage.Body,OriginPage);返回newresponse; } // 嘿!僅獲取請求 函數方法notallowed(請求){ 返回新響應(`方法$ {request.method}不允許。 狀態:405, 標題:{'允許':'get'} })) }
最後,單擊“保存”並部署。
現在,讓我們通知CloudFlare哪些URL(又稱路由)以運行此代碼。前往CloudFlare的網站,然後單擊工人。
在Cloudflare主屏幕上有工人部分,您可以在其中編輯代碼,然後在每個網站上添加路線的工人部分。它們是兩個不同的地方,這令人困惑。
首先,單擊添加路由:
因為我們添加了一個具有許多子頁面的博客,所以我們將使用https://example.com/blog*。請注意,星號充當匹配的通配符。該代碼將在博客頁面和以博客開頭的每個頁面上運行。
這可能會帶來意想不到的後果。例如,您有一個以“博客”開頭的頁面,但不是實際博客的一部分,例如https://example.com/blogging-services。這將被此規則所掌握。
然後,在服務下拉列表中選擇工人。
我們完成了很多工作,但是我們需要添加更多路線 - 博客取決於博客的CSS,JavaScript和其他文件路徑(除非所有文件都託管在其他URL上,例如在CDN上)。找到這些的好方法是測試您的路線並檢查控制台。
轉到您的https://example.com/blog,並確保加載某些內容。它看起來會弄亂,因為它缺少主題文件。目前可以,只要沒有產生404錯誤。重要的是要打開瀏覽器的DevTools,啟動控制台,並記下它找不到或加載的所有紅色URL(通常是404或403)。
您需要將這些添加為路線……但只能執行父路徑。因此,如果您的紅色URL為https://example.com/wp-content/themes/file1.css,則將https://example.com/wp-contenthe作為路線做。如果您想更具體,也可以添加兒童路徑,但是想法是使用一條路線來捕獲大多數文件。
添加這些路線後,請查看您的URL,看看它看起來像您的子域。如果沒有,請檢查上一個步驟。 (您可能需要添加更多路線。)
最好通過導航到多頁並查看是否缺少任何內容來進行質量檢查。我還建議打開DevTools並蒐索您的子域(blog.example.com)。如果出現了,您要么需要添加路由來定位這些資源,要么使用平台做某事以停止輸出這些URL。例如,我的平台正在用子域輸出一個規範標籤,因此我找到了一個插件來修改規範URL為我的根域。
您可能會看到我們有問題。我們的URL有兩個不同的URL。是的,我們可以使用規範屬性來告知Google哪個URL是我們的“主要”,但我們不要將其留給Google選擇正確的url。
首先,將整個子域設置為NOIndex(這樣做的方法將因平台而異)。然後,在CloudFlare Worker中,我們將添加以下代碼行,這基本上說是在通過代理訪問當前URL時刪除NOINDEX。
newResponse.headers.delete(“ x-robots-tag”);
完整的代碼解決方案是在本文末尾提供的。
最後要做的是修改子域的站點地圖,以免使用其中的子域。這樣做的方法會因平台而異,但目標是修改站點地圖中的基本/絕對/域,以便打印示例example.com/mypost),而不是blog.exmaple.com/mypost。一些插件和模塊將允許無自定義代碼。
就是這樣!解決方案應該起作用!
這種Cloudflare Magic並非沒有缺點。例如,它只接受獲取請求,這意味著我們只能從服務器中獲取東西。我們無法發布哪種形式使用。因此,如果您需要讓訪問者登錄或提交表格,那麼我們已經完成的工作還會有更多工作。我在另一篇文章中討論了一些解決方案。
如前所述,另一個限制是,在Shopify上使用這種方法需要訂閱Cloudflare的企業定價層。同樣,這是因為Shopify還使用Cloudflare並限制了在其其他計劃中代理流量的能力。
如果您試圖將同一平台的兩個實例合併在一起(例如,您的頂級域和子域都使用WordPress),您也可能會遇到一些問題。但是在這種情況下,您應該能夠合併並使用平台的一個實例。
這是所有榮耀的代碼:
//聆聽每個請求,並響應我們的功能。 //注意,這僅在CloudFlare配置的路由上運行。 AddEventListener('fetch',function(event){ event.respondwith(handleRequest(event.request)) })) //我們處理響應的功能。 異步函數handlequest(請求){ //只能通過此代理使用請求。 if(request.method!=='get')返回methodnotlowered(request); //請求的URL。 const url = new URL(request.url); //請求“ Origin URL”又稱真實博客,而不是請求的內容。 //這將切換出絕對URL,使相對路徑保持不變。 const Originurl = url.tostring().replace('https://example.com','https://blog.example.com'); //原始頁面的內容。 const OriginPage =等待提取(OriginUrl); //給出我們的原始頁面。 const newResponse = new響應(OriginPage.Body,OriginPage); //從原始域中刪除“ noindex”。 newResponse.headers.delete(“ x-robots-tag”); //刪除CloudFlare緩存,因為它是用於WordPress的。 //如果您使用的是Cloudflare Apo,並且您的博客不是WordPress(但是 //您的主要域是),然後阻止APO在原點URL上運行。 // newResponse.headers.set(“ CF-edge-cache”,“ no-Cache”);返回newresponse; } // 嘿!僅獲取請求 函數方法notallowed(請求){ 返回新響應(`方法$ {request.method}不允許。 狀態:405, 標題: {'允許':'get'} })) }
如果您一路上需要幫助,我歡迎您通過我的網站CreateToday.io與我聯繫,或者查看我的YouTube進行視頻演示。
以上是如何將子域作為子目錄服務的詳細內容。更多資訊請關注PHP中文網其他相關文章!