Фильтрация списка дел — Изучение веб-разработки

In this article

• Код фильтрации
• Добавление элементов управления фильтром
• Резюме
• В это модуле

• Назад
• Обзор: Client-side JavaScript frameworks
• Далее

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

Фильтрация элементов основана на свойстве filter, которое вы ранее добавили в app.component.ts:

filter: 'all' | 'active' | 'done' = 'all';

Значение фильтра по умолчанию — all, но так же может быть active или done.

В app.component.html, добавьте следующий html перед кнопкой Add но над разделом, в котором перечислены элементы.
В следующем снипете существующие секции в вашем HTML отмечены комментарии поэтому вы точно можете видеть где разместить кнопки.

<!-- <button (click)="addItem(newItem.value)">Add</button>
 -->
  <!-- Кнопки, которые меняют отображение элементов на все, только активные или только выполненные -->
  <div>
    <button
     
      [class.active]="filter == 'all'"
      (click)="filter = 'all'">
      All
    </button>
    <button
     
      [class.active]="filter == 'active'"
      (click)="filter = 'active'">
      To Do
    </button>
    <button
     
      [class.active]="filter == 'done'"
      (click)="filter = 'done'">
      Done
    </button>
  </div>
  <!-- <h3>{{items.length}} item(s)</h3>
        <ul>... -->

Нажатие на кнопки изменяет значение filter, что определяет отображаемые элементы items, а так же стили, применяемые к активной кнопке.

• Если пользователь нажимает кнопку All, то отображаются все элементы.
• Если пользователь нажимает кнопку To do, только элементы со значением свойства done равным false отображаются.
• Если пользователь нажимает кнопку Done, только элементы со значением свойства done равным true отображаются.

Привязка атрибута class, которая происходит с использованием квадратных скобок [], управляет цветом текста кнопок.
Привязка [class.active], применяет класс active когда значение filter совпадает с выражением.
Например, когда пользователь нажимает кнопку Done, которая устанавливает значение filter в done, выражение привязки класса filter == 'done' возвращает true.
Когда значение filter равно done, Angular применяет класс active к кнопке Done, что делает цвет текста зеленым.
Как только пользователь нажимает одну из других кнопок, значение filter больше не done, поэтому цвет текста больше не зеленый.

Это было быстро! Поскольку у вас уже был частично реализован код фильтрации в app.component.ts, все что вам нужно было сделать — это отредактировать шаблон, чтобы добавить элементы управления для фильтрации. В следующей и последней статье рассматривается, как создать полностью готовое Angular-приложение и предоставляются дополнительные ресурсы для продолжения учебного пути.

• Назад
• Обзор: Client-side JavaScript frameworks
• Далее

• Введение в клиентские фреймворки
• Основные функции фреймворков
• React
  • Начало работы с React
  • Начало создания приложения списка дел с React
  • Компоненты React-приложения
  • Интерактивность React: события и состояние
  • Интерактивность React: редактирование, фильтрация, условная отрисовка
  • Доступность в React
  • Ресурсы по React
• Ember
  • Начало работы с Ember
  • Структура Ember-приложения и компоненты
  • Интерактивность Ember: события, классы и состояние
  • Интерактивность Ember: функциональность подвала, условная отрисовка
  • Маршрутизация в Ember
  • Ресурсы по Ember и устранение неполадок
• Vue
  • Начало работы с Vue
  • Создание вашего первого компонента Vue
  • Отрисовка списка Vue-компонентов
  • Добавление новой формы во Vue: события, методы, и модели
  • Стилизация Vue-компонентов с CSS
  • Использование вычисляемых свойств во Vue
  • Условная отрисовка во Vue: Редактирование существующих дел
  • Управление фокусом во Vue с помощью refs
  • Ресурсы по Vue
• Svelte
  • Начало работы со Svelte
  • Начинаем приложение списка дел c использованием Svelte
  • Динамическое поведение в Svelte: работа с переменными и пропсами
  • Компоненты Svelte-приложения
  • Продвинутый Svelte: реактивность, жизненный цикл, доступность
  • Работа хранилищами в Svelte
  • Поддержка TypeScript в Svelte
  • Развёртывание и следующие шаги
