Использование CMS для портфолио - это данность (или должна быть). На сегодняшний день существует множество вариантов CMS. Некоторые из них хорошо известны, например WordPress, в то время как другие адаптировали новый язык запросов GraphQL, поставляются с готовыми функциями или используют систему плагинов. Я выбрал CMS с великолепными готовыми функциями, созданными с помощью GraphQL и REST API, под названием Cosmic JS. В этой статье я объясню, почему я выбрал его, и шаг за шагом, как я построил свое портфолио, используя их платформу.

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

Очевидно, что разработчику, особенно тому, кто ориентирован на интерфейс, вам нужно будет создать сайт, который слишком настроен для бесплатных конструкторов веб-сайтов. Кроме того, я могу сказать без тени сомнения, что вы в конечном итоге возненавидите WordPress и аналогичные бесплатные стандартные системы CMS. С ними приходится иметь дело с большим количеством дерьма - вы действительно хотите поддерживать плагины в актуальном состоянии? Да, вам понадобятся плагины (см. Количество необходимых обновлений для стандартного сайта ниже).

Это слишком много мыслей. Даже для того, кто занимается программированием веб-приложений, это уже слишком… чушь. Если вы являетесь менеджером по контенту, вы увидите, насколько меньше накладных расходов и насколько легко использовать Cosmic JS, когда я расскажу, как я создавал и добавляю контент в свое портфолио.

Cosmic JS действительно имеет некоторые расширения для редактирования контента, но готовый интерфейс был достаточно элегантным, чтобы в этом примере они не понадобились. Кроме того, они предоставляют API, упакованный через NPM, чтобы упростить получение данных.

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

Построй

Если вы хотите tl; dr, посмотрите мое портфолио здесь и загрузите код здесь.

Предварительные требования:

Если хотите, то я построил свой проект на React. Я не чувствовал, что мне очень нужно управление состоянием, так что это без Redux или Mobx, но добавить его нетрудно. Если вы не знакомы со сборкой для современного веб-интерфейса, вам необходимо приобрести Узел и NPM. У меня есть некоторые зависимости в моем проекте, такие как Chart.js, Semantic UI и API от Cosmic JS, так что вам также нужно будет добавить их.

Прежде всего

После того, как вы закончите, вы захотите настроить свой Cosmic JS:

1. На панели управления нажмите кнопку «Добавить новый сегмент».

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

Вот и все. Корзина теперь доступна на вашей панели управления. Вы управляете несколькими сегментами оттуда (например, вам, вероятно, следует иметь qa, staging и prod, если это больше, чем личный проект, просто говоря…), и это намного проще, чем WP.

В моем портфолио я хотел иметь возможность «помечать» вещи. Я имею в виду, что я хотел иметь возможность связывать 1: 1 и 1: множество объектов, таких как навыки, языки и технологии для диаграмм, а также для проектов. Как правило, по моему опыту работы с другими CMS, мне приходилось либо устанавливать плагины, либо что-то собирать вместе. Cosmic JS упрощает эту задачу, так что давайте сделаем это:

1- Нажмите «Добавить тип объекта».

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

3- Давайте повторим для типа проектов. Таким образом, мы можем добавлять технологии в виде тегов к любым проектам, над которыми мы работали.

4. Теперь, когда у нас есть тип технологии, щелкните его в дереве, и мы добавим объект технологии.

5- Назовите это как угодно, я поставлю React. У меня нет контента, потому что это просто тег. Повторите это для другой технологии, с которой вы работали.

6- Повторите шаг 4 с типом проектов. Назовите это портфолио для начала :)

7- Здесь давайте добавим метаполя.

8. Вероятно, вам понадобятся как минимум следующие метаполя - изображение, текстовая область и взаимосвязь между несколькими объектами.

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

10- Наконец, в редакторе типов проектов выберите две технологии, которые вы создали, нажав «Выбрать объекты».

Далее, кодируем

Хорошо, у вас есть базовый контент. Разве это не было просто? Перейдем к коду!

