Случайное вращение контента стало проще

После прочтения Дэн Бенджамином случайного поворота изображения я решил поделиться методом, который я недавно использовал для поворота «Истории успеха» на моем сайте. Концепции и сценарий, которые я представлю в этой статье, можно использовать так же, как и у Дэна, чтобы страница не становилась скучной для повторных посетителей.

Концепция похожа, но не одинакова; скрипт, о котором мы здесь поговорим, может быть использован для создания случайного поворота любого (X) HTML-кода, который вы выберете. Он основан на сервере и не зависит от JavaScript.

обзор

Вы создаете несколько <div> с. Вы импортируете таблицу стилей, созданную сценарием Perl. Таблица стилей устанавливает все display:none <div> кроме одного display:none . Ваш дизайн выглядит свежо, поисковые системы выбирают весь контент (так что любые ссылки в случайном контенте видны каждый раз), и пользователи программы чтения с экрана тоже все это получают *, сохраняя ваш контент доступным. Сценарий простой, но полезный.

* Как отметил Джо Кларк , некоторые программы чтения с экрана уважают display:none , так что это не относится к этим правонарушителям. Вы можете использовать что-то, кроме display:none если хотите.

Установка скрипта

Сценарий написан на Perl и должен использоваться практически на всех веб-хостах — вы можете скачать его здесь . Обратитесь в службу поддержки вашего веб-хостинга или файлы справки, если вы не знаете, как заставить работать этот скрипт. Единственная строка, которую вам может понадобиться изменить, — это первая строка скрипта, которая указывает на исполняемый файл Perl на вашем сервере.

Пример

В качестве примера мы будем использовать 3 «Истории успеха»; каждый содержит страницу содержания:

 success1.html  success2.html  success3.html 

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

Давайте создадим три раздела кода, которые можно будет использовать для перехода пользователей с домашней страницы на страницы с полной историей успеха:

 <div id="success1" class="success-story">  <p><a href="/success1.html"><img src="/images/success1.jpg" alt="Foo Ltd." border="0" />Foo Ltd. has been invaluable in bringing our product to market successfully.....</a></p>  </div>   <div id="success2" class="success-story">  <p><a href="/success2.html"><img src="/images/success2.jpg" alt="Foo Ltd." border="0" />Foo Ltd. delivered a highly professional service.....</a></p>  </div>   <div id="success3" class="success-story">  <p><a href="/success3.html"><img src="/images/success3.jpg" alt="Foo Ltd." border="0" />Foo Ltd. provided the project management skills we were looking for.....</a></p>  </div> 

В коде есть <div> для каждого раздела контента, который мы хотим включить в ротацию. Однако содержимое <div> не важно для сценария. Важной частью является идентификатор каждого <div> , который имеет два раздела: префикс и номер. Класс <div> может быть любым, что вам нужно для отображения CSS. Вы можете, конечно, использовать идентификатор, но если вы сделаете это, каждый идентификатор будет отображаться в вашем селекторе. Использование одного класса делает это проще.

Префикс

Первая часть идентификатора является префиксом. Префикс включает в себя все, что стоит перед номером. В этом примере префикс:

 success 

Мы передадим этот префикс в скрипт.

Число

Вторая часть идентификатора — это номер; Идентификаторы всегда должны начинаться с 1 и возрастать с шагом 1 (1,2,3 и т. д.). Вы можете иметь столько идентификаторов, сколько захотите.

 <link type="text/css" rel="stylesheet" href="/cgi-bin/random_content.pl?t=3&p=success" /> 

 /cgi-bin/random_content.pl?t=3&p=success 

 /cgi-bin/random_content.pl? 

 t=3 

  t означает всего.  Вам следует заменить 3#ec#/ with the total number of content <div> s you used above. 3#ec#/ with the total number of content <div> s you used above. 
 & 
  Вам нужен амперсанд для разделения двух значений, которые вы передаете. 
 p=success 
  p обозначает префикс.  Вы должны заменить success префиксом, который вы использовали для идентификаторов ваших дивов.

  Это оно!  Посетители, которые не используют CSS, такие как сканеры поисковых систем и программы чтения с экрана, которые игнорируют CSS, будут получать весь контент каждый раз.  С небольшим воображением, есть много интересных вещей, которые вы можете сделать с помощью этого простого сценария.  Это сработало очень хорошо для меня;  Я надеюсь, что это тоже для вас! 

  Изменение CSS 



  Как я упоминал ранее, вам не нужно использовать display:none - вы можете изменить его, если хотите.  Один из вариантов - абсолютно позиционировать контент так, чтобы он находился за пределами видимой области экрана, скажем, 1000 пикселей влево.  Для этого вы должны изменить следующую строку: 

 my $css = '{display:none;}'; 
  Измените это на: 
 my $css = '{position:absolute; left:-1000px; top:0px;}'; 
  Это должно сделать неслучайный контент более доступным для программ чтения с экрана.  Выбор ваш! 
  Прощальный комментарий 
  Благодаря великолепию Internet Explorer у вас могут возникнуть проблемы, если вы попытаетесь просмотреть вывод этого скрипта прямо в браузере.  Проблемы возникают из-за того, что браузер не слушает MIME-тип, который выводится сценарием, когда вы пытаетесь просмотреть его напрямую (хотя он отлично работает, когда импортирует его в виде таблицы стилей). 
  Если вы хотите просмотреть вывод в этом браузере, вам нужно добавить &debug=1 к URL-адресу, который вы используете для доступа к сценарию.  Это приводит к выводу сценария с использованием MIME-типа text / plain вместо text / css.  Не используйте debug=1 при импорте в качестве таблицы стилей;  добавляйте его только в том случае, если у вас возникли проблемы с просмотром вывода скрипта в браузере для тестирования. 
  Другой альтернативой является переименование скрипта «.css», который также должен решить эту проблему, не добавляя debug=1 , поскольку это заставляет браузер поверить, что он получает css.