• Angular
  • Начало работы с Angular
  • Начинаем приложение списка дел с использованием Angular
  • Стилизация Angular-приложения
  • Создание компонента элемента (item component)
  • Фильтрация списка дел
  • Сборка Angular-приложений и другие ресурсы

Last modified: 000Z»>7 нояб. 2022 г., by MDN contributors

4 проблемы с JavaScript SEO и как их решить — SEO на vc.ru

Для тех, кто считает, что с их сайтом все в порядке — прямо сейчас вы можете недополучать трафик из-за недоработок с JavaScript SEO.

353
просмотров

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

Но, в зависимости от реализации, JS может нести ряд проблем. Вы можете недополучать трафик с поисковиков из-за того, что скрипт тормозит загрузку страниц → пользователи будут уходить из-за этого → ухудшатся поведенческие факторы. Или страницы не будут индексироваться из-за того, что робот не увидит на них ту самую часть контента, которая должна была отвечать на интент пользователя → сайт будет терять в выдаче.

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

Уязвимые места мы выявляем на аудите или вижене. Для начала мы определяем, к какому из трех типов по объему использования JS относится сайт:

1. Сайты-SPA на основе JS. При всей красоте сайта — это самый проблемный для SEO вариант. Здесь нет перезагрузки страниц, весь контент изменяется за счет JS, а поисковики могут не всегда корректно его индексировать.
2. Сайты, выводящие SEO-значимый контент с помощью JS. Контент, значимый для поисковиков, выводится при участии пользователя (раскрытии списка). Способ требует тщательной проработки JS SEO, чтобы роботы такой контент проиндексировали.
3. Сайты, ограниченно использующие JS (для дизайна, анимации, создания всплывающих окон). Основная часть контента таких сайтов выводится в HTML без участия JS. Проблем с индексацией почти не возникает.

Определив тип сайта и собрав всю информацию, мы создаем техническое задание на доработку JS.

Иногда исправления незначительные, но бывает, что сайту требуется серьезная доработка. Например, если это SPA-сайт (1-ый тип), то, вероятно, будет одно мажорное решение по рендеру страниц и наоборот, если JS используется в меньшем объеме (2-й и 3-й типы), то будет много точечных правок.

А теперь переходим к непосредственно к проблемам и их решениям.

Проблема 1. Поисковики не видят важный контент

Решение: добавьте контент в «сырой» HTML или используйте альтернативный подход к рендерингу.

Часть контента может не индексироваться ПС из-за использования JS, а значит, страница, по факту содержащая ответ на интент пользователя, будет слабо расценена роботом.

Например, вы сделали при помощи JS на сайте блок FAQ, для раскрытия которого требуется действие пользователя. Боты увидят вопросы «Как быстро авторы могут помочь с решением задач?», «Как выбрать автора?» и другие, но не увидят ответы — т.к. только пользователь может раскрыть список нажатием кнопки. Из-за этого часть страницы не попадет в индекс и будет хуже ранжироваться.

Пример выпадающего списка, созданном при помощи JS

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

Добавив ответы на вопросы в «сырой» HTML, мы даем понять боту, что на странице FAQ пользователь сможет увидеть ответы. Так, даже без рендера страницы, поисковая система сможет увидеть содержимое блоков и учитывать его в ранжировании сайта.

Это самый простой вариант, который подходит не во всех случаях. Если ситуация не решится добавлением контент в «сырой» HTML, необходимо выбрать альтернативный способ рендеринга. Мы выделяем три наиболее известных подхода:

При грамотном выборе подхода мы добиваемся того, что страницы сайта появляются в индексе поисковых систем с полным контентом, а не только его частью.

Проблема 2. Поисковики не видят ссылки

Решение: оформляйте ссылки в виде статических элементов HTML, чтобы ПС могли вас обнаружить.

