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

2019.08.12 mf_web

189

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

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

有帮助

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

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

建议正确的页面

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

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

警告：限制比比皆是

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

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

配置

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

搜索引擎ID

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

选择“添加”。
yoursite.com在“要搜索的网站”中输入您网站的网址（）。
点击“创建”。

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

开发人员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();
  });});

复制