Skip to content

build your ownlink in a minute for all in one , you can exhibit your blog, projects and cards/ 一分钟内搭建自己的个人链接,展示自己的博客,contacts,项目

License

Notifications You must be signed in to change notification settings

EmbraceAGI/ownlink

Repository files navigation

一分钟内搭建个人link

中文 | 英文

示例

演示: 点击此处查看演示网站

我的网站 点击此处查看我的网站

部署到 Vercel

  1. 在你的Notion中复制这个模板,获取Notion页面ID,如下所示: Notion 模板 ID 为 292e44db817d4cafb370287e59a63b93?pvs=4
  2. 复制这个仓库到你的vps或者github
  3. site.config.ts 中编辑值Notion id 📝,将Notion页面ID更改为你的ID,
  4. 直接导入vercel部署,或者在vps上部署

Next.js 和 Notion 集成的终极入门套件。

构建徽章 Prettier 徽章

简介

通过 react-notion-xNext.jsVercel,这个仓库汇聚了我的个人博客和作品集。

功能

  • 快速设置:只需编辑一个 配置文件 🛠
  • 通过 react-notion-x 深度集成 Notion
  • 技术栈:Next.js、TypeScript、React ⚙
  • 性能和SEO优化 🚀
  • 自动生成社交图像 🖼
  • 干净的URL 🌐
  • 动态目录 📚
  • 深色模式支持 🌒
  • 用于快速搜索的CMD+K / CMD+P 🔍
  • 移动响应式 📱

入门

配置在 site.config.ts 中处理。

  1. 复制或克隆这个仓库 🍴
  2. 编辑 site.config.ts 中的值 📝
  3. 运行 npm install 📦
  4. 用于本地测试的 npm run dev 🖥
  5. 用于推送到 Vercel 的 npm run deploy 🚀

对于 rootNotionPageId,使用你的公共 Notion 页面 URL 的最后一部分。更多说明在仓库中。

URL 方案

该应用程序在开发和生产中采用不同的URL路径,尽管任何开发路径都可以在生产中使用,反之亦然。

  • 开发:URL采用 /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 的形式,是一个附加了Notion ID的slugified标题,对于快速ID引用非常有用。

  • 生产:URL更干净,如 /nextjs-notion-blog,省略了ID。

URL映射在构建期间自动发生。如果更改标题,请确保旧链接仍然可用。Next.js 的 重定向 可以帮助,但我们不提供内置的旧链接检测。

有关详细信息,请参阅 mapPageUrlgetCanonicalPageId

可以使用Notion数据库中的Slug文本属性定义自定义slug。

⚠️ 跨页面重复的slug会触发错误。

图像优化

默认情况下启用预览图像。要禁用,请在 site.config.ts 中将 isPreviewImageSupportEnabled 设置为 false

Redis 缓存

为了更快地加载预览图像,请在 site.config.ts 中将 isRedisEnabled 设置为 true

启用Redis缓存。在 .env 文件中定义 REDIS_HOSTREDIS_PASSWORD

REDIS_HOST='TODO' REDIS_PASSWORD='TODO'

推荐的Redis提供商:Redis Labs(提供免费计划)。

预览图像和Redis缓存是可选的;如果不需要,请在配置中禁用。

自定义样式

用于Notion内容的CSS位于 styles/notion.css,目标是来自 react-notion-xstyles.css 中的类。

对于特定的Notion块:

.notion-block-260baa77f1e1428b97fb14ac99c7c385 { display: none; }

深色主题

<p align="center">
  <img src="Light_Mode_URL" width="45%">
  &nbsp; &nbsp; &nbsp; &nbsp;
  <img src="Dark_Mode_URL" width="45%">
</p>

支持深色模式;点击页脚中的太阳/月亮图标。

About

build your ownlink in a minute for all in one , you can exhibit your blog, projects and cards/ 一分钟内搭建自己的个人链接,展示自己的博客,contacts,项目

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published