Ссылки, так же как и контент, пользователь и робот ПС воспринимают по-разному. В первом случае ссылка — это то, на что можно кликнуть. Тогда как во втором — это специальный тег <a>, в котором должны содержаться атрибут HREF и информация о ссылке.

Javascript позволяет из любого элемента сделать «псевдоссылки» с использованием тегов <div> и <span>. Выглядят они как ссылки, но таковыми не являются.

Пользователю красиво и удобно, а ПС не может такие ссылки обнаружить, т.к. их нет в «сыром» HTML. Это значит, робот не сможет увидеть новые страницы, оценить ассортимент, проанализировать пользовательские сигналы и расставить приоритеты.

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

Мы рекомендуем использовать ссылки с атрибутом href и атрибутом описания (анкором). Это позволяет организовать перелинковку для страниц, которую увидят не только пользователи, но и поисковые системы. Технически это выглядит так:

На проекте по продвижению интернет-магазина по продаже кофе мы столкнулись с проблемой индексации страниц фильтров, которые потенциально могут собирать среднечастотные и низкочастотные запросы. В ассортименте каталога было представлено множество сортов кофе, которые можно было отфильтровать по типу кофе, силе обжарки и другим свойствам.

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

Сам фильтр работал без сбоев, но из-за того что появление обновленных страниц требовало действий самого пользователя, роботы не могли их просканировать. В итоге отфильтрованных страниц не было в индексе обеих поисковых систем.

То есть, если пользователь вводил наименование категории в поиск — например, «кофе 3 в 1 жокей», он не видел в выдаче страничку с этой категорией.

Поисковая выдача по запросу листинга

Мы порекомендовали на странице каталога в свойство каждого фильтра (Тип кофе, Помол и другие) добавить ссылки на страницы этого фильтра. То есть чтобы в каждом теге фильтра бот увидел ссылку, по которой можно перейти и посмотреть информацию.

После того как разработчики внесли изменения на сайте, роботы поисковых систем могли беспрепятственно сканировать все необходимые страницы фильтров. Сайт получил возможность ранжироваться с листингом в топ-1.

Странички с категориями появились в выдаче ПС. Первая ссылка — это ссылка на URL фильтра

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

Проблема 3. Поисковики не видят важные элементы из-за отложенной загрузки

Решение: не используйте lazy-load для всего значимого контента.

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

Чем это хорошо:

• забота о пользователях с низким лимитом интернет-трафика — он будет расходоваться по мере загрузки картинок. Особенно lazy-load актуален сайтам со стоковыми изображениями;
• ускорение загрузки страниц. Пользователю будет показываться сразу первый экран, вместо рендера всей страницы. А пока он прочтет первый экран, загрузится все остальное.

Googlebot поддерживает способ отложенной загрузки (lazy-load), но, в отличие от пользователя, не «прокручивает» страницы сайта при индексировании. Вместо этого Googlebot просто удлиняет виртуальное окно просмотра (видимую область).

Как пользователи и Googlebot видят контент на десктопе и мобайле

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

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

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

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

Что рекомендуем мы:

• если важны карточки товара, а фотографии к ним вы не хотите продвигать отдельно — карточки загружайте сразу, а фотографии через отложенную загрузку;
• если карточки товара важны, а фотографии к ним вы хотите SEO-оптимизировать — и карточки, и фотографии загружайте сразу без использования отложенной загрузки.

Загрузка важной информации без lazy-load позволит роботу увидеть карточки товаров (название, описание и т.д.), не видя при этом картинки.

Проблема 4. Пользователь долго ждет загрузку страницы и уходит, не дождавшись

Решение: оптимизируйте код JavaScript и CSS для ускорения загрузки страниц.

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

Здесь есть одно «но». Пользователь еще может подождать загрузки страницы (все зависит от его терпения), а у бота время ожидания заложено алгоритмом. Если страница не успела прогрузиться и бот увидел пустой экран, значит, он и не будет подозревать, что на странице должен быть контент.

Если через JS реализована большая часть контента, скрипты JS и CSS могут тормозить работу браузера. Из-за этого пользователь увидит страницу не целиком.

