Во второй части этой серии мы создали UI сайта.

Наполним его содержанием!

Gatsby использует front-matter и markdown-it для отображения файлов Markdown на вашей странице.

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

Markdown-загрузчик

Я заметил, что передняя часть не преобразовывала \n в ‹br /›, поэтому мне пришлось внести некоторые изменения в загрузчик уценки (/loaders/markdown-loader/ index.js).

Одной из самых крутых особенностей веб-сайта является чрезвычайно точная прокрутка, связанная с состоянием нажатия.

Чтобы достичь этого эффекта (который также использует Google в своей документации по API), нам нужно создать настраиваемую систему навигации и использовать якоря/идентификаторы.

Я также добавил отредактированную версию плагина для уценки — он генерирует идентификатор для каждого заголовка в файлах уценки. Я расскажу об этом позже.

Сначала у меня был соблазн использовать react-router, но в конце концов я выбрал собственный скрипт, потому что у нас будет только одна страница.

Плавная навигация

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

Изменение переменной pattern изменит поведение прокрутки. В настоящее время я выбрал плавный ввод с разной скоростью.

Как вы можете заметить, когда прошедшее время равно длительности, я перемещаю прокрутку в endLocation и вызываю обратный вызов, поэтому даже если есть проблема с анимацией, мы можем быть уверены, что через ~0,5 с пользователь будет в разделе мы хотим, чтобы он был.

Навигатор

Navigator — это статический класс, который загружает карту сайта (см. часть 1) и обрабатывает pushState и хэши каждого раздела.

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

Метод componentWillUpdate в Section.jsx проверяет положение самого элемента и, если поле элемента уже находится над областью просмотра, просит навигатор указать URL-адрес в адресной строке.

Обратите внимание на адресную строку…

Использование pushState — очень приятный штрих, но мы также должны сделать его функциональным… например, если пользователь хочет показать другу раздел веб-сайта (надеюсь, он это сделает!), пользователь будет ожидать, что копирование текущего местоположения заставит своего друга перейти прямо в этот раздел.

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

Средний раздел

Когда я создавал сайт, я решил встроить в него несколько статей из своего блога.

К сожалению, Medium не разрешает эту функцию открыто, даже если она уже частично поддерживается.

API Medium не позволяет клиентским технологиям получать доступ к своим сообщениям, блокируя браузер с помощью метода Access-Control-Allow-Origin.

Итак, я создал небольшой и неоптимизированный скрипт, который анализирует API Medium (вероятно, нарушает 200 условий обслуживания, извините Medium ❤) и извлекает сообщения, фильтрует комментарии и тому подобное.

Как только я это сделал, реализовать раздел не составило большого труда, а воссоздать их дизайн было интересно и весело.

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

Ps: если вам интересны определенные аспекты веб-сайта или у вас есть какие-либо вопросы, не стесняйтесь комментировать или обращаться ко мне.