Собственный веб-сайт на основе Notion

Демо

Стартовый комплект Next.js Notion

Функции

• Установка занимает всего несколько минут ( один файл конфигурации )💪
• Надежная поддержка контента Notion через react-notion-x
• Создан с использованием Next.js, TS и React
• Отличная скорость страницы
• Плавный предварительный просмотр изображений
• Автоматические социальные изображения
• Автоматические красивые URL-адреса
• Автоматическое оглавление
• Полная поддержка темного режима
• Быстрый поиск с помощью CMD+K / CMD+P
• Отзывчивый для разных устройств
• Оптимизирован для Next.js и Vercel

Настройка

Вся конфигурация определена в site.config.ts .

Для этого проекта требуется последняя версия Node.js (>= 14.17).

Форкнуть/клонировать это репо

Измените несколько значений в site.config.ts.

npm install

npm run devпротестировать локально

npm run deployразвернуть в верцель💪

Я постарался максимально упростить настройку — все, что вам действительно нужно сделать, чтобы начать, — это отредактировать файлы rootNotionPageId.

Мы рекомендуем дублировать страницу по умолчанию в качестве отправной точки, но вы можете использовать любую общедоступную страницу, которую хотите.

Убедитесь, что ваша корневая страница Notion общедоступна , а затем скопируйте ссылку в буфер обмена. Извлеките последнюю часть URL-адреса, которая выглядит как 7875426197cf461698809def95960ebf, которая является идентификатором понятия вашей страницы.

Чтобы найти идентификатор рабочей области Notion (необязательно), просто загрузите любую из страниц вашего сайта в браузер и откройте консоль разработчика. Там будет глобальная переменная, к которой вы можете получить доступ block, которая является данными Notion для текущей страницы. Если вы введете block.space_id, он распечатает идентификатор рабочей области вашей страницы.

Я рекомендую настроить коллекцию на вашей домашней странице, которая будет содержать все ваши статьи/проекты/контент. Однако в вашем рабочем пространстве Notion нет структурных ограничений, поэтому не стесняйтесь добавлять контент, как обычно в Notion.

URL-адреса

Приложение по умолчанию использует немного разные пути URL-адресов в dev и prod (хотя вставка любого пути dev в prod будет работать и наоборот).

В разработке он будет использовать /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202slugified версию заголовка страницы с суффиксом Notion ID. Я обнаружил, что очень полезно всегда иметь идентификатор Notion Page ID в центре внимания во время локальной разработки.

В продакшне он будет использовать то, /nextjs-notion-blogчто немного лучше, поскольку избавляет от лишнего беспорядка с идентификаторами.

Сопоставление Notion ID с слагифицированными заголовками страниц выполняется автоматически как часть процесса сборки. Просто имейте в виду, что если вы планируете со временем менять заголовки страниц, вы, вероятно, захотите убедиться, что старые ссылки по-прежнему будут работать, и в настоящее время мы не предоставляем решение для обнаружения старых ссылок, кроме встроенной поддержки Next.js для перенаправляет .

Вы можете переопределить генерацию слагов по умолчанию для каждой страницы, добавив Slugсвойство text в свою базу данных. Любая страница, у которой есть Slug свойство, будет использовать его в качестве своего ярлыка.

ПРИМЕЧАНИЕ. Если в вашей рабочей области есть несколько страниц с одним и тем же слагифицированным именем, приложение выдаст ошибку, сообщив вам, что существуют повторяющиеся пути URL-адресов.

Стили

Все стили CSS, которые настраивают содержимое Notion, находятся в файле styles/notion.css . В основном они нацелены на глобальные классы CSS, экспортированные с помощью react-notion-x styles.css .

Каждый блок понятий получает свое собственное уникальное имя класса, поэтому вы можете ориентироваться на отдельные блоки следующим образом:

.notion-block-260baa77f1e1428b97fb14ac99c7c385 {

display: none;

}

Темный режим

Темный режим полностью поддерживается и может быть переключен с помощью значка солнца/луны в нижнем колонтитуле.

Автоматические социальные изображения

Все метатеги Open Graph и социальных сетей генерируются из вашего контента Notion, что по умолчанию делает обмен в социальных сетях профессиональным.

Социальные изображения генерируются автоматически с помощью безголового хрома. Вы можете настроить шаблон React по умолчанию для социальных изображений, отредактировав api/social-images.tsx .

Автоматическое оглавление

По умолчанию каждая страница статьи будет иметь оглавление, отображаемое asideна рабочем столе. Он использует логику scrollspy для автоматического обновления текущего раздела по мере того, как пользователь прокручивает ваш документ, и позволяет очень легко переключаться между различными разделами.

Если на странице меньше minTableOfContentsItems(по умолчанию 3), оглавление будет скрыто. Он также скрыт на главной странице и если окно браузера слишком маленькое.

Это оглавление использует ту же логику, которую Notion использует для своего встроенного блока Table of Contents (см. getPageTableOfContents для базовой логики).

Отзывчивость с разрешению экрана

Все страницы спроектированы таким образом, чтобы они реагировали на обычные размеры устройств.

Аналитика

Аналитика — это необязательная функция, которую легко включить, если хотите.

Аналитика от Fathom

Fathom представляет собой облегченную альтернативу Google Analytics.

Чтобы включить, просто добавьте NEXT_PUBLIC_FATHOM_IDпеременную среды, которая будет использоваться только в рабочей среде.

Аналитика от PostHog

PostHog представляет собой облегченную альтернативу Google Analytics с открытым исходным кодом .

Чтобы включить, просто добавьте NEXT_PUBLIC_POSTHOG_IDпеременную среды, которая будет использоваться только в рабочей среде.

Переменные среды

Если вы используете Redis, аналитику или любую другую функцию, для которой требуются переменные среды, вам необходимо добавить их в свой проект Vercel .

Если вы хотите протестировать свои сборки Redis с помощью GitHub Actions, вам нужно отредактировать действие сборки по умолчанию, чтобы добавить REDIS_HOSTи REDIS_PASSWORD. Вот пример из моей личной ветки . Вам также потребуется добавить эти переменные среды в репозиторий GitHub в качестве секретов репозитория .

Лицензия MIT © Travis Fischer

Гитхаб: https://github.com/transitive-bullshit/nextjs-notion-starter-kit