Что рекомендуем мы:

1. Добавьте важный JS-код в HTML. Сюда относится контент первого экрана с информацией, которую пользователь может прочитать без прокрутки экрана вниз.
2. Отложите некритичный JS-код, пока основной контент не будет отрисован ботом. Сюда относится контент футера, который необязательно загружать в самом начале. Важнее дать отрисовать боту контент первого экрана.

А что в итоге

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

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

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

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

jquery — Alpine.

js фильтрует содержимое по тегам

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

То, что я пытаюсь сделать, это просто показать или скрыть содержимое на основе того, какие теги пользователь выбирает для фильтрации. Весь контент предварительно сгенерирован и виден пользователю, и все, что они могут сделать, это только сузить контент с помощью фильтра.

Я новичок в Alpine.js , поэтому я не знаю, можно ли это сделать лучше. Этот код работает, и все, что я делаю, это просто устанавливаю видимость элемента в true, если тег, к которому элемент не принадлежит, не активен. Но это кажется полным накладным расходом (особенно если есть несколько тегов на выбор).

  Tag1 
     Tag2
     Tag3
     Tag4
    
 window="tag1=!tag1" @tag2.window="tag2=!tag2" @tag3. окно="tag3=!tag3" @tag4.window="tag4=!tag4" >
        

            Показать, если tag1 и/или tag2 истинны. Скрыть, если Tag3 и/или Tag4 верны
        
        

            Показать, если tag2 и/или tag4 верны. Скрыть, если Tag1 и/или Tag3 верны
        
    
 

Я использую Laravel в качестве бэкенда (все еще новичок в этом), причина, по которой я пытаюсь фильтровать вещи таким образом, заключается в том, чтобы уменьшить количество запросов к БД и сделать его более плавным, чем обновление страницы каждый раз. .

Я также пытался изучить jQuery , но я смог найти только примеры фильтрации по элементу id или class . Это самое близкое к тому, что мне нужно. Можно ли фильтровать по другому атрибуту, например, x-data , который будет содержать список тегов, которым принадлежит контент?

РЕДАКТИРОВАТЬ:
Основываясь на ответе @Dauros, вот обновленная версия того, как я это сделал в конце, на случай, если кому-то это понадобится. Логика изменена, чтобы всегда отображать содержимое, если не выбран тег, которому не принадлежит содержимое. Функция is_selected обновлена, чтобы принимать список тегов, от которых нужно скрыть содержимое.

  <дел
    х-данные = "{
      теги: [],
      переключить (тег) {
        если (это.теги.включает(тег)) ​​{
          this.tags = this.tags.filter(x => x != тег)
        }
        еще {
          this.tags.push(тег)
        }
        },
        is_selected(тег) {
          вернуть this.tags.some(r=> tag.indexOf(r) >= 0)
        }
     }">
    Тег 1
    Тег 2
    Тег 3
    Тег 4
    

      Показать, если tag1 и/или tag2 истинны.  Скрыть, если Tag3 и/или Tag4 верны
    
    

      Показать, если tag2 и/или tag4 верны. Скрыть, если Tag1 и/или Tag3 верны
    
 

javascript — Как сделать фильтр данных по умолчанию для фильтрации только при загрузке .barcoffeshop не все сообщения

Задавать вопрос

спросил
1 год, 3 месяца назад

Изменено
1 год, 3 месяца назад

Просмотрено
422 раза

По умолчанию печатаются все div, я хочу, чтобы при загрузке печатались только классы barcoffeshop.
Как с помощью js/jquery отображать только barcoffeshop

 
Все
                
Квартира
                
 barcoffeshop">Кофейня-бар
                
Отель
                
Аптека
                
Вила
                
офис
> квартира класса ниже
                <дел
                 
                 
                  с привязкой к данным = ""
                >
                  <рисунок>
                    <изображение
                      src="assets/img/image/apartamente/квартира/СПАЛЬНЯ 1 800X500.jpg"
                      альт = ""
                    />