Главная → Программирование → by

Лучше 404 Page

Много забавных 404 страниц были недавно поделился: тщательно разработанные мемы, смешные GIF-даже странный интерактивную игру.Но если 404 не поможет вашим посетителям, то какой смысл

Посетитель мог найти себя на 404 странице для одной из многих причин: пропущен адрес, плохой ссылку откуда-то еще, удаленный страницу или контент, который переехал в другом месте.Хотя вы можете предотвратить ошибки из переехали страниц с переадресации, вы не можете контролировать ошибки людей .

Быть Helpful

Люди участки на вашем сайте ищете его содержания, как правило, через ссылку.Они нажали эту ссылку, ожидая одну вещь, так почему показать им рисованной панда?Вместо этого, ваша страница 404 должны получить их туда, где они должны быть .

Эта проблема не нова, и мы видели много идей о том, как справиться с этим.Показаны форму поиска или ссылки на главную страницу разумно.Тем не менее, те пассивные решения, которые не решают проблему посетителя.Более прямой подход будет угадать, где посетитель намеревался отправиться и предложить эту страницу .

Предлагая правильный Page

Один из способов, чтобы предложить нужную страницу, чтобы искать его самостоятельно и представить результат.К счастью, мы не должны писать поисковую машину, чтобы сделать это (хотя, если у вас есть под рукой, хорошо для вас!).Вместо этого, мы можем использовать Custom Search API 1 .

We can use Google’s Custom Search API to suggest the right page.
Мы можем использовать Google Заказные Search API, чтобы предложить нужную страницу .

Google, Custom Search API является инструментом для поиска в пределах отдельного сайта.Когда установлен, он позволяет получить то, что он считает лучшим матч с вашего сайта.Это нужно поисковую фразу, хотя.Таким образом, чтобы дать Google что-то искать с, мы будем использовать путь к URL, что пользователь находится в настоящее время на .

Оговоркой: Пределы Abound

Перед тем как перейти в “Как” части, стоит отметить, что бесплатно ярус для этого API имеет ограничение в 100 звонков в день.Вы можете пойти свет на тестировании время работы на нем.Мне удалось прожечь 100 звонков в менее чем за час, и я должен был проволочной части его вместе, не видя результат до следующего дня .

В то время как кто-то с визитки может быть хорошо с этого предела, платные обновления доступны.Документация API Google, упоминает цена $ 5 за 1000 queries 2 и до 10000 запросов в день .

Настройка Up

Перед использованием пользовательского поискаAPI, мы должны позволить Google знает, кто мы есть, и получить некоторые ключи доступа .

Поисковая ID

Мы должны пройти через несколько этапов, прежде чем мы можем летать через эти 100 запросов API.Во-первых, зарегистрировать свой сайт-специфического поиска engine 3 .

  • Выберите “Добавить”.

    • URL Введите Ваше веб-сайта (yoursite.com |) __12 в “сайты для поиска.”

  • Хит “Создать”.

Вы теперь должны найти свой “Поисковая ID.” Нажмите кнопку “Изменить” на поисковой системе, которую вы создали, а затем кнопку “Search Engine ID”.Принять к сведению, что код

Setting up the Google’s Custom Search API. 4
Настройка Google Заказные Search API.( Просмотр большой version 5 )

API Разработчикам Access

Далее перейдите к Разработчики Console 6 .

Если у вас еще нет проекта, выберите опцию “Новый проект” и заполните форму .

В разделе “API,” активировать “Другой Search API”, переключая кнопку “Off” в положение “Вкл.” Затем выберите “Полномочия”, затем “Создать новый ключ”, и выберите опцию “Обозреватель ключ”.Обратите внимание на ключ API

7
( Просмотр большой version 8 )

JavaScript

Вооружившись как в поисковой ID и ключ API, теперь вы можете начать удара API.Приведенный ниже код требуется jQuery 9 .Это делает некоторые 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 метод позже .

Пробуя Search

Во-первых, мы добавим метод, который пытается пользовательского поиска: 

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 метод принимает фразу и отправляет его вместе с ключами как запрос на API Google.Затем ответ проверяется, и первое звено, что находит будут регистрироваться в консоли.Вы бы назвали это так: 

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

Предполагая, что ваш сайт содержит страницы о кошках (и которого нет?), То вы должны увидеть что-то вошли в консоли .

Получение поиск Phrase

Далее мы напишем код, чтобы получить путь от 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 то говорит, чтобы заменить каждый экземпляр в строке .

Показывающие Redirect

В моей первой версии, у меня было страницы перенаправления немедленно.Это было весело, но не большой опыт для посетителя.Страница будет загружаться, мерцание и прыгать в другом месте .

Альтернативный подход заключается в представлении опцию в виде наложения и в качестве связующего звена, что посетитель может нажать.Таким образом, посетитель лучше понимает, что произошло, и видит ясный путь, чтобы продолжить.И они будут иметь возможность не предпринимать действий, если результат не устраивает .

Другое Approaches

Показаны единственный результат является одним из способов пойти об этом, но это будет стоить с учето …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.