假设您有一个网站构建在一个擅长设计的平台上,并且可以在示例中获得。但是该平台在博客方面缺乏。因此,您对自己想:“如果我可以使用其他博客平台并在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中文网其他相关文章!