Apostrofkoda'ru
Работы с сайтом

05.05.2022

Заметки для работы с сайтом

Содержание:

Заметки и заготовки для работы с сайтом, которые помогли в работе и чтобы не потерять — буду собирать их здесь.


301 редирект с исключением категории

Пример:

Старые адреса

  • site.ru/category/page-1
  • site.ru/category/page-2
  • site.ru/category/page-3
  • и т.д.

Новые

  • site.ru/page-1
  • site.ru/page-2
  • site.ru/page-3
  • и т.д.

Если появилась необходимость исключить категорию из url и перенаправить вложенные в нее страницы к корню сайта, то открываем .htaccess и после строки:

RewriteEngine on

Добавляем следующие строки:

RewriteCond %{REQUEST_URI} ^(.*)/category/(.*)$
RewriteRule ^(.*)$ %1/%2 [R=301,L]

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

Старый адрес (например, site.ru/category/page-1) должен вернуть Код статуса HTTP 301 Moved Permanently, а встроке Location: уже будет новый адрес (например, site.ru/page-1).

Проверить ответ сервера после редиректа
Проверить ответ сервера после редиректа.

js добавить удалить класс по клику на ссылку или кнопку

Если необходимо добавить или удалить класс по клику у элемента, например div с определенным id или className, то можно воспользоваться примерами расположенными ниже.

Если у элемента нет класса - то он добавляется, если есть - удаляется. Данное действие можно производить неограниченное количество раз.

Подробнее о .toggleClass тут: https://api.jquery.com/toggleClass/

Примеры

.div-link-change {
    padding: 1rem 1rem;
    border: 2px dashed transparent;
    border-radius: .125rem;
    text-align: center;
    background-color: #e1e9e1;
    color: #557f55;
    margin-bottom: 3rem;
}
.change-class {
    background-color: #f9f9f9;
    border: 2px dashed #557f55;
    -webkit-box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
}
<div class="div-link-change">
    <a href="#" id="link-id">Клик по ссылке</a>
</div>
$("#link-id").click(function (e) {
       e.preventDefault();
       $(".div-link-change").toggleClass("change-class");
   });

Добавить/удалить класс по клику на кнопку

.div-button-change {
    padding: 1rem 1rem;
    border: 2px dashed transparent;
    border-radius: .125rem;
    text-align: center;
    background-color: #e1e9e1;
    color: #557f55;
    margin-bottom: 3rem;
}
.change-class {
    background-color: #f9f9f9;
    border: 2px dashed #557f55;
    -webkit-box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
    box-shadow: 0px 3px 10px 2px rgba(34, 60, 80, 0.2);
}
<div class="div-button-change">
    <button class="button-class">Клик по кнопке</button>
</div>
$(".button-class").click(function () {
       $(".div-button-change").toggleClass("change-class");
   });

Статья будет дополняться. Последние изменения: 07.06.2022.