Во второй части этой серии мы создали 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: если вам интересны определенные аспекты веб-сайта или у вас есть какие-либо вопросы, не стесняйтесь комментировать или обращаться ко мне.