使用 nobelium + Notion 制作博客的一些 Tips：如何自定义新的导航连接

使用 Nobelium + Vercel 把你的 Notion 变为博客 - 少数派

博客这个词已经逐渐从大众事业上消失，取而代之的是微博、微信朋友圈这些平台。可是在少数人眼里，博客依然是那个直抒胸臆、发表并记录自己的生活、学习、工作的最好的平台，不需要担心太多的浏览量、点赞量👍，反而更会沉下心写作文章。 因为搭建博客有许多种方式，我现在一直使用的是 Gridea + Github 来搭建我的静态博客。后来看到 @spencerwoo 的 博客 后，也萌发了用 Notion 来作为博客的载体。 今天讲一下如何用 Nobelium + Notion + Vercel 搭建自己的静态博客。简单快速就能部署成功。 注：本篇文章部分网络可能、也许、大概需要在特殊网络环境下访问。 一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为 Notion 和所有创作者设计。 首先大家注册一个 Github 账户，具体过程百度和谷歌会有很多详细步骤，这里就不细讲。然后进入项目的 仓库 点击右上角的 Fork 按钮。 在短暂的等待后你能在自己的 Repositories 里面看到一个 forked from 原仓库的新仓库。 首先去 Notion 的官网创建一个自己的账户。 之后打开这个项目的 Notion 模板 按下右上角的

https://sspai.com/post/66641

如何修改自己博客里 nobelium 的源文件

1. 下载 Github Desktop 和 VS code。

2. 打开 Github Desktop，登陆自己账号后，在编辑里选择 clone a repository，并选择自己的博客项目，同步到本地某个文件夹。

3. 使用 VS code 打开这个文件夹，就可以修改里面所有的文件了。

4. 在 VS code 修改后，到 Github Desktop 点击 commit to main，再点击 push，就会自动部署了。可以在 Vercel 上看下有没有部署成功。

如何自定义新的导航连接

1. 新建一个type为page的页面，即你想要新增的一级页面，并填写好slug。

2. 打开lib文件夹里的lang.js文件。
1. 在每一个语言（en, zh-CN等）的NAV里面增加你想加的导航和变量名字，可以填多个。

en: {
    NAV: {
      INDEX: 'Blog',
      RSS: 'Subscribe',
      SEARCH: 'Search',
      ABOUT: 'About',
      FRIEND: 'Friends',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: 'Prev',
      NEXT: 'Next'
    },
    POST: {
      BACK: 'Back',
      TOP: 'Top'
    }
  },
  'zh-CN': {
    NAV: {
      INDEX: '博客',
      RSS: '订阅',
      SEARCH: '搜索',
      ABOUT: '关于',
      FRIEND: '友链',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: '上一页',
      NEXT: '下一页'
    },
    POST: {
      BACK: '返回',
      TOP: '回到顶部'
    }
  },
  'zh-HK': {
    NAV: {
      INDEX: '網誌',
      RSS: '訂閱',
      SEARCH: '搜尋',
      ABOUT: '關於',
      FRIEND: '友链',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: '上一頁',
      NEXT: '下一頁'
    },
    POST: {
      BACK: '返回',
      TOP: '回到頂端'
    }
  },
  'zh-TW': {
    NAV: {
      INDEX: '部落格',
      RSS: '訂閱',
      SEARCH: '搜尋',
      ABOUT: '關於',
      FRIEND: '友链',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: '上一頁',
      NEXT: '下一頁'
    },
    POST: {
      BACK: '返回',
      TOP: '回到頂端'
    }
  },
  ja: {
    NAV: {
      INDEX: 'ブログ',
      RSS: '購読',
      SEARCH: '検索',
      ABOUT: 'このサイトについて',
      FRIEND: '友達',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: '前ページ',
      NEXT: '次ページ'
    },
    POST: {
      BACK: '戻る',
      TOP: 'トップに戻る'
    }
  },
  es: {
    NAV: {
      INDEX: 'Blog',
      RSS: 'RSS',
      SEARCH: 'Buscar',
      ABOUT: 'Acerca de mí',
      FRIEND: 'friend',
      变量名字(英语): '显示在网页里的导航名字'
    },
    PAGINATION: {
      PREV: 'Anterior',
      NEXT: 'Siguiente'
    },
    POST: {
      BACK: 'Atrás',
      TOP: 'Arriba'
    }
  }

const links = [
    { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
    { id: 1, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout },
    { id: 2, name: locale.NAV.FRIEND, to: '/friend', show: true },
    { id: 3, name: locale.NAV.RSS, to: '/subscribe', show: true },
    { id: 4, name: locale.NAV.SEARCH, to: '/search', show: true },
    { id: 导航顺序, name: locale.NAV.刚刚填的变量, to: '/想要跳转的页面的slug', show: true }
    { id: 导航顺序, name: locale.NAV.刚刚填的变量, to: 'https://ryouissei.com/', show: true }
  ]

如何调整导航透明背景的模糊程度

.sticky-nav {
  position: sticky;
  z-index: 10;
  top: -1px;
  backdrop-filter: blur(12px);
/* 调整12px为你想要的效果 */
  transition: all 0.5s cubic-bezier(0.4, 0, 0, 1);
  border-bottom-color: transparent;
}

如何调整左上角的图标颜色

<svg
 width="24"
 height="24"
 viewBox="0 0 24 24"
 fill="none"
 xmlns="http://www.w3.org/2000/svg"
>
 <rect
  width="24"
  height="24"
  className="fill-current text-black dark:text-white"
 />
 <rect width="24" height="24" fill="url(#paint0_radial)" />
  <defs>
   <radialGradient
    id="paint0_radial"
    cx="0"
    cy="0"
    r="1"
    gradientUnits="userSpaceOnUse"
    gradientTransform="rotate(45) scale(39.598)"
   >
    <stop stopColor="#CFCFCF" stopOpacity="0.6" />
{/* 渐变左上角的颜色。把 #CFCFCF 替换成想要的颜色，把 0.6 替换成想要的透明度 */}
    <stop offset="1" stopColor="#E9E9E9" stopOpacity="0" />
{/* 渐变右下角的颜色。把 #E9E9E9 替换成想要的颜色，把 0 替换成想要的透明度。1是完全不透明，0是完全透明*/}
   </radialGradient>
  </defs>
</svg>