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

date
Jan 25, 2022
slug
nobelium_tips
status
Published
tags
总结
技术
summary
前段时间把博客迁移到了使用 nobelium + Vercel 的 Notion 上面,最大的好处就是可以利用 notion数据库的形式,来实现写完文章后,把状态改为「publish」就可以立刻发布,不需要在像 Hexo 一样安装npm,每次发文章都需要部署。而且 notion 里大部分的格式都可以在博客里使用,比如书签、表格、代码块、图片、视频等,不需要再找一个图床了。本文将告诉你,如何修改自己博客里 nobelium 的源文件,如何自定义新的导航连接,如何调整导航透明背景的模糊程度。
type
Post
前段时间把博客迁移到了使用 nobelium + Vercel 的 Notion 上面,最大的好处就是可以利用 notion数据库的形式,来实现写完文章后,把状态改为「publish」就可以立刻发布,不需要在像 Hexo 一样安装npm,每次发文章都需要部署。而且 notion 里大部分的格式都可以在博客里使用,比如书签、表格、代码块、图片、视频等,不需要再找一个图床了。
具体如何使用 nobelium 可以参考以下文章,就不赘述了。
 

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

  1. 下载 Github Desktop 和 VS code。
  1. 打开 Github Desktop,登陆自己账号后,在编辑里选择 clone a repository,并选择自己的博客项目,同步到本地某个文件夹。
  1. 使用 VS code 打开这个文件夹,就可以修改里面所有的文件了。
  1. 在 VS code 修改后,到 Github Desktop 点击 commit to main,再点击 push,就会自动部署了。可以在 Vercel 上看下有没有部署成功。

如何自定义新的导航连接

觉论的自定义导航
觉论的自定义导航
nobelium 的作者没有在原文里写如何增加导航,但实际上是可以简单做到的。
  1. 新建一个typepage的页面,即你想要新增的一级页面,并填写好slug
  1. 打开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'
    }
  }
3. 打开components文件夹里的Header.js文件,按以下格式新增想要加的导航。链接填写之前天好的/slug,或者任意站外的链接也可以。
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 }
  ]
在每一个[ ]里面,最后一行的结尾不需要逗号,,其余行的结尾都需要逗号,
4.修改完后,在 github 里 push 就好。
 

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

打开styles文件夹里的globals.css,找到以下部分,大概在71行。
blur 调整到 12px 时的效果
blur 调整到 12px 时的效果
.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;
}
 

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

打开components文件夹里的Header.js文件,找到以下svg的部分,原来的图标是有两个渐变的颜色,按说明更改即可。
如果想要改成别的svg,可以尝试在 figma 设计好后导出 svg,复制其中<svg></svg>的部分替换。但是我尝试过之后部署失败了,应该是导出的svg部分语法不兼容。
至于能不能改成 png 图片,应该可以。但我对 js 不太熟,所以如果有知道的朋友可以在下面评论。
<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>
 

© Issei 2017 - 2022