Как указано в предварительных требованиях, я запускаю базовое приложение React. Я намеренно избегал любого управления состоянием, такого как redux, вместо этого выбрал как можно более простое приложение. Для «страницы» представления, содержащей список проектов, я использую semantic-ui-react для создания некоторых карточек, содержащих главную фотографию проекта, имя, детали и теги, которые мы только что создали. В конце концов, я ожидаю, что буду использовать теги для помощи в фильтрации, но пока они служат кратким справочником или tl; dr для проекта. Заглянем под капот, можем ли мы:

Я начну с потока данных. В самый верхний контейнер, который у меня есть, App.js, я импортирую библиотеку API, которую Cosmic JS можно было собрать и упаковать через NPM. Имея всего пару настроек конфигурации, вы готовы получить все, что вам нужно, через их REST API. Вы увидите, что в componentWillMount я настроил конфиги для своего экземпляра Cosmic JS, сказал ему, что я хочу, и дал ему СУПЕР простой запрос о том, что я ищу из этого ведра (портфолио, да) . В документации Comsic JS есть несколько вариантов, с помощью которых легко найти, прочитать и следовать, но в данном случае я решил использовать «slug». После того, как эти шаги будут выполнены, все, что мне осталось сделать, это обновить начальное состояние проекта. Выполнено.

Итак, что же осталось? На самом деле, с этого момента это в основном стандартное. Я передаю PortfolioData как опору, «данные», в контейнер Portfolio. Ниже я просматриваю опору данных и создаю виджет карты, передавая каждый объект «проект», который мы создали, обратно в Cosmic JS в качестве опоры в Tile (я назвал его Tile, чтобы избежать мысленного учета семантического пользовательского интерфейса Card vs Card в моем проект).

Довольно просто. Последняя часть - построить «плитку» или «карту» с помощью semantic-ui-react (пряжа добавьте semantic-ui-react, если вы еще этого не сделали). Здесь есть пара вспомогательных методов, которые я установил, но они не делают ничего слишком сумасшедшего, а просто обращаются к правильным вложенным объектам. Затем сопоставьте массив тегов, который вам нужен, и используйте semantic-ui-react, чтобы он выглядел красиво (без тонны вашего собственного стиля), когда все вместе собрано в виде «карты» с тегами.

Вот и все. Действительно. Вот как просто получить что-то вроде этого:

Однако Cosmic JS позволяет создавать и более сложные структуры. Позже я добавил метаполе 1: 1, чтобы я мог сделать несколько интересных графиков (Chart JS) о моем уровне знаний в каждой технологии, чтобы сделать это:

Заключение

Я опробовал несколько CMS, как стандартных, так и GraphQL, а также те, у которых есть плагины и полнофункциональные, и я бы рекомендовал использовать Cosmic JS. Это один из самых простых для понимания, который требует небольшого обучения, и один из самых приятных в использовании. Единственный совет, который у меня есть, - нельзя использовать встроенное форматирование, особенно. для производственных приложений. Вместо этого вы должны использовать метаполя обычного текста и использовать столько, сколько необходимо для отдельных разделов для любого объекта, который вам нужен. В противном случае вам придется анализировать его «опасно», что означает, что могут быть введены теги скрипта (хотя это СУПЕР маловероятно, но возможно). Однако это вполне нормально, можно обойтись и, безусловно, того стоит.

Если вы являетесь менеджером контента, так легко создавать всевозможные типы, объекты, отношения и т. Д. Не говоря уже о том, что так легко смешивать, сопоставлять и создавать более сложный контент - например, графики пауков, показывающие мой опыт vs теги выше. Вот насколько универсальным и простым является Comsic JS.

Надеюсь, это вдохновило вас заняться этим, независимо от того, являетесь ли вы разработчиком или контент-менеджером. А теперь иди и творите!

Опять же, посмотрите мое портфолио здесь и загрузите код здесь.

Если у вас есть какие-либо комментарии или вопросы о создании приложений-портфолио с помощью Cosmic JS, свяжитесь с ними в Twitter или присоединитесь к разговору в Slack.