Nobelium 配置记录

✨ Nobelium 是一个基于 Notion 的静态博客生成器，可以轻松将 Notion 页面转换为个人博客。使用 Nobelium 需要进行一些配置，包括填写个人信息、设置主题样式、选择评论插件等。在部署完成后，可以通过 Vercel 自动生成的域名访问博客。除此之外，还可以根据需求修改顶部导航栏和底部页脚的链接信息，以及调整代码块的主题样式和字体。

TOC

之前用 NotionNext 项目来驱动本站点，使用体验还不错，也推荐给一些朋友，但于个人而言总感觉还是花里胡哨了一些，并且每次升级的体验并不是很好，不适合我这种“懒人”。

于是又发现了 Nobelium 这个项目，是中意的极简风格，就决定是你了🫵！

部署

  1. 复制 Notion template 到您自己的 Notion 账户中

    模板属性字段含义

title：文章的标题；
date：文章发布的时间，如果留空默认是文章创建的时间；
slug：文章 URL 尾部的字符，也就是 域名/xxx 中 xxx 的部分，建议使用英文，用 - 代替空格；如果使用中文或者空格、标点，会被 UrlEncode 变成一长串，链接会显得很长且不美观；
summary：文章简介，会显示在主页标题的底部；
tags：文章标签，可以对文章进行分类；
status：文章状态，只有 Published 状态的文章会在博客公开显示；Draft 是草稿状态，Idea 是想法状态，Revise 是改写状态，这三种状态都不会在博客公开显示；
type：Post 会直接显示在主页，Page 只有直接访问 URL 会显示，不会出现在主页文章列表中。

  2. Fork 下面项目到自己的 GitHub 账户中

    https://github.com/craigary/nobelium

  3. 修改 Fork 项目中的 blog.config.js 文件

    const BLOG = {
  title: 'CRAIGARY', // 博客名称（标题）
  author: 'Craig Hart',// 昵称
  email: 'i@craigary.net',// 邮箱
  link: 'https://nobelium.vercel.app',// 博客网址
  description: 'This gonna be an awesome website.',// 博客描述（副标题）
  lang: 'en-US', // 语言，'en-US'为英文, 'zh-CN'为简体中文, 'zh-HK'为香港繁体中文, 'zh-TW'为台湾繁体中文, 'ja-JP'为日文, 'es-ES'为西班牙文]
  timezone: 'Asia/Shanghai', // 时区，可以在 https://en.wikipedia.org/wiki/List_of_tz_database_time_zones 查看有关时区的更多详情
  font: 'sans-serif', // 字体，'sans-serif'为无衬线字体, 'serif'为衬线字体
  lightBackground: '#ffffff', // 浅色背景，使用十六进制的颜色，比如 #fffefc，注意不要忘记 #
  darkBackground: '#18181B', // 深色背景，使用十六进制的颜色，注意不要忘记 #
  path: '', // 除非您想要在一个文件夹中部署，否则请将此文件保留为空
  since: 2021, // 博客起始日期，如果留空则使用现在的年份
  sortByDate: false, // 按日期排序，false 表示否，ture 表示是
  showAbout: true, // 显示关于本站
  showArchive: true, // 显示归档
  autoCollapsedNavBar: false, // 自动折叠导航栏
  ogImageGenerateURL: 'https://og-image-craigary.vercel.app', // 生成 OG 图像链接
  socialLink: 'https://twitter.com/craigaryhart', // 社交平台链接，填写后在文章页面点击您的昵称会跳转到对应的平台
  seo: {
    keywords: ['Blog', 'Website', 'Notion'], // 关键词
    googleSiteVerification: '' // 删除该值或替换为您自己的谷歌网站验证代码
  },
  notionPageId: process.env.NOTION_PAGE_ID, // 不要更改这个！！！
  notionAccessToken: process.env.NOTION_ACCESS_TOKEN, // 如果不希望将数据库公开，则使用
  analytics: {
    provider: '', // 目前提供 Google Analytics 和 Ackee 两种访客统计,如果要使用 Google Analytics 则填写'ga'，如果要使用 Ackee 则填写 'ackee'，如果不使用则留空
    ackeeConfig: {
      tracker: '', // 如果使用 Ackee，则填写，如'https://ackee.craigary.net/tracker.js'
      dataAckeeServer: '', // 如果使用 Ackee，则填写，如'https://ackee.craigary.net'
      domainId: '' // 如果使用 Ackee，则填写，如'0e2257a8-54d4-4847-91a1-0311ea48cc7b'
    },
    gaConfig: {
      measurementId: '' // 如果使用 Google Analytics，则填写，如'G-XXXXXXXXXX'
    }
  },
  comment: {
    // 目前集成的评论插件包括 gitalk, utterances 和 cusdis
    provider: '', // 填写您使用的评论插件，留空则表示不使用
    gitalkConfig: {
      repo: '', // 此处请填写您从 gitalk 获取的信息
      owner: '', // 此处请填写您从 gitalk 获取的信息
      admin: [], // 此处请填写您从 gitalk 获取的信息
      clientID: '', // 此处请填写您从 gitalk 获取的信息
      clientSecret: '', // 此处请填写您从 gitalk 获取的信息
      distractionFreeMode: false
    },
    utterancesConfig: {
      repo: '' // 此处请填写您从 utterances 获取的信息
    },
    cusdisConfig: {
      appId: '', // // 此处请填写您从 cusdis 获取的信息，可以直接去官网注册，免费计划一般也够用🐶
      host: 'https://cusdis.com', //如果您自己部署了 cusdis 服务，则更换为您自己的服务地址 
      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // 如果您自己部署了 cusdis 服务，则更换为您自己的服务地址
    }
  },
  isProd: process.env.VERCEL_ENV === 'production' // 区分开发环境和生成环境，详情见 https://vercel.com/docs/environment-variables#system-environment-variables
}
// export default BLOG
module.exports = BLOG

    1. 打开 Vercel ，连接自己的 GitHub 账户，选择 Fork 并修改完的仓库，同时填写好环境变量

      变量名称：NOTION_PAGE_ID ，变量值从上面复制的 Notion 模板页发布得到，如图所示：

      该链接形如：https://xxxx.notion.site/2edd48315dbb4a16965530fea324589f?v=7cc597625db54b0698636811cffaea40，其中 .site/之后和 ?v= 之前的那一串即为 所需要填写的 PAGE_ID。

    2. 部署完成后，即可以通过 Vercel 自动生成的域名进行访问了，当然也可以绑定自己的域名，毕竟 vercel.app 在大陆早已被污染了。

      A 记录可指向 IP 76.223.126.88，CNAME 记录指向 cname-china.vercel-dns.com

    其他修改

    顶部导航栏

    编辑 components/Header.js，修改顶栏上的链接信息

    const links = [
    { id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true },
    { id: 1, name: locale.NAV.PAGE, to: '/page', show: true },
    { id: 2, name: locale.NAV.RSS, to: '/feed', show: true, external: true },
    { id: 3, name: locale.NAV.SEARCH, to: '/search', show: true }
  ]

    对应显示则需要修改相应的 i18n 国际化配置，例如编辑 assets/i18n/basic/en-US.json

    "NAV": {
    "INDEX": "Home",
    "RSS": "RSS",
    "SEARCH": "Search",
    "ABOUT": "About",
    "PAGE": "Page"
  }

    底部页脚

    编辑 components/Footer.js 

    <div className="flex align-baseline justify-center flex-wrap">
          <p>
            {from === y || !from ? y : `${from} - ${y}`} © {BLOG.author}
          </p>
