notion blog

Понятие блог

Это пример проекта Next.js, который показывает предстоящую поддержку SSG (генерация статического сайта) Next.js с использованием частного API Itsion для бэкэнда.

Примечание . В этом примере используются экспериментальные крючки SSG, доступные только в канарейке Next.js! API, используемые в этом примере, будут изменяться со временем. Поскольку он использует частные API и экспериментальные функции, используйте свой собственный риск, поскольку эти вещи могут измениться в любой момент.

Живой пример, размещенный на Vercel : https://notion-blog.vercel.app/

Начиная

Чтобы просмотреть шаги для настройки понятия для работы с этим примером, просмотрите сообщение по адресу https://notion-blog.vercel.app/blog/my-first-post или следуйте приведенным ниже шагам.

Развернуть свое

Разверните свой собственный блог об представлениях с Vercel.

или

1. Клонировать этот репозитный git clone https://github.com/ijjk/notion-blog.git
2. Настройка проекта с помощью vc
3. Добавьте свое NOTION_TOKEN и BLOG_INDEX_ID в качестве переменных среды в вашем проекте. Смотрите здесь, чтобы найти эти значения
4. Сделайте окончательное развертывание с vc

ПРИМЕЧАНИЕ. Если перераспределить vc Locally и вы не внесли никаких изменений в источник приложения и отредактированы только в представлении, вам понадобится использовать vc -f , чтобы обойти сборку сборки

Создание таблицы страниц

Примечание : это автоматическое запуск, если таблица не обнаруживается в первый раз, когда посещение /blog

Использование предварительно настроенного сценария

1. Создать пустую страницу в понятии
2. Клонировать этот репозитный git clone https://github.com/ijjk/notion-blog.git
3. Установить зависимости cd notion-blog && yarn
4. Запустите скрипт для создания таблицы NOTION_TOKEN='token' BLOG_INDEX_ID='new-page-id' node scripts/create-table.js См. Здесь для поиска идентификатора для новой страницы

Вручную создавать таблицу

1. Создать пустую страницу в понятии
2. Создайте встроенную таблицу на этой странице, не используйте полную таблицу страниц, так как она требует запросов по -разному
3. Добавьте приведенные ниже поля в таблицу

Таблица должна иметь следующие свойства:

• Page : страница сообщения в блоге
• Slug : Это слизняком постов в блоге по сравнению с /blog , это должно быть текстовое свойство
• Published : Посты в этом фильтрах в производстве , это должно быть свойство флажки
• Date : Это когда сообщение в блоге появляется, как опубликовано, это должно быть свойство даты
• Authors : это список пользователей понятий, которые написали пост, это должно быть собственность человека

Получение индекса и токена блога

Чтобы получить значение индекса вашего блога, откройте понятие и перейдите на страницу понятия с таблицей, созданной выше. В то время как на этой странице вы сможете получить идентификатор страницы от любого:

• URL, если URL вашей страницы-https://www.notion.so/blog-s5qv1qbuzm1wxm3h3szrqupi7xjxtul, тогда ваш BLOG_INDEX_ID - S5qv1QbU-zM1w-xm3H-3SZR-Qkupi7XjXTul
• Запрос loadPageChunk , если вы откроете консоли разработчика и перейдите на вкладку «Сеть», перезагрузите страницу, вы должны увидеть запрос на loadPageChunk , и в полевой нагрузке запроса вы должны увидеть pageId , и это ваш BLOG_INDEX_ID

Чтобы получить токен вашего понятия, открыть понятие и поищите cookie token_v2 .

Создание постов в блоге

1. По понятию нажмите «Новое» на таблице, чтобы добавить новую строку
2. Заполните имя страницы, слизняк, дату и авторы
3. В верхней части области контента Добавьте контент, который вы хотите показать в качестве предварительного просмотра (сохраните это под 2 абзаца))
4. Добавьте блок разделителя в свой предварительный контент
5. Добавьте остальную часть вашего контента в блоке разделителя

Бег на местном уровне

Чтобы запустить проект локально, вам нужно выполнить шаги 1 и 2 развертывания, а затем выполнить следующие шаги

1. Установите yarn зависимостей
2. Разоблачить NOTION_TOKEN и BLOG_INDEX_ID в вашей среде export NOTION_TOKEN='<your-token>' и export BLOG_INDEX_ID='<your-blog-index-id>' или set NOTION_TOKEN="<your-token>" && set BLOG_INDEX_ID="<your-blog-index-id>"
3. Запустите дальше в режиме разработки yarn dev
4. Стройте и запустите в режиме производства yarn build && yarn start

Кредиты

• Guillermo Rauch @rauchg для первоначальной идеи
• Shu Ding @shuding_ для разработки справки
• Luis alvarez @luis_fades для разработки помощи и ловли ошибок