东莞网站建设:如何创建一个有用的,更好的404页面

2019.08.12 mf_web

189

最近分享了许多有趣的404页面:精心制作的模因,有趣的GIF,甚至奇怪的互动游戏。但如果404不能帮助您的访问者,那么重点是什么?东莞网站建设

访问者可能会发现自己在404页面上有多种原因:错误的地址,来自其他地方的错误链接,已删除的页面或移动到其他地方的内容。虽然您可以通过重定向防止移动页面出错,但您无法控制人们的错误。

有帮助

登陆您网站的人正在寻找其内容,通常是通过链接。他们会点击那个链接期待一件事,那么为什么要给他们看一个手绘的熊猫呢?相反,您的404页面应该将它们带到他们需要的位置。

这个问题并不新鲜,我们已经看到了很多关于如何处理它的想法。显示搜索表单或链接到主页是合理的。然而,那些是无法解决访客问题的被动解决方案。更直接的方法是猜测访问者打算去哪里并建议该页面。

建议正确的页面

建议正确页面的一种方法是自己搜索并显示结果。幸运的是,我们不必编写搜索引擎来执行此操作(但是,如果您有一个方便,对您有用!)。相反,我们可以使用Google的自定义搜索API。

我们可以使用Google的自定义搜索API来推荐正确的页面。
我们可以使用Google的自定义搜索API来推荐正确的页面。

Google的自定义搜索API是一种在单个网站中进行搜索的工具。设置后,您可以从网站中检索它认为最匹配的内容。但它确实需要一个搜索短语。因此,要向Google提供搜索内容,我们将使用用户当前所在网址的路径。

警告:限制比比皆是

在进入“如何”部分之前,值得注意的是,此API的免费套餐每天限制为100次。您可能希望在进行测试时了解测试。我设法在不到一个小时的时间内完成了100次通话,我不得不将其中的一部分连接在一起,直到第二天才看到结果。

虽然拥有小型网站的人可能没有这个限制,但可以使用付费升级。Google的API文档提到每1000次查询的价格为5美元,每天最多10,000次查询。

配置

在使用自定义搜索API之前,我们需要让Google知道我们是谁并获取一些访问密钥。

搜索引擎ID

在我们完成这100个API请求之前,我们需要经过几个步骤。首先,注册您的特定于站点的搜索引擎。

  • 选择“添加”。

  • yoursite.com在“要搜索的网站”中输入您网站的网址()。

  • 点击“创建”。

您现在需要找到“搜索引擎ID”。在您创建的搜索引擎上单击“编辑”,然后单击“搜索引擎ID”按钮。记下那段代码!

设置Google的自定义搜索API。
设置Google的自定义搜索API。(查看大图)

开发人员API访问

接下来,转到开发人员控制台。

如果您还没有项目,请选择“新建项目”选项并填写表格。

在“API”下,通过将“关闭”按钮切换为“打开”来激活“自定义搜索API”。然后,选择“凭据”,然后选择“创建新密钥”,并选择“浏览器密钥”选项。记下API密钥!

(查看大图)

JAVASCRIPT的

使用搜索引擎ID和API密钥,您现在可以开始使用API。下面的代码需要jQuery。它做了一些AJAX JSON的东西,所以我宁愿依靠框架来确保它可以跨浏览器工作。

在创建函数之前,我们应该考虑运行代码的环境。因为我们在前端编写JavaScript,所以我们的代码可能与其他插件和脚本一起运行。所以,让我们构建一个小空间,将我们的功能与其他所有功能完全分开:

function createCustomSearch() {// Private variables and methods here}
复制

在我们的customSearch对象中,我们可以安全地远离全局上下文定义方法和变量。首先,让我们设置一些变量以便以后使用:

function createCustomSearch() {
  // Some private variables for this object
  var context = this;
  var dialog = document.querySelector('dialog');
  // Your keys
  var engineID = 'YOUR_ENGINE_ID';
  var apiKey = 'YOUR_API_KEY';}
复制

将密钥替换为我们之前生成的密钥。

最初,我们通过将其存储在变量中来建立本地上下文。我们稍后会用它来访问一个showDialog方法。

首先,我们将添加一个尝试自定义搜索的方法:

function customSearchConstructor() {
  // Some private variables for this object
  var context = this;
  var dialog = document.querySelector('dialog');
  // Your keys
  var engineID = 'YOUR_ENGINE_ID';
  var apiKey = 'YOUR_API_KEY';
  this.trySearch = function(phrase) {
    var queryParams = {
      cx: engineID,
      key: apiKey,
      num: 10,
      q: phrase,
      alt: 'JSON'
    }
    var API_URL = 'https://www.googleapis.com/customsearch/v1?';
    // Send the request to the custom search API
    $.getJSON(API_URL, queryParams, function(response) {
      if (response.items && response.items.length) {
        console.log(response.items[0].link);
      }
    });
  };}
复制

此trySearch方法会使用短语并将其与您的密钥一起发送给Google的API。然后检查响应,它找到的第一个链接将记录到控制台。你会这样称呼它:

var customSearch = new customSearchConstructor();customSearch.trySearch('cat');
复制

假设您的网站包含有关猫的页面(并且不包含猫?),您应该会看到控制台中记录的内容。

获取搜索短语

接下来,我们将编写一些代码来从页面的URL获取路径。此路径将成为搜索短语。

$(document).ready(function() {
  var customSearch = new customSearchConstructor();
  var path = window.location.pathname;
  var phrase = decodeURIComponent(path.replace(/\/+/g, ' ').trim());
  customSearch.trySearch(phrase);});
复制

在jQuery ready方法中,我们将pathname获取当前URL 的一部分并从中创建搜索短语。我们将解码URI,用空格替换任何正斜杠,并将结果发送到trySearch方法。

用JAVASCRIPT替换字符串

一个方便的事情是如何在JavaScript中替换全局正则表达式。这是一组由管道分隔的匹配:

/\/+/g
复制

第一个和最后一个正斜杠(/)用于包含表达式。在其中,我们转义反斜杠字符(\/),以便将其视为实际字符。该+会匹配多个斜线的任何实例,以及g然后告诉它的字符串替换每个实例。

显示重定向

在我的第一个版本中,我立即重定向页面。这很有趣,但对游客来说并不是一次很棒的体验。该页面将加载,闪烁并跳转到其他位置。

另一种方法是将选项显示为叠加层,并将其显示为访问者可以单击的链接。通过这种方式,访问者可以更好地了解发生的情况并看到明确的方法。如果结果不适合他们,他们可以选择不继续。

其他方法

显示单个结果是解决此问题的一种方法,但值得考虑的不仅仅是第一个结果。如果您希望为访问者提供更多选项,那么您的404页面可以将所有返回的页面显示为一组。根据自定义搜索结果的质量,这可能会更好。

对于这个例子,我们假设返回的第一个结果总是最相关的,我们将以对话框叠加的形式呈现单个选项。

另外,考虑没有返回结果的情况。确保您的404页面包含一些有用的消息或内容。

启动对话框

如果我们找到结果,让我们将其显示为提示用户的模态。为了解决这个问题,我们将能够在不久的将来使用新dialog 元素。最初用于电影对话,元素又回来了,现在可以显示需要在其他内容面前弹出的任何内容。换句话说,我们现在有一个原生的HTML5模态元素。

让我们用HTML定义对话框:

<dialog>
  <h2>
    Hey, is this what you meant?
    <span class="suggestion"></span>
    <span class="nope">No thanks</span>
  </h2></dialog>
复制

适用于旧浏览器的POLYFILL

在调用将显示和隐藏此对话框的JavaScript之前,我们需要考虑旧版浏览器。该dialog元素非常新,因此无处不在。要解决此问题,我们可以使用Google提供的有用的polyfill 。

这个polyfill需要一点JavaScript。在创建对话框之前,需要调用以下外部脚本:

<script src="https://cdn.rawgit.com/GoogleChrome/dialog-polyfill/master/dialog-
polyfill.js"></script>
复制

此脚本包含一个registerDialog方法,该方法dialog使用一些可以重现本机API的便捷函数来包装选择器。我们可以在我们的customSearch对象中使用它:

function createCustomSearch() {
  …
  var dialog = document.querySelector('dialog');
  // Apply the polyfill
  dialogPolyfill.registerDialog(dialog);
  …}
复制

显示和隐藏

我们现在有一个dialog元素,registerDialogpolyfill 添加了额外的方法。让我们添加一些方法来显示和隐藏元素:

function createCustomSearch() {
  …
  this.showDialog = function (url) {
    var suggestedLink = $('<a></a>');
    // Verify that the suggested URL is from this domain
    var hostname = new RegExp(location.host);
    if (hostname.test(url)) {
      suggestedLink.attr('href', url);
      suggestedLink.text(url);
      $('dialog .suggestion').html(suggestedLink);
      dialog.showModal();
    }
  };
  this.hideDialog = function () {
    dialog.close();
  };}
复制

我们这里有两种方法。第一个,showDialog取一个URL,将其放在dialog元素中,并调用showModalpolyfill提供的方法。

为了保护自己,我们正在验证URL。因为我们希望此脚本从同一网站返回另一个页面,所以我们验证返回的URL的主机名和本地网站的主机名是否相同。

然后使用URL生成锚点,我们将其放在dialogHTML中。

第二种方法,hideDialog使用自己的close方法隐藏模态。

设置对话框

最后,让我们添加一些风格。默认的模态风格有点过于宽松。我们会让它更微妙,并给它一个带有一些CSS的黑暗背景:

dialog {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  text-align: center;
  color: #fff;
  border: none;
  background: none;}dialog[open] {
  display: block;}dialog[open]:before {
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ’;
  background: rgba(0,0,0,.8);}dialog span {
  display: block;}dialog span.suggestion {
  font-size: 1.75em;
  line-height: 2.5em;}dialog h2 {
  line-height: 1.5em;
  padding-top: 2em;}dialog a {
  padding: .25em;
  border-radius: .25em;
  background: rgba(200,200,255,.9);}dialog .nope {
  font-size: .75em;
  cursor: pointer;
  color: #aaa;}
复制

我们直接指的dialog是这个CSS。为了获得更大的灵活性,您可能更愿意通过类来引用它。

调整各种款式以适合您的设计。这个CSS的主要目标是定义对话框的外观,并display: block在给出类的时候使用它open。其他款式,从position到color,完全取决于你。

接下来,我们需要trySearch从之前调整该方法以使用该对话框。我们通过将showDialog方法调用放在JSON响应回调中来完成此操作。这是完整的脚本:

function customSearchConstructor() {
  // Some private variables for this object
  var context = this; // Keeps the parent context available so that we can call local methods
  var dialog = document.querySelector('dialog');
  // Apply the polyfill
  dialogPolyfill.registerDialog(dialog);
  // Your keys
  var engineID = 'YOUR_ENGINE_ID';
  var apiKey = 'YOUR_API_KEY';
  this.trySearch = function(phrase) {
    var queryParams = {
      cx: engineID,
      key: apiKey,
      num: 10,
      q: phrase,
      alt: 'JSON'
    }
    var API_URL = 'https://www.googleapis.com/customsearch/v1?';
    // Send the request to the custom search API
    $.getJSON(API_URL, queryParams, function(response) {
      if (response.items && response.items.length) {
        context.showDialog(response.items[0].link);
      }
    });
  };
  this.showDialog = function (url) {
    var suggestedLink = $('<a></a>');
    // Verify that the suggested URL is from this domain
    var hostname = new RegExp(location.host);
    if (hostname.test(url)) {
      suggestedLink.attr('href', url);
      suggestedLink.text(url);
      $('dialog .suggestion').html(suggestedLink);
      dialog.showModal();
    }
  };
  this.hideDialog = function () {
    dialog.close();
  };}$(document).ready(function() {
  var customSearch = new customSearchConstructor();
  var path = window.location.pathname;
  var phrase = decodeURIComponent(path.replace(/\/+/g, ' ').trim());
  customSearch.trySearch(phrase);
  $('dialog .nope').click(function() {
    customSearch.hideDialog();
  });});
复制

现场演示

您可以在我的404页面上看到此代码。键入类似的内容…/mac/plus/article/将导致404推荐CSS Mac Plus博客。

后备和其他策略

除了API限制之外,可能找不到错误输入的URL的匹配项。在这种情况下,向访问者展示一些有用的内容将是一个好主意。根据您的网站,您可以显示最近的文章或最近更新的页面,甚至可能显示自定义搜索框。

Google的自定义搜索引擎为我们提供了获取嵌入代码的选项。选择现有引擎,然后选择“获取代码”按钮以查找此内容。无论您决定将哪些内容显示为后备,对于您的访问者来说,这比显示有趣的图片更好。它可能没那么有趣,但它会帮助访客找到他们需要的东西。

我希望你喜欢这篇文章。如果您想共享它,请仔细检查URL是否正确。或者不。我相信一切都会好的。

东莞网站建设

最新案例

联系电话 400-6065-301

留言