</div>

    代码块主题

    夜间深色模式下，代码块依然为浅色主题，搜索发现 https://l3on.site/article/nobelium 中有提到过类似情景。为了省事此处直接替换掉 CSS 引用，编辑 pages/_app.js

    https://prismjs.com/
    // 改前
import 'prismjs/themes/prism.css'

// 改后
import 'prismjs/themes/prism-twilight.css'

    字体调整

    字体替换成 霞鹜文楷，此处下载 LXGWBrightGB，存放至 public/fonts 路径下

    wget https://github.com/lxgw/LxgwBright/raw/main/LXGWBrightGB/LXGWBrightGB-Regular.woff2
wget https://github.com/lxgw/LxgwBright/raw/main/LXGWBrightGB/LXGWBrightGB-Italic.woff2
    • 编辑 styles/globals.css 添加字体声明
    @font-face {
  font-family: 'LXGWBrightGB';
  font-weight: normal;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('/fonts/LXGWBrightGB-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'LXGWBrightGB';
  font-weight: normal;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url('/fonts/LXGWBrightGB-Italic.woff2') format('woff2');
}
    • 编辑 consts.js 在其中加入 '"LXGWBrightGB"'
    exports.FONTS_SANS = [
	'"LXGWBrightGB"',
  '"IBM Plex Sans"',
	//...
  'sans-serif'
]
exports.FONTS_SERIF = [
  '"Source Serif"',
	//...
  'serif'
]