Скачиваем сайты целиком — утилита wget

wget — это утилита, которая предназначена для загрузки файлов по сети (из интернета). Я расскажу, как использовать wget, чтобы скачивать сайты из интернета целиком и затем просматривать их в автономном режиме.

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

Чтобы скачать сайт целиком с помощью wget нужно выполнить команду:

wget -r -k -l 7 -p -E -nc http://site.com/

После выполнения данной команды в директорию site.com будет загружена локальная копия сайта http://site.com. Чтобы открыть главную страницу сайта нужно открыть файл index.html.

Рассмотрим используемые параметры:

-rуказывает на то, что нужно рекурсивно переходить по ссылкам на сайте, чтобы скачивать страницы.
-kиспользуется для того, чтобы wget преобразовал все ссылки в скаченных файлах таким образом, чтобы по ним можно было переходить на локальном компьютере (в автономном режиме).
-pуказывает на то, что нужно загрузить все файлы, которые требуются для отображения страниц (изображения, css и т.д.).
-lопределяет максимальную глубину вложенности страниц, которые wget должен скачать (по умолчанию значение равно 5, в примере мы установили 7). В большинстве случаев сайты имеют страницы с большой степенью вложенности и wget может просто «закопаться», скачивая новые страницы. Чтобы этого не произошло можно использовать параметр -l.
-Eдобавлять к загруженным файлам расширение .html.
-ncпри использовании данного параметра существующие файлы не будут перезаписаны. Это удобно, когда нужно продолжить загрузку сайта, прерванную в предыдущий раз.

Мы рассмотрели лишь одно из возможных применений утилиты wget. На самом деле область применения wget значительно шире и wget обладает большим числом дополнительных параметров. За более подробной информацией обращайтесь к руководству, выполнив в командной строке: man wget. По материалам pingvinus.ru/note/wget-download-sites

Создаём для сайта кнопку «наверх»

Создаём кнопку «наверх» для сайта

Рассмотрим простой способ создания кнопки «наверх» для сайта, которая будет появляться при прокрутке страницы вниз. Разберем возможность реализации на jquery и чистом javascript. Найдём причины, по которым она может не работать.

Порядок действий:

  1. подключить jQuery;
  2. загрузить на сайт изображение кнопки;
  3. добавить код, скрипт и стили.

Подключаем jQuery — прописываем загрузку последней версии библиотеки в секции «head» шаблона или где-то вверхней части сайта.

<script src="https://code.jquery.com/jquery-git.min.js"></script>

Выбираем подходящее изображение и загружаем его в каталог сайта. Представлю на выбор несколько вариантов. Скачать можно кликнув правой клавишей мышки по рисунку и нажав «Сохранить картинку как».

кнопка Наверх для сайтакнопка Вверхкнопка Наверхбольшая кнопка Наверхпростая кнопка наверх
width: 100px;
height: 40px;
width: 74px;
height: 94px;
width: 60px;
height: 60px;
width: 67px;
height: 80px;
width: 63px;
height: 61px;

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

// код
<div id="upbutton"></div>

// скрипт
<script>
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 100)) {
            if ($('#upbutton').is(':hidden') {
                $('#upbutton').css({opacity : 1}).fadeIn('slow');
            }
        } else { 
            $('#upbutton').stop(true, false).fadeOut('fast'); 
        }
    });
    $('#upbutton').on('click', function() {
        $('html, body').stop().animate({scrollTop : 0}, 300);
    });
</script>

// стили
<style>
  #upbutton {
    background: url("/images/up.png") no-repeat top left;
    height: 60px;
    width: 60px;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 999;
  }
</style>

Скорость прокрутки можно регулировать в этой строке, изменяя число «300»:

$('html, body').stop().animate({scrollTop : 0}, 300);

Как сделать кнопку без jQuery

Можно сделать плавающую кнопку «наверх» на чистом JavaScript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

// код
<a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">
    <img src="/images/up.png" alt="Top" border="none" title="Наверх">
</a>

