Ошибка обновления RSS-файла, используемого для создания турбо-страниц
Обновлено: 21.11.2024
Turbolinks больше не разрабатывается. Его заменил Turbo, который является частью Hotwire. В этой статье Хулио Сампайо показывает нам, как перенести наши существующие приложения Turbolinks в Turbo.
Turbolinks, отличный инструмент для ускорения навигации по веб-приложению, больше не находится в активной разработке. На смену ему пришла новая платформа под названием Turbo, которая является частью зонтика Hotwire.
Команда, стоящая за этим, понимала, что другие вещи могут использовать аналогичные концепции, извлеченные из Turbolinks, чтобы соответствовать более быстрому Интернету, например фреймы, отправка форм и собственные приложения.
Эта статья призвана предоставить руководство по платформе Turbo, новой замене Turbolinks, включая практическое руководство по миграции, в котором объясняется, как использовать наиболее важные и часто используемые части Turbolinks в Turbo.
Чтобы лучше понять, о чем мы будем говорить, важно иметь некоторое представление о Turbolinks. Подробнее об этом можно прочитать здесь и здесь.
Представляем Турбо
Турбо – это набор нескольких методов создания современных и быстрых веб-приложений с меньшим количеством JavaScript. Он делает это, позволяя серверу обрабатывать всю логику, которая будет доставлена в виде HTML непосредственно в браузер. В свою очередь, единственной обязанностью браузера является обработка простого HTML.
Для этого Turbo делится на четыре основные части:
- Turbo Drive, сердце Turbo, позволяет избежать полной перезагрузки страницы за счет автоматического перехвата всех кликов по вашим ссылкам и формам, предотвращает вызов браузера, изменяет URL-адрес с помощью History API, запрашивает страницу за кулисами с помощью Ajax. и правильно отображает ответ.
- Turbo Frames работает с подмножествами/фреймами страниц, заново изобретая способ, которым разработчики внешнего интерфейса обрабатывают фреймы для независимой обработки подмножеств страницы. Он разбивает страницы на независимые наборы контекста с отдельными областями действия и возможностями отложенной загрузки.
- Turbo Streams помогает заменить распространенные частичные обновления страниц посредством асинхронной доставки через веб-сокеты простым набором тегов контейнера CRUD. С их помощью вы можете отправлять фрагменты HTML через те же веб-сокеты, чтобы страница понимала и повторно обрабатывала пользовательский интерфейс.
- Turbo Native предоставляет все необходимые инструменты для работы с Turbo во встроенных веб-приложениях для нативных оболочек, если вы переходите на нативные платформы iOS/Android.
Настройка проекта
Чтобы ускорить процесс, я решил предоставить вам готовый к использованию проект приложения Rails со встроенным в него потоком формирования сообщений, а также Bootstrap для стилизации.
Это позволит вам не тратить время на настройку, а также даст вам работающий проект с автоматически добавленными турбоссылками. Если у вас уже есть собственный проект, это тоже нормально; вы по-прежнему сможете следить за статьей.
Вы также можете сгенерировать новое приложение Rails с помощью команды rails.
Вы можете найти ссылку GitHub на репозиторий здесь. Обязательно клонируйте его локально и запустите установку пакета команд, чтобы установить все зависимости Rails.
После того, как все настроено, запустите сервер Rails с помощью команды rails s и проверьте URI /posts, как показано ниже:
Отправляет CRUD в Rails
Чтобы проверить функции Turbolinks в действии, просто перейдите по ссылкам, чтобы создать новые сообщения или отобразить элемент. Вы увидите, что URL меняется без перезагрузки страницы.
Этапы миграции
Начнем с правильной установки пакета Node. Поскольку вам больше не нужны turbolinks , мы можем просто удалить его из нашего списка узлов и добавить зависимость от turbo-rails, как показано в двух командах ниже:
Еще один отличный способ убедиться, что все установлено правильно, если вы работаете с Rails, — запустить следующую команду:
Это установит Turbo через npm, если Webpacker установлен в приложении, а это так и есть. Эта команда также пытается удалить все старые зависимости Turbolinks из вашего проекта на случай, если вы что-то пропустили.
Затем откройте файл app/javascript/packs/application.js и найдите следующие строки кода:
Обратите внимание, что импорт может немного отличаться в зависимости от версии вашего приложения Rails (в более старых версиях вместо import используется require ). Тем не менее, процесс одинаков для обоих.
Затем замените их следующими соответствующими:
Да, только один импорт; нет необходимости запускать что-либо вручную. Экземпляр Turbo автоматически назначается объекту window.Turbo при импорте, что упрощает управление.
Чтобы проверить это и убедиться, что мы ищем только Turbo, а не Turbolinks, добавим следующий фрагмент кода в конец файла:
После перезагрузки страницы в браузере проверьте журналы консоли, чтобы увидеть, что напечатано:
Просмотр журнала событий турбонагрузки
Есть еще одно изменение, которое нам нужно внести в файл app/views/layouts/application.html.erb, которое в основном состоит в том, чтобы заменить старые атрибуты данных Turbolinks на эквивалентные Turbo. Найдите два тега с помощью атрибутов data-turbolinks-* и замените их следующими:
Это будет важно, чтобы Turbo автоматически отслеживал все импортированные активы в теге head и обязательно перезагружал их в случае их изменения. Это относится ко всем файлам, включая все скрипты и стили, которые вы туда добавили.
Изучение функций Turbo
Поскольку Turbo автоматически перехватывает все ссылки в вашем приложении, чтобы вызывать их без перезагрузки, если вам нужно отключить эту функцию, например, для определенной ссылки, вам придется явно указать это в коде.
Давайте проверим это, изменив кнопку "Новая запись" в файле app/views/posts/index.html.erb следующим образом:
Обратите внимание, что мы явно добавляем новый атрибут данных data-turbo , чтобы Turbo не искал эту конкретную ссылку при нажатии на нее.
Если вы перезагрузите приложение и нажмете кнопку "Новая публикация", вы увидите, что страница теперь полностью перезагружается, как это обычно происходит в обычных приложениях.
Это также отличный способ проверить, включен ли режим Turbo в вашем приложении и работает ли он.
То же самое касается ваших форм. Turbo автоматически позаботится обо всех отправках форм, поэтому они происходят асинхронно. Если вы хотите отключить его для формы в файле app/views/posts/_form.html.erb, измените кнопку отправки на следующее:
Перезагрузите приложение и протестируйте его! Вы увидите такое же поведение при создании нового сообщения.
Отправка формы
Говоря о формах, Turbo работает с ними так же, как и со ссылками. Однако запросы форм не всегда завершаются успешно.
Давайте посмотрим на практике! Во-первых, добавьте пару проверок, чтобы сделать свойства имени и заголовка записи обязательными. Для этого откройте файл app/models/post.rb и измените его на следующее:
Перезагрузите приложение и попробуйте сейчас добавить новую публикацию, оставив все поля пустыми. Вы заметите, что ничего не происходит. Если вы проверите консоль браузера, вы увидите что-то вроде следующего:
Ответы формы должны перенаправлять в другое место
Чтобы исправить это, у нас есть два возможных подхода. Первый заключается в добавлении статуса к каждому из обновляемых действий пост-контроллера (POST, PUT и т. д.) и получении необрабатываемого объекта сущности в качестве значения.
Ниже вы можете найти изменения кода для методов create и update (post_controller.rb):
Сохраните изменения и снова протестируйте форму. Вы увидите, что на этот раз ошибки отображаются правильно:
Отображение ошибок проверки в пользовательском интерфейсе
Второй способ сделать это — использовать turbo_frame_tag . В приложении Rails, использующем Turbo, кадры Turbo, о которых мы говорили, отображаются с помощью этого тега.
Это отличный ресурс, если вы хотите изолировать часть своей страницы и открыть прямой туннель с серверным приложением, чтобы Turbo мог прикреплять запросы и ответы к этому конкретному кадру.
Чтобы проверить это, сначала нужно поместить все содержимое файла _form.html.erb в этот тег:
Пост там по понятным причинам в случае с формами. Когда вы вернетесь в свой браузер и протестируете его снова, те же ошибки проверки появятся, как и ожидалось.
Еще одна интересная вещь, на которую стоит обратить внимание, это сгенерированный HTML для этой формы. Взгляните:
Этот настраиваемый HTML-элемент позволяет Turbo отличать фреймы от действий на всей странице.
Индикатор выполнения
По здравому смыслу, когда вы удаляете механизм загрузки браузера по умолчанию, вы предоставляете другой механизм для случаев, когда страница загружается медленно.
Turbo уже предоставляет встроенный индикатор выполнения на основе CSS в верхней части страницы, очень похожий на те, которые предоставляются основными библиотеками, такими как Bootstrap и Material Design.
Он отображается только тогда, когда обработка запросов занимает более 500 мс, что недостаточно для нашего тестового проекта.
Если вы хотите изменить его стиль или даже полностью удалить его, вы можете поиграть с классом CSS .turbo-progress-bar, как показано ниже:
Чтобы проверить это, вам нужно уменьшить задержку индикатора выполнения в файле application.js с помощью следующего кода:
Указанное время указано в миллисекундах. Ниже вы можете найти обновленное представление стиля для индикатора выполнения.
Отображение обновленного индикатора выполнения
Подведение итогов
Можно еще многое обсудить в режиме Turbo и его замечательных функциях, таких как модули Streams и Native. Тем не менее, чтобы статья оставалась целенаправленной, мы остановимся на этих начальных шагах.
Как всегда, я не мог не порекомендовать официальный справочник Turbo, так как он был очень полезен, когда я только начинал весь этот процесс миграции. Там вы найдете все материалы, необходимые для работы в особых условиях, требуемых вашим проектом.
Например, если ваше приложение использует Devise, скорее всего, вам потребуются некоторые изменения. К счастью, команда Turbo предоставила отличное руководство по этой теме, чтобы помочь разобраться в деталях Devise с Turbo.
Honeybadger поддержит вас, когда это необходимо.
Мы являемся единственным средством отслеживания ошибок, объединяющим мониторинг исключений, мониторинг времени безотказной работы и мониторинг cron в единую простую в использовании платформу. Наша миссия: укротить производство и сделать вас лучшим и продуктивным разработчиком.
Хулио Сампайо
Хулио отвечает за все аспекты разработки программного обеспечения, такие как серверная часть, внешний интерфейс и взаимодействие с пользователями в своей нынешней компании. Он окончил факультет анализа и разработки систем и в настоящее время учится на курсах по разработке программного обеспечения для аспирантов.
"Мы изучили множество систем управления ошибками. Honeybadger на голову выше остальных и каким-то образом становится лучше с каждым новым выпуском».
Майкл Смит
Используете ли вы для мониторинга Bugsnag, Rollbar или Airbrake? Honeybadger включает в себя исключения, время безотказной работы и мониторинг регистрации — и все это, вероятно, дешевле, чем вы платите сейчас. Узнайте, почему так много компаний переходят на Honeybadger, здесь.
Хватит копаться в журналах чата в поисках исправления ошибки, о котором кто-то упоминал в прошлом месяце. Встроенная система отслеживания ошибок Honeybadger делает обсуждение каждой ошибки центральным элементом, поэтому, если она появится снова, вы сможете продолжить с того места, на котором остановились.
Крис Паттон
Пошаговая инструкция, как подключить Турбо-страницы Яндекса к вашему блогу Ghost.
Алексей Карташев
Отец троих детей. Бывший разработчик, бывший маркетолог, бывший аналитик, бывший хакер и бывший менеджер по продукту.
Еще записи Алексея Карташева.
Алексей Карташев
Пошаговая инструкция, как подключить Турбо-страницы Яндекса к вашему блогу Ghost.
Создать файл шаблона
Создайте копию файла turbo-pages.hbs и поместите его в папку вашей темы.
Обновление правил маршрутов
Откройте настройки своего блога-призрака Лаборатории → Маршруты и добавьте следующий код для раздела маршруты:
Почти готово.
Подписаться на kartashev.me
Получайте последние сообщения прямо в папку "Входящие"
Подробнее об автоматизации
Как подключить турбо-страницы Яндекс для платформы блогов Ghost
18 июля 2019 г. — 1 минута чтения
Автоматическая публикация оригинальных текстов из Ghost/WordPress в Яндексе с помощью Zapier
20 апреля 2018 – 4 минуты чтения
Список плагинов для платформы Ghost Blog
Несмотря на то, что платформа Ghost сама по себе содержит большинство необходимых функций, существуют плагины, которые вы можете подключить к Ghost, чтобы расширить функциональность этой замечательной платформы. КомментарииПримечание.
Как подключить турбо-страницы Яндекс для платформы блогов Ghost
Пошаговая инструкция подключения турбо-страницы Яндекса к платформе блогов Ghost
Сталкиваетесь ли вы с ошибками RSS-канала на своем сайте WordPress?RSS-каналы помогают пользователям подписываться на ваш блог с помощью таких приложений для чтения новостей, как Feedly.
Поскольку RSS-каналы публикуются на языке разметки XML, небольшая ошибка в ленте может сделать ее нечитаемой, и пользователи не смогут увидеть новый контент в своих новостных лентах.
Другие приложения также полагаются на получение обновлений контента из RSS-канала WordPress. Например, если вы используете IFTTT для автоматического обмена вашими новыми сообщениями в социальных сетях, это также перестанет работать.
В этой статье мы покажем вам, как легко исправить ошибки RSS-канала в WordPress. Мы также поговорим о причинах этих ошибок и о том, как их избежать в будущем.
Наиболее распространенные ошибки RSS-канала WordPress
Большинство распространенных ошибок RSS-канала WordPress вызваны неправильным форматированием.
WordPress выводит RSS-каналы в формате XML, который является языком строгой разметки. Отсутствующий разрыв строки или лишняя вкладка могут нарушить работу RSS-канала.
Сообщение об ошибке RSS будет выглядеть примерно так:
В зависимости от того, какой браузер вы используете, сообщение об ошибке вашего RSS-канала может отличаться.
Вы также можете увидеть это сообщение об ошибке при посещении фида в браузере.
Если вы используете FeedBurner, ваши ошибки могут выглядеть иначе.
Сказав это, давайте посмотрим, что вызывает эти ошибки RSS-канала и как их исправить.
Ручное исправление ошибок RSS-канала в WordPress
Наиболее вероятной причиной появления ошибок в RSS-каналах является неправильное форматирование. Это плохое форматирование может быть вызвано пустым пространством после закрытия тега PHP в плагине или в файле functions.php вашей темы.
Если вы недавно добавили фрагмент кода в файл functions.php вашей темы или дочерней темы. Затем вам нужно отредактировать файл функций.
Если в конце вашего файла функций есть закрывающий тег PHP, вам нужно убедиться, что после него нет лишнего пробела или разрыва строки.
В идеале закрывающий тег PHP не требуется в конце файла. Вот почему было бы лучше, если бы вы вообще удалили закрывающий тег php.
В большинстве случаев это должно решить проблему. Однако, если это не исправит вашу ошибку RSS-канала, продолжайте читать.
Отключить подключаемые модули, связанные с RSS-каналами
Если вы используете подключаемый модуль WordPress, который изменяет RSS-канал вашего веб-сайта или создает новый, вам необходимо отключить этот подключаемый модуль.
Если вы не уверены, вы можете временно отключить все плагины WordPress.
Затем проверьте свой RSS-канал на наличие ошибки. Если ошибка исчезнет, значит, виноват один из плагинов, установленных на вашем сайте.
Теперь вы можете повторно активировать установленные плагины один за другим и проверять свой RSS-канал после активации каждого плагина. Таким образом вы сможете точно определить, какой плагин вызывает проблему.
После того, как вы нашли подключаемый модуль, вы можете обратиться в службу поддержки этого подключаемого модуля за обновлением или найти альтернативный подключаемый модуль, который делает то же самое.
Временно переключиться на тему по умолчанию
Иногда плохо написанная функция темы WordPress также может повлиять на ваш RSS-канал WordPress. Чтобы убедиться, что проблема вызвана вашей темой WordPress, вам нужно временно переключиться на тему WordPress по умолчанию.
Темы по умолчанию включают Twenty Nineteen, Twenty Seventeen, Twenty Sixteen и т. д. Если он не установлен на вашем веб-сайте, вы можете нажать кнопку «Добавить новый», чтобы установить и активировать его. Пошаговые инструкции см. в нашем руководстве по установке темы WordPress.
После переключения на тему по умолчанию проверьте фид WordPress на наличие ошибок. Вы можете открыть свой фид в окне браузера или проверить его с помощью инструмента проверки фида.
Если ошибка исчезнет, это означает, что проблема была вызвана вашей темой WordPress. Вы можете обратиться к автору темы за поддержкой или найти подходящую новую тему для вашего сайта.
Мы надеемся, что эта статья помогла вам исправить ошибки RSS-канала WordPress на вашем сайте. Вы также можете ознакомиться с нашим руководством о том, как увеличить посещаемость вашего веб-сайта и почему вам нужно сразу же создать список адресов электронной почты.
Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоруководств по WordPress. Вы также можете найти нас в Twitter и Facebook.
Читайте также: