DE{CODE}: новые функции для Atlas

Обновления безголовых инструментов разработки Atlas от WP Engine помогут вам удовлетворить самые жесткие требования ваших клиентов. Используя бесплатную учетную запись Sandbox, эта демонстрация покажет вам, как добавить эти новые функции на ваш безголовый сайт. Посмотрите видео ниже, чтобы начать создавать свой самый производительный и безопасный веб-сайт!

Слайды сессии

Полный текст стенограммы

КЕЛЛЕН МЕЙС : Привет. Я Келлен из отдела по связям с разработчиками в WP Engine. В этом докладе мы собираемся изучить некоторые новые интересные функции экосистемы Atlas. Мы увидим, как на пользовательском портале WP Engine мы можем создать новое приложение Atlas и выбрать этот проект портфолио. При этом мы можем получить полноценный безголовый сайт WordPress в Интернете за считанные минуты.

Затем мы посмотрим, как мы можем клонировать этот проект на наш локальный компьютер и настроить его для локальной разработки, чтобы мы могли настроить наш новый сайт. Затем мы обратим внимание на Atlas Content Modeler и посмотрим, как мы можем использовать его для создания новой пользовательской модели контента под названием Photos.

И эта модель контента Photos будет иметь несколько собственных настраиваемых полей, в том числе одно повторяющееся поле, которое является новой функцией, недавно появившейся в Atlas Content Modeler. Затем, наконец, мы увидим, как мы можем выполнить некоторую пользовательскую разработку в нашем внешнем приложении JavaScript и запросить эти пользовательские данные фотографий, а затем отобразить их на странице.

После того, как я создал учетную запись WP Engine и вошел на страницу Atlas пользовательского портала, я могу продолжить и нажать кнопку, чтобы создать новое приложение. Отсюда мы можем либо начать с плана, который представляет собой готовый сайт, либо взять его из существующего репозитория. Начнем с чертежа. Теперь мы можем выбрать, какой план мы хотим использовать. Итак, мы выберем план портфолио, а затем нажмем «Продолжить».

Следующим шагом будет подключение этого приложения к GitHub. Поэтому мы нажмем кнопку, чтобы сделать это, а затем войдем в GitHub. И после этого мы увидим этот экран, указывающий, что наше приложение было авторизовано. Итак, далее нам нужно клонировать это репо. Итак, мы нажмем Clone Blueprint, а затем дадим имя нашему новому хранилищу. И нажмите кнопку, чтобы создать новое репо, используя этот шаблон схемы.

Итак, здесь вы можете видеть, что этот новый репозиторий приложений был создан в моей учетной записи GitHub. Теперь нам нужно связать это репо с нашим приложением Atlas. Вернувшись на пользовательский портал, мы прокрутим вниз до раздела «Выбранный репозиторий». Если вы разрешили доступ ко всем своим репозиториям, вы можете увидеть его в списке. Если нет, вы можете нажать «Управление репозиториями».

На этой странице вы сможете выбрать репозитории, к которым Atlas должен иметь доступ. Итак, мы выберем наш репозиторий в списке. Нажмите «Сохранить», и теперь, когда мы вернемся на панель пользователя, мы увидим, что репо, которое мы добавили, всплывает в списке. Так что вперед и выберите это. В качестве региона для нашего приложения мы будем придерживаться Центрального региона США. И, наконец, нажмите кнопку, чтобы создать это приложение Atlas.

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

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

Таким образом, вы можете заметить, что эти переходы страниц очень быстрые. Мы сразу переходим с одной страницы на другую. И это одно из преимуществ безголовой архитектуры WordPress. Далее давайте посмотрим на сайт WordPress, который за кулисами поддерживает этот опыт. Итак, давайте вернемся к пользовательскому порталу WP Engine, и отсюда мы можем щелкнуть эту ссылку, чтобы перейти к связанной среде WordPress.

Здесь мы можем нажать на WP Admin, чтобы быть отправленным администратору WordPress для нашего сайта. Итак, вот наша серверная часть, поддерживающая этот опыт. Давайте перейдем к сообщениям, и здесь мы видим, что оно было предварительно заполнено несколькими фиктивными сообщениями в блоге. Вот откуда берутся все эти данные для нашего нового сайта. Давайте также взглянем на плагины. Здесь вы можете увидеть, что несколько плагинов были установлены и активированы для обеспечения безголовой разработки WordPress.

Особое внимание уделим Atlas Content Modeler. Итак, на боковой панели мы нажимаем Content Modeler. Здесь вы можете видеть, что для нас были созданы две части пользовательского контента: проекты и отзывы. И мы можем видеть их здесь, на боковой панели. Итак, у нас есть проекты, их список, а также отзывы и их список. Вот откуда берутся данные о проектах и ​​отзывах, которые мы видели на сайте переднего плана.

Так что мы добились большого прогресса. Мы видели, как из пользовательского портала мы можем создать новое приложение Atlas. И когда мы это делаем, создается не только внешнее приложение JavaScript для обслуживания страниц вашего сайта, но также создается серверная часть WordPress, которая поддерживает этот опыт и избавляет вас от необходимости связывать их. Он соединяет эти два, так что интерфейсное приложение может получать свои данные из серверной части WordPress.

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

Что, если в этот момент мы захотим внести изменения? Что, если вы создаете настоящий сайт-портфолио и думаете про себя, что это действительно круто. Это отличный старт. Но теперь я хочу внести некоторые изменения. Я хотел бы внести некоторые изменения в код, чтобы, возможно, поменять местами некоторые цвета или добавить дополнительные страницы на свой сайт. Как мне это сделать? Как начать локальное развитие? Давайте узнаем дальше.

Для начала мы скопируем ссылку на наш репозиторий GitHub, а затем запустим git clone в командной строке, чтобы клонировать наш проект. Отсюда мы можем перейти в этот каталог проекта, а затем запустить установку NPM, чтобы установить зависимости нашего проекта. Как только это будет сделано, мы продолжим и откроем проект в редакторе кода.

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

И последний шаг здесь — переименовать этот файл, удалив .sample из его конца, чтобы он вступил в силу. Интерфейсное приложение, с которым мы здесь работаем, построено на основе Faust.js. И Faust, чтобы творить магию извлечения данных, должен иметь возможность запускать так называемый запрос самоанализа GraphQL.

Итак, это, по сути, Фауст, спрашивающий серверную часть WordPress: эй, какие данные у вас есть в схеме GraphQL, чтобы я мог их запросить? Поэтому нам нужно включить самоанализ, чтобы это сработало. Мы вернемся к администратору WordPress и перейдем к GraphQL, а затем к настройкам на боковой панели.

На странице «Настройки» мы прокрутим вниз до того места, где увидим «Включить публичный самоанализ», и продолжим и щелкнем это поле. Пока мы здесь, я рекомендую также включить режим графической отладки. Это даст вам более описательные отладочные сообщения. Как только мы это сделали, мы можем продолжить и нажать кнопку, чтобы сохранить наши изменения. И теперь, наконец, мы можем открыть терминал и запустить NPM run generate. И затем, как только это будет сделано, наконец, NPM запустите dev, чтобы запустить наше приложение локально.

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

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

Итак, я вернусь к админке WordPress, а мы перейдем к Content Modeler. Итак, мы уже были на экране однажды. Мы ознакомились с проектами и отзывами. Мы видим, что это пользовательские модели содержимого, которые были созданы для нас как часть этого плана. И я могу перейти к каждой из них и увидеть, что каждая из этих моделей имеет свой собственный набор отдельных полей.

Таким образом, проекты, например, будут иметь эти отдельные поля. И проекты, и отзывы отражаются здесь, на боковой панели. А затем поля для каждого из них. Если я нажму на проект, а затем на существующий или перейду к «Добавить новый», в любом случае мы увидим все эти поля, отраженные здесь. Таким образом, наши создатели контента увидят все поля, которые им необходимы для ввода этих данных. Все в порядке.

Однако для нашего пользовательского фрагмента контента нам нужна новая модель. Итак, я продолжу и создам новую модель, нажав эту кнопку здесь. Так я назову это фото. А для имени во множественном числе мы просто поставим S в конце и назовем его фотографиями. Этот автоматически сгенерированный идентификатор API — вот, этот идентификатор — меня устраивает. Фото мне кажется хорошим. Для видимости API мы хотим, чтобы это было общедоступным, поскольку мы хотим иметь возможность запрашивать эти данные через GraphQL. Для значка нашей модели, возможно, подойдет что-то вроде фотоаппарата для фотографий. А теперь я нажму Создать.

Таким образом, наша модель контента фотографий была создана. Итак, на данный момент он говорит, что выберите свое первое поле для модели контента. И на момент этой записи это типы полей, поддерживаемые Atlas Content Modeler. Для фотографий, которые мы хотим разместить на этом сайте, давайте использовать пару из них.

Допустим, мы собираемся дать название каждой из наших фотографий. Итак, я скажу «Заголовок», а затем назову его «Заголовок фотографии» в качестве идентификатора API. Именно так он будет доступен в схеме GraphQL. Вот для чего это. И мы скажем, что хотим использовать это как заголовок записи. И однострочный текст в порядке. Итак, вперед, нажмите «Создать».

Допустим, для нашего следующего поля мы хотим захватить само изображение для фотографии. Так что поставлю плюс. И здесь мы создадим новое поле. Мы назовем это одним изображением. А для типа, собственно, нам нужно выбрать Медиа, так как это будет фото. Так что я назову его образ. А затем здесь я продолжу и установлю это изображение в качестве избранного для каждого поста. Так что я нажму на это, и мы также сделаем это обязательным. Поэтому мы всегда знаем, что это будет там. Затем нажмите Создать.

Ну вот. Вот наше второе поле. Для третьего давайте сделаем описание. Так что поставлю плюс. И для этого это будет форматированное текстовое поле. Итак, мы скажем описание, и это подойдет для этого поля. И тогда наш последний, который мы хотим, для предметов. Итак, мы будем использовать это поле, чтобы запечатлеть то, что показано на фотографии. Так что, если это фотография горного хребта на закате, как, например, одна из наших фотографий, некоторые объекты на фотографии могут быть горами, звездами, небом и тому подобными вещами. Просто список вещей, которые присутствуют на фото.

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

Вместо этого этот список предназначен только для отображения на сайте. Проблема в том, что если мы нажмем здесь плюс, сделаем это текстовым полем, ну, тогда мы получим только одно из них, верно? А если их больше? Мы не знаем заранее, сколько таких предметов может быть на данной фотографии, верно? И именно здесь функция повторяющихся полей ACM оказывается действительно удобной. Итак, давайте посмотрим, как это выглядит.

Я сделаю здесь текстовое поле, и мы назовем его темами. А затем сделать это поле повторяемым. Так что это ключ. Мы продолжим и нажмем на это. И мы сохраним его как однострочное текстовое поле и нажмем «Создать». Таким образом, наша модель фотоконтента была создана. И мы можем видеть это на боковой панели.

Итак, если я нажму здесь на фотографии, мы увидим, что у меня есть один фиктивный, который я создал заранее здесь. Но если мы создадим Add New, вы увидите, что это отражает — поля здесь отражают то, что мы добавили в модель содержимого. Так мы получаем титул. Получаем возможность прикрепить изображение. У нас есть расширенное текстовое поле для описания фотографии и повторяющееся поле для добавления одной или нескольких тем.

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

А теперь, что касается наших объектов, мы можем спросить себя, что здесь присутствует на фотографии? И, может быть, мы можем — цветок может быть одним из них. Щелкните Добавить элемент. И этот эффект боке с размытым фоном тоже присутствует. И ствол или ветка дерева, я думаю, были бы в кадре, например. Поэтому мы добавим несколько из них здесь. И если мы думаем, что записали все, вы можете нажать «Опубликовать». Итак, поехали.

А затем вернемся к фотографиям, которые я создал ранее. Горы классные. Это должно быть установлено так. Так вы получите фото горного хребта. А вот отличный снимок горного хребта с горами, звездами, тенями. Несколько предметов, которые у него есть. Так что это дало бы нам по крайней мере несколько постов для работы в нашем интерфейсном приложении.

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

У Atlas Content Modeler есть очень интересная функция, позволяющая упростить эту задачу. Итак, я вернусь в Content Modeler здесь, найду нашу модель фотографий и щелкну здесь значок с маленькой точкой с многоточием. И я пойду в Open in Graphical. Поэтому, как только я нажму на это, он создаст для меня запрос, который включает эту модель контента, которую мы создали, фотографии.

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

И вы можете увидеть, что вернуло бы наше внешнее JavaScript-приложение, если бы оно выполнило точно такой же запрос GraphQL. Это вернет фотографии. И тогда внутри этого будет объект, называемый массивом, называемый узлами. И внутри этого массива будут объекты, которые выглядят так. Каждая из этих фотографий будет иметь заголовок, изображение, а затем описание и темы.

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

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

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

Итак, внутри Source я перехожу к Pages. И тогда я найду Проект. Вот оно. И откройте внутри него файл index.js. Итак, прокрутите немного вниз, и мы увидим, что этот хук разбиения на страницы узла используется. И это хук React, который находится здесь, внутри папки Hooks. И внутри этого мы вызываем query.projects.

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

И затем, как только мы действительно готовы отобразить содержимое этой страницы, мы делаем это. У нас есть компонент SEO, заголовок и нижний колонтитул внизу. И затем основной раздел страницы здесь находится внутри этого основного тега, где у нас есть заголовок, который представляет собой втягиваемый синий раздел. А затем div-оболочка со списком наших проектов внутри него. А также этот компонент «Загрузить еще», в результате чего внизу появляется кнопка «Загрузить еще», которую я могу нажать. А затем это извлекает больше проектов и помещает их в пользовательский интерфейс.

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

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

Дальше вниз, посмотрим. Фото перед прохождением. О, имя перепуталось. Ну вот. Так что теперь они снова совпадают. Все в порядке. Помните, вместо query.projects нам нужен query.photos для нашего пользовательского типа контента. Так что продолжайте и обновите это, чтобы быть фотографиями, прямо здесь. Прокрутите немного вниз.

Итак, этот компонент проектов больше не будет применяться, поскольку мы его не используем. Итак, я удалю это на данный момент, и как насчет этого? У нас будет просто… у нас будет просто H1. Он говорит «Привет», просто чтобы что-то отображалось на странице здесь. И, возможно, мы закомментируем еще больше.

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

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

Я заметил, что там по-прежнему написано портфолио, и мы, вероятно, хотим поменять его местами. Итак, мы можем сделать это очень кратко. Итак, вот портфолио. Мы скажем фотографии. А затем также в этом месте мы изменим это на фотографии. Сохрани это. Ну вот. Так что обновил шапку.

Теперь давайте углубимся в то, как мы можем на самом деле использовать эти данные, получить данные наших фотографий и отобразить здесь список. Так с чего же нам начать? Как мы видели в GraphQL или в админке WordPress, примерно так будет выглядеть наш запрос. У него будут эти поля. Итак, давайте сделаем это. Таким образом, название фотографии является настраиваемым полем. Но на самом деле, поскольку мы установили это поле как заголовок сообщения, мы могли бы просто использовать заголовок, так как это будет… заголовок сообщения будет таким же, как и пользовательское поле с этим именем. Так что мы могли бы просто использовать это.

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

И давайте проверим, можем ли мы на самом деле получить здесь рендеринг данных. Итак, под нашим Hello H1, который у нас есть, давайте сделаем это. Мы сделаем JSON.stringify, а затем перейдем к этому чему-то. Итак, мы сделаем данные здесь и посмотрим, сможем ли мы отобразить данные на нашей странице.

Так что я сохраню это, и мы вернемся к нашему интерфейсу. И вот оно, точно. Так вот как выглядят данные. Вы можете видеть, что мы успешно извлекаем его из нашей серверной части WordPress. У нас есть этот массив узлов, а затем внутри этих объектов, представляющих каждую из наших отдельных фотографий и именно те данные, которые мы запросили, включая каждое из отдельных значений для нашего повторяющегося поля субъектов здесь.

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

Итак, одна вещь, которую я хотел бы сделать, это прежде чем мы предположим, что у нас есть посты для рендеринга, мы должны учесть тот случай, когда, возможно, их нет, верно? Так что одна вещь, которую я люблю делать, это вверху моих компонентов, у меня постоянно есть фотографии, что-то в этом роде. И затем я делаю data.nodes.length вот так. И мы поставим вопросительный знак для необязательной цепочки, потому что мы не знаем, будут ли данные еще существовать.

А затем мы приведем это к такому логическому значению. Это означает, что если мы потерпим неудачу на этом этапе и данные не будут определены, это будет приведено к false. Скажем, у нас нет фотографий для рендеринга. В противном случае, если мы сможем перейти к длине этого массива, он будет либо равен нулю, если постов нет, либо одному или нескольким. Итак, если мы приведем это целое к логическому значению, оно скажет нам, есть ли у нас фотографии. Так что если это ноль, это будет ложью. Если это один или несколько, то havePhotos будет верным.

Итак, с этими знаниями мы можем принять некоторые решения внутри нашего компонента здесь. Итак, давайте выясним, как мы можем это сделать. Итак, я скажу, если у нас есть фотографии, то мы хотим отрендерить одну вещь. Мы скажем – посмотрим. Мы хотим сделать data.photos, а затем нанесем на них карту. Итак, для каждой фотографии мы будем что-то визуализировать.

Итак, давайте сначала вернемся к чему-нибудь легкому. Вернем – посмотрим. Мы сделаем H2, как насчет того, что это будет похоже на одну из наших карт. И тогда мы скажем photo.title вот так. Все в порядке. Итак, мы будем отображать каждую из наших фотографий. И для каждого из них мы вернем H2 с названием этой фотографии. Все в порядке.

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

Итак, давайте сделаем это немного более полным здесь. Мы скажем, что хотим вернуть что-то еще. Все в порядке. И для каждого из них я скопирую только некоторые стили, некоторые встроенные стили, которые я написал здесь заранее, просто чтобы сэкономить нам время на их ввод. Итак, у меня будет этот div-оболочка. И затем внутри этого мы можем восстановить наш H2, который у нас был. Поэтому я вставлю H2 с заголовком.

После заголовка, как насчет давайте покажем описание. Мы можем сделать это следующим. Вот так будет фото.описание. Но мы не можем просто визуализировать его отдельно, например, внутри контейнера, вот так. Если мы попытаемся сделать это, это не совсем сработает для нас, потому что HTML не будет экранирован. Итак, если я сохраню это, вы увидите, что теперь на странице отображается экранированный HTML, а это не то, что нам нужно.

Таким образом, в React есть безопасная утилита для работы с HTML, и ее не нужно экранировать таким образом. И это использовать div, а затем опасно SetInnerHTML вот так. И вы можете передать ему объект, где одним свойством является двойное подчеркивание HTML.

И затем значение, которое вы передаете этому, — это то, что вы хотите отобразить без экранирования. Так что для нас это будет photo.description, просто так. И тогда этот див может быть самостоятельной одеждой. Все в порядке. Так что теперь я дам этому сохранению. Посмотрим, что получится. Прохладный. Так что теперь наш HTML больше не экранируется. Так что это выглядит хорошо для меня.

Так что это здорово. Как насчет этого избранного изображения? Что мы могли бы сделать, так это написать это с нуля. Мы могли бы получить URL-адрес избранного изображения, получить тег изображения и передать его в качестве URL-адреса. И тогда браузер будет отображать изображение и указывать его на этот источник.

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

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

Так что это круто. Мы делаем большие успехи. Последнее, что нужно было сделать, это позаботиться о нашем повторяемом поле для объектов, присутствующих на фотографии. Итак, что я сделаю, так это создам здесь абзац и закрою его. А затем внутри этого тега абзаца мы можем открыть несколько завитков и сделать те же самые фото. Но теперь мы прикрепим конец соединения. И мы скажем [НЕРАЗБОРЧИВО], что хотим присоединиться к этому через запятую, пробел, вот так. И я дам этому спасению.

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

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

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

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

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

ВЕДУЩИЙ: И это подведение итогов DE{CODE} 2022. Надеюсь, вы нашли его вдохновляющим и уезжаете с большим опытом работы с WordPress и новыми связями в сообществе. Ищите записанный контент на сайте с пятницы, чтобы наверстать упущенное или посмотреть видео еще раз.

Я хочу поблагодарить наших партнеров-спонсоров: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios и 10Up. Большое спасибо за пожертвование на наш сбор средств DE{CODE}. Мы очень ценим вашу щедрость.

Теперь для всех, кто взаимодействовал с нами в нашем центре посетителей и на наших сессиях, мы выберем трех лучших победителей и сообщим вам, как вы можете получить свой приз в конце DE{CODE}. Будем рады видеть вас снова на наших будущих мероприятиях лично или виртуально. Мы не можем дождаться, чтобы рассказать вам о последних тенденциях разработки WordPress и о том, как вы можете реализовать их для ускорения создания сайтов WordPress.

Это все от меня. Большое спасибо, что присоединились к нам, и берегите себя.