Создание собственного веб-сайта может быть пугающей задачей как для новичков, так и для профессиональных веб-разработчиков. Использование примеров проектов TakeShape для начала делает процесс быстрым и легким.
Идея моего проекта проста: мне нужен веб-сайт, на котором я могу показать все свои любимые рецепты.
(В качестве заявления об отказе от ответственности: на самом деле у меня мало кулинарных навыков; следующие рецепты взяты из Интернета!)
Давайте готовить!
Проект TakeShape
Зарегистрируйте учетную запись на app.takeshape.io/signup. Благодаря интеграции TakeShape с G-Suite этот процесс может быть простым, как 2 клика.
Мы собираемся использовать шаблон Blank Project.
Активы 📸
Мы можем просмотреть изображения, видео и другие активы (в настоящее время пустые), нажав «Библиотека активов» в верхней части панели навигации. Мы можем загрузить больше ресурсов, просто перетащив их с рабочего стола или нажав «Загрузить» в правом верхнем углу.
Локализации 🌍✈️
Благодаря локализациям TakeShape легко поддерживать разные языки. Перейдите к настройкам проекта и прокрутите до раздела «Локализации». Я добавил испанский — 🇲🇽Мексика, который выглядит так:
Разработка типов контента 📄👨🔬
В левом нижнем углу экрана проекта нажмите «Добавить тип контента».
Часто лучше всего представить себе отношения между нашими типами контента. Например, у рецепта есть название, описание, ингредиенты и шаги.
Ингредиент имеет только название и, возможно, изображение.
При создании типов контента начните с самого простого контента и постепенно переходите к более сложному.
Ингредиент
Я настроил свои ингредиенты как простую таксономию. Единственная информация, которая нам нужна о каждом ингредиенте, — это его название. Количество каждого ингредиента и то, что с ним делать, зависит от каждого рецепта! Я также отметил «Включить локализацию» для названия рецепта. Это позволит нам указать альтернативный текст для разных локализаций.
После создания набора ингредиентов мой список теперь выглядит так:
Рецепт
Наличие типа контента «Рецепт» лежит в основе нашего веб-сайта рецептов.
Отношения контента TakeShape невероятно сильны. Вскоре вы увидите, как мы используем отношения Ingredient.
Наша среда разработки 💻✨
Всего за несколько шагов у нас будет проект, с которым мы готовы работать!
Клонировать и скопировать пустой образец проекта TakeShape git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples mkdir my-recipes-project && cd my-recipes-project cp -r ../takeshape-samples/blank-project/ . Установить зависимости npm install Связать проект TakeShape npx tsg init
Следуйте инструкциям, чтобы войти в систему с вашим именем пользователя и паролем TakeShape.
Создайте и просмотрите свой сайт npm run start
При переходе к localhost:5000 в вашем браузере должен появиться ваш сайт!
Теперь вы увидите, что у нас есть базовый пустой проект от TakeShape.
Я убрал большую часть примера кода и оставил шаблон для работы.
Я рекомендую использовать VSCode в качестве редактора. Мне особенно нравится работать в нем над проектами GraphQL из-за поддержки расширений. Чтобы воспользоваться подсветкой синтаксиса GraphQL, установите расширение Поддержка языка GraphQL, выбрав Код → Настройки → Расширения в VSCode и выполнив поиск graphql. Проекты TakeShape поддерживают подсветку синтаксиса GraphQL с помощью любого редактора или плагина, использующего graphqlconfig.
tsg.yml конфигурация ⚙️
Если вы никогда раньше не работали с tsg.yml, взгляните на некоторые образцы и документацию.
Вот предварительный просмотр того, как выглядит маршрут рецептов моего tsg.yml. Посмотреть весь файл здесь
Поддержка региональных настроек
Всего несколько строк, и у нас есть поддержка локалей:
Файлы данных GraphQL 🔗
Создание файлов .graphql очень просто благодаря автозаполнению в нашем редакторе кода или с помощью API Explorer в рамках нашего проекта TakeShape. Не забудьте указать _id для типов, к которым мы будем выполнять маршрутизацию. Вот как выглядит наш templates/data/recipes.graphql:
Секреты и уловки
Если вы решите изменить свои модели содержимого (добавить, изменить или удалить поля) во время разработки, вам потребуется обновить среду разработки, чтобы узнать о них. Это не только помогает с автозаполнением вашего GraphQL, генератор статического сайта должен знать о ваших типах контента!
Просто запустите npx tsg schema, чтобы получить последние данные из вашего проекта. Возможно, вам придется снова открыть VSCode, чтобы автозаполнение снова заработало правильно.
Время демонстрации!
И легкая поддержка локалей!
Смотрите остальную часть сайта на potsandpanzer.netlify.com
За это короткое время у меня появился красивый сайт с моими рецептами. Отсюда возможности безграничны. Мы будем рады увидеть веб-сайты, которые вы все создадите на основе этого шаблона!
Проверьте это и поделитесь на GitHub
Взгляните на код сами, измените материал и сделайте его лучше!
Отправьте запрос на извлечение, если вы так склонны!
https://github.com/panzer/takeshape-рецепты
Первоначально опубликовано на https://www.takeshape.io.
