### Basic DPlayer HTML and CSS Setup Source: https://github.com/tangly1024/notionnext/blob/main/public/dplayer.htm Set up the necessary HTML and CSS to contain the DPlayer instance. Ensure the container has full height and no margins or padding. ```html html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } #dplayer-container { width: 100%; height: 100%; } ``` -------------------------------- ### Full Screen iFrame Setup Source: https://github.com/tangly1024/notionnext/blob/main/public/games-external/common/index.htm Configures the document body for full-screen display and dynamically updates the iFrame source from a URL parameter. ```html Full Screen iFrame ``` -------------------------------- ### Development Workflow Steps Source: https://github.com/tangly1024/notionnext/blob/main/OPTIMIZATION_SUMMARY.md This outlines the development workflow for NotionNext, including installing Git hooks, committing code with automatic quality checks, and pushing code with automated build tests. ```markdown 1. 安装 Git 钩子: `npm run setup-hooks` 2. 开发功能 3. 提交代码（自动运行质量检查） 4. 推送代码（自动运行构建测试） ``` -------------------------------- ### Theme Switching and Management Source: https://context7.com/tangly1024/notionnext/llms.txt Dynamically loads and switches between 21 built-in themes. Includes functions to get theme configuration, use layout components based on theme, and initialize dark mode. ```javascript import { getThemeConfig, useLayoutByTheme, initDarkMode } from '@/themes/theme' // 获取主题配置 const themeConfig = await getThemeConfig('hexo') // 在组件中使用动态布局 function PageLayout(props) { const { theme, layoutName } = props const Layout = useLayoutByTheme({ layoutName, theme }) return } // 初始化深色模式 useEffect(() => { initDarkMode( setDarkMode, // 更新状态的函数 defaultDarkMode // 默认模式 'true' | 'false' ) }, []) // 保存用户偏好 import { saveDarkModeToLocalStorage } from '@/themes/theme' saveDarkModeToLocalStorage(true) // 保存为深色模式 ``` -------------------------------- ### Clear Cache API Route Source: https://context7.com/tangly1024/notionnext/llms.txt An API endpoint to clear server-side cache, useful for forcing content refreshes. It's a GET request to `/api/cache`. ```bash # 清理缓存 curl -X GET https://your-site.com/api/cache # 响应示例 # 成功: { "status": "success", "message": "Clean cache successful!" } # 失败: { "status": "error", "message": "Clean cache failed!", "error": {...} } ``` -------------------------------- ### Backup Configuration Files Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Create a compressed tar archive of local environment and configuration files. ```bash # 备份配置文件 tar -czf config-backup.tar.gz .env.local blog.config.js ``` -------------------------------- ### Development and Build Commands Source: https://context7.com/tangly1024/notionnext/llms.txt Standard CLI commands for managing the project lifecycle. ```bash # 安装依赖 yarn install # 本地开发（热重载） yarn dev # 生产构建 yarn build # 启动生产服务器 yarn start # 静态导出（用于静态托管） yarn export # 代码检查 yarn lint yarn lint:fix # 类型检查 yarn type-check # 运行测试 yarn test yarn test:coverage # 分析打包大小 yarn bundle-report ``` -------------------------------- ### Available Themes List Source: https://context7.com/tangly1024/notionnext/llms.txt Lists all available themes for the project, including their style descriptions. Also shows how to preview themes via URL parameters. ```javascript // 所有可用主题 const themes = [ 'commerce', // 电商风格 'example', // 示例主题 'fukasawa', // 极简风格 'game', // 游戏风格 'gitbook', // 文档风格 'heo', // 现代风格 'hexo', // 经典博客 'landing', // 落地页 'magzine', // 杂志风格 'matery', // Material Design 'medium', // Medium 风格 'movie', // 影视风格 'nav', // 导航站 'next', // Next.js 风格 'nobelium', // 极简风格 'photo', // 摄影作品集 'plog', // 图片博客 'proxio', // 代理风格 'simple', // 简约风格 'starter', // 入门主题 'typography' // 排版优先 ] // 通过 URL 参数切换主题预览 // https://your-site.com/?theme=hexo ``` -------------------------------- ### Enable Compression and Image Optimization Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set NEXT_PUBLIC_COMPRESS to true to enable compression and NEXT_PUBLIC_IMAGE_OPTIMIZE to true for image optimization. ```bash # 启用压缩 NEXT_PUBLIC_COMPRESS=true ``` ```bash # 图片优化 NEXT_PUBLIC_IMAGE_OPTIMIZE=true ``` -------------------------------- ### Check Environment Variables Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Run the 'quality' script to check environment variable configurations. ```bash # 检查环境变量 npm run quality ``` -------------------------------- ### Initialize DPlayer with Video Source Source: https://github.com/tangly1024/notionnext/blob/main/public/dplayer.htm Initialize a DPlayer instance, specifying the video source URL obtained from the URL parameters. Supports multiple quality options. ```javascript var myParam = decodeURIComponent(location.search.split('n=')[1]); if (!myParam) { alert('无效的视频地址') } // 创建 DPlayer 实例 var dp = new DPlayer({ // 定义容器 container: document.getElementById('dplayer-container'), // 视频源地址 video: { url: myParam // 如果有多个清晰度，可以在这里添加更多的清晰度选项 // quality: [ // { // name: 'HD', // url: 'https://example.com/your-video-hd.mp4', // type: 'normal' // }, // { // name: 'SD', // url: 'https://example.com/your-video-sd.mp4', // type: 'normal' // } // ], }, autoplay: false, // 设置为手动点击播放 // 视频封面图片 poster: 'https://example.com/your-video-poster.jpg', }); ``` -------------------------------- ### Deployment Workflow Steps Source: https://github.com/tangly1024/notionnext/blob/main/OPTIMIZATION_SUMMARY.md This details the deployment workflow for NotionNext, involving environment configuration, build testing, platform selection, and following deployment guidelines. ```markdown 1. 配置环境变量 2. 运行 `npm run build` 测试构建 3. 选择部署平台（Vercel/Netlify/Docker） 4. 按照 DEPLOYMENT.md 指南部署 ``` -------------------------------- ### 常用项目管理命令 Source: https://github.com/tangly1024/notionnext/blob/main/PROJECT_COMPLETION_REPORT.md 项目维护中常用的质量检查、健康检查及构建命令。 ```bash npm run quality # 代码质量检查 npm run health-check # 项目健康检查 npm run dev-tools # 开发工具菜单 npm run build # 构建项目 npm run test # 运行测试 ``` -------------------------------- ### Docker Deployment Source: https://context7.com/tangly1024/notionnext/llms.txt Commands and configuration for containerizing the application. ```bash # 使用 Docker 构建 docker build -t notionnext . # 运行容器 docker run -p 3000:3000 \ -e NOTION_PAGE_ID=your-page-id \ -e NEXT_PUBLIC_THEME=hexo \ notionnext # 使用 docker-compose # docker-compose.yml version: '3' services: notionnext: build: . ports: - "3000:3000" environment: - NOTION_PAGE_ID=your-page-id - NEXT_PUBLIC_THEME=hexo - NEXT_PUBLIC_LANG=zh-CN ``` -------------------------------- ### Enable Vercel Analytics Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set NEXT_PUBLIC_VERCEL_ANALYTICS to true to enable Vercel Analytics. ```bash # Vercel Analytics NEXT_PUBLIC_VERCEL_ANALYTICS=true ``` -------------------------------- ### 配置环境变量 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 在项目根目录创建 .env.local 文件以定义必要的 Notion 页面 ID 和其他可选配置。 ```bash # 必需配置 NOTION_PAGE_ID=your-notion-page-id # 推荐配置 NEXT_PUBLIC_TITLE=你的博客标题 NEXT_PUBLIC_DESCRIPTION=你的博客描述 NEXT_PUBLIC_AUTHOR=作者名称 NEXT_PUBLIC_LINK=https://yourdomain.com # 可选配置 REDIS_URL=redis://localhost:6379 NEXT_PUBLIC_ANALYTICS_GOOGLE_ID=G-XXXXXXXXXX ``` -------------------------------- ### 初始化开发环境 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 克隆项目并启动开发服务器的命令序列。 ```bash # 克隆项目 git clone cd NotionNext # 初始化开发环境 npm run init-dev # 启动开发服务器 npm run dev ``` -------------------------------- ### 构建失败排查 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 构建失败时执行的质量检查与重新构建命令。 ```bash # 检查代码质量 npm run quality # 清理并重新构建 npm run clean npm run build ``` -------------------------------- ### 快速开始命令 Source: https://github.com/tangly1024/notionnext/blob/main/PROJECT_COMPLETION_REPORT.md 用于初始化开发环境、启动服务器及运行质量检查的常用命令。 ```bash # 初始化开发环境 npm run init-dev # 启动开发服务器 npm run dev # 运行质量检查 npm run quality ``` -------------------------------- ### 开发与测试流程 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 开发阶段常用的启动服务、质量检查及测试命令。 ```bash # 启动开发服务器 npm run dev # 运行代码质量检查 npm run quality # 运行测试 npm test ``` -------------------------------- ### Docker 部署命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 用于构建镜像和启动容器的常用命令。 ```bash # 构建镜像 docker build -t notionnext . # 运行容器 docker run -p 3000:3000 -e NOTION_PAGE_ID=your-id notionnext # 使用 Docker Compose docker-compose up -d ``` -------------------------------- ### Netlify 手动部署 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 使用 Netlify CLI 构建静态文件并部署到生产环境。 ```bash # 构建静态文件 npm run export # 安装 Netlify CLI npm install -g netlify-cli # 登录 netlify login # 部署 netlify deploy --dir=out # 生产部署 netlify deploy --prod --dir=out ``` -------------------------------- ### 性能优化配置 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 配置缓存以提升站点性能。 ```bash # Redis 缓存 REDIS_URL=redis://localhost:6379 # 内存缓存 ENABLE_CACHE=true ``` -------------------------------- ### 类型错误排查 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 运行类型检查并查看详细错误信息的命令。 ```bash # 运行类型检查 npm run type-check # 查看详细错误信息 npx tsc --noEmit --pretty ``` -------------------------------- ### 环境变量验证 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 验证当前环境变量配置是否正确。 ```bash # 验证环境变量配置 npm run quality ``` -------------------------------- ### Configure Image CDN Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NEXT_PUBLIC_IMAGE_CDN environment variable to specify the CDN for images. ```bash NEXT_PUBLIC_IMAGE_CDN=https://cdn.example.com ``` -------------------------------- ### 浏览器调试启动 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 启动开发模式以便在浏览器中进行调试。 ```bash # 启动调试模式 npm run dev # 在浏览器中打开开发者工具 # 访问 http://localhost:3000 ``` -------------------------------- ### 创建功能分支 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 使用 Git 创建并切换到新功能分支。 ```bash git checkout -b feature/your-feature-name ``` -------------------------------- ### Site Configuration Reading Source: https://context7.com/tangly1024/notionnext/llms.txt Reads site configuration with priority given to Notion config table, then environment variables, and finally blog.config.js defaults. Useful for accessing theme, author, and pagination settings. ```javascript import { siteConfig } from '@/lib/config' // 在 React 组件中使用 function MyComponent() { // 读取配置项 const theme = siteConfig('THEME') // 当前主题 const author = siteConfig('AUTHOR') // 作者名 const postsPerPage = siteConfig('POSTS_PER_PAGE') // 每页文章数 // 带默认值 const title = siteConfig('TITLE', 'My Blog') // 从扩展配置读取（服务端使用） const config = siteConfig('POST_URL_PREFIX', '', NOTION_CONFIG) return (

{title}

By {author}

) } // 获取所有配置 import { siteConfigMap } from '@/lib/config' const allConfig = siteConfigMap() ``` -------------------------------- ### Configure Static Resources CDN Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NEXT_PUBLIC_STATIC_CDN environment variable to specify the CDN for static assets. ```bash NEXT_PUBLIC_STATIC_CDN=https://static.example.com ``` -------------------------------- ### Docker 部署配置 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 包含 Dockerfile 和 Docker Compose 配置，用于容器化部署。 ```dockerfile FROM node:18-alpine AS base # Install dependencies only when needed FROM base AS deps RUN apk add --no-cache libc6-compat WORKDIR /app COPY package.json package-lock.json* ./ RUN npm ci # Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . ENV NEXT_TELEMETRY_DISABLED 1 RUN npm run build # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production ENV NEXT_TELEMETRY_DISABLED 1 RUN addgroup --system --gid 1001 nodejs RUN adduser --system --uid 1001 nextjs COPY --from=builder /app/public ./public # Automatically leverage output traces to reduce image size COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static USER nextjs EXPOSE 3000 ENV PORT 3000 CMD ["node", "server.js"] ``` ```yaml version: '3.8' services: app: build: . ports: - "3000:3000" environment: - NODE_ENV=production - NOTION_PAGE_ID=${NOTION_PAGE_ID} - REDIS_URL=redis://redis:6379 depends_on: - redis restart: unless-stopped redis: image: redis:7-alpine ports: - "6379:6379" volumes: - redis_data:/data restart: unless-stopped volumes: redis_data: ``` -------------------------------- ### 代码提交命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 添加文件并提交代码，会自动触发 pre-commit 钩子。 ```bash # 添加文件 git add . # 提交（会自动运行pre-commit钩子） npm commit -m "feat: add new feature" ``` -------------------------------- ### NotionNext Core Configuration (blog.config.js) Source: https://context7.com/tangly1024/notionnext/llms.txt Defines essential blog settings such as Notion page ID, theme, language, and author information. All settings can be overridden by environment variables. ```javascript // blog.config.js const BLOG = { // Notion 数据库页面ID（必填） // 支持多站点和多语言，用逗号分隔，语言前缀用冒号 NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5,en:7c1d570661754c8fbc568e00a01fd70e', // API 地址（可配置为自己的 Notion 代理） API_BASE_URL: process.env.API_BASE_URL || 'https://www.notion.so/api/v3', // 当前主题，支持: example, fukasawa, gitbook, heo, hexo, landing, matery, medium, next, nobelium, plog, simple 等 THEME: process.env.NEXT_PUBLIC_THEME || 'simple', // 网站语言: zh-CN, en-US, ja-JP, fr-FR 等 LANG: process.env.NEXT_PUBLIC_LANG || 'zh-CN', // 页面缓存时间（秒），调大可减少 Notion API 调用 NEXT_REVALIDATE_SECOND: process.env.NEXT_PUBLIC_REVALIDATE_SECOND || 60, // 外观模式: light(日间), dark(夜间), auto(自动) APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // 作者信息 AUTHOR: process.env.NEXT_PUBLIC_AUTHOR || 'NotionNext', BIO: process.env.NEXT_PUBLIC_BIO || '一个普通的干饭人🍚', LINK: process.env.NEXT_PUBLIC_LINK || 'https://tangly1024.com', // SEO 关键词 KEYWORDS: process.env.NEXT_PUBLIC_KEYWORD || 'Notion, 博客', // 伪静态路径（所有文章URL以.html结尾） PSEUDO_STATIC: process.env.NEXT_PUBLIC_PSEUDO_STATIC || false, // RSS 订阅 ENABLE_RSS: process.env.NEXT_PUBLIC_ENABLE_RSS || true } module.exports = BLOG ``` -------------------------------- ### Fetch Global Site Data (fetchGlobalAllData) Source: https://context7.com/tangly1024/notionnext/llms.txt Retrieves all site data from Notion, supporting multi-site and multi-language configurations. This is the primary function for fetching blog data. It should be used within `getStaticProps`. ```javascript import { fetchGlobalAllData } from '@/lib/db/SiteDataApi' // 在 getStaticProps 中使用 export async function getStaticProps({ locale }) { // 获取全站数据 const props = await fetchGlobalAllData({ pageId: process.env.NOTION_PAGE_ID, // Notion 数据库页面ID from: 'index-page', // 来源标识（用于调试） locale: locale // 语言前缀（多语言支持） }) // 返回的数据结构 // { // siteInfo: { title, description, icon, pageCover, link }, // allPages: [...], // 所有已发布页面 // allNavPages: [...], // 导航页面列表 // latestPosts: [...], // 最新文章（默认6篇） // categoryOptions: [...], // 所有分类 // tagOptions: [...], // 所有标签 // customNav: [...], // 自定义导航 // customMenu: [...], // 自定义菜单 // notice: {...}, // 公告内容 // postCount: 100, // 文章总数 // NOTION_CONFIG: {...} // Notion配置表数据 // } return { props, revalidate: parseInt(process.env.NEXT_PUBLIC_REVALIDATE_SECOND) || 60 } } ``` -------------------------------- ### Clean and Reinstall Dependencies Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Commands to clean the build cache, remove node_modules and package-lock.json, and reinstall dependencies. ```bash # 清理缓存 npm run clean rm -rf node_modules package-lock.json npm install npm run build ``` -------------------------------- ### 构建与测试项目 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 在部署前执行构建和质量检查以确保项目状态正常。 ```bash npm run build npm run start ``` ```bash npm run quality ``` -------------------------------- ### 代码质量工具命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 用于格式化、检查代码质量及预提交检查的常用命令。 ```bash # 代码格式化 npm run format # 代码检查 npm run lint # 类型检查 npm run type-check # 完整质量检查 npm run quality # 预提交检查 npm run pre-commit ``` -------------------------------- ### 项目目录结构 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md NotionNext 项目的核心目录结构概览。 ```text NotionNext/ ├── components/ # React组件 ├── pages/ # Next.js页面 ├── lib/ # 工具库和配置 │ ├── config/ # 配置文件 │ ├── utils/ # 工具函数 │ ├── middleware/ # 中间件 │ └── cache/ # 缓存相关 ├── themes/ # 主题文件 ├── conf/ # 配置文件 ├── scripts/ # 构建和开发脚本 ├── types/ # TypeScript类型定义 ├── .vscode/ # VSCode配置 └── docs/ # 项目文档 ``` -------------------------------- ### 开发辅助工具命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 包含清理项目、生成组件、分析包大小及检查更新等辅助功能。 ```bash # 查看所有开发工具命令 npm run dev-tools # 清理项目文件 npm run clean # 生成组件模板 npm run dev-tools generate:component MyComponent # 分析包大小 npm run dev-tools analyze # 检查依赖更新 npm run check-updates # 生成项目文档 npm run docs ``` -------------------------------- ### 代码推送命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 推送代码到远程仓库，会自动触发 pre-push 钩子。 ```bash # 推送（会自动运行pre-push钩子） git push origin feature/your-feature-name ``` -------------------------------- ### Git Hooks 管理命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 用于安装、检查及移除 Git 钩子的命令。 ```bash # 安装Git钩子 npm run setup-hooks # 检查钩子状态 npm run check-hooks # 移除Git钩子 npm run remove-hooks ``` -------------------------------- ### Configure Comment Systems Source: https://context7.com/tangly1024/notionnext/llms.txt Define environment variables and settings for various supported comment providers in the configuration file. ```javascript // conf/comment.config.js 配置示例 module.exports = { // Twikoo 评论（推荐） COMMENT_TWIKOO_ENV_ID: process.env.NEXT_PUBLIC_COMMENT_ENV_ID || '', COMMENT_TWIKOO_CDN_URL: 'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js', // Giscus 评论（基于 GitHub Discussions） COMMENT_GISCUS_REPO: 'username/repo', COMMENT_GISCUS_REPO_ID: 'R_xxxxx', COMMENT_GISCUS_CATEGORY_ID: 'DIC_xxxxx', COMMENT_GISCUS_MAPPING: 'pathname', COMMENT_GISCUS_LANG: 'zh-CN', // Waline 评论 COMMENT_WALINE_SERVER_URL: 'https://your-waline-server.com', // Gitalk 评论 COMMENT_GITALK_REPO: 'your-repo', COMMENT_GITALK_OWNER: 'your-username', COMMENT_GITALK_CLIENT_ID: 'your-oauth-client-id', COMMENT_GITALK_CLIENT_SECRET: 'your-oauth-client-secret', // Utterances 评论 COMMENT_UTTERRANCES_REPO: 'username/repo', // Artalk 评论 COMMENT_ARTALK_SERVER: 'https://your-artalk-server.com' } ``` -------------------------------- ### 开发流程命令 Source: https://github.com/tangly1024/notionnext/blob/main/PROJECT_COMPLETION_REPORT.md 标准开发工作流，包括设置钩子、提交代码及推送代码。 ```bash # 1. 设置Git钩子 npm run setup-hooks # 2. 开发功能 # 3. 提交代码（自动质量检查） git commit -m "feat: new feature" # 4. 推送代码（自动构建测试） git push ``` -------------------------------- ### NotionNext Environment Variables (.env) Source: https://context7.com/tangly1024/notionnext/llms.txt Environment variables for overriding configurations, essential for deployment on platforms like Vercel. Includes settings for Notion ID, API URL, theme, language, author info, comments, analytics, search, and Redis cache. ```bash # .env.local 或 Vercel 环境变量 # 必须配置 - Notion 数据库页面ID NOTION_PAGE_ID=02ab3b8678004aa69e9e415905ef32a5 # 可选 - 自定义 Notion API 地址 API_BASE_URL=https://www.notion.so/api/v3 # 主题配置 NEXT_PUBLIC_THEME=hexo NEXT_PUBLIC_LANG=zh-CN NEXT_PUBLIC_APPEARANCE=auto # 作者信息 NEXT_PUBLIC_AUTHOR=YourName NEXT_PUBLIC_BIO=你的个人简介 NEXT_PUBLIC_LINK=https://your-domain.com # 评论系统 (选择一个) NEXT_PUBLIC_COMMENT_TWIKOO_ENV_ID=your-twikoo-env-id # 或 NEXT_PUBLIC_COMMENT_GISCUS_REPO=username/repo NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID=R_xxxxx NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID=DIC_xxxxx # 站点统计 NEXT_PUBLIC_ANALYTICS_GOOGLE_ID=G-XXXXXXXXXX NEXT_PUBLIC_ANALYTICS_BAIDU_ID=your-baidu-id # Algolia 全文搜索 NEXT_PUBLIC_ALGOLIA_APP_ID=your-app-id ALGOLIA_ADMIN_APP_KEY=your-admin-key NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_APP_KEY=your-search-key NEXT_PUBLIC_ALGOLIA_INDEX=your-index-name # Redis 缓存（可选，提升性能） REDIS_URL=redis://localhost:6379 ``` -------------------------------- ### Utilize Utility Functions Source: https://context7.com/tangly1024/notionnext/llms.txt Access common helper functions for environment checks, data manipulation, and resource loading. ```javascript import { isBrowser, deepClone, delay, isMobile, loadExternalResource, getQueryVariable, isHttpLink, checkStrIsUuid } from '@/lib/utils' // 判断是否在浏览器环境 if (isBrowser) { console.log('Running in browser') } // 深拷贝对象 const copied = deepClone({ nested: { data: 'value' } }) // 延时执行 await delay(1000) // 等待1秒 // 判断是否移动设备 if (isMobile()) { // 移动端逻辑 } // 动态加载外部资源 await loadExternalResource('https://cdn.example.com/script.js', 'js') await loadExternalResource('https://cdn.example.com/style.css', 'css') // 获取 URL 查询参数 const theme = getQueryVariable('theme') // ?theme=hexo // 验证字符串格式 const isUrl = isHttpLink('https://example.com') // true const isUuid = checkStrIsUuid('550e8400-e29b-41d4-a716-446655440000') // true ``` -------------------------------- ### ESLint 错误修复 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 自动修复 ESLint 错误及查看配置的命令。 ```bash # 自动修复ESLint错误 npm run lint:fix # 查看所有ESLint规则 npx eslint --print-config . ``` -------------------------------- ### Vercel 手动部署 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 使用 Vercel CLI 进行手动部署和生产环境发布。 ```bash # 安装 Vercel CLI npm i -g vercel # 登录 vercel login # 部署 vercel # 生产部署 vercel --prod ``` -------------------------------- ### Backup Notion Data Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Execute the 'backup-notion' npm script to back up Notion data. ```bash # 备份 Notion 数据 npm run backup-notion ``` -------------------------------- ### 静态导出与 GitHub Pages 部署 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 执行静态导出命令并配置 GitHub Actions 实现自动化部署。 ```bash npm run export ``` ```yaml name: Deploy to GitHub Pages on: push: branches: [ main ] jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v3 - name: Setup Node.js uses: actions/setup-node@v3 with: node-version: '18' cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run export env: NOTION_PAGE_ID: ${{ secrets.NOTION_PAGE_ID }} - name: Deploy uses: peaceiris/actions-gh-pages@v3 with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: ./out ``` -------------------------------- ### Netlify 配置文件 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 使用 netlify.toml 定义构建命令、环境变量及 HTTP 响应头。 ```toml [build] command = "npm run export" publish = "out" [build.environment] EXPORT = "true" NODE_VERSION = "18" [[headers]] for = "/*" [headers.values] X-Frame-Options = "DENY" X-Content-Type-Options = "nosniff" Referrer-Policy = "strict-origin-when-cross-origin" [[redirects]] from = "/feed" to = "/rss.xml" status = 301 ``` -------------------------------- ### Configure Google Analytics Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NEXT_PUBLIC_ANALYTICS_GOOGLE_ID environment variable with your Google Analytics ID. ```bash # Google Analytics NEXT_PUBLIC_ANALYTICS_GOOGLE_ID=G-XXXXXXXXXX ``` -------------------------------- ### Enable Debug Mode Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Use the DEBUG environment variable to enable debugging for all modules or specifically for Next.js. ```bash # 启用调试 DEBUG=* npm run build ``` ```bash # Next.js 调试 NEXT_DEBUG=true npm run dev ``` -------------------------------- ### 部署流程命令 Source: https://github.com/tangly1024/notionnext/blob/main/PROJECT_COMPLETION_REPORT.md 项目部署前的健康检查与构建测试步骤。 ```bash # 1. 健康检查 npm run health-check # 2. 构建测试 npm run build # 3. 部署（参考DEPLOYMENT.md） ``` -------------------------------- ### 性能分析命令 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 用于分析包大小及生成性能报告的命令。 ```bash # 分析包大小 npm run bundle-report # 生成性能报告 npm run analyze ``` -------------------------------- ### Script Commands for Development Tools Source: https://github.com/tangly1024/notionnext/blob/main/OPTIMIZATION_SUMMARY.md This JSON object lists available script commands for development tools within the NotionNext project, such as quality checks and Git hook management. ```json { "dev-tools": "开发工具集合", "quality": "代码质量检查", "pre-commit": "提交前检查", "setup-hooks": "安装 Git 钩子" } ``` -------------------------------- ### Configure LogRocket for Error Monitoring Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NEXT_PUBLIC_LOGROCKET_ID environment variable with your LogRocket project ID. ```bash # LogRocket NEXT_PUBLIC_LOGROCKET_ID=your-logrocket-id ``` -------------------------------- ### Updated Dependencies in package.json Source: https://github.com/tangly1024/notionnext/blob/main/OPTIMIZATION_SUMMARY.md This JSON object shows the updated versions of key dependencies for the NotionNext project, including Next.js, Clerk, React, and Tailwind CSS. ```json { "next": "^14.2.30", "@clerk/nextjs": "^5.7.5", "react": "^18.3.1", "tailwindcss": "^3.4.17" } ``` -------------------------------- ### 提交规范格式 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 遵循 Conventional Commits 规范的提交信息格式。 ```text (): [optional body] [optional footer] ``` -------------------------------- ### Cache Management with getOrSetDataWithCache Source: https://context7.com/tangly1024/notionnext/llms.txt Intelligent cache management supporting multi-level caching (Redis, file, memory) and automatic cache penetration prevention. Recommended for data retrieval to leverage caching. ```javascript import { getOrSetDataWithCache, getDataFromCache, setDataToCache, delCacheData } from '@/lib/cache/cache_manager' // 带缓存的数据获取（推荐方式） // 如果缓存存在则直接返回，否则执行获取函数并缓存结果 const data = await getOrSetDataWithCache( 'cache_key_name', // 缓存键名 async () => { const result = await fetchDataFromAPI() return result } ) // 自定义缓存时间 import { getOrSetDataWithCustomCache } from '@/lib/cache/cache_manager' const data = await getOrSetDataWithCustomCache( 'cache_key', 3600, // 缓存时间（秒） async () => { return await fetchData() } ) // 手动缓存操作 await setDataToCache('my_key', { foo: 'bar' }) const cached = await getDataFromCache('my_key') await delCacheData('my_key') ``` -------------------------------- ### Vercel 配置文件 Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md 通过 vercel.json 进行高级框架设置、请求头配置和重定向规则定义。 ```json { "framework": "nextjs", "buildCommand": "npm run build", "outputDirectory": ".next", "installCommand": "npm install", "functions": { "pages/api/**/*.js": { "maxDuration": 30 } }, "headers": [ { "source": "/(.*)", "headers": [ { "key": "X-Frame-Options", "value": "DENY" }, { "key": "X-Content-Type-Options", "value": "nosniff" } ] } ], "redirects": [ { "source": "/feed", "destination": "/rss.xml", "permanent": true } ] } ``` -------------------------------- ### Check for Dependency Updates Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Use npm scripts to check for outdated dependencies and perform updates. ```bash # 检查依赖更新 npm run check-updates ``` ```bash # 更新依赖 npm update ``` ```bash # 安全审计 npm audit ``` ```bash # 性能分析 npm run analyze ``` -------------------------------- ### Generate RSS Feeds Source: https://context7.com/tangly1024/notionnext/llms.txt Create RSS, Atom, and JSON feed files for site subscriptions. ```javascript import { generateRss } from '@/lib/utils/rss' // 在构建或访问时生成 RSS await generateRss({ NOTION_CONFIG: notionConfig, siteInfo: { title: '博客标题', description: '博客描述', link: 'https://your-site.com' }, latestPosts: posts // 最新文章列表 }) // 生成的文件位置 // /public/rss/feed.xml - RSS 2.0 格式 // /public/rss/atom.xml - Atom 1.0 格式 // /public/rss/feed.json - JSON Feed 格式 // 访问地址 // https://your-site.com/rss/feed.xml ``` -------------------------------- ### Configure Sentry for Error Monitoring Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NEXT_PUBLIC_SENTRY_DSN environment variable with your Sentry Data Source Name. ```bash # Sentry NEXT_PUBLIC_SENTRY_DSN=your-sentry-dsn ``` -------------------------------- ### fetchGlobalAllData Source: https://context7.com/tangly1024/notionnext/llms.txt Retrieves the entire site's data including navigation, categories, tags, and latest posts from the Notion database. ```APIDOC ## fetchGlobalAllData ### Description Fetches all necessary data for the blog site, including site information, navigation, and post metadata. ### Parameters #### Request Body - **pageId** (string) - Required - The Notion database page ID. - **from** (string) - Optional - Source identifier for debugging purposes. - **locale** (string) - Optional - Language prefix for multi-language support. ### Response #### Success Response (200) - **siteInfo** (object) - Basic site metadata (title, description, icon, etc.) - **allPages** (array) - List of all published pages - **allNavPages** (array) - List of navigation pages - **latestPosts** (array) - List of recent posts - **categoryOptions** (array) - Available categories - **tagOptions** (array) - Available tags - **postCount** (number) - Total count of posts ``` -------------------------------- ### Email Subscription API Route Source: https://context7.com/tangly1024/notionnext/llms.txt Integrates with Mailchimp for email subscriptions. This POST endpoint at `/api/subscribe` requires a JSON payload with email, firstName, and lastName. ```bash # 订阅请求 curl -X POST https://your-site.com/api/subscribe \ -H "Content-Type: application/json" \ -d '{ "email": "user@example.com", "firstName": "John", "lastName": "Doe" }' # 响应示例 # 成功: { "status": "success", "message": "Subscription successful!" } # 失败: { "status": "error", "message": "Subscription failed!" } ``` -------------------------------- ### 清理缓存与重装依赖 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 解决依赖安装失败的清理与重装步骤。 ```bash # 清理缓存 npm run clean rm -rf node_modules package-lock.json # 重新安装 npm install ``` -------------------------------- ### User Authentication API Route Source: https://context7.com/tangly1024/notionnext/llms.txt Handles user authentication using Clerk. Requires a Bearer token in the Authorization header for requests to `/api/user`. ```bash # 获取当前用户信息（需要认证） curl -X GET https://your-site.com/api/user \ -H "Authorization: Bearer " # 响应示例 # 已认证: { "userId": "user_xxxxx" } # 未认证: { "error": "Unauthorized" } ``` -------------------------------- ### Notion API Wrapper Source: https://context7.com/tangly1024/notionnext/llms.txt A low-level wrapper for Notion API calls that includes automatic rate limiting and request deduplication. Supports fetching pages, blocks, users, or calling arbitrary methods. ```javascript import { notionAPI } from '@/lib/db/notion/getNotionAPI' // 获取页面数据（带自动速率限制） const pageData = await notionAPI.getPage('page-id') // 获取多个内容块 const blocks = await notionAPI.getBlocks(['block-id-1', 'block-id-2']) // 获取用户信息 const users = await notionAPI.getUsers(['user-id-1']) // 直接调用任意方法 const result = await notionAPI.__call('methodName', ...args) ``` -------------------------------- ### Increase Node.js Memory Limit Source: https://github.com/tangly1024/notionnext/blob/main/DEPLOYMENT.md Set the NODE_OPTIONS environment variable to increase the Node.js memory limit for the build process. ```bash # 增加 Node.js 内存限制 NODE_OPTIONS="--max-old-space-size=4096" npm run build ``` -------------------------------- ### resolvePostProps Source: https://context7.com/tangly1024/notionnext/llms.txt Retrieves the full content and metadata for a specific blog post based on its URL slug. ```APIDOC ## resolvePostProps ### Description Resolves the complete data for a single post, including the Notion block map for rendering content. ### Parameters #### Request Body - **prefix** (string) - Required - URL prefix path. - **slug** (string) - Required - The unique slug of the post. - **suffix** (string) - Optional - URL suffix. - **locale** (string) - Optional - Language setting. - **from** (string) - Optional - Source identifier. ### Response #### Success Response (200) - **post** (object) - Contains post details including id, title, slug, category, tags, summary, status, dates, and blockMap (Notion content blocks). ``` -------------------------------- ### 提交规范示例 Source: https://github.com/tangly1024/notionnext/blob/main/DEVELOPMENT.md 符合 Conventional Commits 规范的提交信息示例。 ```text feat(auth): add user authentication fix(ui): resolve button alignment issue docs: update installation guide ``` -------------------------------- ### Generate Algolia Search Index Source: https://context7.com/tangly1024/notionnext/llms.txt Manage search indexing for posts by generating bulk indices or updating individual entries. ```javascript import { generateAlgoliaSearch, uploadDataToAlgolia } from '@/lib/plugins/algolia' // 批量生成所有文章的搜索索引（构建时执行） await generateAlgoliaSearch({ allPages: posts, // 所有文章 force: false // 是否强制更新 }) // 单篇文章索引更新 await uploadDataToAlgolia({ id: 'post-uuid', title: '文章标题', category: '分类', tags: ['标签1', '标签2'], slug: 'article-slug', summary: '文章摘要', lastEditedDate: new Date() }) // 索引结构 // { // objectID: 'post-uuid', // title: '文章标题', // category: '分类', // tags: ['标签1', '标签2'], // pageCover: 'https://...', // slug: 'article-slug', // summary: '文章摘要', // lastEditedDate: '2024-01-15', // lastIndexDate: '2024-01-15', // content: '文章正文内容（前8192字符）' // } ``` -------------------------------- ### Resolve Single Post Data (resolvePostProps) Source: https://context7.com/tangly1024/notionnext/llms.txt Fetches complete data for a single article based on its URL slug, including content blocks. This function is intended for use in dynamic routing pages. ```javascript import { resolvePostProps } from '@/lib/db/SiteDataApi' // 在动态路由页面中使用 // pages/[prefix]/[slug]/[...suffix].js export async function getStaticProps({ params, locale }) { const { prefix, slug, suffix } = params // 解析文章数据 const props = await resolvePostProps({ prefix, // URL 前缀路径 slug, // 文章 slug suffix, // URL 后缀（可选） locale, // 语言 from: 'slug-page' // 来源标识 }) // 返回的数据包含 // { // ...全站数据, // post: { // id: 'uuid', // title: '文章标题', // slug: 'article-slug', // category: '分类名', // tags: ['标签1', '标签2'], // summary: '文章摘要', // status: 'Published', // type: 'Post', // publishDate: 1699833600000, // lastEditedDate: 1699920000000, // pageCover: 'https://...', // blockMap: {...} // Notion 内容块数据 // } // } if (!props.post) { return { notFound: true } } return { props, revalidate: 60 } } ```