// скрипт
<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 10);
        }
    }
    
    window.onscroll = function() {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop;
      if (scrolled > 100) {
      	document.getElementById('upbutton').style.display = 'block';
      } else {
      	document.getElementById('upbutton').style.display = 'none';
      }
    }
</script>

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

Если кнопка при изменении свойства отображается, значит дело в скриптах. Следует проверить корректность подключения библиотеки jQuery и отсутствия конфликтов с другими скриптами. Всё в порядке? Тогда оберните скрипт в следующую конструкцию.

<script>
    window.onload = function () {
    //здесь скрипт
    }
</script>

Это позволит выполнить скрипт после загрузки всей страницы.

Вариант 2

Создаем кнопку «Наверх» или Scroll to Top на jQuery

В этом уроке, мы узнаем, как создать свою Scroll to Top кнопку для длинных страниц. Способ реализации очень прост. Если вы его усвоите, вы сможете настроить кнопку Scroll to Top так, как вам захочется. Преимущество в том, что данная кнопка реализована на популярном фреймверке jQuery, который используется практически на каждом сайте.

Подготовка

 Для начала, нам понадобиться картинка кнопки наверх. Для этого можете скачать любую стрелочку или нарисовать сами. Сохраните ее под именем arrow.png. Как вы уже догадались, эта картинка и будет нашей кнопкой наверх.

CSS стили кнопки «Наверх»

В header страницы или в отдельном css файле, установим css стили для div блока с id=scroller.

<style>#scroller{    position: fixed;        /** позиция кнопки scroll to top **/    bottom: 30px;       /** картинка кнопки наверх**/    background: transparent url(arrow.png) no-repeat left top;      width: 32px;    height: 32px;    cursor: pointer;    /** скрываем кнопку в начале **/    display:none;}</style>

Как видите, прежде всего мы установили фиксированную позицию блока, вы можете поменять размещение кнопки scroll to top с помощью значения bottom. Далее мы устанавливаем фоном нашу стрелочку, которую подготовили на первом этапе. В конце, скрываем кнопку, чтобы ее не было видно, когда страница только загружена.

JavaScript код кнопки «Наверх»

Как и полагается, мы напишем код скрипта кнопки в секции header.

Для начала подключим библиотеку jQuery, для этого воспользуемся Google CDN. Хотя вы можете подключить из официального сайта jQuery, Microsoft или из своего сервера. Я использую Google CDN, по моему мнению, он работает наиболее быстро.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Создаем JavaScript функцию после загрузки библиотеки jQuery.

<script>$(document).ready(function(){       $(window).scroll(function () {        if ($(this).scrollTop() > 0) {            $('#scroller').fadeIn();        } else {            $('#scroller').fadeOut();        }    });    $('#scroller').click(function () {        $('body,html').animate({            scrollTop: 0        }, 400);        return false;    });});</script>

Разберемся в коде немного попозже… В начале мы вызываем функцию по загрузке страницы:

$(document).ready(function(){});

В первой части функции, мы устанавливаем событие на scroll событие. Когда происходит скроллинг окна значение переменной scrollTop более 0, в это время мы выводим кнопку «Наверх», когда скроллинг не происходит, мы ее прячем.

Во второй части функции, мы цепляем обработчик события click на кнопку scroll to top (наверх), когда она нажата, мы анимируем скроллинг к тегу body. То есть происходит скроллинг в начало страницы.

На этом создание базового кода кнопки «Наверх» завершено!

Доработки Scroll To Top

Надеюсь, у вас есть тысячи идей, как сделать эту кнопку красивее и лучше. Все что вам предстоит сделать – это внести свои коррективы в этот скрипт. Для примера, можете добавить изменение стиля кнопки при наведении мыши.

В завершение

Буквально за 2 минуты, вы узнали, как создать собственную кнопку scroll to top или «наверх» на jquery. Надеюсь, этот урок был полезен и прост для понимания. Если это так вы можете поделиться им в социальных сетях, нажав на кнопочки ниже. Если остались вопросы по поводу scroll to top, жду их в комментариях ниже этого урока. Творческих вам успехов!

Не помогло? Пишите в комментариях и постараемся найти проблему вместе.

По материалам сайтов realadmin.ru и sitear.ru.