nextjs blog theme
1.0.0
Настраиваемый стартер блога с использованием:
Возьмите ганд на демонстрацию.
Нажмите здесь, чтобы посмотреть прохождение шаблона!
Вы можете начать работу с этим проектом двумя способами: локально или используя мастер настройки.
Если вы делаете это локально, начните с нажатия кнопки «Использовать этот шаблон» на GitHub. Это создаст новый репозиторий с файлами этого шаблона в вашей учетной записи GitHub. Как только это будет сделано, клонируйте свой новый репозиторий и перейдите к нему в своем терминале.
Оттуда вы можете установить зависимости проекта, работая:
yarn installНаконец, вы можете запустить свой проект локально с:
yarn run devОткройте свой браузер и посетите http: // localhost: 3000, ваш проект должен работать!
Через мастер настройки вы можете создать свой блог за несколько кликов и развернуть для NetLify.
Конфигурация основана на переменных среды, чтобы облегчить интеграцию с любой платформой Jamstack, такой как NetLify.
Вот переменные, которые вы можете редактировать:
| Переменная | Описание | Параметры |
|---|---|---|
BLOG_NAME | Название вашего блога, отображаемое ниже аватара | |
BLOG_TITLE | Главный заголовок ( h1 ) на домашней странице | |
BLOG_FOOTER_TEXT | текст в нижнем колонтитуле | |
BLOG_THEME | Тема, чтобы пройтись на Taillid | по умолчанию |
BLOG_FONT_HEADINGS | Фамилия шрифта для всех заголовков HTML, от h1 до h6 | sans-serif (по умолчанию), засечка, моноспект |
BLOG_FONT_PARAGRAPHS | Фондовая семья для всех других HTML-элементов | sans-serif (по умолчанию), засечка, моноспект |
Все переменные ENV могут быть настроены через мастер или путем установки переменных среды проекта. Вы можете сделать это в своем Dashaboard NetLify (настройки сайта/сборка и развертывание/среда/переменные среды).
[ALT: Видео пошагового прохождения редактирования ENV VARS]
Если настройка переменной среды не является вашей чашкой чая, по умолчанию можно изменить в utils/global-data.js . Вы также можете удалить информацию о переменных и тесном коде, где эти переменные используются в базе кода.
BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS используются в tailwind-preset.jsBLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT используются в pages/index.js & pages/posts/[slug].js через объект globalData . Все сообщения хранятся в каталоге /posts . Чтобы сделать новый пост, создайте новый файл с расширением .mdx .
Поскольку посты написаны в формате MDX , вы можете передать реквизиты и компоненты. Это означает, что вы можете использовать компоненты React внутри ваших постов, чтобы сделать их более интерактивными. Узнайте больше о том, как это сделать в документах MDX по содержанию.
[ALT: Видео пошагового прохождения добавления нового сообщения в блоге]
Этот шаблон настроен на работу с визуальным редактированием и источником контента GIT.
Типичный процесс разработки должен начинаться с работы локально. Клонировать этот репозиторий, затем запустите npm install в своем корневом каталоге.
Запустите сервер разработки next.js:
cd nextjs-blog-theme
npm run devУстановите NetLify Visual Editor CLI. Затем откройте новое окно терминала в том же каталоге проектов и запустите NetLify Visual Editor Dev Server:
npm install -g @stackbit/cli
stackbit devЭто выводит ваш собственный URL -адрес netLify Visual Editor. Откройте это, зарегистрируйтесь или войдите в систему, и вы будете направлены на визуальный редактор NetLify для вашего нового проекта.
Вот несколько предложений о том, что делать дальше, если вы новичок в NetLify Visual Editor:
Мы включили некоторые инструменты, которые помогают нам поддерживать эти шаблоны. Этот шаблон в настоящее время использует:
Если ваша команда не интересуется этим инструментом, вы можете с легкостью удалить их!
Чтобы поддерживать наш проект в актуальном состоянии с зависимостью, мы используем инструмент под названием Renovate. Если вы не заинтересованы в этом инструменте, удалите файл renovate.json и заверните его в свою основную филиал.
Если вы застряли на этом пути, получите помощь на наших форумах поддержки.
